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
Drop down buttons
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
Copy to clipboard
{button href="#" _class="btn btn-default" _text="Button"}