Loading...
 
Page actions
Print

Bootstrap Components Buttons

Standard Buttons

<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

Plugin execution pending approval

This plugin was recently added or modified. Until an editor of the site validates the parameters, execution will not be possible.

Danger Link 

{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

<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 

{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

<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

<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

Left Right Middle 
<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 

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

Page last modified on Wednesday 20 of November, 2013 15:33:54 GMT
History Source Comments

Switch Theme

Layout

Latest Changes

No records to display ...more

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