2011-10-27 02:11:56 -04:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2012-03-10 18:14:54 -05:00
< title > Components · Twitter Bootstrap< / title >
2011-11-08 14:32:28 -05:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2011-10-27 02:11:56 -04:00
< meta name = "description" content = "" >
< meta name = "author" content = "" >
<!-- Le styles -->
2012-01-27 01:05:45 -05:00
< link href = "assets/css/bootstrap.css" rel = "stylesheet" >
< link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >
2011-10-27 02:11:56 -04:00
< link href = "assets/css/docs.css" rel = "stylesheet" >
< link href = "assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
2012-02-12 14:08:58 -05:00
<!-- 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]-->
2012-02-05 01:38:49 -05:00
2011-10-27 02:11:56 -04:00
<!-- Le fav and touch icons -->
2012-01-25 13:19:29 -05:00
< link rel = "shortcut icon" href = "assets/ico/favicon.ico" >
2012-03-25 03:46:03 -04:00
< link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "assets/ico/apple-touch-icon-144-precomposed.png" >
2012-03-11 20:28:28 -04:00
< link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "assets/ico/apple-touch-icon-114-precomposed.png" >
2012-03-11 20:53:17 -04:00
< link rel = "apple-touch-icon-precomposed" sizes = "72x72" href = "assets/ico/apple-touch-icon-72-precomposed.png" >
< link rel = "apple-touch-icon-precomposed" href = "assets/ico/apple-touch-icon-57-precomposed.png" >
2012-05-26 19:35:28 -04:00
2011-10-27 02:11:56 -04:00
< / head >
2012-06-08 19:35:04 -04:00
< body data-spy = "scroll" data-target = ".subnav" data-offset = "50" >
2012-06-06 03:48:31 -04:00
2012-06-08 00:48:03 -04:00
<!-- Navbar
================================================== -->
< div class = "navbar navbar-fixed-top" >
< div class = "navbar-inner" >
2012-06-08 01:10:36 -04:00
< div class = "bs-docs-container" >
2012-06-08 00:48:03 -04:00
< button type = "button" class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "brand" href = "./index.html" > Bootstrap< / a >
< div class = "nav-collapse collapse" >
< ul class = "nav" >
< li class = "" >
2012-06-08 01:10:36 -04:00
< a href = "./index.html" > Home< / a >
2012-06-08 00:48:03 -04:00
< / li >
< li class = "" >
< a href = "./scaffolding.html" > Scaffolding< / a >
< / li >
< li class = "" >
< a href = "./base-css.html" > Base CSS< / a >
< / li >
< li class = "active" >
< a href = "./components.html" > Components< / a >
< / li >
< li class = "" >
2012-06-08 01:10:36 -04:00
< a href = "./javascript.html" > Javascript< / a >
2012-06-08 00:48:03 -04:00
< / li >
< li class = "" >
2012-06-08 01:10:36 -04:00
< a href = "./less.html" > LESS< / a >
2012-06-08 00:48:03 -04:00
< / li >
< li class = "divider-vertical" > < / li >
< li class = "" >
< a href = "./download.html" > Customize< / a >
< / li >
< li class = "" >
< a href = "./examples.html" > Examples< / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
2012-06-05 20:16:17 -04:00
< div class = "bs-docs-container" >
2011-10-27 02:11:56 -04:00
2012-01-24 22:19:50 -05:00
<!-- Masthead
================================================== -->
< header class = "jumbotron subhead" id = "overview" >
< h1 > Components< / h1 >
< p class = "lead" > Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.< / p >
2012-06-08 01:10:36 -04:00
< div class = "subnav" >
< ul class = "nav nav-pills" >
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Buttons < b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "#buttonGroups" > Button groups< / a > < / li >
< li > < a href = "#buttonDropdowns" > Button dropdowns< / a > < / li >
< / ul >
< / li >
< li class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Navigation < b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "#navs" > Nav, tabs, pills< / a > < / li >
< li > < a href = "#navbar" > Navbar< / a > < / li >
< li > < a href = "#breadcrumbs" > Breadcrumbs< / a > < / li >
< li > < a href = "#pagination" > Pagination< / a > < / li >
< / ul >
< / li >
< li > < a href = "#labels" > Labels< / a > < / li >
< li > < a href = "#badges" > Badges< / a > < / li >
< li > < a href = "#typography" > Typography< / a > < / li >
< li > < a href = "#thumbnails" > Thumbnails< / a > < / li >
< li > < a href = "#alerts" > Alerts< / a > < / li >
< li > < a href = "#progress" > Progress bars< / a > < / li >
< li > < a href = "#misc" > Miscellaneous< / a > < / li >
< / ul >
< / div >
2012-06-05 21:25:46 -04:00
< / header >
2012-06-10 23:50:49 -04:00
2012-01-24 22:19:50 -05:00
<!-- Button Groups
================================================== -->
< section id = "buttonGroups" >
< div class = "page-header" >
< h1 > Button groups < small > Join buttons for more toolbar-like functionality< / small > < / h1 >
< / div >
2012-06-05 02:34:02 -04:00
2012-06-10 23:50:49 -04:00
< h2 > Description and best practices< / h2 >
< 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. We recommend the following guidelines for using button groups and toolbars:< / p >
2012-06-05 02:34:02 -04:00
< ul >
< li > Always use the same element in a single button group, < code > < a> < / code > or < code > < button> < / code > .< / li >
< li > Don't mix buttons of different colors in the same button group.< / li >
< li > Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.< / li >
< / ul >
< p > < span class = "label label-info" > Related< / span > Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.< / p >
2012-06-10 23:50:49 -04:00
< hr class = "bs-docs-separator" >
< h2 > Examples and variations< / h2 >
< p > Two basic options, along with two more specific variations.< / p >
< h3 > Basic button group< / h3 >
< p > Wrap a series of buttons with < code > .btn< / code > in < code > .btn-group< / code > .< / p >
< div class = "bs-docs-example" >
< div class = "btn-group" style = "margin: 9px 0 5px;" >
2012-06-05 02:34:02 -04:00
< button class = "btn" > Left< / button >
< button class = "btn" > Middle< / button >
< button class = "btn" > Right< / button >
2012-02-11 02:50:45 -05:00
< / div >
2012-06-05 02:34:02 -04:00
< / div >
2012-02-11 02:50:45 -05:00
< pre class = "prettyprint linenums" >
< div class="btn-group">
2012-03-10 14:37:34 -05:00
< button class="btn"> 1< /button>
< button class="btn"> 2< /button>
< button class="btn"> 3< /button>
2012-02-11 02:50:45 -05:00
< /div>
< / pre >
2012-06-10 23:50:49 -04:00
2012-06-05 02:34:02 -04:00
< h3 > Toolbar example< / h3 >
< p > Combine sets of < code > < div class="btn-group"> < / code > into a < code > < div class="btn-toolbar"> < / code > for more complex components.< / p >
2012-06-10 23:50:49 -04:00
< div class = "bs-docs-example" >
< div class = "btn-toolbar" style = "margin: 0;" >
< div class = "btn-group" >
< button class = "btn" > 1< / button >
< button class = "btn" > 2< / button >
< button class = "btn" > 3< / button >
< button class = "btn" > 4< / button >
< / div >
< div class = "btn-group" >
< button class = "btn" > 5< / button >
< button class = "btn" > 6< / button >
< button class = "btn" > 7< / button >
< / div >
< div class = "btn-group" >
< button class = "btn" > 8< / button >
< / div >
2012-06-05 02:34:02 -04:00
< / div >
< / div >
2012-01-09 00:48:07 -05:00
< pre class = "prettyprint linenums" >
< div class="btn-toolbar">
< div class="btn-group">
...
< /div>
< /div>
< / pre >
2012-06-10 23:50:49 -04:00
2012-06-05 02:34:02 -04:00
< 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 >
2012-06-10 23:50:49 -04:00
2012-06-05 02:34:02 -04:00
< h3 > Dropdowns in button groups< / h3 >
< p > < span class = "label label-info" > Heads up!< / span > Buttons with dropdowns must be individually wrapped in their own < code > .btn-group< / code > within a < code > .btn-toolbar< / code > for proper rendering.< / p >
2012-01-24 22:19:50 -05:00
< / section >
2012-01-09 00:48:07 -05:00
2012-01-24 22:19:50 -05:00
<!-- Split button dropdowns
================================================== -->
2012-01-27 16:20:02 -05:00
< section id = "buttonDropdowns" >
2012-01-24 22:19:50 -05:00
< div class = "page-header" >
2012-02-22 01:01:39 -05:00
< h1 > Button dropdown menus < small > Built on button groups to provide contextual menus< / small > < / h1 >
2012-01-24 22:19:50 -05:00
< / div >
2012-01-30 10:49:28 -05:00
2012-06-05 02:34:02 -04:00
2012-06-11 00:00:20 -04:00
< h2 > Overview and examples< / h2 >
2012-06-05 02:34:02 -04:00
< p > Use any button to trigger a dropdown menu by placing it within a < code > .btn-group< / code > and providing the proper menu markup.< / p >
2012-06-11 00:00:20 -04:00
< div class = "bs-docs-example" >
< div class = "btn-toolbar" style = "margin: 0;" >
< div class = "btn-group" >
< button class = "btn dropdown-toggle" data-toggle = "dropdown" > Action < 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 class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" > Action < 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 class = "btn btn-danger dropdown-toggle" data-toggle = "dropdown" > Danger < 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 class = "btn btn-warning dropdown-toggle" data-toggle = "dropdown" > Warning < 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 class = "btn btn-success dropdown-toggle" data-toggle = "dropdown" > Success < 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 class = "btn btn-info dropdown-toggle" data-toggle = "dropdown" > Info < 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 class = "btn btn-inverse dropdown-toggle" data-toggle = "dropdown" > Inverse < 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 -->
2012-06-05 02:34:02 -04:00
< / div >
2012-01-30 10:49:28 -05:00
< pre class = "prettyprint linenums" >
< div class="btn-group">
< a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
< span class="caret"> < /span>
< /a>
< ul class="dropdown-menu">
< !-- dropdown menu links -->
< /ul>
< /div>
< / pre >
2012-06-05 02:34:02 -04:00
< h3 > Works with all button sizes< / h3 >
< p > Button dropdowns work at any size. your button sizes to < code > .btn-large< / code > , < code > .btn-small< / code > , or < code > .btn-mini< / code > .< / p >
2012-06-11 00:00:20 -04:00
< div class = "bs-docs-example" >
< div class = "btn-toolbar" style = "margin: 0;" >
< div class = "btn-group" >
< button class = "btn btn-large dropdown-toggle" data-toggle = "dropdown" > Large button < 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 class = "btn btn-small dropdown-toggle" data-toggle = "dropdown" > Small button < 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 class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" > Mini button < 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 >
2012-06-05 02:34:02 -04:00
< h3 > Requires javascript< / h3 >
< p > Button dropdowns require the < a href = "./javascript.html#dropdowns" > Bootstrap dropdown plugin< / a > to function.< / p >
< p > In some cases— like mobile— dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.< / p >
2012-01-30 10:49:28 -05:00
2012-06-11 00:00:20 -04:00
< hr class = "bs-docs-separator" >
2012-06-05 02:34:02 -04:00
2012-06-11 00:00:20 -04:00
< h2 > Split button dropdowns< / h2 >
2012-06-05 02:34:02 -04:00
< 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 >
2012-06-11 00:00:20 -04:00
< div class = "bs-docs-example" >
< div class = "btn-toolbar" style = "margin: 0;" >
< div class = "btn-group" >
< button class = "btn" > Action< / button >
< button class = "btn 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 class = "btn btn-primary" > Action< / button >
< 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 class = "btn btn-danger" > Danger< / button >
< button class = "btn btn-danger 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 class = "btn btn-warning" > Warning< / button >
< 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 class = "btn-group" >
< button class = "btn btn-success" > Success< / button >
< 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 class = "btn btn-info" > Info< / button >
< 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 class = "btn btn-inverse" > Inverse< / button >
< button class = "btn btn-inverse 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 -->
2012-06-05 02:34:02 -04:00
< / div >
2012-02-22 01:01:39 -05:00
< pre class = "prettyprint linenums" >
< div class="btn-group">
2012-06-11 00:00:20 -04:00
< button class="btn"> Action< /button>
< button class="btn dropdown-toggle" data-toggle="dropdown">
< span class="caret"> < /span>
< /button>
< ul class="dropdown-menu">
2012-02-22 01:01:39 -05:00
< !-- dropdown menu links -->
< /ul>
< /div>
< / pre >
2012-06-05 02:34:02 -04:00
2012-06-11 00:00:20 -04:00
< h3 > Sizes< / h3 >
< p > Utilize the extra button classes < code > .btn-mini< / code > , < code > .btn-small< / code > , or < code > .btn-large< / code > for sizing.< / p >
< div class = "bs-docs-example" >
< div class = "btn-toolbar" >
< div class = "btn-group" >
< button class = "btn btn-large" > Large action< / button >
< button class = "btn btn-large 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 class = "btn-toolbar" >
< div class = "btn-group" >
< button class = "btn btn-small" > Small action< / button >
< button class = "btn btn-small 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 class = "btn-toolbar" >
< div class = "btn-group" >
< button class = "btn btn-mini" > Mini action< / button >
< button class = "btn btn-mini 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 >
2012-01-09 00:48:07 -05:00
< pre class = "prettyprint linenums" >
< div class="btn-group">
2012-06-11 00:00:20 -04:00
< button class="btn btn-mini"> Action< /button>
< button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
2012-01-09 00:48:07 -05:00
< span class="caret"> < /span>
2012-03-10 14:37:34 -05:00
< /button>
2012-01-09 00:48:07 -05:00
< ul class="dropdown-menu">
< !-- dropdown menu links -->
< /ul>
< /div>
< / pre >
2012-06-11 00:00:20 -04:00
2012-06-05 02:34:02 -04:00
< h3 > Dropup menus< / h3 >
< p > Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of < code > .dropdown-menu< / code > . It will flip the direction of the < code > .caret< / code > and reposition the menu itself to move from the bottom up instead of top down.< / p >
2012-06-11 00:00:20 -04:00
< div class = "bs-docs-example" >
< div class = "btn-toolbar" style = "margin: 0;" >
< div class = "btn-group dropup" >
< button class = "btn" > Dropup< / button >
< button class = "btn 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 dropup" >
< button class = "btn primary" > Right dropup< / button >
< button class = "btn primary dropdown-toggle" data-toggle = "dropdown" > < span class = "caret" > < / span > < / button >
< ul class = "dropdown-menu pull-right" >
< 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 >
2012-06-05 02:34:02 -04:00
< / div >
2012-02-22 01:01:39 -05:00
< pre class = "prettyprint linenums" >
< div class="btn-group dropup">
2012-03-10 14:37:34 -05:00
< button class="btn"> Dropup< /button>
< button class="btn dropdown-toggle" data-toggle="dropdown">
2012-02-22 01:01:39 -05:00
< span class="caret"> < /span>
2012-03-10 14:37:34 -05:00
< /button>
2012-02-22 01:01:39 -05:00
< ul class="dropdown-menu">
< !-- dropdown menu links -->
< /ul>
< /div>
< / pre >
2012-01-24 22:19:50 -05:00
< / section >
2012-01-12 00:42:55 -05:00
2012-01-09 00:48:07 -05:00
2012-01-07 23:40:28 -05:00
<!-- Nav, Tabs, & Pills
2011-10-27 02:11:56 -04:00
================================================== -->
2012-01-09 00:48:07 -05:00
< section id = "navs" >
2011-10-27 02:11:56 -04:00
< div class = "page-header" >
2012-01-07 23:40:28 -05:00
< h1 > Nav, tabs, and pills < small > Highly customizable list-style navigation< / small > < / h1 >
2011-10-27 02:11:56 -04:00
< / div >
2011-12-20 01:58:56 -05:00
2012-01-07 23:40:28 -05:00
< h2 > Lightweight defaults < small > Same markup, different classes< / small > < / h2 >
2012-06-05 02:37:18 -04:00
< 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 > Basic tabs< / h3 >
< p > Take a regular < code > < ul> < / code > of links and add < code > .nav-tabs< / code > :< / p >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< ul class = "nav nav-tabs" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Profile< / a > < / li >
< li > < a href = "#" > Messages< / a > < / li >
< / ul >
< / div >
2012-01-07 23:40:28 -05:00
< pre class = "prettyprint linenums" >
2012-01-31 00:29:50 -05:00
< ul class="nav nav-tabs">
2012-01-07 23:40:28 -05:00
< li class="active">
< a href="#"> Home< /a>
< /li>
< li> < a href="#"> ...< /a> < /li>
< li> < a href="#"> ...< /a> < /li>
< /ul>
< / pre >
2012-06-05 02:37:18 -04:00
< h3 > Basic pills< / h3 >
< p > Take that same HTML, but use < code > .nav-pills< / code > instead:< / p >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< ul class = "nav nav-pills" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Profile< / a > < / li >
< li > < a href = "#" > Messages< / a > < / li >
< / ul >
< / div >
2012-01-07 23:40:28 -05:00
< pre class = "prettyprint linenums" >
2012-01-31 00:29:50 -05:00
< ul class="nav nav-pills">
2012-01-07 23:40:28 -05:00
< li class="active">
< a href="#"> Home< /a>
< /li>
< li> < a href="#"> ...< /a> < /li>
< li> < a href="#"> ...< /a> < /li>
< /ul>
< / pre >
2012-06-05 02:37:18 -04:00
2012-06-11 00:24:13 -04:00
< h3 > Component alignment< / h3 >
< p > To align nav links, use the < code > .pull-left< / code > or < code > .pull-right< / code > utility classes. Both classes will add a CSS float in the specified direction.< / p >
2011-12-20 01:58:56 -05:00
2012-06-05 02:37:18 -04:00
2012-06-11 00:24:13 -04:00
< hr class = "bs-docs-separator" >
< h2 > Stackable< / h2 >
2012-06-05 02:37:18 -04:00
< p > As tabs and pills are horizontal by default, just add a second class, < code > .nav-stacked< / code > , to make them appear vertically stacked.< / p >
< h3 > Stacked tabs< / h3 >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< ul class = "nav nav-tabs nav-stacked" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Profile< / a > < / li >
< li > < a href = "#" > Messages< / a > < / li >
< / ul >
< / div >
2011-12-20 01:58:56 -05:00
< pre class = "prettyprint linenums" >
2012-01-31 00:29:50 -05:00
< ul class="nav nav-tabs nav-stacked">
2011-12-20 01:58:56 -05:00
...
< /ul>
< / pre >
2012-06-05 02:37:18 -04:00
< h3 > Stacked pills< / h3 >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< ul class = "nav nav-pills nav-stacked" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Profile< / a > < / li >
< li > < a href = "#" > Messages< / a > < / li >
< / ul >
< / div >
2011-12-20 01:58:56 -05:00
< pre class = "prettyprint linenums" >
2012-01-31 00:29:50 -05:00
< ul class="nav nav-pills nav-stacked">
2011-12-20 01:58:56 -05:00
...
< /ul>
< / pre >
2012-01-05 04:34:14 -05:00
2012-06-05 02:37:18 -04:00
2012-06-11 00:24:13 -04:00
< hr class = "bs-docs-separator" >
< h2 > Dropdowns< / h2 >
< p > Add dropdown menus with a little extra HTML and the < a href = "./javascript.html#dropdowns" > dropdowns javascript plugin< / a > .< / p >
2012-06-05 02:37:18 -04:00
< h3 > Tabs with dropdowns< / h3 >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< ul class = "nav nav-tabs" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Help< / 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 >
< / div >
2012-01-07 02:59:22 -05:00
< pre class = "prettyprint linenums" >
2012-01-31 00:29:50 -05:00
< ul class="nav nav-tabs">
2012-01-07 23:40:28 -05:00
< li class="dropdown">
2012-01-12 00:42:55 -05:00
< a class="dropdown-toggle"
2012-01-07 23:40:28 -05:00
data-toggle="dropdown"
href="#">
Dropdown
< b class="caret"> < /b>
< /a>
< ul class="dropdown-menu">
< !-- links -->
< /ul>
< /li>
< /ul>
2012-01-07 02:59:22 -05:00
< / pre >
2012-06-05 02:37:18 -04:00
< h3 > Pills with dropdowns< / h3 >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< ul class = "nav nav-pills" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Help< / 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 >
< / div >
2012-01-07 02:59:22 -05:00
< pre class = "prettyprint linenums" >
2012-01-31 00:29:50 -05:00
< ul class="nav nav-pills">
2012-01-07 23:40:28 -05:00
< li class="dropdown">
2012-01-12 00:42:55 -05:00
< a class="dropdown-toggle"
2012-01-07 23:40:28 -05:00
data-toggle="dropdown"
href="#">
Dropdown
< b class="caret"> < /b>
< /a>
< ul class="dropdown-menu">
< !-- links -->
< /ul>
< /li>
< /ul>
2012-01-07 02:59:22 -05:00
< / pre >
2012-01-05 04:34:14 -05:00
2012-06-05 02:37:18 -04:00
2012-06-11 00:24:13 -04:00
< hr class = "bs-docs-separator" >
< h2 > Nav lists< / h2 >
< p > 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 >
2012-06-05 02:37:18 -04:00
< h3 > Example nav list< / h3 >
< p > Take a list of links and add < code > class="nav nav-list"< / code > :< / p >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< div class = "well" style = "max-width: 340px; padding: 8px 0;" >
< ul class = "nav nav-list" >
< li class = "nav-header" > List header< / li >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< 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 class = "divider" > < / li >
< li > < a href = "#" > Help< / a > < / li >
< / ul >
< / div > <!-- /well -->
< / div >
2012-01-07 02:59:22 -05:00
< pre class = "prettyprint linenums" >
2012-01-31 00:29:50 -05:00
< ul class="nav nav-list">
2012-01-07 23:40:28 -05:00
< li class="nav-header">
List header
< /li>
2012-01-07 02:59:22 -05:00
< li class="active">
2012-01-07 23:40:28 -05:00
< a href="#"> Home< /a>
2012-01-07 02:59:22 -05:00
< /li>
2012-01-07 23:40:28 -05:00
< li>
< a href="#"> Library< /a>
2012-01-07 02:59:22 -05:00
< /li>
2012-01-07 23:40:28 -05:00
...
2012-01-07 02:59:22 -05:00
< /ul>
2012-01-08 06:18:48 -05:00
< / pre >
2012-06-05 02:37:18 -04:00
< h3 > Example with icons< / h3 >
< p > Same example, but with < code > < i> < / code > tags for icons.< / p >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< div class = "well" style = "max-width: 340px; padding: 8px 0;" >
< ul class = "nav nav-list" >
< li class = "nav-header" > List header< / li >
< li class = "active" > < a href = "#" > < i class = "icon-white icon-home" > < / i > Home< / a > < / li >
< li > < a href = "#" > < i class = "icon-book" > < / i > Library< / a > < / li >
< li > < a href = "#" > < i class = "icon-pencil" > < / i > Applications< / a > < / li >
< li class = "nav-header" > Another list header< / li >
< li > < a href = "#" > < i class = "icon-user" > < / i > Profile< / a > < / li >
< li > < a href = "#" > < i class = "icon-cog" > < / i > Settings< / a > < / li >
< li class = "divider" > < / li >
< li > < a href = "#" > < i class = "icon-flag" > < / i > Help< / a > < / li >
< / ul >
< / div > <!-- /well -->
< / div >
2012-01-08 06:18:48 -05:00
< pre class = "prettyprint linenums" >
2012-01-31 00:29:50 -05:00
< ul class="nav nav-list">
2012-01-08 06:18:48 -05:00
...
< li>
< a href="#">
2012-01-31 03:11:19 -05:00
< i class="icon-book"> < /i>
2012-01-08 06:18:48 -05:00
Library
< /a>
< /li>
...
< /ul>
2012-01-07 02:59:22 -05:00
< / pre >
2012-01-13 03:03:23 -05:00
2012-06-11 00:24:13 -04:00
< h3 > Horizontal dividers< / h3 >
< p > Add a horizontal divider by creating an empty list item with the class < code > .divider< / code > , like so:< / p >
< pre class = "prettyprint linenums" >
< ul class="nav nav-list">
...
< li class="divider"> < /li>
...
< /ul>
< / pre >
< hr class = "bs-docs-separator" >
2011-12-21 17:00:50 -05:00
2012-06-05 02:37:18 -04:00
2012-06-11 00:24:13 -04:00
< h2 > Tabbable nav< / h2 >
2012-06-05 02:37:18 -04: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 >
< h3 > Tabbable example< / h3 >
< p > To make tabs tabbable, create a < code > .tab-pane< / code > with unique ID for every tab and wrap them in < code > .tab-content< / code > .< / p >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< div class = "tabbable" style = "margin-bottom: 18px;" >
< ul class = "nav nav-tabs" >
< li class = "active" > < a href = "#tab1" data-toggle = "tab" > Section 1< / a > < / li >
< li > < a href = "#tab2" data-toggle = "tab" > Section 2< / a > < / li >
< li > < a href = "#tab3" data-toggle = "tab" > Section 3< / a > < / li >
< / ul >
< div class = "tab-content" style = "padding-bottom: 9px; border-bottom: 1px solid #ddd;" >
< div class = "tab-pane active" id = "tab1" >
< p > I'm in Section 1.< / p >
< / div >
< div class = "tab-pane" id = "tab2" >
< p > Howdy, I'm in Section 2.< / p >
< / div >
< div class = "tab-pane" id = "tab3" >
< p > What up girl, this is Section 3.< / p >
< / div >
2012-06-05 02:37:18 -04:00
< / div >
2012-06-11 00:24:13 -04:00
< / div > <!-- /tabbable -->
< / div >
2012-01-08 01:06:44 -05:00
< pre class = "prettyprint linenums" >
2012-04-30 18:42:55 -04:00
< div class="tabbable"> < !-- Only required for left/right tabs -->
2012-01-31 00:29:50 -05:00
< ul class="nav nav-tabs">
2012-03-28 20:35:06 -04:00
< li class="active"> < a href="#tab1" data-toggle="tab"> Section 1< /a> < /li>
< li> < a href="#tab2" data-toggle="tab"> Section 2< /a> < /li>
2012-01-08 01:06:44 -05:00
< /ul>
< div class="tab-content">
2012-03-28 20:35:06 -04:00
< div class="tab-pane active" id="tab1">
2012-01-08 01:06:44 -05:00
< p> I'm in Section 1.< /p>
< /div>
2012-03-28 20:35:06 -04:00
< div class="tab-pane" id="tab2">
2012-01-08 01:06:44 -05:00
< p> Howdy, I'm in Section 2.< /p>
< /div>
< /div>
< /div>
< / pre >
2012-03-28 20:35:06 -04:00
2012-06-11 00:24:13 -04:00
< h4 > Fade in tabs< / h4 >
< p > To make tabs fade in, add < code > .fade< / code > to each < code > .tab-pane< / code > .< / p >
< h4 > Requires jQuery plugin< / h4 >
< p > All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life < a href = "./javascript.html#tabs" > on the javascript docs page< / a > .< / p >
2011-10-27 02:11:56 -04:00
2012-01-08 01:06:44 -05:00
< h3 > Tabbable in any direction< / h3 >
2012-06-05 02:37:18 -04:00
< h4 > Tabs on the bottom< / h4 >
< p > Flip the order of the HTML and add a class to put tabs on the bottom.< / p >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< div class = "tabbable tabs-below" >
< div class = "tab-content" >
< div class = "tab-pane active" id = "A" >
< p > I'm in Section A.< / p >
< / div >
< 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 >
< / div >
2012-06-05 02:37:18 -04:00
< / div >
2012-06-11 00:24:13 -04:00
< ul class = "nav 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 -->
< / div >
< pre class = "prettyprint linenums" >
2012-01-28 16:30:15 -05:00
< div class="tabbable tabs-below">
2012-01-08 02:21:40 -05:00
< div class="tab-content">
...
< /div>
2012-01-31 00:29:50 -05:00
< ul class="nav nav-tabs">
...
< /ul>
2012-01-08 02:21:40 -05:00
< /div>
< / pre >
2012-06-05 02:37:18 -04:00
< h4 > Tabs on the left< / h4 >
< p > Swap the class to put tabs on the left.< / p >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< div class = "tabbable tabs-left" >
< ul class = "nav 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 >
< div class = "tab-content" >
< div class = "tab-pane active" id = "lA" >
< p > I'm in Section A.< / p >
< / div >
< div class = "tab-pane" id = "lB" >
< p > Howdy, I'm in Section B.< / p >
< / div >
< div class = "tab-pane" id = "lC" >
< p > What up girl, this is Section C.< / p >
< / div >
2012-06-05 02:37:18 -04:00
< / div >
2012-06-11 00:24:13 -04:00
< / div > <!-- /tabbable -->
< / div >
2012-01-08 02:21:40 -05:00
< pre class = "prettyprint linenums" >
< div class="tabbable tabs-left">
2012-01-31 00:29:50 -05:00
< ul class="nav nav-tabs">
2012-01-08 02:21:40 -05:00
...
< /ul>
< div class="tab-content">
...
< /div>
< /div>
< / pre >
2012-06-05 02:37:18 -04:00
< h4 > Tabs on the right< / h4 >
< p > Swap the class to put tabs on the right.< / p >
2012-06-11 00:24:13 -04:00
< div class = "bs-docs-example" >
< div class = "tabbable tabs-right" >
< ul class = "nav 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 >
< / ul >
< 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 >
2012-06-05 02:37:18 -04:00
< / div >
2012-06-11 00:24:13 -04:00
< / div > <!-- /tabbable -->
< / div >
2012-01-08 02:21:40 -05:00
< pre class = "prettyprint linenums" >
< div class="tabbable tabs-right">
2012-01-31 00:29:50 -05:00
< ul class="nav nav-tabs">
2012-01-08 02:21:40 -05:00
...
< /ul>
< div class="tab-content">
...
< /div>
< /div>
< / pre >
2011-10-27 02:11:56 -04:00
2012-01-07 23:40:28 -05:00
< / section >
<!-- Navbar
================================================== -->
< section id = "navbar" >
< div class = "page-header" >
< h1 > Navbar< / h1 >
< / div >
2012-06-05 02:57:48 -04:00
2012-06-10 23:39:00 -04:00
< h2 > Basic navbar< / h2 >
< p > To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a < code > .container< / code > , which sets the width of your site and content.< / p >
< div class = "bs-docs-example" >
< div class = "navbar" >
< div class = "navbar-inner" >
< a class = "brand" href = "#" > Title< / a >
< ul class = "nav" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Link< / a > < / li >
< li > < a href = "#" > Link< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
2012-01-07 23:40:28 -05:00
< pre class = "prettyprint linenums" >
2012-01-29 02:40:52 -05:00
< div class="navbar">
2012-01-07 23:40:28 -05:00
< div class="navbar-inner">
2012-06-10 23:39:00 -04:00
< a class="brand" href="#"> Title< /a>
< ul class="nav">
< li class="active"> < a href="#"> Home< /a> < /li>
< li> < a href="#"> Link< /a> < /li>
< li> < a href="#"> Link< /a> < /li>
< /ul>
2012-01-07 23:40:28 -05:00
< /div>
< /div>
< / pre >
2012-06-10 23:39:00 -04:00
< hr class = "bs-docs-separator" >
< h2 > Navbar components< / h2 >
< h3 > Brand< / h3 >
< p > A simple link to show your brand or project name only requires an anchor tag.< / p >
2012-01-07 23:40:28 -05:00
< pre class = "prettyprint linenums" >
2012-06-10 23:39:00 -04:00
< a class="brand" href="#"> Project name< /a>
2012-01-07 23:40:28 -05:00
< / pre >
2012-06-10 23:39:00 -04:00
< h3 > Nav links< / h3 >
< p > Nav items are simple to add via unordered lists.< / p >
2012-02-22 00:12:16 -05:00
< pre class = "prettyprint linenums" >
2012-06-10 23:39:00 -04: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>
2012-02-22 00:12:16 -05:00
< / pre >
2012-06-10 23:39:00 -04:00
< p > You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:< / p >
2012-01-07 23:40:28 -05:00
< pre class = "prettyprint linenums" >
2012-06-10 23:39:00 -04:00
< ul class="nav">
...
< li class="divider-vertical"> < /li>
...
< /ul>
2012-01-07 23:40:28 -05:00
< / pre >
2012-06-10 23:39:00 -04:00
< h3 > Forms< / h3 >
2012-06-05 02:57:48 -04:00
< p > To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include < code > .navbar-form< / code > and either < code > .pull-left< / code > or < code > .pull-right< / code > to properly align it.< / p >
2012-02-18 18:23:38 -05:00
< pre class = "prettyprint linenums" >
< form class="navbar-form pull-left">
< input type="text" class="span2">
< /form>
< / pre >
2012-06-10 23:39:00 -04:00
< h3 > Search form< / h3 >
2012-06-05 02:57:48 -04:00
< p > For a more customized search form, add < code > .navbar-search< / code > to the < code > form< / code > and < code > .search-query< / code > to the input for specialized styles in the navbar.< / p >
2012-01-07 23:40:28 -05:00
< pre class = "prettyprint linenums" >
2012-01-30 11:58:40 -05:00
< form class="navbar-search pull-left">
< input type="text" class="search-query" placeholder="Search">
2012-01-07 23:40:28 -05:00
< /form>
< / pre >
2012-06-10 23:39:00 -04:00
< h3 > Component alignment< / h3 >
< p > Align nav links, search form, or text, use the < code > .pull-left< / code > or < code > .pull-right< / code > utility classes. Both classes will add a CSS float in the specified direction.< / p >
< h3 > Using dropdowns< / h3 >
< p > Add dropdowns and dropups to the nav with a bit of markup and the < a href = "./javascript.html#dropdowns" > dropdowns javascript plugin< / a > .< / p >
< pre class = "prettyprint linenums" >
< ul class="nav">
< li class="dropdown">
< a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
< b class="caret"> < /b>
< /a>
< ul class="dropdown-menu">
...
< /ul>
< /li>
< /ul>
< / pre >
< p > Visit the < a href = "./javascript.html#dropdowns" > javascript dropdowns documentation< / a > for more markup and information on calling dropdowns.< / p >
< h3 > Text< / h3 >
< p > Wrap strings of text in an element with < code > .navbar-text< / code > , usually on a < code > < p> < / code > tag for proper leading and color.< / p >
< hr class = "bs-docs-separator" >
< h2 > Fixed navigation< / h2 >
< p > Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, < code > .navbar< / code > .< / p >
< h3 > Fixed to top< / h3 >
< p > Add < code > .navbar-fixed-top< / code > and remember to account for the hidden area underneath it by adding at least 40px < code > padding< / code > to the < code > < body> < / code > . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.< / p >
< div class = "bs-docs-example bs-navbar-top-example" >
< div class = "navbar navbar-fixed-top" style = "position: absolute;" >
< div class = "navbar-inner" >
< div class = "container" style = "width: auto; padding: 0 20px;" >
< a class = "brand" href = "#" > Title< / a >
< ul class = "nav" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Link< / a > < / li >
< li > < a href = "#" > Link< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< pre class = "prettyprint linenums" >
< div class="navbar navbar-fixed-top">
...
< /div>
< / pre >
< h3 > Fixed to bottom< / h3 >
< p > Add < code > .navbar-fixed-bottom< / code > instead.< / p >
< div class = "bs-docs-example bs-navbar-bottom-example" >
< div class = "navbar navbar-fixed-bottom" style = "position: absolute;" >
< div class = "navbar-inner" >
< div class = "container" style = "width: auto; padding: 0 20px;" >
< a class = "brand" href = "#" > Title< / a >
< ul class = "nav" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Link< / a > < / li >
< li > < a href = "#" > Link< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< pre class = "prettyprint linenums" >
< div class="navbar navbar-fixed-bottom">
...
< /div>
< / pre >
< hr class = "bs-docs-separator" >
< h2 > Responsive navbar< / h2 >
< p > To implement a collapsing responsive navbar, wrap your navbar content in a containing div, < code > .nav-collapse.collapse< / code > , and add the navbar toggle button, < code > .btn-navbar< / code > .< / p >
< div class = "bs-docs-example" >
< div class = "navbar" >
< div class = "navbar-inner" >
< div class = "container" >
< a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / a >
< a class = "brand" href = "#" > Title< / a >
< div class = "nav-collapse" >
< ul class = "nav" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#" > Link< / 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 = "nav-header" > Nav header< / li >
< li > < a href = "#" > Separated link< / a > < / li >
< li > < a href = "#" > One more separated link< / a > < / li >
< / ul >
< / li >
< / ul >
< form class = "navbar-search pull-left" action = "" >
< input type = "text" class = "search-query span2" placeholder = "Search" >
< / form >
< ul class = "nav pull-right" >
< li > < a href = "#" > Link< / a > < / li >
< li class = "divider-vertical" > < / 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 > <!-- /.nav - collapse -->
< / div >
< / div > <!-- /navbar - inner -->
< / div > <!-- /navbar -->
< / div >
2012-01-28 21:39:36 -05:00
< pre class = "prettyprint linenums" >
2012-01-29 02:40:52 -05:00
< div class="navbar">
2012-01-28 21:39:36 -05:00
< div class="navbar-inner">
< div class="container">
2012-02-16 23:30:18 -05:00
2012-01-28 21:39:36 -05:00
< !-- .btn-navbar is used as the toggle for collapsed navbar content -->
< a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
2012-01-31 03:11:19 -05:00
< span class="icon-bar"> < /span>
< span class="icon-bar"> < /span>
< span class="icon-bar"> < /span>
2012-01-28 21:39:36 -05:00
< /a>
2012-02-16 23:30:18 -05:00
2012-01-28 21:39:36 -05:00
< !-- Be sure to leave the brand out there if you want it shown -->
< a class="brand" href="#"> Project name< /a>
< !-- Everything you want hidden at 940px or less, place within here -->
2012-01-29 19:54:51 -05:00
< div class="nav-collapse">
2012-01-28 21:39:36 -05:00
< !-- .nav, .navbar-search, .navbar-form, etc -->
< /div>
< /div>
< /div>
< /div>
< / pre >
2012-06-05 02:57:48 -04:00
< div class = "alert alert-info" >
< strong > Heads up!< / strong > The responsive navbar requires the < a href = "./javascript.html#collapse" > collapse plugin< / a > and < a href = "./scaffolding.html#responsive" > responsive Bootstrap CSS file< / a > .
< / div >
2012-01-28 21:39:36 -05:00
2011-12-21 17:00:50 -05:00
< / section >
<!-- Breadcrumbs
================================================== -->
< section id = "breadcrumbs" >
< div class = "page-header" >
< h1 > Breadcrumbs < small > < / small > < / h1 >
< / div >
2012-06-10 19:46:46 -04:00
< h2 > Examples< / h2 >
2012-06-05 02:57:48 -04:00
< p > A single example shown as it might be displayed across multiple pages.< / p >
2012-06-10 19:46:46 -04:00
< div class = "bs-docs-example" >
< ul class = "breadcrumb" >
< li class = "active" > Home< / li >
< / ul >
< ul class = "breadcrumb" >
< li > < a href = "#" > Home< / a > < span class = "divider" > /< / span > < / li >
< li class = "active" > Library< / li >
< / ul >
< ul class = "breadcrumb" style = "margin-bottom: 5px;" >
< li > < a href = "#" > Home< / a > < span class = "divider" > /< / span > < / li >
< li > < a href = "#" > Library< / a > < span class = "divider" > /< / span > < / li >
< li class = "active" > Data< / li >
< / ul >
< / div >
2011-10-27 02:11:56 -04:00
< pre class = "prettyprint linenums" >
< ul class="breadcrumb">
2012-06-10 19:46:46 -04:00
< li> < a href="#"> Home< /a> < span class="divider"> /< /span> < /li>
< li> < a href="#"> Library< /a> < span class="divider"> /< /span> < /li>
2012-02-27 22:47:21 -05:00
< li class="active"> Data< /li>
2011-10-27 02:11:56 -04:00
< /ul>
< / pre >
2011-12-21 17:00:50 -05:00
< / section >
<!-- Pagination
================================================== -->
2012-01-14 15:21:09 -05:00
< section id = "pagination" >
2011-12-21 17:00:50 -05:00
< div class = "page-header" >
2012-01-14 23:54:37 -05:00
< h1 > Pagination < small > Two options for paging through content< / small > < / h1 >
2011-12-21 17:00:50 -05:00
< / div >
2012-06-10 19:46:46 -04:00
< h2 > Standard pagination< / h2 >
< p > Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.< / p >
< div class = "bs-docs-example" >
< div class = "pagination" >
< ul >
< li > < a href = "#" > « < / a > < / li >
< li > < 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 > < a href = "#" > » < / a > < / li >
< / ul >
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2011-10-27 02:11:56 -04:00
< pre class = "prettyprint linenums" >
< div class="pagination">
< ul>
2012-01-14 23:54:37 -05:00
< li> < a href="#"> Prev< /a> < /li>
2012-06-10 19:46:46 -04:00
< li> < a href="#"> 1< /a> < /li>
2011-10-27 02:11:56 -04:00
< li> < a href="#"> 2< /a> < /li>
< li> < a href="#"> 3< /a> < /li>
< li> < a href="#"> 4< /a> < /li>
2012-06-10 19:46:46 -04:00
< li> < a href="#"> Next< /a> < /li>
< /ul>
< /div>
< / pre >
< hr class = "bs-docs-separator" >
< h2 > Options< / h2 >
< h3 > Disabled and active states< / h3 >
< p > Links are customizable for different circumstances. Use < code > .disabled< / code > for unclickable links and < code > .active< / code > to indicate the current page.< / p >
< div class = "bs-docs-example" >
< div class = "pagination pagination-centered" >
< ul >
< li class = "disabled" > < a href = "#" > « < / 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 > < a href = "#" > » < / a > < / li >
< / ul >
< / div >
< / div >
< pre class = "prettyprint linenums" >
< div class="pagination ">
< ul>
< li class="disabled"> < a href="#"> Prev< /a> < /li>
< li class="active"> < a href="#"> 1< /a> < /li>
...
2011-10-27 02:11:56 -04:00
< /ul>
< /div>
< / pre >
2012-06-10 19:46:46 -04:00
< h3 > Alignment< / h3 >
< p > Add one of two optional classes to change the alignment of pagination links: < code > .pagination-centered< / code > and < code > .pagination-right< / code > .< / p >
< div class = "bs-docs-example" >
< div class = "pagination pagination-centered" >
< ul >
< li > < a href = "#" > « < / a > < / li >
< li > < 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 > < a href = "#" > » < / a > < / li >
< / ul >
< / div >
< / div >
< pre class = "prettyprint linenums" >
< div class="pagination pagination-centered">
...
< /div>
< / pre >
< div class = "bs-docs-example" >
< div class = "pagination pagination-right" >
< ul >
< li > < a href = "#" > « < / a > < / li >
< li > < 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 > < a href = "#" > » < / a > < / li >
< / ul >
< / div >
< / div >
< pre class = "prettyprint linenums" >
< div class="pagination pagination-right">
...
< /div>
< / pre >
< hr class = "bs-docs-separator" >
2012-06-05 02:57:48 -04:00
2012-06-10 19:46:46 -04:00
< h2 > Pager< / h2 >
< p > Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.< / p >
2012-06-05 02:57:48 -04:00
< h3 > Default example< / h3 >
< p > By default, the pager centers links.< / p >
2012-06-10 19:46:46 -04:00
< div class = "bs-docs-example" >
< ul class = "pager" >
< li > < a href = "#" > Previous< / a > < / li >
< li > < a href = "#" > Next< / a > < / li >
< / ul >
< / div >
2012-01-14 23:54:37 -05:00
< pre class = "prettyprint linenums" >
< ul class="pager">
< li>
< a href="#"> Previous< /a>
< /li>
< li>
< a href="#"> Next< /a>
< /li>
< /ul>
< / pre >
2012-06-05 02:57:48 -04:00
< h3 > Aligned links< / h3 >
< p > Alternatively, you can align each link to the sides:< / p >
2012-06-10 19:46:46 -04:00
< div class = "bs-docs-example" >
< ul class = "pager" >
< li class = "previous" > < a href = "#" > ← Older< / a > < / li >
< li class = "next" > < a href = "#" > Newer → < / a > < / li >
< / ul >
< / div >
2012-01-14 23:54:37 -05:00
< pre class = "prettyprint linenums" >
< ul class="pager">
2012-01-15 14:26:06 -05:00
< li class="previous">
2012-01-14 23:54:37 -05:00
< a href="#"> & larr; Older< /a>
< /li>
2012-01-15 14:26:06 -05:00
< li class="next">
2012-01-14 23:54:37 -05:00
< a href="#"> Newer & rarr;< /a>
< /li>
< /ul>
2012-06-10 19:46:46 -04:00
< / pre >
< h3 > Optional disabled state< / h3 >
< p > Pager links also use the general < code > .disabled< / code > utility class from the pagination.< / p >
< div class = "bs-docs-example" >
< ul class = "pager" >
< li class = "previous disabled" > < a href = "#" > ← Older< / a > < / li >
< li class = "next" > < a href = "#" > Newer → < / a > < / li >
< / ul >
< / div >
< pre class = "prettyprint linenums" >
< ul class="pager">
< li class="previous disabled">
< a href="#"> & larr; Older< /a>
< /li>
...
< /ul>
2012-01-14 23:54:37 -05:00
< / pre >
2012-06-05 02:57:48 -04:00
2011-10-27 02:11:56 -04:00
< / section >
2012-01-28 01:52:45 -05:00
<!-- Labels
================================================== -->
< section id = "labels" >
< div class = "page-header" >
< h1 > Inline labels < small > Label and annotate text< / small > < / h1 >
< / div >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
2012-01-28 03:34:54 -05:00
< th > Labels< / th >
2012-01-28 01:52:45 -05:00
< th > Markup< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
< span class = "label" > Default< / span >
< / td >
< td >
< code > < span class="label"> Default< /span> < / code >
< / td >
< / tr >
< tr >
< td >
2012-02-01 21:11:19 -05:00
< span class = "label label-success" > Success< / span >
2012-01-28 01:52:45 -05:00
< / td >
< td >
2012-02-05 04:57:09 -05:00
< code > < span class="label label-success"> Success< /span> < / code >
2012-01-28 01:52:45 -05:00
< / td >
< / tr >
< tr >
< td >
2012-01-29 01:14:51 -05:00
< span class = "label label-warning" > Warning< / span >
2012-01-28 01:52:45 -05:00
< / td >
< td >
2012-01-29 01:14:51 -05:00
< code > < span class="label label-warning"> Warning< /span> < / code >
2012-01-28 01:52:45 -05:00
< / td >
< / tr >
< tr >
< td >
2012-01-29 01:14:51 -05:00
< span class = "label label-important" > Important< / span >
2012-01-28 01:52:45 -05:00
< / td >
< td >
2012-01-29 01:14:51 -05:00
< code > < span class="label label-important"> Important< /span> < / code >
2012-01-28 01:52:45 -05:00
< / td >
< / tr >
< tr >
< td >
2012-01-29 01:14:51 -05:00
< span class = "label label-info" > Info< / span >
2012-01-28 01:52:45 -05:00
< / td >
< td >
2012-01-29 01:14:51 -05:00
< code > < span class="label label-info"> Info< /span> < / code >
2012-01-28 01:52:45 -05:00
< / td >
< / tr >
2012-02-13 03:41:28 -05:00
< tr >
< td >
< span class = "label label-inverse" > Inverse< / span >
< / td >
< td >
< code > < span class="label label-inverse"> Inverse< /span> < / code >
< / td >
< / tr >
2012-01-28 01:52:45 -05:00
< / tbody >
< / table >
< / section >
2012-02-21 00:20:06 -05:00
<!-- Badges
================================================== -->
< section id = "badges" >
< div class = "page-header" >
< h1 > Badges < small > Indicators and unread counts< / small > < / h1 >
< / div >
2012-06-05 02:57:48 -04:00
< h3 > About< / h3 >
< p > Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.< / p >
< h3 > Available classes< / h3 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th > Name< / th >
< th > Example< / th >
< th > Markup< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td >
Default
< / td >
< td >
< span class = "badge" > 1< / span >
< / td >
< td >
< code > < span class="badge"> 1< /span> < / code >
< / td >
< / tr >
< tr >
< td >
Success
< / td >
< td >
< span class = "badge badge-success" > 2< / span >
< / td >
< td >
< code > < span class="badge badge-success"> 2< /span> < / code >
< / td >
< / tr >
< tr >
< td >
Warning
< / td >
< td >
< span class = "badge badge-warning" > 4< / span >
< / td >
< td >
< code > < span class="badge badge-warning"> 4< /span> < / code >
< / td >
< / tr >
< tr >
< td >
Important
< / td >
< td >
< span class = "badge badge-important" > 6< / span >
< / td >
< td >
< code > < span class="badge badge-important"> 6< /span> < / code >
< / td >
< / tr >
< tr >
< td >
Info
< / td >
< td >
< span class = "badge badge-info" > 8< / span >
< / td >
< td >
< code > < span class="badge badge-info"> 8< /span> < / code >
< / td >
< / tr >
< tr >
< td >
Inverse
< / td >
< td >
< span class = "badge badge-inverse" > 10< / span >
< / td >
< td >
< code > < span class="badge badge-inverse"> 10< /span> < / code >
< / td >
< / tr >
< / tbody >
< / table >
2012-02-21 00:20:06 -05:00
< / section >
2012-02-12 23:07:25 -05:00
<!-- Typographic components
2012-02-12 17:47:09 -05:00
================================================== -->
2012-02-12 23:07:25 -05:00
< section id = "typography" >
2012-02-12 17:47:09 -05:00
< div class = "page-header" >
2012-02-12 23:07:25 -05:00
< h1 > Typographic components < small > Page header and hero unit for segmenting content< / small > < / h1 >
2012-02-12 17:47:09 -05:00
< / div >
2012-06-05 02:57:48 -04:00
2012-06-10 18:14:21 -04:00
< h2 > Hero unit< / h2 >
< p > A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.< / p >
< div class = "bs-docs-example" >
< div class = "hero-unit" >
< h1 > Hello, world!< / h1 >
< p > This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.< / p >
< p > < a class = "btn btn-primary btn-large" > Learn more< / a > < / p >
< / div >
< / div >
2012-02-12 17:47:09 -05:00
< pre class = "prettyprint linenums" >
< div class="hero-unit">
< h1> Heading< /h1>
< p> Tagline< /p>
< p>
< a class="btn btn-primary btn-large">
Learn more
< /a>
< /p>
< /div>
< / pre >
2012-06-05 02:57:48 -04:00
2012-02-12 23:07:25 -05:00
< h2 > Page header< / h2 >
2012-06-05 02:57:48 -04:00
< p > A simple shell for an < code > h1< / code > to appropriately space out and segment sections of content on a page. It can utilize the < code > h1< / code > 's default < code > small< / code > , element as well most other components (with additional styles).< / p >
< div class = "bs-docs-example" >
< div class = "page-header" >
< h1 > Example page header < small > Subtext for header< / small > < / h1 >
2012-02-12 23:07:25 -05:00
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2012-02-12 23:07:25 -05:00
< pre class = "prettyprint linenums" >
2012-02-17 17:39:30 -05:00
< div class="page-header">
2012-02-12 23:07:25 -05:00
< h1> Example page header< /h1>
< /div>
< / pre >
2012-06-05 02:57:48 -04:00
2012-02-12 17:47:09 -05:00
< / section >
2012-01-14 15:21:57 -05:00
<!-- Thumbnails
2012-01-07 23:40:28 -05:00
================================================== -->
2012-01-14 15:21:57 -05:00
< section id = "thumbnails" >
2012-01-07 23:40:28 -05:00
< div class = "page-header" >
< h1 > Thumbnails < small > Grids of images, videos, text, and more< / small > < / h1 >
< / div >
2012-06-05 02:57:48 -04:00
< 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/260x180" alt = "" >
< / a >
< / li >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< li class = "span3" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/260x180" alt = "" >
< / a >
< / li >
< / ul >
2012-01-07 23:40:28 -05:00
2012-06-05 02:57:48 -04:00
< 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/260x180" 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 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/260x180" 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 btn-primary" > Action< / a > < a href = "#" class = "btn" > Action< / a > < / p >
< / div >
< / div >
< / li >
< / ul >
< 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 >
2012-01-07 23:40:28 -05:00
2012-06-05 02:57:48 -04:00
< 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 >
< 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 >
< 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 >
2012-01-07 23:40:28 -05:00
< pre class = "prettyprint linenums" >
< ul class="thumbnails">
< li class="span3">
< a href="#" class="thumbnail">
2012-01-29 01:48:25 -05:00
< img src="http://placehold.it/260x180" alt="">
2012-01-07 23:40:28 -05:00
< /a>
< /li>
...
< /ul>
< / pre >
2012-06-05 02:57:48 -04:00
< 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 >
2012-01-07 23:40:28 -05:00
< pre class = "prettyprint linenums" >
< ul class="thumbnails">
< li class="span3">
< div class="thumbnail">
2012-01-29 01:48:25 -05:00
< img src="http://placehold.it/260x180" alt="">
2012-01-07 23:40:28 -05:00
< h5> Thumbnail label< /h5>
< p> Thumbnail caption right here...< /p>
< /div>
< /li>
...
< /ul>
< / pre >
2012-06-05 02:57:48 -04:00
< 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/360x268" alt = "" >
< / a >
< / li >
< li class = "span2" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/160x120" alt = "" >
< / a >
< / li >
< li class = "span2" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/160x120" alt = "" >
< / a >
< / li >
< li class = "span2" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/160x120" alt = "" >
< / a >
< / li >
< li class = "span2" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/160x120" alt = "" >
< / a >
< / li >
< li class = "span2" >
< a href = "#" class = "thumbnail" >
< img src = "http://placehold.it/160x120" alt = "" >
< / a >
< / li >
< / ul >
2012-01-07 23:40:28 -05:00
< / section >
2012-05-13 17:03:32 -04:00
<!-- Alerts
2011-10-27 02:11:56 -04:00
================================================== -->
< section id = "alerts" >
< div class = "page-header" >
2012-01-14 19:18:15 -05:00
< h1 > Alerts < small > Styles for success, warning, and error messages< / small > < / h1 >
2011-10-27 02:11:56 -04:00
< / div >
2012-01-14 19:18:15 -05:00
2012-06-10 18:12:02 -04:00
< h2 > Default alert< / h2 >
< p > Wrap any text and an optional dismiss button in < code > .alert< / code > for a basic warning alert message.< / p >
< div class = "bs-docs-example" >
< div class = "alert" >
< button type = "button" class = "close" data-dismiss = "alert" > × < / button >
< strong > Warning!< / strong > Best check yo self, you're not looking too good.
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2012-01-14 19:18:15 -05:00
< pre class = "prettyprint linenums" >
< div class="alert">
2012-06-10 18:12:02 -04:00
< button type="button" class="close" data-dismiss="alert"> × < /button>
2012-02-01 21:27:38 -05:00
< strong> Warning!< /strong> Best check yo self, you're not looking too good.
2012-01-14 19:18:15 -05:00
< /div>
< / pre >
2012-06-10 18:12:02 -04:00
< h3 > Dismiss buttons< / h3 >
< p > Mobile Safari and Mobile Opera browsers, in addition to the < code > data-dismiss="alert"< / code > attribute, require an < code > href="#"< / code > for the dismissal of alerts when using an < code > < a> < / code > tag.< / p >
< pre class = "prettyprint linenums" >
< a href="#" class="close" data-dismiss="alert"> × < /button>
< / pre >
< p > Alternatively, you may use a < code > < button> < / code > element with the data attribute, which we have opted to do for our docs. When using < code > < button> < / code > , you must include < code > type="button"< / code > or your forms may not submit.< / p >
< pre class = "prettyprint linenums" >
< button type="button" class="close" data-dismiss="alert"> × < /button>
< / pre >
< h3 > Dismiss alerts via javascript< / h3 >
< p > Use the < a href = "./javascript.html#alerts" > alerts jQuery plugin< / a > for quick and easy dismissal of alerts.< / p >
< hr class = "bs-docs-separator" >
< h2 > Options< / h2 >
< p > For longer messages, increase the padding on the top and bottom of the alert wrapper by adding < code > .alert-block< / code > .< / p >
< div class = "bs-docs-example" >
< div class = "alert alert-block" >
< 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, vel scelerisque nisl consectetur et.< / p >
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2011-10-27 02:11:56 -04:00
< pre class = "prettyprint linenums" >
2012-01-15 14:30:24 -05:00
< div class="alert alert-block">
2012-06-10 18:12:02 -04:00
< a class="close" data-dismiss="alert" href="#"> & times;< /a>
< h4> Warning!< /h4>
2012-02-01 21:27:38 -05:00
Best check yo self, you're not...
2011-10-27 02:11:56 -04:00
< /div>
< / pre >
2012-01-07 02:59:22 -05:00
2012-06-10 18:12:02 -04:00
< hr class = "bs-docs-separator" >
< h2 > Contextual alternatives< / h2 >
< p > Add optional classes to change an alert's connotation.< / p >
2012-06-05 02:57:48 -04:00
< h3 > Error or danger< / h3 >
2012-06-10 18:12:02 -04:00
< div class = "bs-docs-example" >
< div class = "alert alert-error" >
< button type = "button" class = "close" data-dismiss = "alert" > × < / button >
< strong > Oh snap!< / strong > Change a few things up and try submitting again.
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2012-01-14 19:18:15 -05:00
< pre class = "prettyprint linenums" >
2012-01-15 14:30:24 -05:00
< div class="alert alert-error">
2012-01-14 19:18:15 -05:00
...
< /div>
< / pre >
2012-06-05 02:57:48 -04:00
< h3 > Success< / h3 >
2012-06-10 18:12:02 -04:00
< div class = "bs-docs-example" >
< div class = "alert alert-success" >
< button type = "button" class = "close" data-dismiss = "alert" > × < / button >
< strong > Well done!< / strong > You successfully read this important alert message.
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2012-01-14 19:18:15 -05:00
< pre class = "prettyprint linenums" >
2012-01-15 14:30:24 -05:00
< div class="alert alert-success">
2012-01-14 19:18:15 -05:00
...
< /div>
< / pre >
2012-06-05 02:57:48 -04:00
< h3 > Information< / h3 >
2012-06-10 18:12:02 -04:00
< div class = "bs-docs-example" >
< div class = "alert alert-info" >
< button type = "button" class = "close" data-dismiss = "alert" > × < / button >
< strong > Heads up!< / strong > This alert needs your attention, but it's not super important.
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2011-10-27 02:11:56 -04:00
< pre class = "prettyprint linenums" >
2012-01-15 14:30:24 -05:00
< div class="alert alert-info">
2012-01-14 19:18:15 -05:00
...
2011-10-27 02:11:56 -04:00
< /div>
< / pre >
2012-01-14 19:18:15 -05:00
2011-10-27 02:11:56 -04:00
< / section >
2011-11-26 13:41:17 -05:00
<!-- Progress bars
================================================== -->
2012-01-28 01:52:45 -05:00
< section id = "progress" >
< div class = "page-header" >
< h1 > Progress bars < small > For loading, redirecting, or action status< / small > < / h1 >
< / div >
2012-01-07 18:52:57 -05:00
2012-01-28 01:52:45 -05:00
< h2 > Examples and markup< / h2 >
2012-06-05 02:57:48 -04:00
< h3 > Basic< / h3 >
< p > Default progress bar with a vertical gradient.< / p >
2012-06-10 18:12:02 -04:00
< div class = "bs-docs-example" >
< div class = "progress" >
< div class = "bar" style = "width: 60%;" > < / div >
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2012-01-07 18:52:57 -05:00
< pre class = "prettyprint linenums" >
< div class="progress">
2012-06-10 18:12:02 -04:00
< div class="bar" style="width: 60%;"> < /div>
2012-01-07 18:52:57 -05:00
< /div>
< / pre >
2012-06-05 02:57:48 -04:00
< h3 > Striped< / h3 >
2012-06-10 18:12:02 -04:00
< p > Uses a gradient to create a striped effect. Not available in IE7-8.< / p >
< div class = "bs-docs-example" >
< div class = "progress progress-striped" >
< div class = "bar" style = "width: 20%;" > < / div >
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2012-01-07 18:52:57 -05:00
< pre class = "prettyprint linenums" >
2012-03-06 02:00:37 -05:00
< div class="progress progress-striped">
2012-06-10 18:12:02 -04:00
< div class="bar" style="width: 20%;"> < /div>
2012-01-07 18:52:57 -05:00
< /div>
< / pre >
2012-06-05 02:57:48 -04:00
< h3 > Animated< / h3 >
2012-06-10 18:12:02 -04:00
< p > Add < code > .active< / code > to < code > .progress-striped< / code > to animate the stripes right to left. Not available in all versions of IE.< / p >
< div class = "bs-docs-example" >
< div class = "progress progress-striped active" >
< div class = "bar" style = "width: 45%" > < / div >
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2012-01-07 18:52:57 -05:00
< pre class = "prettyprint linenums" >
2012-06-10 18:12:02 -04:00
< div class="progress progress-striped active">
< div class="bar" style="width: 40%;"> < /div>
2012-01-07 18:52:57 -05:00
< /div>
< / pre >
2012-01-28 01:52:45 -05:00
2012-06-10 18:12:02 -04:00
< hr class = "bs-docs-separator" >
< h2 > Options< / h2 >
2012-06-05 02:57:48 -04:00
< h3 > Additional colors< / h3 >
< p > Progress bars use some of the same button and alert classes for consistent styles.< / p >
2012-06-10 18:12:02 -04:00
< div class = "bs-docs-example" >
< div class = "progress progress-info" style = "margin-bottom: 9px;" >
< div class = "bar" style = "width: 20%" > < / div >
< / div >
< div class = "progress progress-success" style = "margin-bottom: 9px;" >
< div class = "bar" style = "width: 40%" > < / div >
< / div >
< div class = "progress progress-warning" style = "margin-bottom: 9px;" >
< div class = "bar" style = "width: 60%" > < / div >
< / div >
< div class = "progress progress-danger" >
< div class = "bar" style = "width: 80%" > < / div >
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2012-06-10 18:12:02 -04:00
< pre class = "prettyprint linenums" >
< div class="progress progress-info">
< div class="bar" style="width: 20%"> < /div>
< /div>
< div class="progress progress-success">
< div class="bar" style="width: 40%"> < /div>
< /div>
< div class="progress progress-warning">
< div class="bar" style="width: 60%"> < /div>
< /div>
< div class="progress progress-danger">
< div class="bar" style="width: 80%"> < /div>
< /div>
< / pre >
2012-06-05 02:57:48 -04:00
< h3 > Striped bars< / h3 >
< p > Similar to the solid colors, we have varied striped progress bars.< / p >
2012-06-10 18:12:02 -04:00
< div class = "bs-docs-example" >
< div class = "progress progress-info progress-striped" style = "margin-bottom: 9px;" >
< div class = "bar" style = "width: 20%" > < / div >
< / div >
< div class = "progress progress-success progress-striped" style = "margin-bottom: 9px;" >
< div class = "bar" style = "width: 40%" > < / div >
< / div >
< div class = "progress progress-warning progress-striped" style = "margin-bottom: 9px;" >
< div class = "bar" style = "width: 60%" > < / div >
< / div >
< div class = "progress progress-danger progress-striped" >
< div class = "bar" style = "width: 80%" > < / div >
< / div >
2012-01-28 01:52:45 -05:00
< / div >
2012-06-10 18:12:02 -04:00
< pre class = "prettyprint linenums" >
< div class="progress progress-info progress-striped">
< div class="bar" style="width: 20%"> < /div>
< /div>
< div class="progress progress-success progress-striped">
< div class="bar" style="width: 40%"> < /div>
< /div>
< div class="progress progress-warning progress-striped">
< div class="bar" style="width: 60%"> < /div>
< /div>
< div class="progress progress-danger progress-striped">
< div class="bar" style="width: 80%"> < /div>
< /div>
< / pre >
2012-01-28 01:52:45 -05:00
2012-06-10 18:12:02 -04:00
< hr class = "bs-docs-separator" >
2012-06-05 02:57:48 -04:00
2012-06-10 18:12:02 -04:00
< h2 > Browser support< / h2 >
2012-06-05 02:57:48 -04:00
< p > Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.< / p >
< p > Opera and IE do not support animations at this time.< / p >
2012-01-28 01:52:45 -05:00
< / section >
<!-- Miscellaneous
================================================== -->
< section id = "misc" >
< div class = "page-header" >
2012-02-18 18:17:25 -05:00
< h1 > Miscellaneous < small > Lightweight utility components< / small > < / h1 >
2012-01-28 01:52:45 -05:00
< / div >
2012-06-05 02:57:48 -04:00
< h2 > Wells< / h2 >
< p > Use the well as a simple effect on an element to give it an inset effect.< / p >
2012-06-10 18:12:02 -04:00
< div class = "bs-docs-example" >
< div class = "well" >
Look, I'm in a well!
< / div >
2012-06-05 02:57:48 -04:00
< / div >
2012-01-28 01:52:45 -05:00
< pre class = "prettyprint linenums" >
< div class="well">
...
< /div>
2012-06-04 21:56:50 -04:00
< / pre >
2012-06-10 18:12:02 -04:00
< h3 > Optional classes< / h3 >
2012-06-05 02:57:48 -04:00
< p > Control padding and rounded corners with two optional modifier classes.< / p >
2012-06-10 18:12:02 -04:00
< div class = "bs-docs-example" >
< div class = "well well-large" >
Look, I'm in a well!
< / div >
< / div >
2012-06-04 21:56:50 -04:00
< pre class = "prettyprint linenums" >
< div class="well well-large">
...
< /div>
< / pre >
2012-06-10 18:12:02 -04:00
< div class = "bs-docs-example" >
< div class = "well well-small" >
Look, I'm in a well!
< / div >
< / div >
2012-06-04 21:56:50 -04:00
< pre class = "prettyprint linenums" >
< div class="well well-small">
...
< /div>
2012-01-28 01:52:45 -05:00
< / pre >
2012-06-05 02:57:48 -04:00
< h2 > Close icon< / h2 >
< p > Use the generic close icon for dismissing content like modals and alerts.< / p >
2012-06-10 18:12:02 -04:00
< div class = "bs-docs-example" >
< p > < button class = "close" style = "float: none;" > × < / button > < / p >
< / div >
2012-03-27 02:36:34 -04:00
< pre class = "prettyprint linenums" > < button class="close"> & times;< /button> < / pre >
2012-06-05 02:57:48 -04:00
< p > iOS devices require an href="#" for click events if you rather use an anchor.< / p >
2012-03-27 02:36:34 -04:00
< pre class = "prettyprint linenums" > < a class="close" href="#"> & times;< /a> < / pre >
2012-06-04 23:25:57 -04:00
2012-06-05 02:57:48 -04:00
< h2 > Helper classes< / h2 >
< p > Simple, focused classes for small display or behavior tweaks.< / p >
2012-06-04 23:25:57 -04:00
2012-06-05 02:57:48 -04:00
< h4 > .pull-left< / h4 >
< p > Float an element left< / p >
2012-06-04 23:25:57 -04:00
< pre class = "prettyprint linenums" >
class="pull-left"
< / pre >
< pre class = "prettyprint linenums" >
.pull-left {
float: left;
}
< / pre >
2012-06-05 02:57:48 -04:00
< h4 > .pull-right< / h4 >
< p > Float an element right< / p >
2012-06-04 23:25:57 -04:00
< pre class = "prettyprint linenums" >
class="pull-right"
< / pre >
< pre class = "prettyprint linenums" >
.pull-right {
float: right;
}
< / pre >
2012-06-05 02:57:48 -04:00
< h4 > .muted< / h4 >
< p > Change an element's color to < code > #999< / code > < / p >
2012-06-04 23:25:57 -04:00
< pre class = "prettyprint linenums" >
class="muted"
< / pre >
< pre class = "prettyprint linenums" >
.muted {
color: #999;
}
< / pre >
2012-06-05 02:57:48 -04:00
< h4 > .clearfix< / h4 >
< p > Clear the < code > float< / code > on any element< / p >
2012-06-04 23:25:57 -04:00
< pre class = "prettyprint linenums" >
class="clearfix"
< / pre >
< pre class = "prettyprint linenums" >
.clearfix {
*zoom: 1;
& :before,
& :after {
display: table;
content: "";
}
& :after {
clear: both;
}
}
< / pre >
2012-01-28 01:52:45 -05:00
< / section >
2012-01-23 18:17:32 -05:00
<!-- Footer
2011-10-27 02:11:56 -04:00
================================================== -->
< footer class = "footer" >
2012-06-07 13:20:52 -04:00
< p class = "pull-right" > < a href = "#" > Back to top< / a > < / p >
2011-12-11 05:03:16 -05: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 02:11:56 -04:00
< / footer >
2012-01-23 17:14:16 -05:00
2012-06-08 19:35:04 -04:00
< / div >
2011-12-22 22:25:29 -05:00
2012-01-23 17:14:16 -05:00
2012-01-26 13:00:09 -05:00
<!-- Le javascript
================================================== -->
2011-12-22 22:25:29 -05:00
<!-- Placed at the end of the document so the pages load faster -->
2012-01-26 13:00:09 -05:00
< script type = "text/javascript" src = "http://platform.twitter.com/widgets.js" > < / script >
2012-01-31 16:58:28 -05:00
< script src = "assets/js/jquery.js" > < / script >
2011-12-22 22:25:29 -05:00
< script src = "assets/js/google-code-prettify/prettify.js" > < / script >
2012-01-31 16:58:28 -05:00
< script src = "assets/js/bootstrap-transition.js" > < / script >
< script src = "assets/js/bootstrap-alert.js" > < / script >
< script src = "assets/js/bootstrap-modal.js" > < / script >
< script src = "assets/js/bootstrap-dropdown.js" > < / script >
< script src = "assets/js/bootstrap-scrollspy.js" > < / script >
< script src = "assets/js/bootstrap-tab.js" > < / script >
< script src = "assets/js/bootstrap-tooltip.js" > < / script >
< script src = "assets/js/bootstrap-popover.js" > < / script >
< script src = "assets/js/bootstrap-button.js" > < / script >
< script src = "assets/js/bootstrap-collapse.js" > < / script >
< script src = "assets/js/bootstrap-carousel.js" > < / script >
< script src = "assets/js/bootstrap-typeahead.js" > < / script >
2011-12-22 22:25:29 -05:00
< script src = "assets/js/application.js" > < / script >
2012-02-01 19:38:58 -05:00
2011-10-27 02:11:56 -04:00
< / body >
< / html >
