Loading...
 
(Cached)

Bootstrap Components Buttons

Standard Buttons

Copy to clipboard
<div class="bs-example"> <p> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button> </p> </div>


Default Primary Success Info Warning Danger Link

Copy to clipboard
{button href="#" _class="btn btn-default" _text="Default"} {button href="#" _class="btn btn-primary" _text="Primary"} {button href="#" _class="btn btn-success" _text="Success"} {button href="#" _class="btn btn-info" _text="Info"} {button href="#" class="btn btn-warning" _text="Warning"} {button href="#" _class="btn btn-danger" _text="Danger"} {button href="#" _class="btn btn-link" _text="Link"}

Tasks

Issues

  • In tiki we don't really use the btn-primary, btn-success, btn-info etc...
  • Shouldn't the button plugin automatically add in the btn classes instead of needing to add them?

Disabled Buttons

Copy to clipboard
<div class="bs-example"> <p> <button type="button" class="btn btn-default disabled">Default</button> <button type="button" class="btn btn-primary disabled">Primary</button> <button type="button" class="btn btn-success disabled">Success</button> <button type="button" class="btn btn-info disabled">Info</button> <button type="button" class="btn btn-warning disabled">Warning</button> <button type="button" class="btn btn-danger disabled">Danger</button> <button type="button" class="btn btn-link disabled">Link</button> </p> </div>


Default Primary Success Info
Warning Danger Link

Copy to clipboard
{button href="#" _class="btn btn-default disabled" _text="Default"} {button href="#" _class="btn btn-primary disabled" _text="Primary"} {button href="#" _class="btn btn-success disabled" _text="Success"} {button href="#" _class="btn btn-info disabled" _text="Info"} {button href="#" _class="btn btn-warning disabled" _text="Warning"} {button href="#" _class="btn btn-danger disabled" _text="Danger"} {button href="#" _class="btn btn-link disabled" _text="Link"}

Tasks

  • Disabled class needs to be used instead of how Tiki does it now

Issues

Copy to clipboard
<div class="bs-example" style="margin-bottom: 15px;"> <div class="btn-toolbar" style="margin: 0;"> <div class="btn-group"> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /btn-toolbar --> </div>

Tasks

Issues

  • We have jquery chosen which is really good for dropdowns. What then are bootstrap drop down buttons good for? More likely it is a good way to group buttons into one (for reasons of usability). This would be an extension of the smarty button plugin which is what the wikiplugin_button calls...

Button size

Tasks

  • Whenever buttons are larger or smaller we should be using these classes in Tiki

Issues

Block Level Button

Copy to clipboard
<div class="bs-example"> <p> <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button> </p> </div>

Tasks

Issues

Button Groups

Copy to clipboard
<div class="bs-example" style="margin-bottom: 15px;"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Right</a> <a href="#" class="btn btn-default">Middle</a> </div> </div> <div class="bs-example" style="margin-bottom: 15px;"> <div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> <button type="button" class="btn btn-default">4</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">5</button> <button type="button" class="btn btn-default">6</button> <button type="button" class="btn btn-default">7</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">8</button> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div> </div> </div> <div class="bs-example"> <div class="btn-group-vertical"> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-default">Button</button> </div> </div>

Tasks

  • Groups of buttons displayed should have enclosing div classes as above.

Issues

Tiki Buttons

Button

Copy to clipboard
{button href="#" _class="btn btn-default" _text="Button"}


Page last modified on Wednesday 20 of November, 2013 15:33:54 GMT-0000

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config