{{_i}}Dropdown menus{{/i}}
+Dropdown menus
{{_i}}Example{{/i}}
-{{_i}}Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.{{/i}}
+Example
+Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
- <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
+ <li><a tabindex="-1" href="#">Action</a></li>
+ <li><a tabindex="-1" href="#">Another action</a></li>
+ <li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
- <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
+ <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
- {{_i}}Markup{{/i}}
-{{_i}}Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.{{/i}}
Markup
+Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
+ <li><a tabindex="-1" href="#">Action</a></li>
+ <li><a tabindex="-1" href="#">Another action</a></li>
+ <li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
- <li><a tabindex="-1" href="#">{{_i}}Separated link{{/i}}</a></li>
+ <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
- {{_i}}Options{{/i}}
-{{_i}}Align menus to the right and add include additional levels of dropdowns.{{/i}}
+Options
+Align menus to the right and add include additional levels of dropdowns.
-{{_i}}Aligning the menus{{/i}}
-{{_i}}Add .pull-right to a .dropdown-menu to right align the dropdown menu.{{/i}}
Aligning the menus
+Add .pull-right to a .dropdown-menu to right align the dropdown menu.
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> ... </ul>-
{{_i}}Sub menus on dropdowns{{/i}}
-{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.{{/i}}
Sub menus on dropdowns
+Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.
Default
Dropup
Left submenu
{{_i}}Button groups{{/i}}
+Button groups
{{_i}}Examples{{/i}}
-{{_i}}Two basic options, along with two more specific variations.{{/i}}
+Examples
+Two basic options, along with two more specific variations.
-{{_i}}Single button group{{/i}}
-{{_i}}Wrap a series of buttons with .btn in .btn-group.{{/i}}
Single button group
+Wrap a series of buttons with .btn in .btn-group.
@@ -207,8 +207,8 @@ </div>-
{{_i}}Multiple button groups{{/i}}
-{{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}
Multiple button groups
+Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
{{_i}}Vertical button groups{{/i}}
-{{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}
+Vertical button groups
+Make a set of buttons appear vertically stacked rather than horizontally.
-
{{_i}}Checkbox and radio flavors{{/i}}
-{{_i}}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 the JavaScript docs for that.{{/i}}
+Checkbox and radio flavors
+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 the JavaScript docs for that.
-{{_i}}Dropdowns in button groups{{/i}}
-{{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}
Dropdowns in button groups
+Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.
{{_i}}Button dropdown menus{{/i}}
+Button dropdown menus
{{_i}}Overview and examples{{/i}}
-{{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}
Overview and examples
+Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
- {{_i}}Action{{/i}}
+ Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
- <!-- {{_i}}dropdown menu links{{/i}} -->
+ <!-- dropdown menu links -->
</ul>
</div>
- {{_i}}Works with all button sizes{{/i}}
-{{_i}}Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.{{/i}}
Works with all button sizes
+Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.
{{_i}}Requires JavaScript{{/i}}
-{{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}
-{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.{{/i}}
+Requires JavaScript
+Button dropdowns require the Bootstrap dropdown plugin to function.
+In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.
-
{{_i}}Split button dropdowns{{/i}}
-{{_i}}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.{{/i}}
+Split button dropdowns
+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.
<div class="btn-group">
- <button class="btn">{{_i}}Action{{/i}}</button>
+ <button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
- <!-- {{_i}}dropdown menu links{{/i}} -->
+ <!-- dropdown menu links -->
</ul>
</div>
- {{_i}}Sizes{{/i}}
-{{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}
Sizes
+Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.
<div class="btn-group">
- <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
+ <button class="btn btn-mini">Action</button>
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
- <!-- {{_i}}dropdown menu links{{/i}} -->
+ <!-- dropdown menu links -->
</ul>
</div>
- {{_i}}Dropup menus{{/i}}
-{{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}
Dropup menus
+Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.
<div class="btn-group dropup">
- <button class="btn">{{_i}}Dropup{{/i}}</button>
+ <button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
- <!-- {{_i}}dropdown menu links{{/i}} -->
+ <!-- dropdown menu links -->
</ul>
</div>
@@ -603,73 +603,73 @@
================================================== -->
{{_i}}Navs{{/i}}
+Navs
{{_i}}Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.{{/i}}
Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
{{_i}}Tabs{{/i}}
-{{_i}}Note the .nav-tabs class requires the .nav base class.{{/i}}
Tabs
+Note the .nav-tabs class requires the .nav base class.
<ul class="nav nav-tabs">
<li class="active">
- <a href="#">{{_i}}Home{{/i}}</a>
+ <a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
- {{_i}}List{{/i}}
-{{_i}}Swap the tabs class for .nav-list.{{/i}}
List
+Swap the tabs class for .nav-list.
<ul class="nav nav-list">
<li class="active">
- <a href="#">{{_i}}Home{{/i}}</a>
+ <a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
- {{_i}}Pills{{/i}}
-{{_i}}Take that same HTML, but use .nav-pills instead:{{/i}}
Pills
+Take that same HTML, but use .nav-pills instead:
<ul class="nav nav-pills">
<li class="active">
- <a href="#">{{_i}}Home{{/i}}</a>
+ <a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
- {{_i}}Pills are also vertically stackable. Just add .nav-stacked.{{/i}}
Pills are also vertically stackable. Just add .nav-stacked.
@@ -678,21 +678,21 @@ </ul>-
{{_i}}Options{{/i}}
+Options
-{{_i}}Justified links{{/i}}
-{{_i}}Easily make tabs or pills equal widths of their parent with .nav-justified.{{/i}}
Justified links
+Easily make tabs or pills equal widths of their parent with .nav-justified.
@@ -705,46 +705,46 @@ </ul>-
{{_i}}Disabled state{{/i}}
-{{_i}}For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless you remove the href attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.{{/i}}
Disabled state
+For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless you remove the href attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.
<ul class="nav nav-pills">
...
- <li class="disabled"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li class="disabled"><a href="#">Home</a></li>
...
</ul>
- {{_i}}Component alignment{{/i}}
-{{_i}}To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.{{/i}}
Component alignment
+To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
-
{{_i}}Dropdowns{{/i}}
-{{_i}}Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.{{/i}}
+Dropdowns
+Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
-{{_i}}Tabs with dropdowns{{/i}}
+Tabs with dropdowns
{{_i}}Pills with dropdowns{{/i}}
+Pills with dropdowns
{{_i}}Navbar{{/i}}
+Navbar
{{_i}}Basic navbar{{/i}}
-{{_i}}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 .container, which sets the width of your site and content.{{/i}}
Basic navbar
+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 .container, which sets the width of your site and content.
<div class="navbar">
- <a class="brand" href="#">{{_i}}Title{{/i}}</a>
+ <a class="brand" href="#">Title</a>
<ul class="nav">
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
</ul>
</div>
@@ -837,49 +837,49 @@
-
{{_i}}Navbar components{{/i}}
+Navbar components
-{{_i}}Brand{{/i}}
-{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}
+Brand
+A simple link to show your brand or project name only requires an anchor tag.
-<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
+<a class="brand" href="#">Project name</a>
- {{_i}}Nav links{{/i}}
-{{_i}}Nav items are simple to add via unordered lists.{{/i}}
+Nav links
+Nav items are simple to add via unordered lists.
<ul class="nav">
<li class="active">
- <a href="#">{{_i}}Home{{/i}}</a>
+ <a href="#">Home</a>
</li>
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
</ul>
- {{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}
+You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
{{_i}}Forms{{/i}}
-{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.{{/i}}
Forms
+To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.
<form class="navbar-form pull-left">
<input type="text" class="span2">
- <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
+ <button type="submit" class="btn">Submit</button>
</form>
- {{_i}}Search form{{/i}}
-{{_i}}For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.{{/i}}
Search form
+For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.
<form class="navbar-search pull-left">
- <input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}">
+ <input type="text" class="search-query" placeholder="Search">
</form>
- {{_i}}Component alignment{{/i}}
-{{_i}}Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.{{/i}}
Component alignment
+Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
{{_i}}Using dropdowns{{/i}}
-{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.{{/i}}
+Using dropdowns
+Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
- {{_i}}Account{{/i}}
+ Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
@@ -943,28 +943,28 @@
</li>
</ul>
- {{_i}}Visit the JavaScript dropdowns documentation for more markup and information on calling dropdowns.{{/i}}
+Visit the JavaScript dropdowns documentation for more markup and information on calling dropdowns.
-{{_i}}Text{{/i}}
-{{_i}}Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.{{/i}}
Text
+Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.
-
{{_i}}Optional display variations{{/i}}
-{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.{{/i}}
Optional display variations
+Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.
Fixed to top
-{{_i}}Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
Fixed to bottom
-{{_i}}Add .navbar-fixed-bottom instead.{{/i}}
Add .navbar-fixed-bottom instead.
{{_i}}Static top navbar{{/i}}
-{{_i}}Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.{{/i}}
Static top navbar
+Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.
-
{{_i}}Responsive navbar{{/i}}
-{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
Responsive navbar
+To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
-
{{_i}}Inverted variation{{/i}}
-{{_i}}Modify the look of the navbar by adding .navbar-inverse.{{/i}}
Inverted variation
+Modify the look of the navbar by adding .navbar-inverse.
{{_i}}Breadcrumbs{{/i}}
+Breadcrumbs
{{_i}}Examples{{/i}}
-{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}
+Examples
+A single example shown as it might be displayed across multiple pages.
<ul class="breadcrumb">
- <li><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Library{{/i}}</a></li>
- <li class="active">{{_i}}Data{{/i}}</li>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Library</a></li>
+ <li class="active">Data</li>
</ul>
@@ -1199,11 +1199,11 @@
================================================== -->
{{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}
+Pagination Two options for paging through content
{{_i}}Standard pagination{{/i}}
-{{_i}}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.{{/i}}
+Standard pagination
+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.
-
@@ -1234,10 +1234,10 @@
-
@@ -2056,7 +2056,7 @@
-
{{_i}}Media heading{{/i}}
+Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
@@ -2064,7 +2064,7 @@-@@ -2095,7 +2095,7 @@{{_i}}Nested media heading{{/i}}
+Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.@@ -2072,7 +2072,7 @@@@ -2084,7 +2084,7 @@-{{_i}}Nested media heading{{/i}}
+Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.-{{_i}}Nested media heading{{/i}}
+Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.-@@ -2108,7 +2108,7 @@ <img class="media-object" data-src="holder.js/64x64"> </a> <div class="media-body"> - <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4> + <h4 class="media-heading">Media heading</h4> ... <!-- Nested media object --> @@ -2130,14 +2130,14 @@ ================================================== -->{{_i}}Media heading{{/i}}
+Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.--{{_i}}Miscellaneous{{/i}} {{_i}}Lightweight utility components{{/i}}
+Miscellaneous Lightweight utility components
{{_i}}Wells{{/i}}
-{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}
+Wells
+Use the well as a simple effect on an element to give it an inset effect.
- {{_i}}Look, I'm in a well!{{/i}} + Look, I'm in a well!@@ -2145,11 +2145,11 @@ ... </div>
-{{_i}}Optional classes{{/i}}
-{{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}
+Optional classes
+Control padding and rounded corners with two optional modifier classes.
- {{_i}}Look, I'm in a well!{{/i}} + Look, I'm in a well!@@ -2159,7 +2159,7 @@
- {{_i}}Look, I'm in a well!{{/i}} + Look, I'm in a well!@@ -2168,20 +2168,20 @@ </div>
-{{_i}}Close icon{{/i}}
-{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}
+Close icon
+Use the generic close icon for dismissing content like modals and alerts.
<button class="close">×</button>
-{{_i}}iOS devices require an href="#" for click events if you would rather use an anchor.{{/i}}
+iOS devices require an href="#" for click events if you would rather use an anchor.
<a class="close" href="#">×</a>
-{{_i}}Helper classes{{/i}}
-{{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}
+Helper classes
+Simple, focused classes for small display or behavior tweaks.
-{{_i}}.pull-left{{/i}}
-{{_i}}Float an element left{{/i}}
+.pull-left
+Float an element left
class="pull-left"
@@ -2191,8 +2191,8 @@ class="pull-left" } -{{_i}}.pull-right{{/i}}
-{{_i}}Float an element right{{/i}}
+.pull-right
+Float an element right
class="pull-right"
@@ -2202,8 +2202,8 @@ class="pull-right" } -{{_i}}.muted{{/i}}
-{{_i}}Change an element's color to
+#999{{/i}}.muted
+Change an element's color to
#999class="muted"
@@ -2213,8 +2213,8 @@ class="muted" } -{{_i}}.clearfix{{/i}}
-{{_i}}Clear the
+floaton any element{{/i}}.clearfix
+Clear the
floaton any elementclass="clearfix"
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index fde94120e3..cf99025196 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -2,8 +2,8 @@ ================================================== -->{{_i}}CSS{{/i}}
-{{_i}}Fundamental HTML elements styled and enhanced with extensible classes.{{/i}}
+CSS
+Fundamental HTML elements styled and enhanced with extensible classes.
@@ -35,11 +35,11 @@ ================================================== -->{{_i}}Global settings{{/i}}
+Global settings
{{_i}}Requires HTML5 doctype{{/i}}
-{{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}
+Requires HTML5 doctype
+Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html> <html lang="en"> @@ -47,18 +47,18 @@ </html>
-{{_i}}Typography and links{{/i}}
-{{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}
+Typography and links
+Bootstrap sets basic global display, typography, and link styles. Specifically, we:
-
-
- {{_i}}Remove
marginon the body{{/i}}
- - {{_i}}Set
background-color: white;on thebody{{/i}}
- - {{_i}}Use the
@font-family-base,@font-size-base, and@line-height-baseattributes as our typographic base{{/i}}
- - {{_i}}Set the global link color via
@link-colorand apply link underlines only on:hover{{/i}}
+ - Remove
marginon the body
+ - Set
background-color: white;on thebody
+ - Use the
@font-family-base,@font-size-base, and@line-height-baseattributes as our typographic base
+ - Set the global link color via
@link-colorand apply link underlines only on:hover
{{_i}}These styles can be found within scaffolding.less.{{/i}}
+These styles can be found within scaffolding.less.
-{{_i}}Reset via Normalize{{/i}}
-{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.{{/i}}
+Reset via Normalize
+With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher and Jonathan Neal that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.
--{{_i}}Grid system{{/i}}
+Grid system
{{_i}}Live grid example{{/i}}
-{{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}
+Live grid example
+The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
-1@@ -102,18 +102,18 @@{{_i}}Basic grid HTML{{/i}}
-{{_i}}For a simple two column layout, create a
+.rowand add the appropriate number of.span*columns. As this is a 12-column grid, each.span*spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).{{/i}}Basic grid HTML
+For a simple two column layout, create a
.rowand add the appropriate number of.span*columns. As this is a 12-column grid, each.span*spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).<div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>
-{{_i}}Given this example, we have
+.span4and.span8, making for 12 total columns and a complete row.{{/i}}Given this example, we have
-.span4and.span8, making for 12 total columns and a complete row.{{_i}}Offsetting columns{{/i}}
-{{_i}}Move columns to the right using
+.offset*classes. Each class increases the left margin of a column by a whole column. For example,.offset4moves.span4over four columns.{{/i}}Offsetting columns
+Move columns to the right using
.offset*classes. Each class increases the left margin of a column by a whole column. For example,.offset4moves.span4over four columns.4@@ -135,17 +135,17 @@ -{{_i}}Nesting columns{{/i}}
-{{_i}}To nest your content with the default grid, add a new
+.rowand set of.span*columns within an existing.span*column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}Nesting columns
+To nest your content with the default grid, add a new
.rowand set of.span*columns within an existing.span*column. Nested rows should include a set of columns that add up to the number of columns of its parent.- {{_i}}Level 1 column{{/i}} + Level 1 column@@ -153,10 +153,10 @@- {{_i}}Level 2{{/i}} + Level 2- {{_i}}Level 2{{/i}} + Level 2<div class="row"> <div class="span9"> - {{_i}}Level 1 column{{/i}} + Level 1 column <div class="row"> - <div class="span6">{{_i}}Level 2{{/i}}</div> - <div class="span3">{{_i}}Level 2{{/i}}</div> + <div class="span6">Level 2</div> + <div class="span3">Level 2</div> </div> </div> </div> @@ -170,24 +170,24 @@ ================================================== -->-{{! Headings }} -{{_i}}Typography{{/i}}
+Typography
{{_i}}Headings{{/i}}
-{{_i}}All HTML headings,
+<h1>through<h6>are available.{{/i}}Headings
+All HTML headings,
<h1>through<h6>are available.-{{! Body copy }} -h1. {{_i}}Heading 1{{/i}}
-h2. {{_i}}Heading 2{{/i}}
-h3. {{_i}}Heading 3{{/i}}
-h4. {{_i}}Heading 4{{/i}}
-h5. {{_i}}Heading 5{{/i}}
-h6. {{_i}}Heading 6{{/i}}
+h1. Heading 1
+h2. Heading 2
+h3. Heading 3
+h4. Heading 4
+h5. Heading 5
+h6. Heading 6
{{_i}}Body copy{{/i}}
-{{_i}}Bootstrap's global default
+font-sizeis 14px, with aline-heightof 20px. This is applied to the<body>and all paragraphs. In addition,<p>(paragraphs) receive a bottom margin of half their line-height (10px by default).{{/i}}Body copy
+Bootstrap's global default
font-sizeis 14px, with aline-heightof 20px. This is applied to the<body>and all paragraphs. In addition,<p>(paragraphs) receive a bottom margin of half their line-height (10px by default).Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
@@ -196,27 +196,27 @@<p>...</p>
{{! Body copy .lead }} -{{_i}}Lead body copy{{/i}}
-{{_i}}Make a paragraph stand out by adding
+.lead.{{/i}}Lead body copy
+Make a paragraph stand out by adding
.lead.Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
{{! Using LESS }} -{{_i}}Built with Less{{/i}}
-{{_i}}The typographic scale is based on two LESS variables in variables.less:
+@font-size-baseand@line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}Built with Less
+The typographic scale is based on two LESS variables in variables.less:
@font-size-baseand@line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.
{{! Emphasis }} -{{_i}}Emphasis{{/i}}
-{{_i}}Make use of HTML's default emphasis tags with lightweight styles.{{/i}}
+Emphasis
+Make use of HTML's default emphasis tags with lightweight styles.
-<small>{{_i}}For de-emphasizing inline or blocks of text, use the small tag.{{/i}}
+For de-emphasizing inline or blocks of text, use the small tag.
@@ -226,24 +226,24 @@ </p> -This line of text is meant to be treated as fine print.
{{_i}}Bold{{/i}}
-{{_i}}For emphasizing a snippet of text with a heavier font-weight.{{/i}}
+Bold
+For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
-{{_i}}Italics{{/i}}
-{{_i}}For emphasizing a snippet of text with italics.{{/i}}
+Italics
+For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
-{{_i}}Heads up!{{/i}} {{_i}}Feel free to use
+<b>and<i>in HTML5.<b>is meant to highlight words or phrases without conveying additional importance while<i>is mostly for voice, technical terms, etc.{{/i}}Heads up! Feel free to use
-<b>and<i>in HTML5.<b>is meant to highlight words or phrases without conveying additional importance while<i>is mostly for voice, technical terms, etc.{{_i}}Emphasis classes{{/i}}
-{{_i}}Convey meaning through color with a handful of emphasis utility classes.{{/i}}
+Emphasis classes
+Convey meaning through color with a handful of emphasis utility classes.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
@@ -264,20 +264,20 @@ {{! Abbreviations }} -{{_i}}Abbreviations{{/i}}
-{{_i}}Stylized implementation of HTML's
+<abbr>element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with atitleattribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}Abbreviations
+Stylized implementation of HTML's
<abbr>element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with atitleattribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
-<abbr>{{_i}}For expanded text on long hover of an abbreviation, include the
+titleattribute.{{/i}}For expanded text on long hover of an abbreviation, include the
titleattribute.-{{_i}}An abbreviation of the word attribute is attr.{{/i}}
+An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>
-<abbr class="initialism">{{_i}}Add
+.initialismto an abbreviation for a slightly smaller font-size.{{/i}}Add
.initialismto an abbreviation for a slightly smaller font-size.-{{_i}}HTML is the best thing since sliced bread.{{/i}}
+HTML is the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
@@ -286,11 +286,11 @@ {{! Addresses }} -{{_i}}Addresses{{/i}}
-{{_i}}Present contact information for the nearest ancestor or the entire body of work.{{/i}}
+Addresses
+Present contact information for the nearest ancestor or the entire body of work.
-<address>{{_i}}Preserve formatting by ending all lines with
+<br>.{{/i}}Preserve formatting by ending all lines with
<br>.Twitter, Inc.
@@ -299,8 +299,8 @@ P: (123) 456-7890 - {{_i}}Full Name{{/i}}
- {{_i}}first.last@example.com{{/i}} + Full Name
+ first.last@example.com@@ -312,8 +312,8 @@ </address> <address> - <strong>{{_i}}Full Name{{/i}}</strong><br> - <a href="mailto:#">{{_i}}first.last@example.com{{/i}}</a> + <strong>Full Name</strong><br> + <a href="mailto:#">first.last@example.com</a> </address>@@ -322,11 +322,11 @@ {{! Blockquotes }} -{{_i}}Blockquotes{{/i}}
-{{_i}}For quoting blocks of content from another source within your document.{{/i}}
+Blockquotes
+For quoting blocks of content from another source within your document.
-{{_i}}Default blockquote{{/i}}
-{{_i}}Wrap
+<blockquote>around any HTML as the quote. For straight quotes we recommend a<p>.{{/i}}Default blockquote
+Wrap
<blockquote>around any HTML as the quote. For straight quotes we recommend a<p>.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
@@ -338,30 +338,30 @@ </blockquote> -{{_i}}Blockquote options{{/i}}
-{{_i}}Style and content changes for simple variations on a standard blockquote.{{/i}}
+Blockquote options
+Style and content changes for simple variations on a standard blockquote.
-{{_i}}Naming a source{{/i}}
-{{_i}}Add
+<small>tag for identifying the source. Wrap the name of the source work in<cite>.{{/i}}Naming a source
+Add
<small>tag for identifying the source. Wrap the name of the source work in<cite>.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- {{_i}}Someone famous in Source Title{{/i}} + Someone famous in Source Title<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <small>{{_i}}Someone famous <cite title="Source Title">Source Title</cite>{{/i}}</small> + <small>Someone famous <cite title="Source Title">Source Title</cite></small> </blockquote>-{{_i}}Alternate displays{{/i}}
-{{_i}}Use
+.pull-rightfor a floated, right-aligned blockquote.{{/i}}Alternate displays
+Use
.pull-rightfor a floated, right-aligned blockquote.@@ -375,10 +375,10 @@ -{{_i}}Lists{{/i}}
+Lists
-{{_i}}Unordered{{/i}}
-{{_i}}A list of items in which the order does not explicitly matter.{{/i}}
+Unordered
+A list of items in which the order does not explicitly matter.
- Lorem ipsum dolor sit amet @@ -404,8 +404,8 @@ </ul> -
- Lorem ipsum dolor sit amet @@ -424,8 +424,8 @@ </ol> -
- Lorem ipsum dolor sit amet @@ -451,8 +451,8 @@ </ul> -
- Lorem ipsum @@ -466,12 +466,12 @@ </ul> -
- {{_i}}Description lists{{/i}} -
- {{_i}}A description list is perfect for defining terms.{{/i}} +
- Description lists +
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus. @@ -486,12 +486,12 @@ </dl> -
- {{_i}}Description lists{{/i}} -
- {{_i}}A description list is perfect for defining terms.{{/i}} +
- Description lists +
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus. @@ -508,8 +508,8 @@ </dl>
- {{_i}}Add
.form-horizontalto the form{{/i}}
- - {{_i}}Wrap labels and controls in
.control-group{{/i}}
- - {{_i}}Add
.control-labelto the label{{/i}}
- - {{_i}}Wrap any associated controls in
.controlsfor proper alignment{{/i}}
+ - Add
.form-horizontalto the form
+ - Wrap labels and controls in
.control-group
+ - Add
.control-labelto the label
+ - Wrap any associated controls in
.controlsfor proper alignment
{{_i}}Ordered{{/i}}
-{{_i}}A list of items in which the order does explicitly matter.{{/i}}
+Ordered
+A list of items in which the order does explicitly matter.
{{_i}}Unstyled{{/i}}
-{{_i}}Remove the default
+list-styleand left padding on list items (immediate children only).{{/i}}Unstyled
+Remove the default
list-styleand left padding on list items (immediate children only).{{_i}}Inline{{/i}}
-{{_i}}Place all list items on a single line with
+inline-blockand some light padding.{{/i}}Inline
+Place all list items on a single line with
inline-blockand some light padding.{{_i}}Description{{/i}}
-{{_i}}A list of terms with their associated descriptions.{{/i}}
+Description
+A list of terms with their associated descriptions.
-
-
{{_i}}Horizontal description{{/i}}
-{{_i}}Make terms and descriptions in
+<dl>line up side-by-side.{{/i}}Horizontal description
+Make terms and descriptions in
<dl>line up side-by-side.-
-
- {{_i}}Heads up!{{/i}} - {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix
@@ -519,7 +519,7 @@ ================================================== -->text-overflow. In narrower viewports, they will change to the default stacked layout.{{/i}} + Heads up! + Horizontal description lists will truncate terms that are too long to fit in the left column fixtext-overflow. In narrower viewports, they will change to the default stacked layout.-{{_i}}Code{{/i}}
+Code
Inline
@@ -528,21 +528,21 @@ For example,<section>should be wrapped as inline.-{{_i}}For example, <code><section></code> should be wrapped as inline.{{/i}} +For example, <code><section></code> should be wrapped as inline.Basic block
-{{_i}}Use
+<pre>for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}Use
<pre>for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.-<p>{{_i}}Sample text here...{{/i}}</p>+<p>Sample text here...</p>
<pre> - <p>{{_i}}Sample text here...{{/i}}</p> + <p>Sample text here...</p> </pre>-{{_i}}Heads up!{{/i}} {{_i}}Be sure to keep code within
-<pre>tags as close to the left as possible; it will render all tabs.{{/i}}{{_i}}You may optionally add the
+.pre-scrollableclass which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}Heads up! Be sure to keep code within
+<pre>tags as close to the left as possible; it will render all tabs.You may optionally add the
@@ -551,19 +551,19 @@ ================================================== -->.pre-scrollableclass which will set a max-height of 350px and provide a y-axis scrollbar.--{{_i}}Tables{{/i}}
+Tables
{{_i}}Default styles{{/i}}
-{{_i}}For basic styling—light padding and only horizontal dividers—add the base class
+.tableto any<table>.{{/i}}Default styles
+For basic styling—light padding and only horizontal dividers—add the base class
.tableto any<table>.# -{{_i}}First Name{{/i}} -{{_i}}Last Name{{/i}} -{{_i}}Username{{/i}} +First Name +Last Name +Username
-{{_i}}Optional classes{{/i}}
-{{_i}}Add any of the following classes to the
+.tablebase class.{{/i}}Optional classes
+Add any of the following classes to the
-.tablebase class.
-{{_i}}.table-striped{{/i}}{{_i}}Adds zebra-striping to any table row within the
+<tbody>via the:nth-childCSS selector (not available in IE8).{{/i}}
+.table-stripedAdds zebra-striping to any table row within the
<tbody>via the:nth-childCSS selector (not available in IE8).# -{{_i}}First Name{{/i}} -{{_i}}Last Name{{/i}} -{{_i}}Username{{/i}} +First Name +Last Name +Username
-{{_i}}.table-bordered{{/i}}{{_i}}Add borders and rounded corners to the table.{{/i}}
+
+.table-borderedAdd borders and rounded corners to the table.
# -{{_i}}First Name{{/i}} -{{_i}}Last Name{{/i}} -{{_i}}Username{{/i}} +First Name +Last Name +Username
-{{_i}}.table-hover{{/i}}{{_i}}Enable a hover state on table rows within a
+<tbody>.{{/i}}
+.table-hoverEnable a hover state on table rows within a
<tbody>.# -{{_i}}First Name{{/i}} -{{_i}}Last Name{{/i}} -{{_i}}Username{{/i}} +First Name +Last Name +Username
-{{_i}}.table-condensed{{/i}}{{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}
+
+.table-condensedMakes tables more compact by cutting cell padding in half.
# -{{_i}}First Name{{/i}} -{{_i}}Last Name{{/i}} -{{_i}}Username{{/i}} +First Name +Last Name +Username
-{{_i}}Optional row classes{{/i}}
-{{_i}}Use contextual classes to color table rows.{{/i}}
+Optional row classes
+Use contextual classes to color table rows.
@@ -812,9 +812,9 @@@@ -776,8 +776,8 @@ - @@ -785,25 +785,25 @@{{_i}}Class{{/i}} -{{_i}}Description{{/i}} +Class +Description .success{{_i}}Indicates a successful or positive action.{{/i}} +Indicates a successful or positive action. .error{{_i}}Indicates a dangerous or potentially negative action.{{/i}} +Indicates a dangerous or potentially negative action. .warning{{_i}}Indicates a warning that might need attention.{{/i}} +Indicates a warning that might need attention. .info{{_i}}Used as an alternative to the default styles.{{/i}} +Used as an alternative to the default styles. # -{{_i}}Product{{/i}} -{{_i}}Payment Taken{{/i}} -{{_i}}Status{{/i}} +Product +Payment Taken +Status
-{{_i}}Supported table markup{{/i}}
-{{_i}}List of supported table HTML elements and how they should be used.{{/i}}
+Supported table markup
+List of supported table HTML elements and how they should be used.
@@ -869,8 +869,8 @@ - @@ -879,7 +879,7 @@{{_i}}Tag{{/i}} -{{_i}}Description{{/i}} +Tag +Description <table>- {{_i}}Wrapping element for displaying data in a tabular format{{/i}} + Wrapping element for displaying data in a tabular format @@ -887,7 +887,7 @@ <thead>- {{_i}}Container element for table header rows ( <tr>) to label table columns{{/i}} + Container element for table header rows (<tr>) to label table columns@@ -895,7 +895,7 @@ <tbody>- {{_i}}Container element for table rows ( <tr>) in the body of the table{{/i}} + Container element for table rows (<tr>) in the body of the table@@ -903,7 +903,7 @@ <tr>- {{_i}}Container element for a set of table cells ( <td>or<th>) that appears on a single row{{/i}} + Container element for a set of table cells (<td>or<th>) that appears on a single row@@ -911,7 +911,7 @@ <td>- {{_i}}Default table cell{{/i}} + Default table cell @@ -919,8 +919,8 @@ <th>- {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
- {{_i}}Must be used within a<thead>{{/i}} + Special table cell for column (or row, depending on scope and placement) labels
+ Must be used within a<thead>@@ -928,7 +928,7 @@ @@ -959,38 +959,38 @@ ================================================== --><caption>- {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} + Description or summary of what the table holds, especially useful for screen readers --{{_i}}Forms{{/i}}
+Forms
{{_i}}Default styles{{/i}}
-{{_i}}Individual form controls automatically receive some global styling. By default, inputs are set to
+width: 100%;.{{/i}}Default styles
+Individual form controls automatically receive some global styling. By default, inputs are set to
{{! /example }}width: 100%;.<form> <fieldset> - <legend>{{_i}}Legend{{/i}}</legend> - <label>{{_i}}Label name{{/i}}</label> - <input type="text" placeholder="{{_i}}Type something…{{/i}}"> + <legend>Legend</legend> + <label>Label name</label> + <input type="text" placeholder="Type something…"> <span class="help-block">Example block-level help text here.</span> <div class="checkbox"> <label> - <input type="checkbox"> {{_i}}Check me out{{/i}} + <input type="checkbox"> Check me out </label> </div> - <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> + <button type="submit" class="btn">Submit</button> </fieldset> </form>@@ -999,97 +999,97 @@
-{{_i}}Optional layouts{{/i}}
-{{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}
+Optional layouts
+Included with Bootstrap are three optional form layouts for common use cases.
-{{_i}}Search form{{/i}}
-{{_i}}Add
+.form-searchto the form and.search-queryto the<input>for an extra-rounded text input.{{/i}}Search form
+Add
{{! /example }}.form-searchto the form and.search-queryto the<input>for an extra-rounded text input.<form class="form-search"> <input type="text" class="span3 search-query"> - <button type="submit" class="btn">{{_i}}Search{{/i}}</button> + <button type="submit" class="btn">Search</button> </form>-{{_i}}Inline form{{/i}}
-{{_i}}Add
+.form-inlinefor left-aligned labels and inline-block controls for a compact layout.{{/i}}Inline form
+Add
{{! /example }}.form-inlinefor left-aligned labels and inline-block controls for a compact layout.<form class="form-inline"> - <input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"> - <input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"> + <input type="text" class="span3" placeholder="Email"> + <input type="password" class="span3" placeholder="Password"> <div class="checkbox"> <label> - <input type="checkbox"> {{_i}}Remember me{{/i}} + <input type="checkbox"> Remember me </label> </div> - <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> + <button type="submit" class="btn">Sign in</button> </form>-{{_i}}Horizontal form{{/i}}
-{{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}
+Horizontal form
+Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:
-
-
<form class="form-horizontal"> <div class="control-group"> - <label class="control-label" for="inputEmail">{{_i}}Email{{/i}}</label> + <label class="control-label" for="inputEmail">Email</label> <div class="controls"> - <input type="text" id="inputEmail" placeholder="{{_i}}Email{{/i}}"> + <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> - <label class="control-label" for="inputPassword">{{_i}}Password{{/i}}</label> + <label class="control-label" for="inputPassword">Password</label> <div class="controls"> - <input type="password" id="inputPassword" placeholder="{{_i}}Password{{/i}}"> + <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> - <input type="checkbox"> {{_i}}Remember me{{/i}} + <input type="checkbox"> Remember me </label> - <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> + <button type="submit" class="btn">Sign in</button> </div> </div> </form> @@ -1099,12 +1099,12 @@@@ -1112,8 +1112,8 @@ <input type="text" placeholder="Text input"> -
-{{_i}}Supported form controls{{/i}}
-{{_i}}Examples of standard form controls supported in an example form layout.{{/i}}
+Supported form controls
+Examples of standard form controls supported in an example form layout.
-{{_i}}Inputs{{/i}}
-{{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}
-{{_i}}Requires the use of a specified
+typeat all times.{{/i}}Inputs
+Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
+Requires the use of a specified
typeat all times.{{_i}}Textarea{{/i}}
-{{_i}}Form control which supports multiple lines of text. Change
+rowsattribute as necessary.{{/i}}Textarea
+Form control which supports multiple lines of text. Change
@@ -1121,42 +1121,42 @@ <textarea rows="3"></textarea> -rowsattribute as necessary.{{_i}}Checkboxes and radios{{/i}}
-{{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}
-{{_i}}Default (stacked){{/i}}
+Checkboxes and radios
+Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
+Default (stacked)
<label class="checkbox"> <input type="checkbox" value=""> - {{_i}}Option one is this and that—be sure to include why it's great{{/i}} + Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> - {{_i}}Option one is this and that—be sure to include why it's great{{/i}} + Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> - {{_i}}Option two can be something else and selecting it will deselect option one{{/i}} + Option two can be something else and selecting it will deselect option one </label>-{{_i}}Inline checkboxes{{/i}}
-{{_i}}Add the
+.inlineclass to a series of checkboxes or radios for controls appear on the same line.{{/i}}Inline checkboxes
+Add the
.inlineclass to a series of checkboxes or radios for controls appear on the same line. - {{_i}}Remove
-
{{_i}}Options{{/i}}
+Options
-{{_i}}Disabled and active states{{/i}}
-{{_i}}Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.{{/i}}
Disabled and active states
+Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.
-
@@ -1260,7 +1260,7 @@
</ul>
</div>
-
{{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}
+You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.
<div class="pagination"> <ul> @@ -1271,8 +1271,8 @@ </div>-
{{_i}}Sizes{{/i}}
-{{_i}}Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.{{/i}}
Sizes
+Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.
-
@@ -1342,8 +1342,8 @@
</div>
-
{{_i}}Alignment{{/i}}
-{{_i}}Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}
Alignment
+Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.
-
@@ -1385,55 +1385,55 @@
-
{{_i}}Pager{{/i}}
-{{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}
+Pager
+Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.
-{{_i}}Default example{{/i}}
-{{_i}}By default, the pager centers links.{{/i}}
+Default example
+By default, the pager centers links.
<ul class="pager">
- <li><a href="#">{{_i}}Previous{{/i}}</a></li>
- <li><a href="#">{{_i}}Next{{/i}}</a></li>
+ <li><a href="#">Previous</a></li>
+ <li><a href="#">Next</a></li>
</ul>
- {{_i}}Aligned links{{/i}}
-{{_i}}Alternatively, you can align each link to the sides:{{/i}}
+Aligned links
+Alternatively, you can align each link to the sides:
<ul class="pager">
<li class="previous">
- <a href="#">{{_i}}← Older{{/i}}</a>
+ <a href="#">← Older</a>
</li>
<li class="next">
- <a href="#">{{_i}}Newer →{{/i}}</a>
+ <a href="#">Newer →</a>
</li>
</ul>
- {{_i}}Optional disabled state{{/i}}
-{{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}
Optional disabled state
+Pager links also use the general .disabled utility class from the pagination.
<ul class="pager">
<li class="previous disabled">
- <a href="#">{{_i}}← Older{{/i}}</a>
+ <a href="#">← Older</a>
</li>
...
</ul>
@@ -1447,81 +1447,81 @@
================================================== -->
- {{_i}}Labels and badges{{/i}}
+ Labels and badges
- {{_i}}Labels{{/i}}
+ Labels
- {{_i}}Labels{{/i}}
- {{_i}}Markup{{/i}}
+ Labels
+ Markup
- {{_i}}Default{{/i}}
+ Default
- <span class="label">{{_i}}Default{{/i}}</span>
+ <span class="label">Default</span>
- {{_i}}Success{{/i}}
+ Success
- <span class="label label-success">{{_i}}Success{{/i}}</span>
+ <span class="label label-success">Success</span>
- {{_i}}Warning{{/i}}
+ Warning
- <span class="label label-warning">{{_i}}Warning{{/i}}</span>
+ <span class="label label-warning">Warning</span>
- {{_i}}Danger{{/i}}
+ Danger
- <span class="label label-danger">{{_i}}Danger{{/i}}</span>
+ <span class="label label-danger">Danger</span>
- {{_i}}Info{{/i}}
+ Info
- <span class="label label-info">{{_i}}Info{{/i}}</span>
+ <span class="label label-info">Info</span>
- {{_i}}Inverse{{/i}}
+ Inverse
- <span class="label label-inverse">{{_i}}Inverse{{/i}}</span>
+ <span class="label label-inverse">Inverse</span>
- {{_i}}Badges{{/i}}
+ Badges
- {{_i}}Name{{/i}}
- {{_i}}Example{{/i}}
- {{_i}}Markup{{/i}}
+ Name
+ Example
+ Markup
- {{_i}}Default{{/i}}
+ Default
1
@@ -1532,7 +1532,7 @@
- {{_i}}Success{{/i}}
+ Success
2
@@ -1543,7 +1543,7 @@
- {{_i}}Warning{{/i}}
+ Warning
4
@@ -1554,7 +1554,7 @@
- {{_i}}Important{{/i}}
+ Important
6
@@ -1565,7 +1565,7 @@
- {{_i}}Info{{/i}}
+ Info
8
@@ -1576,7 +1576,7 @@
- {{_i}}Inverse{{/i}}
+ Inverse
10
@@ -1588,8 +1588,8 @@
- {{_i}}Easily collapsible{{/i}}
- {{_i}}For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.{{/i}}
+ Easily collapsible
+ For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.
@@ -1599,40 +1599,40 @@
================================================== -->
- {{_i}}Typographic components{{/i}}
+ Typographic components
- {{_i}}Hero unit{{/i}}
- {{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}
+ Hero unit
+ A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
- {{_i}}Hello, world!{{/i}}
- {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}
-
+ Hello, world!
+ This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
+
<div class="hero-unit">
- <h1>{{_i}}Heading{{/i}}</h1>
- <p>{{_i}}Tagline{{/i}}</p>
+ <h1>Heading</h1>
+ <p>Tagline</p>
<p>
<a class="btn btn-primary btn-large">
- {{_i}}Learn more{{/i}}
+ Learn more
</a>
</p>
</div>
- {{_i}}Page header{{/i}}
- {{_i}}A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}
+ Page header
+ A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
- {{_i}}Example page header{{/i}} {{_i}}Subtext for header{{/i}}
+ Example page header Subtext for header
<div class="page-header">
- <h1>{{_i}}Example page header{{/i}} <small>{{_i}}Subtext for header{{/i}}</small></h1>
+ <h1>Example page header <small>Subtext for header</small></h1>
</div>
@@ -1644,11 +1644,11 @@
================================================== -->
- {{_i}}Thumbnails{{/i}} {{_i}}Grids of images, videos, text, and more{{/i}}
+ Thumbnails Grids of images, videos, text, and more
- {{_i}}Default thumbnails{{/i}}
- {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}
+ Default thumbnails
+ By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
@@ -1684,17 +1684,17 @@
</div>
- {{_i}}Custom content thumbnails{{/i}}
- {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}
+ Custom content thumbnails
+ With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
![]()
- {{_i}}Thumbnail label{{/i}}
+ Thumbnail label
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.
-
+
@@ -1702,9 +1702,9 @@
![]()
- {{_i}}Thumbnail label{{/i}}
+ Thumbnail label
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.
-
+
@@ -1712,9 +1712,9 @@
![]()
- {{_i}}Thumbnail label{{/i}}
+ Thumbnail label
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.
-
+
@@ -1725,8 +1725,8 @@
<div class="span4">
<div class="thumbnail">
<img data-src="holder.js/300x200" alt="">
- <h3>{{_i}}Thumbnail label{{/i}}</h3>
- <p>{{_i}}Thumbnail caption...{{/i}}</p>
+ <h3>Thumbnail label</h3>
+ <p>Thumbnail caption...</p>
</div>
</div>
...
@@ -1742,51 +1742,51 @@
================================================== -->
- {{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}
+ Alerts Styles for success, warning, and error messages
- {{_i}}Default alert{{/i}}
- {{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}
+ Default alert
+ Wrap any text and an optional dismiss button in .alert for a basic warning alert message.
- {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}}
+ Warning! Best check yo self, you're not looking too good.
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
- <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
+ <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
- {{_i}}Dismiss buttons{{/i}}
- {{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}
+ Dismiss buttons
+ Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.
<a href="#" class="close" data-dismiss="alert">×</a>
- {{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}
+ Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.
<button type="button" class="close" data-dismiss="alert">×</button>
- {{_i}}Dismiss alerts via JavaScript{{/i}}
- {{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}
+ Dismiss alerts via JavaScript
+ Use the alerts jQuery plugin for quick and easy dismissal of alerts.
- {{_i}}Options{{/i}}
- {{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}
+ Options
+ For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.
- {{_i}}Warning!{{/i}}
- {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+ Warning!
+ Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="alert alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
- <h4>{{_i}}Warning!{{/i}}</h4>
- {{_i}}Best check yo self, you're not...{{/i}}
+ <h4>Warning!</h4>
+ Best check yo self, you're not...
</div>
@@ -1794,14 +1794,14 @@
- {{_i}}Contextual alternatives{{/i}}
- {{_i}}Add optional classes to change an alert's connotation.{{/i}}
+ Contextual alternatives
+ Add optional classes to change an alert's connotation.
- {{_i}}Error or danger{{/i}}
+ Error or danger
- {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}}
+ Oh snap! Change a few things up and try submitting again.
@@ -1810,11 +1810,11 @@
</div>
- {{_i}}Success{{/i}}
+ Success
- {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}}
+ Well done! You successfully read this important alert message.
@@ -1823,11 +1823,11 @@
</div>
- {{_i}}Information{{/i}}
+ Information
- {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}}
+ Heads up! This alert needs your attention, but it's not super important.
@@ -1845,13 +1845,13 @@
================================================== -->
- {{_i}}Progress bars{{/i}} {{_i}}For loading, redirecting, or action status{{/i}}
+ Progress bars For loading, redirecting, or action status
- {{_i}}Examples and markup{{/i}}
+ Examples and markup
- {{_i}}Basic{{/i}}
- {{_i}}Default progress bar with a vertical gradient.{{/i}}
+ Basic
+ Default progress bar with a vertical gradient.
@@ -1863,8 +1863,8 @@
</div>
- {{_i}}Striped{{/i}}
- {{_i}}Uses a gradient to create a striped effect. Not available in IE8.{{/i}}
+ Striped
+ Uses a gradient to create a striped effect. Not available in IE8.
@@ -1876,8 +1876,8 @@
</div>
- {{_i}}Animated{{/i}}
- {{_i}}Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.{{/i}}
+ Animated
+ Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.
@@ -1910,10 +1910,10 @@
- {{_i}}Options{{/i}}
+ Options
- {{_i}}Additional colors{{/i}}
- {{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}
+ Additional colors
+ Progress bars use some of the same button and alert classes for consistent styles.
@@ -1943,8 +1943,8 @@
</div>
- {{_i}}Striped bars{{/i}}
- {{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}
+ Striped bars
+ Similar to the solid colors, we have varied striped progress bars.
@@ -1978,9 +1978,9 @@
- {{_i}}Browser support{{/i}}
- {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.{{/i}}
- {{_i}}Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.{{/i}}
+ Browser support
+ Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.
+ Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.
@@ -1991,19 +1991,19 @@
================================================== -->
- {{_i}}Media object{{/i}}
+ Media object
- {{_i}}Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.{{/i}}
+ Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
- {{_i}}Default example{{/i}}
- {{_i}}The default media allow to float a media object (images, video, audio) to the left or right of a content block.{{/i}}
+ Default example
+ The default media allow to float a media object (images, video, audio) to the left or right of a content block.
![]()
- {{_i}}Media heading{{/i}}
+ Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
@@ -2012,14 +2012,14 @@
![]()
- {{_i}}Media heading{{/i}}
+ Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
![]()
- {{_i}}Media heading{{/i}}
+ Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
@@ -2032,7 +2032,7 @@
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
- <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
+ <h4 class="media-heading">Media heading</h4>
...
<!-- Nested media object -->
@@ -2047,8 +2047,8 @@
- {{_i}}Media list{{/i}}
- {{_i}}With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).{{/i}}
+ Media list
+ With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).