The information on this page is out of date.
Bootstrap Default Navbar
/.navbar >
Copy to clipboard
<div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Active</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <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 class="dropdown-header">Dropdown header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <input type="text" class="form-control col-lg-8" placeholder="Search"> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <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> </li> </ul> </div><!<strike> /.nav-collapse </strike>> </div><!<strike> /.container </strike>> </div><!<strike> /.navbar </strike>>
Bootstrap Inverse Navbar
/.navbar >
Copy to clipboard
<div class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="navbar-collapse collapse navbar-inverse-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Active</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <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 class="dropdown-header">Dropdown header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <input type="text" class="form-control col-lg-8" placeholder="Search"> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <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> </li> </ul> </div><!<strike> /.nav-collapse </strike>> </div><!<strike> /.container </strike>> </div><!<strike> /.navbar </strike>>
Tiki Menu (bootstrap=navbar)
Copy to clipboard
{module module="menu" id="47" type="horiz" nobox="y" bootstrap="navbar"}
Tiki Menu (bootstrap=basic)
Copy to clipboard
{module module="menu" id="47" type="horiz" nobox="y" bootstrap="basic"}
Tasks (TBD):
- The menu system is to be converted to use this navbar - partially done (LPH)
- The search module needs to take the bootstrap classes
- Right now the search functionality is a separate module and is not integrated into the menu itself? Do we integrate it? We can envisage a new navbar module that nests menus and also the search, and also the "Brand" (which is something that does not exist in Tiki).
The original Bootstrap Navbar has a title with link and can nest two menues, a searchbar and maybe arbitrary (smarty plugins?) elements.
Thus it should be rather better to write a new "Module Navbar" instead of recoding the "Module Menu" (not referring to the "smarty plugin/function menu".
Issues
- Responsive functionallity only works until breakpoint - the Tiki menu does not have all the elements which are required for the responsive bootstrap navbar.
- Input placeholder does not work in IE9 and older. see [http://stackoverflow.com/questions/13270219/placeholders-are-not-displaying-in-ie8-for-bootstrap] This affects the search bar default text...
- Right now, it is hardcoded that the menu module to use bootstrap=basic by position (left) and the topbar (bootstrap=navbar). This is just temporary implementation.
- Need better sensible defaulting, if bootstrap is on, it should be everywhere bootstrap.
- The different options for bootstrap variable need to be easily settable somewhere basic or navbar.
- Consider what happens if css=y is set, a lot of sites have this as they used the CSS (suckerfish) menus before- what is the smoothest upgrade? backward support vs replace with bootstrap completely? What about the old menus that have the little folder icon?
- There does not seem to be any default boxing styles for menu items right now, is this correct? Perhaps it is intentional as the style might be defined based on the container of the menu, not the menu itself.
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
/btn-toolbar >
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><!<strike> /btn-group </strike>> <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><!<strike> /btn-group </strike>> <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><!<strike> /btn-group </strike>> <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><!<strike> /btn-group </strike>> <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><!<strike> /btn-group </strike>> </div><!<strike> /btn-toolbar </strike>> </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"}
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
An abbreviation of the word attribute is attr.
Emphasis classes
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Copy to clipboard
<!-- Typography ================================================== --> <div class="bs-docs-section"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1 id="type">Typography</h1> </div> </div> </div> <!<strike> Headings </strike>> <div class="row"> <div class="col-lg-4"> <div class="bs-example bs-example-type"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </div> <div class="bs-example"> <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> </div> </div> <div class="col-lg-4"> <div class="bs-example"> <h2>Example body text</h2> <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p>The following snippet of text is <strong>rendered as bold text</strong>.</p> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> </div> </div> <div class="col-lg-4"> <h2>Emphasis classes</h2> <div class="bs-example"> <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> </div> </div>
Tasks
- What are we going to do with the SPLIT plugin? Rewrite it to use bootstrap columns to be able to specify grid width?
Issues
- Just thinking about the remarks box, or in general other situations, maybe to use "text-muted" "text-primary"
"text-warning" "text-danger" "text-success""text-info"?
Tables
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
Forms
Tasks
- Nested tabs seem not to work. Not sure if it is just not possible or if there is something that we can do to make it work. See tiki-list_object_permissions.php
Issues
Navs
Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
Pills
Breadcrumbs
Alerts and Labels
Warning!
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.
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Labels
Default
Primary
Success
Warning
Danger
Info
Copy to clipboard
<div class="alert alert-dismissable alert-warning"> <button type="button" class="close" data-dismiss="alert">×</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">×</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">×</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">×</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>
Tasks
The different types of Tiki remarks boxes should use Bootstrap approach. (Looks done? To check)
Issues
Tiki Remarks Boxes
Comment
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,
Copy to clipboard
{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}
Confirm
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,
Copy to clipboard
{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}
Error
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,
Copy to clipboard
{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}
Info
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,
Copy to clipboard
{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}
Note
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna,
Copy to clipboard
{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}
Badges
Copy to clipboard
<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>
Tasks
- In some places like the messaging feature it should use this badge. There are few but should be some around Tiki.
Issues
Progress bars
Basic
Contextual alternatives
Striped
Animated
Stacked
Containers
Jumbotron
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
List groups
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
Panels
Basic panel
Panel heading
Panel content
Panel content
Panel primary
Panel content
Panel success
Panel content
Panel warning
Panel content
Panel danger
Panel content
Panel info
Panel content
Wells
Look, I'm in a well!
Look, I'm in a small well!
Look, I'm in a large well!