2011-10-27 08:11:56 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Bootstrap, from Twitter< / title >
2011-11-08 20:32:28 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2011-10-27 08:11:56 +02:00
< meta name = "description" content = "" >
< meta name = "author" content = "" >
<!-- Le HTML5 shim, for IE6 - 8 support of HTML5 elements -->
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
<!-- Le styles -->
< link href = "../bootstrap.css" rel = "stylesheet" >
< link href = "assets/css/docs.css" rel = "stylesheet" >
< link href = "assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
<!-- Le fav and touch icons -->
< link rel = "shortcut icon" type = "image/x-icon" href = "assets/ico/favicon.ico" >
< link rel = "apple-touch-icon" href = "assets/ico/bootstrap-apple-57x57.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "assets/ico/bootstrap-apple-72x72.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "assets/ico/bootstrap-apple-114x114.png" >
< / head >
< body >
<!-- Navbar
================================================== -->
< div class = "navbar navbar-fixed" >
< div class = "navbar-inner" >
< div class = "container" >
< a class = "brand" href = "./index.html" > Bootstrap< / a >
< ul class = "nav" >
< li > < a href = "./index.html" > Overview< / a > < / li >
2012-01-13 00:29:16 +01:00
< li class = "dropdown" >
< a href = "./scaffolding.html" class = "dropdown-toggle" data-toggle = "dropdown" >
Scaffolding
< b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "./scaffolding.html#grid" > Grid system< / a > < / li >
< li > < a href = "./scaffolding.html#layouts" > Layouts< / a > < / li >
< li > < a href = "./scaffolding.html#responsive" > Responsive design< / a > < / li >
< / ul >
< / li >
< li class = "dropdown" >
< a href = "./base-css.html" class = "dropdown-toggle" data-toggle = "dropdown" >
Base CSS
< b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "./base-css.html#type" > Type< / a > < / li >
< li > < a href = "./base-css.html#tables" > Tables< / a > < / li >
< li > < a href = "./base-css.html#forms" > Forms< / a > < / li >
< li > < a href = "./base-css.html#buttons" > Buttons< / a > < / li >
< li > < a href = "./base-css.html#icons" > Icons by Glyphicons< / a > < / li >
< / ul >
< / li >
< li class = "dropdown active" >
< a href = "./components.html" class = "dropdown-toggle" data-toggle = "dropdown" >
Components
< b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
< li > < a href = "./components.html#buttonGroups" > Button groups< / a > < / li >
< li > < a href = "./components.html#buttonDropdowns" > Split button dropdowns< / a > < / li >
< li > < a href = "./components.html#navs" > Nav, tabs, pills< / a > < / li >
< li > < a href = "./components.html#navbar" > Navbar< / a > < / li >
< li > < a href = "./components.html#breadcrumbs" > Breadcrumbs< / a > < / li >
< li > < a href = "./components.html#pagination" > Pagination< / a > < / li >
< li > < a href = "./components.html#thumbnails" > Thumbnails< / a > < / li >
< li > < a href = "./components.html#alerts" > Alert messages< / a > < / li >
< / ul >
< / li >
< li class = "dropdown" >
< a href = "./javascript.html" class = "dropdown-toggle" data-toggle = "dropdown" >
Javascript plugins
< b class = "caret" > < / b >
< / a >
< ul class = "dropdown-menu" >
2012-01-13 08:57:21 +01:00
< li > < a href = "./javascript.html#transitions" > Transition< / a > < / li >
< li > < a href = "./javascript.html#modals" > Modal< / a > < / li >
< li > < a href = "./javascript.html#dropdowns" > Dropdown< / a > < / li >
2012-01-13 00:29:16 +01:00
< li > < a href = "./javascript.html#scrollspy" > Scrollspy< / a > < / li >
2012-01-13 08:57:21 +01:00
< li > < a href = "./javascript.html#tabs" > Tab< / a > < / li >
< li > < a href = "./javascript.html#tooltips" > Tooltip< / a > < / li >
< li > < a href = "./javascript.html#popovers" > Popover< / a > < / li >
2012-01-13 00:29:16 +01:00
< li > < a href = "./javascript.html#alerts" > Alert< / a > < / li >
< li > < a href = "./javascript.html#buttons" > Button< / a > < / li >
< li > < a href = "./javascript.html#collapse" > Collapse< / a > < / li >
< li > < a href = "./javascript.html#carousel" > Carousel< / a > < / li >
< li > < a href = "./javascript.html#typeahead" > Typeahead< / a > < / li >
< / ul >
< / li >
< li >
< a href = "./less.html" >
Using LESS
< / a >
< / li >
2011-10-27 08:11:56 +02:00
< / ul >
< / div >
< / div >
< / div >
< div class = "container" >
<!-- Masthead
================================================== -->
< header class = "jumbotron subhead" id = "overview" >
< h1 > Components< / h1 >
2011-11-30 08:56:01 +01:00
< p class = "lead" > Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.< / p >
2011-10-27 08:11:56 +02:00
< / header >
2012-01-08 05:40:28 +01:00
2012-01-09 06:48:07 +01:00
<!-- Button Groups
================================================== -->
< section id = "buttonGroups" >
< div class = "page-header" >
< h1 > Button groups < small > Join buttons for more toolbar-like functionality< / small > < / h1 >
< / div >
< div class = "row" >
< div class = "span4" >
< h3 > Button groups< / h3 >
< p > Use button groups to join multiple buttons together as one composite component. Build them with a series of < code > < a> < / code > or < code > < button> < / code > elements.< / p >
< p > You can also combine sets of < code > < div class="btn-group"> < / code > into a < code > < div class="btn-toolbar"> < / code > for more complex projects.< / p >
< div class = "well" style = "padding: 10px; margin-bottom: 9px;" >
< div class = "btn-group" >
< a class = "btn" href = "#" > Left< / a >
< a class = "btn" href = "#" > Middle< / a >
< a class = "btn" href = "#" > Right< / a >
< / div >
< / div >
< div class = "well" style = "padding: 10px;" >
< div class = "btn-toolbar" >
< div class = "btn-group" >
< a class = "btn" href = "#" > 1< / a >
< a class = "btn" href = "#" > 2< / a >
< a class = "btn" href = "#" > 3< / a >
< a class = "btn" href = "#" > 4< / a >
< / div >
< div class = "btn-group" >
< a class = "btn" href = "#" > 5< / a >
< a class = "btn" href = "#" > 6< / a >
< a class = "btn" href = "#" > 7< / a >
< / div >
< div class = "btn-group" >
< a class = "btn" href = "#" > 8< / a >
< / div >
< / div >
< / div >
< / div >
< div class = "span4" >
< h3 > Example markup< / h3 >
< p > Here's how the HTML looks for a standard button group built with anchor tag buttons:< / p >
< pre class = "prettyprint linenums" >
< div class="btn-group">
< a class="btn" href="#"> 1< /a>
< a class="btn" href="#"> 2< /a>
< a class="btn" href="#"> 3< /a>
< /div>
< / pre >
< p > And with a toolbar for multiple groups:< / p >
< pre class = "prettyprint linenums" >
< div class="btn-toolbar">
< div class="btn-group">
...
< /div>
< /div>
< / pre >
< / div >
< div class = "span4" >
< h3 > Checkbox and radio flavors< / h3 >
< p > Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View < a href = "./javascript.html#buttons" > the Javascript docs< / a > for that.< / p >
< p > < a class = "btn js-btn" href = "./javascript.html#buttons" > Get the javascript » < / a > < / p >
< hr >
< h4 class = "muted" > Heads up< / h4 >
< p class = "muted" > CSS for button groups is in a separate file, button-groups.less.< / p >
< / div >
< / div >
< / section >
<!-- Split button dropdowns
================================================== -->
2012-01-13 00:29:16 +01:00
< section id = "buttonDropdowns" >
2012-01-09 06:48:07 +01:00
< div class = "page-header" >
< h1 > Split button dropdowns < small > Built on button groups to provide contextual menus< / small > < / h1 >
< / div >
< div class = "row" >
< div class = "span4" >
< h3 > Split button dropdowns< / h3 >
< p > Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.< / p >
< div class = "well" style = "padding: 10px; margin-bottom: 9px;" >
< div class = "btn-toolbar" style = "margin-bottom: 9px;" >
< div class = "btn-group" >
< a class = "btn" href = "#" > Action< / a >
< a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" > < span class = "caret" > < / span > < / 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 >
2012-01-12 06:42:55 +01:00
< / div > <!-- /btn - group -->
2012-01-09 06:48:07 +01:00
< div class = "btn-group" >
< a class = "btn primary" href = "#" > Action< / a >
< a class = "btn primary dropdown-toggle" data-toggle = "dropdown" href = "#" > < span class = "caret" > < / span > < / 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 >
2012-01-12 06:42:55 +01:00
< / div > <!-- /btn - group -->
2012-01-09 06:48:07 +01:00
< div class = "btn-group" >
< a class = "btn danger" href = "#" > Danger< / a >
< a class = "btn danger dropdown-toggle" data-toggle = "dropdown" href = "#" > < span class = "caret" > < / span > < / 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 >
< / div > <!-- /btn - group -->
< / div >
< div class = "btn-toolbar" >
< div class = "btn-group" >
< a class = "btn success" href = "#" > Success< / a >
< a class = "btn success dropdown-toggle" data-toggle = "dropdown" href = "#" > < span class = "caret" > < / span > < / 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 >
< / div > <!-- /btn - group -->
< div class = "btn-group" >
< a class = "btn info" href = "#" > Info< / a >
< a class = "btn info dropdown-toggle" data-toggle = "dropdown" href = "#" > < span class = "caret" > < / span > < / 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 >
< / div > <!-- /btn - group -->
< / div >
< / div > <!-- /well -->
< / div >
< div class = "span8" >
< h3 > Example markup< / h3 >
< p > Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.< / p >
< pre class = "prettyprint linenums" >
< div class="btn-group">
< a class="btn" href="#"> Action< /a>
< a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
< span class="caret"> < /span>
< /a>
< ul class="dropdown-menu">
< !-- dropdown menu links -->
< /ul>
< /div>
< / pre >
< / div >
< / div >
< / section >
2012-01-12 06:42:55 +01:00
2012-01-09 06:48:07 +01:00
2012-01-08 05:40:28 +01:00
<!-- Nav, Tabs, & Pills
2011-10-27 08:11:56 +02:00
================================================== -->
2012-01-09 06:48:07 +01:00
< section id = "navs" >
2011-10-27 08:11:56 +02:00
< div class = "page-header" >
2012-01-08 05:40:28 +01:00
< h1 > Nav, tabs, and pills < small > Highly customizable list-style navigation< / small > < / h1 >
2011-10-27 08:11:56 +02:00
< / div >
2011-12-20 07:58:56 +01:00
2012-01-08 05:40:28 +01:00
< h2 > Lightweight defaults < small > Same markup, different classes< / small > < / h2 >
2011-10-27 08:11:56 +02:00
< div class = "row" >
2012-01-08 05:40:28 +01:00
< div class = "span4" >
< h3 > Powerful base class< / h3 >
< p > All nav components here— tabs, pills, and lists— < strong > share the same base markup and styles< / strong > through the < code > .nav< / code > class.< / p >
< h3 > Why tabs and pills< / h3 >
< p > Tabs and pills in Bootstrap are built on a < code > < ul> < / code > with the same core HTML, a list of links. Swap between tabs or pills with only a class.< / p >
< p > Both options are great for sub-sections of content or navigating between pages of related content.< / p >
< / div >
< div class = "span4" >
< h3 > Basic tabs< / h3 >
< p > Take a regular < code > < ul> < / code > of links and add < code > .tabs< / code > :< / p >
< ul class = "nav tabs" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Profile< / a > < / li >
< li > < a href = "#" > Messages< / a > < / li >
2011-12-20 07:58:56 +01:00
< / ul >
2012-01-08 05:40:28 +01:00
< pre class = "prettyprint linenums" >
< ul class="nav tabs">
< li class="active">
< a href="#"> Home< /a>
< /li>
< li> < a href="#"> ...< /a> < /li>
< li> < a href="#"> ...< /a> < /li>
< /ul>
< / pre >
2011-12-20 07:58:56 +01:00
< / div >
2012-01-08 05:40:28 +01:00
< div class = "span4" >
< h3 > Basic pills< / h3 >
< p > Take that same HTML, but use < code > .pills< / code > instead:< / p >
< ul class = "nav pills" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Profile< / a > < / li >
< li > < a href = "#" > Messages< / a > < / li >
2011-12-20 07:58:56 +01:00
< / ul >
2012-01-08 05:40:28 +01:00
< pre class = "prettyprint linenums" >
< ul class="nav pills">
< li class="active">
< a href="#"> Home< /a>
< /li>
< li> < a href="#"> ...< /a> < /li>
< li> < a href="#"> ...< /a> < /li>
< /ul>
< / pre >
2011-12-20 07:58:56 +01:00
< / div >
< / div >
2012-01-08 05:40:28 +01:00
< h2 > Stackable < small > Make tabs or pills vertical< / small > < / h2 >
2011-12-20 07:58:56 +01:00
< div class = "row" >
< div class = "span4" >
2012-01-08 05:40:28 +01:00
< h3 > How to stack 'em< / h3 >
< p > As tabs and pills are horizontal by default, just add a second class, < code > .stacked< / code > , to make them appear vertically stacked.< / p >
2011-12-20 07:58:56 +01:00
< / div >
< div class = "span4" >
2012-01-08 05:40:28 +01:00
< h3 > Stacked tabs< / h3 >
< ul class = "nav tabs stacked" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Profile< / a > < / li >
< li > < a href = "#" > Messages< / a > < / li >
< / ul >
2011-12-20 07:58:56 +01:00
< pre class = "prettyprint linenums" >
2012-01-08 05:40:28 +01:00
< ul class="nav tabs stacked">
2011-12-20 07:58:56 +01:00
...
< /ul>
< / pre >
2012-01-08 05:40:28 +01:00
< / div >
< div class = "span4" >
< h3 > Stacked pills< / h3 >
< ul class = "nav pills stacked" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Profile< / a > < / li >
< li > < a href = "#" > Messages< / a > < / li >
< / ul >
2011-12-20 07:58:56 +01:00
< pre class = "prettyprint linenums" >
2012-01-08 05:40:28 +01:00
< ul class="nav pills stacked">
2011-12-20 07:58:56 +01:00
...
< /ul>
< / pre >
< / div >
2012-01-05 10:34:14 +01:00
< / div >
2012-01-08 05:40:28 +01:00
< h2 > Dropdowns < small > For advanced nav components< / small > < / h2 >
2012-01-05 19:01:42 +01:00
< div class = "row" >
2012-01-08 05:40:28 +01:00
< div class = "span4" >
< h3 > Rich menus made easy< / h3 >
< p > Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.< / p >
< p > Head over to the Javascript page to read the docs on < a href = "./javascript.html#tabs" > initializing dropdowns< / a > in Bootstrap.< / p >
2012-01-07 08:59:22 +01:00
< / div >
2012-01-08 05:40:28 +01:00
< div class = "span4" >
< h3 > Tabs with dropdowns< / h3 >
< ul class = "nav tabs" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Profile< / a > < / li >
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > 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 >
2012-01-07 08:59:22 +01:00
< pre class = "prettyprint linenums" >
2012-01-08 05:40:28 +01:00
< ul class="nav tabs">
< li class="dropdown">
2012-01-12 06:42:55 +01:00
< a class="dropdown-toggle"
2012-01-08 05:40:28 +01:00
data-toggle="dropdown"
href="#">
Dropdown
< b class="caret"> < /b>
< /a>
< ul class="dropdown-menu">
< !-- links -->
< /ul>
< /li>
< /ul>
2012-01-07 08:59:22 +01:00
< / pre >
2012-01-08 05:40:28 +01:00
< / div >
< div class = "span4" >
< h3 > Pills with dropdowns< / h3 >
< ul class = "nav pills" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Profile< / a > < / li >
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > 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 >
2012-01-07 08:59:22 +01:00
< pre class = "prettyprint linenums" >
2012-01-08 05:40:28 +01:00
< ul class="nav pills">
< li class="dropdown">
2012-01-12 06:42:55 +01:00
< a class="dropdown-toggle"
2012-01-08 05:40:28 +01:00
data-toggle="dropdown"
href="#">
Dropdown
< b class="caret"> < /b>
< /a>
< ul class="dropdown-menu">
< !-- links -->
< /ul>
< /li>
< /ul>
2012-01-07 08:59:22 +01:00
< / pre >
< / div >
2012-01-05 10:34:14 +01:00
< / div >
2012-01-08 05:40:28 +01:00
< h2 > Nav lists < small > Build simple stacked navs, great for sidebars< / small > < / h2 >
< div class = "row" >
< div class = "span4" >
< h3 > Application-style navigation< / h3 >
< p > Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.< / p >
< p > Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.< / p >
2012-01-08 12:18:48 +01:00
< h4 > With icons< / h4 >
< p > Nav lists are also easy to equip with icons. Add the proper < code > < i> < / code > tag with class and you're set.< / p >
2012-01-08 05:40:28 +01:00
< / div >
< div class = "span4" >
2012-01-08 12:18:48 +01:00
< h3 > Example nav list< / h3 >
< p > Take a list of links and add < code > class="nav list"< / code > :< / p >
2012-01-08 05:40:28 +01:00
< div class = "well" style = "padding: 8px 0;" >
< ul class = "nav list" >
< li class = "nav-header" > List header< / li >
2011-10-27 08:11:56 +02:00
< li class = "active" > < a href = "#" > Home< / a > < / li >
2012-01-08 05:40:28 +01:00
< li > < a href = "#" > Library< / a > < / li >
< li > < a href = "#" > Applications< / a > < / li >
< li class = "nav-header" > Another list header< / li >
< li > < a href = "#" > Profile< / a > < / li >
< li > < a href = "#" > Settings< / a > < / li >
< li > < a href = "#" > Help< / a > < / li >
2011-10-27 08:11:56 +02:00
< / ul >
2012-01-08 05:40:28 +01:00
< / div > <!-- /well -->
2012-01-07 08:59:22 +01:00
< pre class = "prettyprint linenums" >
2012-01-08 05:40:28 +01:00
< ul class="nav list">
< li class="nav-header">
List header
< /li>
2012-01-07 08:59:22 +01:00
< li class="active">
2012-01-08 05:40:28 +01:00
< a href="#"> Home< /a>
2012-01-07 08:59:22 +01:00
< /li>
2012-01-08 05:40:28 +01:00
< li>
< a href="#"> Library< /a>
2012-01-07 08:59:22 +01:00
< /li>
2012-01-08 05:40:28 +01:00
...
2012-01-07 08:59:22 +01:00
< /ul>
2012-01-08 12:18:48 +01:00
< / pre >
< / div >
< div class = "span4" >
< h3 > Example with icons< / h3 >
< p > Same example, but with < code > < i> < / code > tags for icons.< / p >
< div class = "well" style = "padding: 8px 0;" >
< ul class = "nav list" >
< li class = "nav-header" > List header< / li >
< li class = "active" > < a href = "#" > < i class = "home" > < / i > Home< / a > < / li >
< li > < a href = "#" > < i class = "book" > < / i > Library< / a > < / li >
< li > < a href = "#" > < i class = "pencil" > < / i > Applications< / a > < / li >
< li class = "nav-header" > Another list header< / li >
< li > < a href = "#" > < i class = "user" > < / i > Profile< / a > < / li >
< li > < a href = "#" > < i class = "cog" > < / i > Settings< / a > < / li >
< li > < a href = "#" > < i class = "flag" > < / i > Help< / a > < / li >
< / ul >
< / div > <!-- /well -->
< pre class = "prettyprint linenums" >
< ul class="nav list">
...
< li>
< a href="#">
< i class="book"> < /i>
Library
< /a>
< /li>
...
< /ul>
2012-01-07 08:59:22 +01:00
< / pre >
2011-10-27 08:11:56 +02:00
< / div >
< / div >
2012-01-13 09:03:23 +01:00
2011-12-21 23:00:50 +01:00
2012-01-08 07:06:44 +01:00
< h2 > Tabbable nav < small > Bring tabs to life via javascript< / small > < / h2 >
2012-01-08 06:18:14 +01:00
< div class = "row" >
< div class = "span4" >
< h3 > What's included< / h3 >
2012-01-08 12:11:51 +01:00
< p > Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.< / p >
2012-01-08 06:18:14 +01:00
< p > Changing between them is easy and only requires changing very little markup.< / p >
< / div >
2012-01-08 12:11:51 +01:00
< div class = "span4" >
2012-01-08 07:06:44 +01:00
< h3 > Tabbable example< / h3 >
< p > To make tabs tabbable, wrap the < code > .tabs< / code > in another div with class < code > .tabbable< / code > .< / p >
2012-01-08 12:11:51 +01:00
< div class = "tabbable" style = "margin-bottom: 9px;" >
2012-01-08 07:06:44 +01:00
< ul class = "nav tabs" >
2011-12-22 03:42:43 +01:00
< li class = "active" > < a href = "#1" data-toggle = "tab" > Section 1< / a > < / li >
< li > < a href = "#2" data-toggle = "tab" > Section 2< / a > < / li >
< li > < a href = "#3" data-toggle = "tab" > Section 3< / a > < / li >
2011-10-27 08:11:56 +02:00
< / ul >
< div class = "tab-content" >
< div class = "tab-pane active" id = "1" >
2012-01-08 07:06:44 +01:00
< p > I'm in Section 1.< / p >
2011-10-27 08:11:56 +02:00
< / div >
< div class = "tab-pane" id = "2" >
2012-01-08 07:06:44 +01:00
< p > Howdy, I'm in Section 2.< / p >
2011-10-27 08:11:56 +02:00
< / div >
< div class = "tab-pane" id = "3" >
2012-01-08 07:06:44 +01:00
< p > What up girl, this is Section 3.< / p >
2011-10-27 08:11:56 +02:00
< / div >
< / div >
2012-01-08 07:06:44 +01:00
< / div > <!-- /tabbable -->
2012-01-08 12:11:51 +01:00
< / div >
< div class = "span4" >
< h3 > Custom jQuery plugin< / h3 >
< p > All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.< / p >
< p > < a class = "btn" href = "./javascript.html/#tabs" > Get the javascript → < / a > < / p >
< / div >
< / div >
2012-01-12 06:42:55 +01:00
2012-01-08 12:11:51 +01:00
< h3 > Straightforward markup< / h3 >
< p > Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.< / p >
2012-01-08 07:06:44 +01:00
< pre class = "prettyprint linenums" >
< div class="tabbable">
< ul class="nav tabs">
< li class="active"> < a href="#1" data-toggle="tab"> Section 1< /a> < /li>
< li> < a href="#2" data-toggle="tab"> Section 2< /a> < /li>
< /ul>
< div class="tab-content">
< div class="tab-pane active" id="1">
< p> I'm in Section 1.< /p>
< /div>
< div class="tab-pane" id="2">
< p> Howdy, I'm in Section 2.< /p>
< /div>
< /div>
< /div>
< / pre >
2011-10-27 08:11:56 +02:00
2012-01-08 07:06:44 +01:00
< h3 > Tabbable in any direction< / h3 >
< div class = "row" >
<!--
< div class = "span4" >
< p > Swap the order of your HTML— placing < code > .tabs< / code > after < code > .tab-content< / code > — for tabs on the bottom.< / p >
< / div >
2012-01-12 06:42:55 +01:00
-->
2012-01-08 07:06:44 +01:00
< div class = "span4" >
< h4 > Tabs on the bottom< / h4 >
< p > Flip the order of the HTML and add a class to put tabs on the bottom.< / p >
< div class = "tabbable tabs-below" >
< div class = "tab-content" >
< div class = "tab-pane active" id = "A" >
< p > I'm in Section A.< / p >
2011-10-27 08:11:56 +02:00
< / div >
2012-01-08 07:06:44 +01:00
< div class = "tab-pane" id = "B" >
< p > Howdy, I'm in Section B.< / p >
< / div >
< div class = "tab-pane" id = "C" >
< p > What up girl, this is Section C.< / p >
2011-10-27 08:11:56 +02:00
< / div >
< / div >
2012-01-08 07:06:44 +01:00
< ul class = "nav tabs" >
< li class = "active" > < a href = "#A" data-toggle = "tab" > Section 1< / a > < / li >
< li > < a href = "#B" data-toggle = "tab" > Section 2< / a > < / li >
< li > < a href = "#C" data-toggle = "tab" > Section 3< / a > < / li >
< / ul >
< / div > <!-- /tabbable -->
2012-01-08 08:21:40 +01:00
< pre class = "prettyprint linenums" style = "margin-top: 11px;" >
< div class="tabbable tabs-bottom">
< ul class="nav tabs">
...
< /ul>
< div class="tab-content">
...
< /div>
< /div>
< / pre >
2012-01-08 07:06:44 +01:00
< / div >
< div class = "span4" >
< h4 > Tabs on the left< / h4 >
< p > Swap the class to put tabs on the left.< / p >
< div class = "tabbable tabs-left" >
< ul class = "nav tabs" >
< li class = "active" > < a href = "#lA" data-toggle = "tab" > Section 1< / a > < / li >
< li > < a href = "#lB" data-toggle = "tab" > Section 2< / a > < / li >
< li > < a href = "#lC" data-toggle = "tab" > Section 3< / a > < / li >
< / ul >
2011-10-27 08:11:56 +02:00
< div class = "tab-content" >
2012-01-08 07:06:44 +01:00
< div class = "tab-pane active" id = "lA" >
< p > I'm in Section A.< / p >
2011-10-27 08:11:56 +02:00
< / div >
2012-01-08 07:06:44 +01:00
< div class = "tab-pane" id = "lB" >
< p > Howdy, I'm in Section B.< / p >
2011-10-27 08:11:56 +02:00
< / div >
2012-01-08 07:06:44 +01:00
< div class = "tab-pane" id = "lC" >
< p > What up girl, this is Section C.< / p >
2011-10-27 08:11:56 +02:00
< / div >
< / div >
2012-01-08 07:06:44 +01:00
< / div > <!-- /tabbable -->
2012-01-08 08:21:40 +01:00
< pre class = "prettyprint linenums" >
< div class="tabbable tabs-left">
< ul class="nav tabs">
...
< /ul>
< div class="tab-content">
...
< /div>
< /div>
< / pre >
2012-01-08 07:06:44 +01:00
< / div >
< div class = "span4" >
< h4 > Tabs on the right< / h4 >
< p > Swap the class to put tabs on the right.< / p >
< div class = "tabbable tabs-right" >
< ul class = "nav tabs" >
< li class = "active" > < a href = "#rA" data-toggle = "tab" > Section 1< / a > < / li >
< li > < a href = "#rB" data-toggle = "tab" > Section 2< / a > < / li >
< li > < a href = "#rC" data-toggle = "tab" > Section 3< / a > < / li >
2011-10-27 08:11:56 +02:00
< / ul >
2012-01-08 07:06:44 +01:00
< div class = "tab-content" >
< div class = "tab-pane active" id = "rA" >
< p > I'm in Section A.< / p >
< / div >
< div class = "tab-pane" id = "rB" >
< p > Howdy, I'm in Section B.< / p >
< / div >
< div class = "tab-pane" id = "rC" >
< p > What up girl, this is Section C.< / p >
< / div >
< / div >
< / div > <!-- /tabbable -->
2012-01-08 08:21:40 +01:00
< pre class = "prettyprint linenums" >
< div class="tabbable tabs-right">
< ul class="nav tabs">
...
< /ul>
< div class="tab-content">
...
< /div>
< /div>
< / pre >
2012-01-08 07:06:44 +01:00
< / div >
< / div >
2011-10-27 08:11:56 +02:00
2012-01-08 05:40:28 +01:00
< / section >
<!-- Navbar
================================================== -->
< section id = "navbar" >
< div class = "page-header" >
< h1 > Navbar< / h1 >
< / div >
< h2 > Static navbar example< / h2 >
< p > An example of a static (not fixed to the top) navbar with project name, navigation, and search form.< / p >
< div class = "navbar navbar-static" >
< div class = "navbar-inner" >
< div class = "container" style = "width: auto;" >
< a class = "brand" href = "#" > Project name< / a >
< ul class = "nav" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Link< / a > < / li >
< li > < a href = "#" > Link< / a > < / li >
< li > < a href = "#" > Link< / a > < / li >
< li class = "dropdown" >
2012-01-08 06:09:02 +01:00
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown < b class = "caret" > < / b > < / a >
2012-01-08 05:40:28 +01:00
< ul class = "dropdown-menu" >
2012-01-08 06:09:02 +01:00
< li > < a href = "#" > Action< / a > < / li >
< li > < a href = "#" > Another action< / a > < / li >
2012-01-08 05:40:28 +01:00
< li > < a href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
2012-01-08 06:09:02 +01:00
< li > < a href = "#" > Separated link< / a > < / li >
2012-01-08 05:40:28 +01:00
< / ul >
< / li >
< / ul >
< form class = "navbar-search pull-left" action = "" >
< input type = "text" class = "search-query span2" placeholder = "Search" >
< / form >
2012-01-08 06:09:02 +01:00
< ul class = "nav pull-right" >
< li > < a href = "#" > Link< / a > < / li >
2012-01-08 05:40:28 +01:00
< li class = "vertical-divider" > < / li >
< li class = "dropdown" >
2012-01-08 06:09:02 +01:00
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown < b class = "caret" > < / b > < / a >
2012-01-08 05:40:28 +01:00
< ul class = "dropdown-menu" >
2012-01-08 06:09:02 +01:00
< li > < a href = "#" > Action< / a > < / li >
< li > < a href = "#" > Another action< / a > < / li >
2012-01-08 05:40:28 +01:00
< li > < a href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
2012-01-08 06:09:02 +01:00
< li > < a href = "#" > Separated link< / a > < / li >
2012-01-08 05:40:28 +01:00
< / ul >
< / li >
< / ul >
< / div >
< / div > <!-- /navbar - inner -->
< / div > <!-- /navbar -->
< div class = "row" >
< div class = "span8" >
< h3 > Navbar scaffolding< / h3 >
< p > The navbar requires only a few divs to structure it well for static or fixed display.< / p >
< pre class = "prettyprint linenums" >
< div class="navbar navbar-static">
< div class="navbar-inner">
2012-01-08 22:22:20 +01:00
< div class="container">
2012-01-08 05:40:28 +01:00
...
< /div>
< /div>
< /div>
< / pre >
2012-01-09 00:02:13 +01:00
< p > To make the navbar fixed, swap the < code > .navbar-static< / code > class for < code > .navbar-fixed< / code > . In your CSS, you will also need to account for the overlap it causes by adding < code > padding-top: 40px;< / code > to your < code > < body> < / code > .< / p >
2012-01-08 05:40:28 +01:00
< pre class = "prettyprint linenums" >
< div class="navbar navbar-fixed">
...
< /div>
< / pre >
< h3 > Brand name< / h3 >
< p > A simple link to show your brand or project name only requires an anchor tag.< / p >
< pre class = "prettyprint linenums" >
< a class="brand" href="#">
Project name
< /a>
< / pre >
< h3 > Search form< / h3 >
< p > Search forms receive custom styles in the navbar with the < code > .navbar-search< / code > class. Include < code > .pull-left< / code > or < code > .pull-right< / code > on the < code > form< / code > to align it.< / p >
< pre class = "prettyprint linenums" >
< form class="navbar-search">
< input type="text" class="search-query pull-left" placeholder="Search">
< /form>
< / pre >
< / div >
< div class = "span4" >
< h3 > Nav links< / h3 >
< p > Nav items are simple to add via unordered lists.< / p >
2011-10-27 08:11:56 +02:00
< pre class = "prettyprint linenums" >
2012-01-08 05:40:28 +01:00
< ul class="nav">
< li class="active">
< a href="#">Home< /a>
< /li>
< li> < a href="#"> Link< /a> < /li>
< li> < a href="#"> Link< /a> < /li>
< /ul>
< / pre >
2012-01-08 06:09:02 +01:00
< h3 > Adding dropdowns< / h3 >
< p > Adding dropdowns to the nav is super simple, but does require the use of < a href = "./javascript.html/#dropdown" > our javascript plugin< / a > .< / p >
2012-01-08 05:40:28 +01:00
< pre class = "prettyprint linenums" >
< ul class="nav">
< li class="dropdown">
< a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
Account
2012-01-08 06:09:02 +01:00
< b class="caret"> < /b>
2012-01-08 05:40:28 +01:00
< /a>
< ul class="dropdown-menu">
...
< /ul>
< /li>
2011-10-27 08:11:56 +02:00
< /ul>
< / pre >
2012-01-08 06:09:02 +01:00
< p > < a class = "btn" href = "./javascript.html/#dropdown" > Get the javascript → < / a > < / p >
2011-10-27 08:11:56 +02:00
< / div >
2012-01-08 05:40:28 +01:00
< / div >
2011-10-27 08:11:56 +02:00
2011-12-21 23:00:50 +01:00
< / section >
<!-- Breadcrumbs
================================================== -->
< section id = "breadcrumbs" >
< div class = "page-header" >
< h1 > Breadcrumbs < small > < / small > < / h1 >
< / div >
2011-10-27 08:11:56 +02:00
< div class = "row" >
2012-01-07 08:59:22 +01:00
< div class = "span6" >
< h3 > Why use them< / h3 >
< p > Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.< / p >
< h3 > Examples< / h3 >
< p > A single example shown as it might be displayed across multiple pages.< / p >
2011-10-27 08:11:56 +02:00
< ul class = "breadcrumb" >
< li class = "active" > Home< / li >
< / ul >
< ul class = "breadcrumb" >
< li > < a href = "#" > Home< / a > < span class = "divider" > /< / span > < / li >
2012-01-07 08:59:22 +01:00
< li class = "active" > Library< / li >
2011-10-27 08:11:56 +02:00
< / ul >
< ul class = "breadcrumb" >
< li > < a href = "#" > Home< / a > < span class = "divider" > /< / span > < / li >
2012-01-07 08:59:22 +01:00
< li > < a href = "#" > Library< / a > < span class = "divider" > /< / span > < / li >
< li class = "active" > Data< / li >
2011-10-27 08:11:56 +02:00
< / ul >
2012-01-07 08:59:22 +01:00
< / div >
< div class = "span6" >
< h3 > Markup< / h3 >
< p > HTML is your standard unordered list with links.< / p >
2011-10-27 08:11:56 +02:00
< pre class = "prettyprint linenums" >
< ul class="breadcrumb">
2012-01-07 08:59:22 +01:00
< li>
< a href="#"> Home< /a> < span class="divider"> /< /span>
< /li>
< li>
< a href="#"> Library< /a> < span class="divider"> /< /span>
< /li>
< li class="active">
< a href="#"> Data< /a>
< /li>
2011-10-27 08:11:56 +02:00
< /ul>
< / pre >
< / div >
< / div >
2011-12-21 23:00:50 +01:00
< / section >
<!-- Pagination
================================================== -->
< section id = "carousel" >
< div class = "page-header" >
< h1 > Pagination < small > < / small > < / h1 >
< / div >
2011-10-27 08:11:56 +02:00
< div class = "row" >
< div class = "span3" >
< h2 > Pagination< / h2 >
< p > Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.< / p >
< / div >
< div class = "span9" >
< div class = "pagination" >
< ul >
< li class = "prev disabled" > < a href = "#" > ← Previous< / 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 class = "next" > < a href = "#" > Next → < / a > < / li >
< / ul >
< / div >
< div class = "pagination" >
< ul >
< li class = "prev" > < a href = "#" > ← < / a > < / li >
< li class = "active" > < a href = "#" > 10< / a > < / li >
< li > < a href = "#" > 11< / a > < / li >
< li class = "disabled" > < a href = "#" > …< / a > < / li >
< li > < a href = "#" > 20< / a > < / li >
< li > < a href = "#" > 21< / a > < / li >
< li class = "next" > < a href = "#" > → < / a > < / li >
< / ul >
< / div >
< div class = "pagination" >
< ul >
< li class = "prev" > < a href = "#" > ← < / a > < / li >
< li > < a href = "#" > 10< / a > < / li >
< li > < a href = "#" > 11< / a > < / li >
< li class = "active" > < a href = "#" > 12< / a > < / li >
< li > < a href = "#" > 13< / a > < / li >
< li > < a href = "#" > 14< / a > < / li >
< li class = "next" > < a href = "#" > → < / a > < / li >
< / ul >
< / div >
< pre class = "prettyprint linenums" >
< div class="pagination">
< ul>
< li class="prev disabled"> < a href="#"> & larr; Previous< /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="#"> 5< /a> < /li>
< li class="next"> < a href="#"> Next & rarr;< /a> < /li>
< /ul>
< /div>
< / pre >
< / div >
< / div > <!-- /row -->
< / section >
2012-01-08 05:40:28 +01:00
<!-- Media
================================================== -->
< section id = "media" >
< div class = "page-header" >
< h1 > Thumbnails < small > Grids of images, videos, text, and more< / small > < / h1 >
< / div >
< div class = "row" >
< div class = "span6" >
< h2 > Default thumbnails< / h2 >
< p > By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.< / p >
< ul class = "thumbnails" >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/210x150" alt = "" >
< / a >
< / li >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/210x150" alt = "" >
< / a >
< / li >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/210x150" alt = "" >
< / a >
< / li >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/210x150" alt = "" >
< / a >
< / li >
< / ul >
< / div >
< div class = "span6" >
< h2 > Highly customizable< / h2 >
< p > With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.< / p >
< ul class = "thumbnails" >
< li class = "span3" >
< div class = "thumbnail" >
< img src = "http://placehold.it/210x150" alt = "" >
< div class = "caption" >
< h5 > Thumbnail label< / h5 >
< p > Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.< / p >
< p > < a href = "#" class = "btn primary" > Action< / a > < a href = "#" class = "btn" > Action< / a > < / p >
< / div >
< / div >
< / li >
< li class = "span3" >
< div class = "thumbnail" >
< img src = "http://placehold.it/210x150" alt = "" >
< div class = "caption" >
< h5 > Thumbnail label< / h5 >
< p > Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.< / p >
< p > < a href = "#" class = "btn primary" > Action< / a > < a href = "#" class = "btn" > Action< / a > < / p >
< / div >
< / div >
< / li >
< / ul >
< / div >
< / div >
< div class = "row" >
< div class = "span4" >
< h3 > Why use thumbnails< / h3 >
< p > Thumbnails (previously < code > .media-grid< / code > up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.< / p >
< / div >
< div class = "span4" >
< h3 > Simple, flexible markup< / h3 >
< p > Thumbnail markup is simple— a < code > ul< / code > with any number of < code > li< / code > elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.< / p >
< / div >
< div class = "span4" >
< h3 > Uses grid column sizes< / h3 >
< p > Lastly, the thumbnails component uses existing grid system classes— like < code > .span2< / code > or < code > .span3< / code > — for control of thumbnail dimensions.< / p >
< / div >
< / div >
< div class = "row" >
< div class = "span6" >
< h2 > The markup< / h2 >
< p > As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup < strong > for linked images< / strong > :< / p >
< pre class = "prettyprint linenums" >
< ul class="thumbnails">
< li class="span3">
< a href="#" class="thumbnail">
< img src="http://placehold.it/210x150" alt="">
< /a>
< /li>
...
< /ul>
< / pre >
< p > For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the < code > < a> < / code > for a < code > < div> < / code > like so:< / p >
< pre class = "prettyprint linenums" >
< ul class="thumbnails">
< li class="span3">
< div class="thumbnail">
< img src="http://placehold.it/210x150" alt="">
< h5> Thumbnail label< /h5>
< p> Thumbnail caption right here...< /p>
< /div>
< /li>
...
< /ul>
< / pre >
< / div >
< div class = "span6" >
< h2 > More examples< / h2 >
< p > Explore all your options with the various grid classes available to you. You can also mix and match different sizes.< / p >
< ul class = "thumbnails" >
< li class = "span4" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/290x230" alt = "" >
< / a >
< / li >
< li class = "span2" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/130x100" alt = "" >
< / a >
< / li >
< li class = "span2" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/130x100" alt = "" >
< / a >
< / li >
< li class = "span2" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/130x100" alt = "" >
< / a >
< / li >
< li class = "span2" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/130x100" alt = "" >
< / a >
< / li >
< li class = "span2" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/130x100" alt = "" >
< / a >
< / li >
< / ul >
< / div >
< / div >
< / section >
2011-10-27 08:11:56 +02:00
<!-- Alerts & Messages
================================================== -->
< section id = "alerts" >
< div class = "page-header" >
< h1 > Alerts & Errors < small > Styles for success, warning, and error messages or alerts< / small > < / h1 >
< / div >
<!-- Basic alert messages -->
< div class = "row" >
< div class = "span3" >
< h2 > Basic alerts< / h2 >
< p > < code > .alert-message< / code > < / p >
< p > One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.< / p >
< p > < a class = "btn js-btn" href = "./javascript.html#alerts" > Get the javascript » < / a > < / p >
< / div >
< div class = "span9" >
< div class = "alert-message warning" >
2012-01-09 08:14:07 +01:00
< a class = "close" > × < / a >
2011-10-27 08:11:56 +02:00
< p > < strong > Holy guacamole!< / strong > Best check yo self, you’ < / p >
< / div >
< div class = "alert-message error" >
2012-01-09 08:14:07 +01:00
< a class = "close" > × < / a >
2011-10-27 08:11:56 +02:00
< p > < strong > Oh snap!< / strong > Change this and that and try again.< / p >
< / div >
< div class = "alert-message success" >
2012-01-09 08:14:07 +01:00
< a class = "close" > × < / a >
2011-10-27 08:11:56 +02:00
< p > < strong > Well done!< / strong > You successfully read this alert message.< / p >
< / div >
< div class = "alert-message info" >
2012-01-09 08:14:07 +01:00
< a class = "close" > × < / a >
2011-10-27 08:11:56 +02:00
< p > < strong > Heads up!< / strong > This is an alert that needs your attention, but it’ < / p >
< / div >
< h4 > Example code< / h4 >
< pre class = "prettyprint linenums" >
< div class="alert-message warning">
2012-01-09 08:14:07 +01:00
< a class="close"> × < /a>
2011-10-27 08:11:56 +02:00
< p> < strong> Holy guacamole!< /strong> Best check yo self, you’ < /p>
< /div>
< / pre >
< / div >
< / div > <!-- /row -->
2012-01-12 06:42:55 +01:00
2012-01-07 08:59:22 +01:00
< br >
2011-10-27 08:11:56 +02:00
<!-- Block messages -->
< div class = "row" >
< div class = "span3" >
< h2 > Block messages< / h2 >
2011-10-27 08:24:22 +02:00
< p > < code > < div class="alert-message block-message"> < / code > < / p >
2011-10-27 08:11:56 +02:00
< p > For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.< / p >
< p > < a class = "btn js-btn" href = "./javascript.html#alerts" > Get the javascript » < / a > < / p >
< / div >
< div class = "span9" >
< div class = "alert-message block-message warning" >
2012-01-09 08:14:07 +01:00
< a class = "close" > × < / a >
2011-10-27 08:11:56 +02:00
< p > < strong > Holy guacamole! This is a warning!< / strong > Best check yo self, you’ < / p >
< div class = "alert-actions" >
< a class = "btn small" href = "#" > Take this action< / a > < a class = "btn small" href = "#" > Or do this< / a >
< / div >
< / div >
< div class = "alert-message block-message error" >
2012-01-09 08:14:07 +01:00
< a class = "close" > × < / a >
2011-10-27 08:11:56 +02:00
< p > < strong > Oh snap! You got an error!< / strong > Change this and that and try again.< / p >
< ul >
< li > Duis mollis est non commodo luctus< / li >
< li > Nisi erat porttitor ligula< / li >
< li > Eget lacinia odio sem nec elit< / li >
< / ul >
< div class = "alert-actions" >
< a class = "btn small" href = "#" > Take this action< / a > < a class = "btn small" href = "#" > Or do this< / a >
< / div >
< / div >
< div class = "alert-message block-message success" >
2012-01-09 08:14:07 +01:00
< a class = "close" > × < / a >
2011-10-27 08:11:56 +02:00
< p > < strong > Well done!< / strong > You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.< / p >
< div class = "alert-actions" >
< a class = "btn small" href = "#" > Take this action< / a > < a class = "btn small" href = "#" > Or do this< / a >
< / div >
< / div >
< div class = "alert-message block-message info" >
2012-01-09 08:14:07 +01:00
< a class = "close" > × < / a >
2011-10-27 08:11:56 +02:00
< p > < strong > Heads up!< / strong > This is an alert that needs your attention, but it’ < / p >
< div class = "alert-actions" >
< a class = "btn small" href = "#" > Take this action< / a > < a class = "btn small" href = "#" > Or do this< / a >
< / div >
< / div >
< h4 > Example code< / h4 >
< pre class = "prettyprint linenums" >
< div class="alert-message block-message warning">
2012-01-09 08:14:07 +01:00
< a class="close"> × < /a>
2011-10-27 08:11:56 +02:00
< p> < strong> Holy guacamole! This is a warning!< /strong> Best check yo self, you’ < /p>
< div class="alert-actions">
< a class="btn small" href="#"> Take this action< /a> < a class="btn small" href="#"> Or do this< /a>
< /div>
< /div>
< / pre >
< / div >
< / div > <!-- /row -->
< / section >
2011-11-26 19:41:17 +01:00
<!-- Progress bars
================================================== -->
< section id = "progresss" >
< div class = "page-header" >
2012-01-08 00:52:57 +01:00
< h1 > Progress bars < small > For loading, redirecting, or action status< / small > < / h1 >
2011-11-26 19:41:17 +01:00
< / div >
2012-01-08 00:52:57 +01:00
< h2 > Examples and markup< / h2 >
2011-11-26 19:41:17 +01:00
< div class = "row" >
2012-01-08 00:52:57 +01:00
< div class = "span4" >
< h3 > Basic< / h3 >
< p > Default progress bar with a vertical gradient.< / p >
2011-11-26 19:41:17 +01:00
< div class = "progress" >
2012-01-08 00:52:57 +01:00
< div class = "bar" style = "width: 60%;" > < / div >
2011-11-26 19:41:17 +01:00
< / div >
2012-01-08 00:52:57 +01:00
< pre class = "prettyprint linenums" >
< div class="progress">
< div class="bar"
style="width: 60%;"> < /div>
< /div>
< / pre >
2011-11-26 19:41:17 +01:00
< / div >
2012-01-08 00:52:57 +01:00
< div class = "span4" >
< h3 > Striped< / h3 >
< p > Uses a gradient to create a striped effect.< / p >
2011-11-26 19:41:17 +01:00
< div class = "progress info striped" >
< div class = "bar" style = "width: 20%;" > < / div >
< / div >
2012-01-08 00:52:57 +01:00
< pre class = "prettyprint linenums" >
< div class="progress info
striped">
< div class="bar"
style="width: 20%;"> < /div>
< /div>
< / pre >
2011-11-26 19:41:17 +01:00
< / div >
2012-01-08 00:52:57 +01:00
< div class = "span4" >
< h3 > Animated< / h3 >
< p > Takes the striped example and animates it.< / p >
2011-11-26 19:41:17 +01:00
< div class = "progress danger active striped" >
< div class = "bar" style = "width: 45%" > < / div >
< / div >
2012-01-08 00:52:57 +01:00
< pre class = "prettyprint linenums" >
< div class="progress danger
striped active">
< div class="bar"
style="width: 40%;"> < /div>
< /div>
< / pre >
2011-11-26 19:41:17 +01:00
< / div >
< / div >
2012-01-08 00:52:57 +01:00
< h2 > Options and browser support< / h2 >
< div class = "row" >
< div class = "span4" >
< h3 > Additional colors< / h3 >
< p > Progress bars utilize some of the same classes as buttons and alert messages for quick styling.< / p >
< ul >
< li > < code > .info< / code > < / li >
< li > < code > .success< / code > < / li >
< li > < code > .danger< / code > < / li >
< / ul >
< p > Alternatively, you can customize the LESS files and roll your own colors and sizes.< / p >
< / div >
< div class = "span4" >
< h3 > Behavior< / h3 >
< p > Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.< / p >
< p > If you use the < code > .active< / code > class, your < code > .striped< / code > progress bars will animate the stripes left to right.< / p >
< / div >
< div class = "span4" >
< h3 > Browser support< / h3 >
< p > Progress bars use CSS3 gradients, transitions, and animations to achieve all theire effects. These features are not supported in IE7-8 or older versions of Firefox.< / p >
< p > Opera does not support animations at this time.< / p >
< / div >
< / div >
2011-11-26 19:41:17 +01:00
< / section >
2012-01-08 00:52:57 +01:00
2011-10-27 08:11:56 +02:00
<!-- Footer
================================================== -->
< footer class = "footer" >
< p class = "pull-right" > < a href = "#" > Back to top< / a > < / p >
2011-12-11 11:03:16 +01:00
< p > Designed and built with all the love in the world < a href = "http://twitter.com/twitter" target = "_blank" > @twitter< / a > by < a href = "http://twitter.com/mdo" target = "_blank" > @mdo< / a > and < a href = "http://twitter.com/fat" target = "_blank" > @fat< / a > .< / p >
< p > Code licensed under the < a href = "http://www.apache.org/licenses/LICENSE-2.0" target = "_blank" > Apache License v2.0< / a > . Documentation licensed under < a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > .< / p >
< p > Icons from < a href = "http://glyphicons.com" > Glyphicons Free< / a > , licensed under < a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > .< / p >
2011-10-27 08:11:56 +02:00
< / footer >
< / div > <!-- /container -->
2011-12-23 04:25:29 +01:00
<!-- Le javascript -->
<!-- Placed at the end of the document so the pages load faster -->
< script src = "http://code.jquery.com/jquery-1.7.min.js" > < / script >
< script src = "assets/js/google-code-prettify/prettify.js" > < / script >
< script src = "../js/bootstrap-transition.js" > < / script >
< script src = "../js/bootstrap-dropdown.js" > < / script >
< script src = "../js/bootstrap-tab.js" > < / script >
< script src = "../js/bootstrap-scrollspy.js" > < / script >
2012-01-12 06:42:55 +01:00
< script src = "../js/bootstrap-tooltip.js" > < / script >
2011-12-23 04:25:29 +01:00
< script src = "assets/js/application.js" > < / script >
2011-10-27 08:11:56 +02:00
< / body >
< / html >
