mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-21 13:24:08 +03:00
Code Activity

.bs-docs-example to .bs-example

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
docs/components.html
+83 -83
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>