Loading...
 
Skip to main content
Page actions
PDF Print

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

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

Left Right Middle
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
History Source Comments
Similar