$22,903 84%
The content below are loaded
Use and application of CSS classes and HTML to components
Detailed documentation for components, see bootstrap documentation
Examples of how to compile your code block.
Use bootstrap standard features only add class Boo
Class | Description |
---|---|
.well |
Default bootatrap class class="well" |
.well-nice |
Add style to element class="well well-nice" (combine class) |
.well-impressed |
Add style to element class="well well-impressed" (combine class) |
.well-black |
Add style to element class="well well-black" (combine class) |
.well-box |
Use well as block with navigation, menubar, table ... class="well well-box" (combine class) |
.simple-header |
Basic header for well <h3 class="simple-header"> (combine class) |
.header-small |
Basic small header for well <h6 class="simple-header header-small"> (combine class) |
.section-content |
Content for well-box class="section-content" |
.item |
Class for the content if you want more blocks below class="section-content item" (combine class). Do not apply on the last block |
.bg- |
For color background Use the class .bg- see coloring class="well bg-blue-light" (combine class). Possible use also on content. |
All HTML headings, <h1>
through <h6>
are available. Combine with .simple-header
to display simple header to be well
looks like a simple header for div with class .well
<div class="well"> <h4 class="simple-header">h4. Heading 4</h4> <p>looks like a simple header for div with class <code>.well</code> </p> </div>
A little well improve on class .well-nice
and ... it looks better (Boo has a different background :))
<div class="well well-nice"> <h3 class="simple-header">h4. Heading 3</h3> <p>and ... it looks better (Boo has a different background :)) </p> </div>
... or .well-black
we needed a contrasting element
<div class="well well-black"> <h3 class="simple-header">h4. Heading 3</h3> <p>we needed a contrasting element </p> </div>
... or use background staining and extruded type for well .well-impressed .bg-blue-medium
and a color ...
<div class="well well-impressed bg-blue-medium"> <h3 class="simple-header">h4. Heading 3</h3> <p>and a color ... </p> </div>
The content below are loaded
The content below are loaded
<div class="well well-box well-nice"> <div class="navbar"> <div class="navbar-inner"> <h4 class="title">Navbar</h4> <ul class="nav pull-right"> <li><a href="#">Link</a></li> <li class="divider-vertical"></li> <li> ... </li> </ul> <!-- // nav --> </div> </div> <div class="section-content item"> ... </div> <div class="section-content"> ... </div> </div> <!-- // well-box -->
Boo offers three types of styles to display the widget
Class | Description |
---|---|
.widget |
Used construction but is without design - clean block class="widget" |
.widget-simple |
Well is similar in style and design but has more options to apply styles, elements, js. class="widget widget-simple" (combine class) |
.widget-box |
Box has the appearance of a separate head class="widget widget-box" (combine class) |
.widget-table |
Use only wrapped table to .widger-box class="widget widget-box widget-table" (combine class) |
.widget-header |
First block in widget class="widger-header" . Head for where to place the widget title and menubar (.btn-toolbar) |
.widget-content |
Content for the widget. Required if you use tabs class="widget-content tab-content" (combine class) |
.widget-body |
Next content for the widget. |
.widget-footer |
Footer for action bar. |
Use only class .widget
to element.
<div class="widget"> <div class="widget-header"> <h4> ... </h4> </div> <div class="widget-content"> <div class="widget-body"> ... </div> </div> <!-- content --> <div class="widget-footer"> ... </div> </div>
<div class="widget"> <div class="widget-header"> <h4> ... </h4> </div> <div class="widget-content"> <div class="widget-body"> ... </div> <div class="widget-footer"> ... </div> </div> <!-- content --> </div>
Use combine class .widget .widget-simple
to element.
<div class="widget widget-simple"> ... </div>
Use combine class .widget .widget-box
to element.
<div class="widget widget-box"> ... </div>
You may only use content widget without body tag but maybe for tabs is necessary to use packaging points. The .content
are also bound by other classes for correct rendering block.
Class | Description |
---|---|
.pagination |
Default bootatrap class |
.pagination-btn |
Add style as btn class="pagination pagination-btn" (combine class) |
.pagination-boo |
Add style as btn-boo class="pagination pagination-boo" (combine class) |
<div class="pagination"> <ul> <li><a href="#">Prev</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">Next</a></li> </ul> </div> <div class="pagination pagination-btn"> ... </div> <div class="pagination pagination-boo"> ... </div>