kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

.bs-docs-example to .bs-example

This commit is contained in:
Mark Otto 2013-05-08 22:56:29 -07:00
parent ac28ad81d0
commit 09c3a4b3bc
5 changed files with 206 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
docs/assets/css/docs.css
View File

@ -211,7 +211,7 @@ body {
-------------------------------------------------- */
/* Base class */
.bs-docs-example {
.bs-example {
position: relative;
padding: 39px 14px 14px;
margin-bottom: -1px;
@ -220,7 +220,7 @@ body {
border-top-right-radius: 4px;
}
/* Echo out a label for the example */
.bs-docs-example:after {
.bs-example:after {
content: "Example";
position: absolute;
top: -1px;
@ -236,56 +236,56 @@ body {
}
/* Tweak display of the examples */
.bs-docs-example + .prettyprint,
.bs-docs-example + .highlight {
.bs-example + .prettyprint,
.bs-example + .highlight {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* Tweak content of examples for optimum awesome */
.bs-docs-example > p:last-child,
.bs-docs-example > ul:last-child,
.bs-docs-example > ol:last-child,
.bs-docs-example > blockquote:last-child,
.bs-docs-example > input:last-child,
.bs-docs-example > select:last-child,
.bs-docs-example > textarea:last-child,
.bs-docs-example > .table:last-child,
.bs-docs-example > .jumbotron:last-child,
.bs-docs-example > .alert:last-child,
.bs-docs-example > .panel:last-child,
.bs-docs-example > .list-group:last-child,
.bs-docs-example > .well:last-child {
.bs-example > p:last-child,
.bs-example > ul:last-child,
.bs-example > ol:last-child,
.bs-example > blockquote:last-child,
.bs-example > input:last-child,
.bs-example > select:last-child,
.bs-example > textarea:last-child,
.bs-example > .table:last-child,
.bs-example > .jumbotron:last-child,
.bs-example > .alert:last-child,
.bs-example > .panel:last-child,
.bs-example > .list-group:last-child,
.bs-example > .well:last-child {
margin-bottom: 0;
}
/* Typography */
.bs-docs-example-type .table td {
.bs-example-type .table td {
color: #999;
vertical-align: middle;
border-color: ;
}
.bs-docs-example-type .table td,
.bs-docs-example-type .table th {
.bs-example-type .table td,
.bs-example-type .table th {
padding: 15px 0;
border-color: #eee;
}
.bs-docs-example-type .table tr:first-child td,
.bs-docs-example-type .table tr:first-child th {
.bs-example-type .table tr:first-child td,
.bs-example-type .table tr:first-child th {
border-top: 0;
}
.bs-docs-example-type h1,
.bs-docs-example-type h2,
.bs-docs-example-type h3,
.bs-docs-example-type h4,
.bs-docs-example-type h5,
.bs-docs-example-type h6 {
.bs-example-type h1,
.bs-example-type h2,
.bs-example-type h3,
.bs-example-type h4,
.bs-example-type h5,
.bs-example-type h6 {
margin: 0;
}
/* List groups */
.bs-docs-example > .list-group {
.bs-example > .list-group {
max-width: 400px;
}
@ -331,10 +331,10 @@ body {
}
/* Example modals */
.bs-docs-example-modal {
.bs-example-modal {
background-color: #f5f5f5;
}
.bs-docs-example-modal .modal {
.bs-example-modal .modal {
position: relative;
top: auto;
right: auto;
@ -343,29 +343,29 @@ body {
z-index: 1;
display: block;
}
.bs-docs-example-modal .modal-dialog {
.bs-example-modal .modal-dialog {
left: auto;
margin-left: auto;
margin-right: auto;
}
/* Example dropdowns */
.bs-docs-example > .dropdown > .dropdown-menu,
.bs-docs-example-submenu > .pull-left > .dropup > .dropdown-menu,
.bs-docs-example-submenu > .pull-left > .dropdown > .dropdown-menu {
.bs-example > .dropdown > .dropdown-menu,
.bs-example-submenu > .pull-left > .dropup > .dropdown-menu,
.bs-example-submenu > .pull-left > .dropdown > .dropdown-menu {
position: static;
display: block;
margin-bottom: 5px;
}
.bs-docs-example-submenu {
.bs-example-submenu {
min-height: 230px;
}
.bs-docs-example-submenu > .pull-left + .pull-left {
.bs-example-submenu > .pull-left + .pull-left {
margin-left: 20px;
}
/* Example tabbable tabs */
.bs-docs-example-tabs .nav-tabs {
.bs-example-tabs .nav-tabs {
margin-bottom: 15px;
}
@ -381,11 +381,11 @@ body {
}
/* Popovers */
.bs-docs-example-popover {
.bs-example-popover {
padding-bottom: 24px;
background-color: #f9f9f9;
}
.bs-docs-example-popover .popover {
.bs-example-popover .popover {
position: relative;
display: block;
float: left;
@ -398,10 +398,10 @@ body {
/* Example templates
-------------------------------------------------- */
.bs-docs-examples h4 {
.bs-examples h4 {
margin-bottom: 5px;
}
.bs-docs-examples p {
.bs-examples p {
margin-bottom: 20px;
}
@ -629,7 +629,7 @@ input.focused {
/* Hide code snippets on mobile devices */
@media screen and (max-width: 480px) {
.bs-docs-example {
.bs-example {
border-radius: 4px;
}
.highlight {

166
docs/components.html
View File

@ -204,7 +204,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h4>Buttons</h4>
<h5>Button group in a button toolbar</h5>
<div class="bs-docs-example">
<div class="bs-example">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left"></span></a>
@ -213,7 +213,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify"></span></a>
</div>
</div>
</div><!-- /bs-docs-example -->
</div><!-- /bs-example -->
{% highlight html %}
<div class="btn-toolbar">
<div class="btn-group">
@ -231,7 +231,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</div>
<h5>Dropdown in a button group</h5>
<div class="bs-docs-example">
<div class="bs-example">
<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="glyphicon glyphicon-user"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
@ -243,7 +243,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<li><a href="#"><i class="glyphicon glyphicon-"></i> Make admin</a></li>
</ul>
</div>
</div><!-- /bs-docs-example -->
</div><!-- /bs-example -->
{% highlight html %}
<div class="btn-group">
<a class="btn btn-default btn-primary" href="#"><span class="glyphicon glyphicon-user"></span> User</a>
@ -259,31 +259,31 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% endhighlight %}
<h5>Large button</h5>
<div class="bs-docs-example">
<div class="bs-example">
<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
</div><!-- /bs-docs-example -->
</div><!-- /bs-example -->
{% highlight html %}
<a class="btn btn-default btn-large" href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
{% endhighlight %}
<h5>Small button</h5>
<div class="bs-docs-example">
<div class="bs-example">
<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
</div><!-- /bs-docs-example -->
</div><!-- /bs-example -->
{% highlight html %}
<a class="btn btn-default btn-small" href="#"><span class="glyphicon glyphicon-star"></span></a>
{% endhighlight %}
<h4>Navigation</h4>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
<li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li>
<li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
</ul>
</div><!-- /bs-docs-example -->
</div><!-- /bs-example -->
{% highlight html %}
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
@ -294,7 +294,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% endhighlight %}
<h4>Form fields</h4>
<form class="bs-docs-example form-horizontal">
<form class="bs-example form-horizontal">
<div class="control-group">
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
@ -331,7 +331,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="dropdowns-example">Example</h3>
<p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
@ -365,7 +365,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="dropdowns-disabled">Disabled menu options</h3>
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Regular link</a></li>
@ -384,7 +384,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="dropdowns-submenus">Sub menus on dropdowns</h3>
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
<div class="bs-docs-example bs-docs-example-submenu">
<div class="bs-example bs-example-submenu">
<div class="pull-left">
<p class="text-muted">Default</p>
@ -484,7 +484,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-groups-single">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="bs-example">
<div class="btn-group" style="margin: 9px 0 5px;">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
@ -501,7 +501,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-groups-toolbar">Multiple button groups</h3>
<p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
@ -529,7 +529,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-groups-nested">Nested button groups</h3>
<p>Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
@ -551,7 +551,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-groups-vertical">Vertical button groups</h3>
<p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="btn-group btn-group-vertical">
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-left"></i></button>
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-align-center"></i></button>
@ -567,7 +567,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-groups-justified">Justified button groups</h3>
<p>Make a group of buttons stretch at the same size to span the entire width of its parent. <strong>This only works with <code>&lt;a&gt;</code> elements</strong> as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">Left</a>
<a href="#" class="btn btn-default">Right</a>
@ -599,7 +599,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-dropdowns-single">Single button dropdowns</h3>
<p>Turn a button into dropdown toggle with some basic markup changes.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="btn-toolbar" style="margin-bottom: 10px;">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@ -671,7 +671,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-dropdowns-split">Split button dropdowns</h3>
<p>Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn btn-default">Action</button>
@ -749,7 +749,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-dropdowns-sizes">Works with all button sizes</h3>
<p>Button dropdowns work at any size: <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn btn-default btn-large dropdown-toggle" type="button" data-toggle="dropdown">
@ -823,7 +823,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="btn-dropdowns-dropup">Dropup buttons</h3>
<p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="btn-toolbar">
<div class="btn-group dropup">
<button class="btn btn-default">Dropup</button>
@ -876,7 +876,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h2 id="nav-tabs">Tabs</h2>
<p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
@ -893,7 +893,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
@ -908,7 +908,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</ul>
{% endhighlight %}
<p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
@ -925,7 +925,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="nav-justified">Justified links</h3>
<p>Easily make tabs or pills equal widths of their parent with <code>.nav-justified</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
@ -955,7 +955,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<p>This class will only change the <code>&lt;a&gt;</code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p>
</div>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-pills">
<li><a href="#">Clickable link</a></li>
<li><a href="#">Clickable link</a></li>
@ -982,7 +982,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
@ -1016,7 +1016,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
{% endhighlight %}
<h3>Pills with dropdowns</h3>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
@ -1063,7 +1063,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h2 id="navbar-basic">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="bs-example">
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav">
@ -1088,7 +1088,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-brand">Brand</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
</div>
@ -1099,7 +1099,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-nav">Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
@ -1118,7 +1118,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-forms">Forms</h3>
<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>
<div class="bs-docs-example">
<div class="bs-example">
<div class="navbar">
<form class="navbar-form pull-left">
@ -1167,7 +1167,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-buttons">Buttons</h3>
<p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<button type="button" class="btn">Submit</button>
@ -1176,7 +1176,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-text">Text</h3>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p>
@ -1191,7 +1191,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-links">Links</h3>
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="navbar">
<a href="#" class="navbar-brand">Brand</a>
<p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
@ -1213,7 +1213,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<h3 id="navbar-fixed-top">Fixed to top</h3>
<p>Add <code>.navbar-fixed-top</code>.</p>
<div class="bs-docs-example bs-navbar-top-example">
<div class="bs-example bs-navbar-top-example">
<div class="navbar navbar-fixed-top">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a>
@ -1249,7 +1249,7 @@ body {
<h3 id="navbar-fixed-bottom">Fixed to bottom</h3>
<p>Add <code>.navbar-fixed-bottom</code> instead.</p>
<div class="bs-docs-example bs-navbar-bottom-example">
<div class="bs-example bs-navbar-bottom-example">
<div class="navbar navbar-fixed-bottom">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a>
@ -1285,7 +1285,7 @@ body {
<h3 id="navbar-static-top">Static top navbar</h3>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
<div class="bs-docs-example bs-navbar-top-example">
<div class="bs-example bs-navbar-top-example">
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Title</a>
@ -1306,7 +1306,7 @@ body {
<h2 id="navbar-responsive">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>.navbar-toggle</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="navbar">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
@ -1383,7 +1383,7 @@ body {
<h2>Inverted variation</h2>
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="navbar navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
@ -1448,7 +1448,7 @@ body {
</div>
<p class="lead">Indicate the current page's location within a navigational hierarchy.</p>
<p>Separators are automatically added in CSS through `:after` and `content`.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="breadcrumb">
<li class="active">Home</li>
</ul>
@ -1483,7 +1483,7 @@ body {
<h2 id="pagination-default">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="bs-example">
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
@ -1508,7 +1508,7 @@ body {
<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="bs-example">
<ul class="pagination">
<li class="disabled"><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
@ -1538,7 +1538,7 @@ body {
<h3>Sizes</h3>
<p>Fancy larger or smaller pagination? Add <code>.pagination-large</code>, <code>.pagination-small</code>, or <code>.pagination-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div>
<ul class="pagination pagination-large">
<li><a href="#">&laquo;</a></li>
@ -1597,7 +1597,7 @@ body {
<h3>Default example</h3>
<p>By default, the pager centers links.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
@ -1612,7 +1612,7 @@ body {
<h3>Aligned links</h3>
<p>Alternatively, you can align each link to the sides:</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="pager">
<li class="previous"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
@ -1628,7 +1628,7 @@ body {
<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">
<div class="bs-example">
<ul class="pager">
<li class="previous disabled"><a href="#">&larr; Older</a></li>
<li class="next"><a href="#">Newer &rarr;</a></li>
@ -1653,7 +1653,7 @@ body {
<p class="lead"></p>
<h3>Example</h3>
<div class="bs-docs-example">
<div class="bs-example">
<h1>Example heading <span class="label">New</span></h1>
<h2>Example heading <span class="label">New</span></h2>
<h3>Example heading <span class="label">New</span></h3>
@ -1667,7 +1667,7 @@ body {
<h3>Available variations</h3>
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
<div class="bs-docs-example">
<div class="bs-example">
<span class="label">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
@ -1694,7 +1694,7 @@ body {
</div>
<p class="lead">Easily highlight new or unread items by adding a <code>&lt;span class="badge"&gt;</code> to links, Bootstrap navs, and more.</p>
<div class="bs-docs-example">
<div class="bs-example">
<a href="#">Inbox <span class="badge">42</span></a>
</div>
{% highlight html %}
@ -1711,7 +1711,7 @@ body {
<h4>Adapts to active nav states</h4>
<p>Built-in styles are included for placing badges in active states in pill and list navigations.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li>
@ -1758,7 +1758,7 @@ body {
<h2 id="type-components-jumbotron">Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="jumbotron">
<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>
@ -1775,7 +1775,7 @@ body {
<h2 id="type-components-page-header">Page header</h2>
<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 as most other components (with additional styles).</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
@ -1799,7 +1799,7 @@ body {
<h3>Default thumbnails</h3>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="row">
<div class="col col-lg-3">
<a href="#" class="thumbnail">
@ -1822,7 +1822,7 @@ body {
</a>
</div>
</div>
</div><!-- /.bs-docs-example -->
</div><!-- /.bs-example -->
{% highlight html %}
<div class="row">
<div class="col col-lg-3">
@ -1836,7 +1836,7 @@ body {
<h3>Custom content thumbnails</h3>
<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>
<div class="bs-docs-example">
<div class="bs-example">
<div class="row">
<div class="col col-lg-4">
<div class="thumbnail">
@ -1869,7 +1869,7 @@ body {
</div>
</div>
</div>
</div><!-- /.bs-docs-example -->
</div><!-- /.bs-example -->
{% highlight html %}
<div class="row">
<div class="col col-lg-3">
@ -1899,7 +1899,7 @@ body {
<h3 id="alerts-default">Default alert</h3>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
@ -1914,7 +1914,7 @@ body {
<h3 id="alerts-block">Block alerts</h3>
<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="bs-example">
<div class="alert alert-block">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Warning!</h4>
@ -1931,7 +1931,7 @@ body {
<h3 id="alerts-alternatives">Contextual alternatives</h3>
<p>Add optional classes to change an alert's connotation.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
@ -1970,7 +1970,7 @@ body {
<h3 id="progress-basic">Basic</h3>
<p>Default progress bar with a vertical gradient.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="progress">
<div class="progress-bar" style="width: 60%;"></div>
</div>
@ -1983,7 +1983,7 @@ body {
<h3 id="progress-alternatives">Contextual alternatives</h3>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
@ -2014,7 +2014,7 @@ body {
<h3 id="progress-striped">Striped</h3>
<p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
@ -2045,7 +2045,7 @@ body {
<h3 id="progress-animated">Animated</h3>
<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="bs-example">
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
</div>
@ -2058,7 +2058,7 @@ body {
<h3 id="progress-stacked">Stacked</h3>
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
@ -2087,7 +2087,7 @@ body {
<h3>Default example</h3>
<p>The default media allow to float a media object (images, video, audio) to the left or right of a content block.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
@ -2115,7 +2115,7 @@ body {
</div>
</div>
</div>
</div><!-- /.bs-docs-example -->
</div><!-- /.bs-example -->
{% highlight html %}
<div class="media">
<a class="pull-left" href="#">
@ -2130,7 +2130,7 @@ body {
<h3>Media list</h3>
<p>With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
@ -2211,7 +2211,7 @@ body {
<h3 id="list-group-basic">Basic list group</h3>
<p>The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
@ -2232,7 +2232,7 @@ body {
<h3 id="list-group-chevrons">With chevrons</h3>
<p>Add Glyphicon chevrons that are automatically moved to the right.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span>
@ -2259,7 +2259,7 @@ body {
<h3 id="list-group-badges">With badges</h3>
<p>Add the badges component to any list group item and it will automatically be positioned on the right.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
@ -2286,7 +2286,7 @@ body {
<h3 id="list-group-badges-chevrons">With badges and chevrons</h3>
<p>Why not both?</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-chevron-right"></span>
@ -2317,7 +2317,7 @@ body {
<h3 id="list-group-linked">Linked list group</h3>
<p>Linkify list group items by using anchor tags instead of list items (that also means a parent <code>&lt;div&gt;</code> instead of an <code>&lt;ul&gt;</code>). No need for individual parents around each element.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
@ -2360,7 +2360,7 @@ body {
<h3 id="list-group-custom-content">Custom content</h3>
<p>Add nearly any HTML within, even for linked list groups like the one below.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
@ -2399,7 +2399,7 @@ body {
<h3 id="panels-basic">Basic panel</h3>
<p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="panel">
Basic panel example
</div>
@ -2412,7 +2412,7 @@ body {
<h3 id="panels-heading">Panel with heading</h3>
<p>Easily add a heading to your panel with <code>.panel-heading</code>. Use it on a <code>&lt;div&gt;</code> or any heading element (e.g., <code>&lt;h3&gt;</code>).</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="panel">
<div class="panel-heading">Panel heading</div>
Panel content
@ -2427,7 +2427,7 @@ body {
<h3 id="panels-alternatives">Contextual alternatives</h3>
<p>Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="panel panel-primary">
<div class="panel-heading">Panel heading</div>
Panel content
@ -2459,7 +2459,7 @@ body {
<h3 id="panels-list-group">With list groups</h3>
<p>Easily include full-width <a href="./docs/#list-group">list groups</a> within any panel.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
@ -2507,7 +2507,7 @@ body {
<h3>Default well</h3>
<p>Use the well as a simple effect on an element to give it an inset effect.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="well">
Look, I'm in a well!
</div>
@ -2517,7 +2517,7 @@ body {
{% endhighlight %}
<h3>Optional classes</h3>
<p>Control padding and rounded corners with two optional modifier classes.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="well well-large">
Look, I'm in a well!
</div>
@ -2526,7 +2526,7 @@ body {
<div class="well well-large">...</div>
{% endhighlight %}
<div class="bs-docs-example">
<div class="bs-example">
<div class="well well-small">
Look, I'm in a well!
</div>

118
docs/css.html
View File

@ -282,7 +282,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h2 id="type-headings">Headings</h2>
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
<div class="bs-docs-example bs-docs-example-type">
<div class="bs-example bs-example-type">
<table class="table">
<tbody>
<tr>
@ -324,7 +324,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<!-- Body copy -->
<h2 id="type-body-copy">Body copy</h2>
<p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
<div class="bs-docs-example">
<div class="bs-example">
<p>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.</p>
<p>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.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
@ -336,7 +336,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<!-- Body copy .lead -->
<h3>Lead body copy</h3>
<p>Make a paragraph stand out by adding <code>.lead</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>
{% highlight html %}
@ -354,7 +354,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Small text</h3>
<p>For de-emphasizing inline or blocks of text, use the <code>&lt;small&gt;</code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code>&lt;small&gt;</code> elements.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p><small>This line of text is meant to be treated as fine print.</small></p>
</div>
{% highlight html %}
@ -364,7 +364,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Bold</h3>
<p>For emphasizing a snippet of text with a heavier font-weight.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div>
{% highlight html %}
@ -373,7 +373,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Italics</h3>
<p>For emphasizing a snippet of text with italics.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
</div>
{% highlight html %}
@ -384,7 +384,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Alignment classes</h3>
<p>Easily realign text to components with text alignment classes.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
@ -397,7 +397,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
@ -417,7 +417,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Basic abbreviation</h3>
<p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute with the <code>&lt;abbr&gt;</code> element.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
</div>
{% highlight html %}
@ -426,7 +426,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Initialism</h3>
<p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
</div>
{% highlight html %}
@ -437,7 +437,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<!-- Addresses -->
<h2 id="type-addresses">Addresses</h2>
<p>Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <code>&lt;br&gt;</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
@ -470,7 +470,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Default blockquote</h3>
<p>Wrap <code>&lt;blockquote&gt;</code> around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote. For straight quotes we recommend a <code>&lt;p&gt;</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
@ -486,7 +486,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h4>Naming a source</h4>
<p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
@ -501,7 +501,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h4>Alternate displays</h4>
<p>Use <code>.pull-right</code> for a floated, right-aligned blockquote.</p>
<div class="bs-docs-example" style="overflow: hidden;">
<div class="bs-example" style="overflow: hidden;">
<blockquote class="pull-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous in <cite title="Source Title">Source Title</cite></small>
@ -519,7 +519,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Unordered</h3>
<p>A list of items in which the order does <em>not</em> explicitly matter.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@ -546,7 +546,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Ordered</h3>
<p>A list of items in which the order <em>does</em> explicitly matter.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@ -566,7 +566,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Unstyled</h3>
<p>Remove the default <code>list-style</code> and left margin on list items (immediate children only). <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
@ -593,7 +593,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Inline</h3>
<p>Place all list items on a single line with <code>inline-block</code> and some light padding.</p>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
@ -608,7 +608,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3>Description</h3>
<p>A list of terms with their associated descriptions.</p>
<div class="bs-docs-example">
<div class="bs-example">
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
@ -628,7 +628,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h4>Horizontal description</h4>
<p>Make terms and descriptions in <code>&lt;dl&gt;</code> line up side-by-side.</p>
<div class="bs-docs-example">
<div class="bs-example">
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
@ -664,7 +664,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h2>Inline</h2>
<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
{% highlight html %}
@ -673,7 +673,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2>Basic block</h2>
<p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
<div class="bs-docs-example">
<div class="bs-example">
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
</div>
{% highlight html %}
@ -694,7 +694,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="tables-example">Basic example</h2>
<p>For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.</p>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table">
<thead>
<tr>
@ -742,7 +742,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Cross-browser compatibility</h4>
<p>Striped tables are styled via the <code>:nth-child</code> CSS selector, which is not available in IE8.</p>
</div>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table table-striped">
<thead>
<tr>
@ -782,7 +782,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="tables-bordered">Bordered</h3>
<p>Add <code>.table-bordered</code> for borders and rounded corners.</p>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table table-bordered">
<thead>
<tr>
@ -826,7 +826,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="tables-hover-rows">Hover rows</h3>
<p>Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table table-hover">
<thead>
<tr>
@ -866,7 +866,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="tables-condensed">Condensed</h3>
<p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table table-condensed">
<thead>
<tr>
@ -945,7 +945,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tr>
</tbody>
</table>
<div class="bs-docs-example">
<div class="bs-example">
<table class="table">
<thead>
<tr>
@ -1001,7 +1001,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p>
<form class="bs-docs-example">
<form class="bs-example">
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
@ -1042,7 +1042,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Requires custom widths</h4>
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
</div>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input type="text" placeholder="Email" style="width: 180px;">
<input type="password" placeholder="Password" style="width: 180px;">
<div class="checkbox">
@ -1073,7 +1073,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li>Add <code>.control-label</code> to the label</li>
<li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
</ul>
<form class="bs-docs-example form-horizontal">
<form class="bs-example form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
@ -1134,7 +1134,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input type="text" placeholder="Text input">
</form>
{% highlight html %}
@ -1143,7 +1143,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<textarea rows="3"></textarea>
</form>
{% highlight html %}
@ -1153,7 +1153,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Checkboxes and radios</h3>
<p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
<h4>Default (stacked)</h4>
<form class="bs-docs-example">
<form class="bs-example">
<div class="checkbox">
<label>
<input type="checkbox" value="">
@ -1192,7 +1192,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Inline checkboxes</h4>
<p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
<form class="bs-docs-example">
<form class="bs-example">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
@ -1217,7 +1217,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Selects</h3>
<p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
<form class="bs-docs-example">
<form class="bs-example">
<select>
<option>1</option>
<option>2</option>
@ -1259,7 +1259,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-input-focus">Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input class="focused" id="focusedInput" type="text" value="This is focused...">
</form>
{% highlight html %}
@ -1274,7 +1274,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
</div>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input class="col col-lg-3" type="email" placeholder="test@example.com" required>
</form>
{% highlight html %}
@ -1283,7 +1283,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form>
{% highlight html %}
@ -1303,7 +1303,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>While Bootstrap will apply these styles in all browsers, IE and Safari don't actually support the <code>&lt;disabled&gt;</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<fieldset disabled>
<div>
<input type="text" class="col col-lg-4" placeholder="Disabled input">
@ -1350,7 +1350,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul>
<p>Validation styles are applied on a per-input basis. With horizontal forms, the <code>&lt;label class="control-label"&gt;</code> will always be styled.</p>
<form class="bs-docs-example form-horizontal">
<form class="bs-example form-horizontal">
<div class="control-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
@ -1404,7 +1404,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
</div>
<form class="bs-docs-example">
<form class="bs-example">
<div class="input-group col col-lg-9">
<span class="input-group-addon">@</span>
<input type="text" placeholder="Username">
@ -1441,7 +1441,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p>
<form class="bs-docs-example">
<form class="bs-example">
<div class="input-group col col-lg-9">
<span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username">
@ -1476,7 +1476,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-docs-example">
<form class="bs-example">
<div class="input-group col col-lg-7">
<span class="input-group-btn">
<button class="btn" type="button">Go!</button>
@ -1509,7 +1509,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Button dropdowns</h4>
<p></p>
<form class="bs-docs-example">
<form class="bs-example">
<div class="input-group col col-lg-7">
<div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@ -1569,7 +1569,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h4>Segmented dropdown groups</h4>
<form class="bs-docs-example">
<form class="bs-example">
<div class="input-group col col-lg-7">
<div class="input-group-btn">
<button class="btn" tabindex="-1">Action</button>
@ -1627,7 +1627,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Relative sizing</h4>
<p>Create larger or smaller form controls that match button sizes.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<form class="bs-example" style="padding-bottom: 15px;">
<div class="controls docs-input-sizes">
<input class="input-large" type="text" placeholder=".input-large">
<input type="text" placeholder="Default input">
@ -1642,7 +1642,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Column sizing</h4>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;">
<form class="bs-example" style="padding-bottom: 15px;">
<div class="row">
<div class="col col-lg-2">
<input type="text" placeholder="col col-large-2">
@ -1671,7 +1671,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-actions">Form actions</h3>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
<form class="bs-docs-example">
<form class="bs-example">
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn">Cancel</button>
@ -1687,7 +1687,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="forms-help-text">Help text</h3>
<p>Inline and block level support for help text that appears around form controls.</p>
<h4>Inline help</h4>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input type="text"> <span class="help-inline">Inline help text</span>
</form>
{% highlight html %}
@ -1696,7 +1696,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<h4>Block help</h4>
<form class="bs-docs-example form-inline">
<form class="bs-example form-inline">
<input type="text">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
@ -1718,7 +1718,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="buttons-options">Button options</h2>
<p>Use any of the available button classes to quickly create a styled button.</p>
<div class="bs-docs-example">
<div class="bs-example">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
@ -1752,7 +1752,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="buttons-sizes">Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p>
<button type="button" class="btn btn-primary btn-large">Large button</button>
<button type="button" class="btn btn-default btn-large">Large button</button>
@ -1790,7 +1790,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<button type="button" class="btn btn-primary btn-large btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-large btn-block">Block level button</button>
@ -1807,7 +1807,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Button element</h3>
<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
<p class="bs-docs-example">
<p class="bs-example">
<button type="button" class="btn btn-primary btn-large" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-large" disabled="disabled">Button</button>
</p>
@ -1823,7 +1823,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
<p class="bs-docs-example">
<p class="bs-example">
<a href="#" class="btn btn-primary btn-large disabled">Primary link</a>
<a href="#" class="btn btn-default btn-large disabled">Link</a>
</p>
@ -1842,7 +1842,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h2 id="buttons-tags">Using multiple tags</h2>
<p>Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
<form class="bs-docs-example">
<form class="bs-example">
<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
@ -1876,7 +1876,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Cross-browser compatibility</h4>
<p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
</div>
<div class="bs-docs-example bs-docs-example-images">
<div class="bs-example bs-example-images">
<img data-src="holder.js/140x140" class="img-rounded">
<img data-src="holder.js/140x140" class="img-circle">
<img data-src="holder.js/140x140" class="img-thumbnail">
@ -1899,7 +1899,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3>Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<div class="bs-docs-example">
<div class="bs-example">
<p><button class="close" style="float: none;">&times;</button></p>
</div>
{% highlight html %}

40
docs/javascript.html
View File

@ -101,7 +101,7 @@ $('#myModal').on('show', function (e) {
<h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-docs-example bs-docs-example-modal">
<div class="bs-example bs-example-modal">
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
@ -183,7 +183,7 @@ $('#myModal').on('show', function (e) {
</div><!-- /.modal-dalog -->
</div><!-- /.modal -->
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
</div><!-- /example -->
{% highlight html %}
@ -337,7 +337,7 @@ $('#myModal').on('hidden', function () {
<p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
<h3>Within a navbar</h3>
<div class="bs-docs-example">
<div class="bs-example">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
@ -382,7 +382,7 @@ $('#myModal').on('hidden', function () {
</div> <!-- /example -->
<h3>Within tabs</h3>
<div class="bs-docs-example">
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
@ -472,7 +472,7 @@ $('.dropdown-toggle').dropdown()
<h2>Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
@ -591,7 +591,7 @@ $('[data-spy="scroll"]').each(function () {
<h2>Example tabs</h2>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
<div class="bs-docs-example bs-docs-example-tabs">
<div class="bs-example bs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
@ -719,13 +719,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h2>Examples</h2>
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
<p>Hover over the links below to see tooltips:</p>
<div class="bs-docs-example tooltip-demo">
<div class="bs-example tooltip-demo">
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
</p>
</div><!-- /example -->
<h3>Four directions</h3>
<div class="bs-docs-example tooltip-demo">
<div class="bs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</a></li>
@ -866,7 +866,7 @@ $('#example').tooltip(options)
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<div class="bs-docs-example bs-docs-example-popover">
<div class="bs-example bs-example-popover">
<div class="popover top">
<div class="arrow"></div>
<h3 class="popover-title">Popover top</h3>
@ -903,12 +903,12 @@ $('#example').tooltip(options)
</div>
<h3>Live demo</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
<h4>Four directions</h4>
<div class="bs-docs-example tooltip-demo">
<div class="bs-example tooltip-demo">
<ul class="bs-docs-tooltip-examples">
<li><a href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
<li><a href="#" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
@ -1040,14 +1040,14 @@ $('#example').tooltip(options)
<h2>Example alerts</h2>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="alert fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
</div><!-- /example -->
<div class="bs-docs-example">
<div class="bs-example">
<div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<h4>Oh snap! You got an error!</h4>
@ -1121,7 +1121,7 @@ $('#my-alert').bind('closed', function () {
<h4>Stateful</h4>
<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
@ -1134,7 +1134,7 @@ $('#my-alert').bind('closed', function () {
<h4>Single toggle</h4>
<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
</div><!-- /example -->
{% highlight html %}
@ -1143,7 +1143,7 @@ $('#my-alert').bind('closed', function () {
<h4>Checkbox</h4>
<p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-checkbox">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
@ -1172,7 +1172,7 @@ $('#my-alert').bind('closed', function () {
<h4>Radio</h4>
<p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="bs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-radio">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> Option 1
@ -1272,7 +1272,7 @@ $('.nav-tabs').button()
<h2>Example accordion</h2>
<p>Using the collapse plugin, we built a simple accordion style widget:</p>
<div class="bs-docs-example">
<div class="bs-example">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
@ -1473,7 +1473,7 @@ $('#myCollapsible').on('hidden', function () {
<h2>Examples</h2>
<p>The slideshow below shows a generic plugin and component for cycling through elements like a carousel.</p>
<div class="bs-docs-example">
<div class="bs-example">
<div id="carousel-example-generic" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
@ -1535,7 +1535,7 @@ $('#myCollapsible').on('hidden', function () {
<h4>Responsive visibility</h4>
<p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
</div>
<div class="bs-docs-example">
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>

2
docs/welcome.html
View File

@ -116,7 +116,7 @@ lead: "Welcome to the Bootstrap documentation, the living, interactive style and
{% endhighlight %}
<h3>Examples</h3>
<div class="row bs-docs-examples">
<div class="row bs-examples">
<div class="col col-lg-4">
<a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt="">