Loading...
 
Skip to main content

History: Bootstrap Components Indicators

View published page

Source of version: 2 (current)

Copy to clipboard
            {syntax type="markdown"  editor="wysiwyg"} ## Alerts and Labels

{HTML()}
              <div class="alert alert-dismissable alert-warning">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4>Warning!</h4>
                <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
              </div>

        <div class="row">
          <div class="col-lg-4">
            <div class="alert alert-dismissable alert-danger">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
            </div>
          </div>

          <div class="col-lg-4">
            <div class="alert alert-dismissable alert-success">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
            </div>
          </div>

          <div class="col-lg-4">
            <div class="alert alert-dismissable alert-info">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
            </div>
          </div>
       </div>

        <div class="row">
          <div class="col-lg-4">
            <h2>Labels</h2>
            <div class="bs-example" style="margin-bottom: 40px;">
              <span class="label label-default">Default</span>
              <span class="label label-primary">Primary</span>
              <span class="label label-success">Success</span>
              <span class="label label-warning">Warning</span>
              <span class="label label-danger">Danger</span>
              <span class="label label-info">Info</span>
            </div>
          </div>
        </div>
{HTML} 
{CODE()}
              <div class="alert alert-dismissable alert-warning">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4>Warning!</h4>
                <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
              </div>


          <div class="col-lg-4">
            <div class="alert alert-dismissable alert-danger">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
            </div>
          </div>

          <div class="col-lg-4">
            <div class="alert alert-dismissable alert-success">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
            </div>
          </div>

          <div class="col-lg-4">
            <div class="alert alert-dismissable alert-info">
              <button type="button" class="close" data-dismiss="alert">&times;</button>
              <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
            </div>
          </div>

        <div class="row">
          <div class="col-lg-4">
            <h2>Labels</h2>
            <div class="bs-example" style="margin-bottom: 40px;">
              <span class="label label-default">Default</span>
              <span class="label label-primary">Primary</span>
              <span class="label label-success">Success</span>
              <span class="label label-warning">Warning</span>
              <span class="label label-danger">Danger</span>
              <span class="label label-info">Info</span>
            </div>
          </div>
{CODE}

### Tasks

The different types of Tiki remarks boxes should use Bootstrap approach. (Looks done? To check)

### Issues

## Tiki Remarks Boxes

{REMARKSBOX(type="comment" title="Comment")}Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, [vel scelerisque nisl consectetur et](#).{REMARKSBOX}
 
{CODE()}{REMARKSBOX(type="comment" title="Comment")}Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.{REMARKSBOX}{CODE} 
{REMARKSBOX(type="confirm" title="Confirm")}Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, [vel scelerisque nisl consectetur et](#).{REMARKSBOX}
 
{CODE()}{REMARKSBOX(type="confirm" title="Confirm")}Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.{REMARKSBOX}{CODE} 
{REMARKSBOX(type="errors" title="Error")}Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, [vel scelerisque nisl consectetur et](#).{REMARKSBOX}
 
{CODE()}{REMARKSBOX(type="errors" title="Error")}Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.{REMARKSBOX}{CODE} 
{REMARKSBOX(type="information" title="Info")}Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, [vel scelerisque nisl consectetur et](#).{REMARKSBOX}
 
{CODE()}{REMARKSBOX(type="information" title="Info")}Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.{REMARKSBOX}{CODE} 
{REMARKSBOX(type="note" title="Note")}Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, [vel scelerisque nisl consectetur et](#).{REMARKSBOX}
 
{CODE()}{REMARKSBOX(type="note" title="Note")}Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.{REMARKSBOX}{CODE}

## Badges

{HTML()}
            <div class="bs-example">
              <ul class="nav nav-pills">
                <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
                <li><a href="#">Profile <span class="badge"></span></a></li>
                <li><a href="#">Messages <span class="badge">3</span></a></li>
              </ul>
            </div>
{HTML} 
{CODE()}
            <div class="bs-example">
              <ul class="nav nav-pills">
                <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
                <li><a href="#">Profile <span class="badge"></span></a></li>
                <li><a href="#">Messages <span class="badge">3</span></a></li>
              </ul>
            </div>
{CODE}

### Tasks

- In some places like the messaging feature it should use this badge. There are few but should be some around Tiki.

### Issues