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

rearrange docs components

This commit is contained in:
Mark Otto 2014-07-11 22:34:47 -07:00
parent 60cf7d45db
commit d9bb7ddac5
16 changed files with 1015 additions and 1548 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
docs/_includes/components/alerts.html
View File

@ -1,85 +0,0 @@
<div class="bs-docs-section">
<h1 id="alerts" class="page-header">Alerts</h1>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#alerts">alerts jQuery plugin</a>.</p>
<h2 id="alerts-examples">Examples</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
<div class="bs-callout bs-callout-info">
<h4>No default class</h4>
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
</div>
<div class="bs-example">
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
{% highlight html %}
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
{% endhighlight %}
<h2 id="alerts-dismissible">Dismissible alerts</h2>
<p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
<div class="bs-example">
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</div>
{% highlight html %}
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Ensure proper behavior across all devices</h4>
<p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
</div>
<h2 id="alerts-links">Links in alerts</h2>
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
<div class="bs-example">
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
</div>
{% highlight html %}
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
{% endhighlight %}
</div>

72
docs/_includes/components/badges.html
View File

@ -1,72 +0,0 @@
<div class="bs-docs-section">
<h1 id="badges" class="page-header">Badges</h1>
<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-example">
<a href="#">Inbox <span class="badge">42</span></a>
</div>
{% highlight html %}
<a href="#">Inbox <span class="badge">42</span></a>
{% endhighlight %}
<h4>Self collapsing</h4>
<p>When there are no new or unread items, badges will simply collapse (via CSS's <code>:empty</code> selector) provided no content exists within.</p>
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>Badges won't self collapse in Internet Explorer 8 because it lacks support for the <code>:empty</code> selector.</p>
</div>
<h4>Adapts to active nav states</h4>
<p>Built-in styles are included for placing badges in active states in pill navigations.</p>
<div class="bs-example">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br>
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
<li role="presentation" class="active">
<a href="#">
<span class="badge pull-right">42</span>
Home
</a>
</li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation">
<a href="#">
<span class="badge pull-right">3</span>
Messages
</a>
</li>
</ul>
<br>
<p>
<button class="btn btn-primary btn-lg" type="button">
Large button <span class="badge">4</span>
</button>
<button class="btn btn-primary" type="button">
Button <span class="badge">4</span>
</button>
<button class="btn btn-primary btn-sm" type="button">
Small button <span class="badge">4</span>
</button>
<button class="btn btn-primary btn-xs" type="button">
Extra small <span class="badge">4</span>
</button>
</p>
</div>
{% highlight html %}
<ul class="nav nav-pills nav-stacked" role="tablist">
<li role="presentation" class="active">
<a href="#">
<span class="badge pull-right">42</span>
Home
</a>
</li>
...
</ul>
{% endhighlight %}
</div>

98
docs/_includes/components/dropdowns.html
View File

@ -1,98 +0,0 @@
<div class="bs-docs-section">
<h1 id="dropdowns" class="page-header">Dropdowns</h1>
<p class="lead">Toggleable, contextual menu for displaying lists of links. Made interactive with the <a href="../javascript/#dropdowns">dropdown JavaScript plugin</a>.</p>
<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-example">
<div class="dropdown clearfix">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
{% endhighlight %}
<h3 id="dropdowns-alignment">Alignment</h3>
<p>By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
<div class="bs-callout bs-callout-warning">
<h4>May require additional positioning</h4>
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
</div>
{% highlight html %}
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
...
</ul>
{% endhighlight %}
<h3 id="dropdowns-headers">Headers</h3>
<p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
...
</ul>
{% endhighlight %}
<h3 id="dropdowns-disabled">Disabled menu items</h3>
<p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
<div class="bs-example">
<div class="dropdown clearfix">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
{% endhighlight %}
</div>

235
docs/_includes/components/navs.html
View File

@ -1,235 +0,0 @@
<div class="bs-docs-section">
<h1 id="nav" class="page-header">Navs</h1>
<p class="lead">Navigation available in Bootstrap share general markup and styles, from the base <code>.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
<h2 id="nav-base">Base nav</h2>
<p>Roll your own navigation style by extending the base <code>.nav</code> component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but <strong>not the active state</strong>.</p>
{% example html %}
<ul class="nav" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item disabled">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
<p>Classes are used so your markup can be super flexible.</p>
<div class="bs-example">
<nav class="nav" role="tablist">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
</div>
{% highlight html %}
<nav class="nav" role="tablist">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endhighlight %}
<h2 id="nav-tabs">Tabs</h2>
<p>Takes the basic nav from above and adds the <code>.nav-tabs</code> class to generate a tabbed interface.</p>
<div class="bs-example">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li role="presentation" class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li role="presentation" class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<h4>Requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
</div>
<h2 id="nav-pills">Pills</h2>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<div class="bs-example">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li role="presentation" class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li role="presentation" class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
{% endhighlight %}
<h2 id="nav-pills-stacked">Stacked pills</h2>
<p>Just add <code>.nav-stacked</code>.</p>
<div class="bs-example">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li role="presentation" class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li role="presentation" class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills nav-stacked" role="tablist">
<li role="presentation" class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li role="presentation" class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
{% endhighlight %}
<h2 id="nav-dropdowns">Using dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
<div class="bs-example">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li role="presentation" class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li role="presentation" class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li role="presentation" class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs" role="tablist">
...
<li role="presentation" class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
...
</ul>
{% endhighlight %}
<h3>Pills with dropdowns</h3>
<div class="bs-example">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
<li role="presentation" class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
</div>
{% highlight html %}
<ul class="nav nav-pills" role="tablist">
...
<li role="presentation" class="nav-item">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
...
</ul>
{% endhighlight %}
</div>

4
docs/components.html
View File

@ -5,19 +5,15 @@ slug: components
lead: "Over a dozen reusable components built to provide dropdowns, input groups, navigation, alerts, and much more."
---
{% include components/dropdowns.html %}
{% include components/button-groups.html %}
{% include components/button-dropdowns.html %}
{% include components/input-groups.html %}
{% include components/navs.html %}
{% include components/navbar.html %}
{% include components/breadcrumbs.html %}
{% include components/pagination.html %}
{% include components/labels.html %}
{% include components/badges.html %}
{% include components/jumbotron.html %}
{% include components/page-header.html %}
{% include components/alerts.html %}
{% include components/media.html %}
{% include components/list-group.html %}
{% include components/responsive-embed.html %}

66
docs/components/alerts.md Normal file
View File

@ -0,0 +1,66 @@
---
layout: page
title: Alerts
---
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the [alerts jQuery plugin]({{ site.baseurl }}javascript/#alerts).
Wrap any text and an optional dismiss button in `.alert` and one of the four contextual classes (e.g., `.alert-success`) for basic alert messages.
<div class="bs-callout bs-callout-info">
<h4>No default class</h4>
<p>Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.</p>
</div>
{% example html %}
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
{% endexample %}
### Dismissing
Build on any alert by adding an optional `.alert-dismissible` and [close button]().
{% example html %}
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">&times;</span>
<span class="sr-only">Close</span>
</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
{% endexample %}
<div class="bs-callout bs-callout-warning">
<h4>Ensure proper behavior across all devices</h4>
<p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
</div>
### Link color
Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
{% example html %}
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
{% endexample %}

68
docs/components/badges.md Normal file
View File

@ -0,0 +1,68 @@
---
layout: page
title: Badges
---
Easily highlight new or unread items by adding a `<span class="badge"></span>` within links, Bootstrap navs, and more.
{% example html %}
<a href="#">Inbox <span class="badge">42</span></a>
{% endexample %}
### Self collapsing
When there are no new or unread items, badges will simply collapse (via CSS's `:empty` selector) provided no content exists within.
### Active nav
Built-in styles are included for placing badges in active states in pill navigations.
{% example html %}
<ul class="nav nav-pills" role="tablist">
<li class="nav-item active" role="presentation">
<a class="nav-link" href="#">Home <span class="badge">42</span></a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#">Messages <span class="badge">3</span></a>
</li>
</ul>
<ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
<li class="nav-item active" role="presentation">
<a class="nav-link" href="#">
<span class="badge pull-right">42</span>
Home
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#">
<span class="badge pull-right">3</span>
Messages
</a>
</li>
</ul>
{% endexample %}
### Buttons
Like active nav links, badges in Bootstrap buttons automatically restyle to better blend into the background.
{% example html %}
<button class="btn btn-primary btn-lg" type="button">
Large button <span class="badge">4</span>
</button>
<button class="btn btn-primary" type="button">
Button <span class="badge">4</span>
</button>
<button class="btn btn-primary btn-sm" type="button">
Small button <span class="badge">4</span>
</button>
<button class="btn btn-primary btn-xs" type="button">
Extra small <span class="badge">4</span>
</button>
{% endexample %}

24
docs/components/buttons.md
View File

@ -1,6 +1,7 @@
<a id="buttons"></a>
# Buttons
---
layout: page
title: Buttons
---
Use any of the available button classes to quickly create a styled button.
@ -24,10 +25,6 @@ Use any of the available button classes to quickly create a styled button.
<button type="button" class="btn btn-link">Link</button>
{% endexample %}
<a id="buttons-sizes"></a>
## Sizes
Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.
@ -54,10 +51,6 @@ Create block level buttons—those that span the full width of a parent—by add
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
{% endexample %}
<a id="buttons-active"></a>
## Active state
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` should you need to replicate the state programmatically.
@ -67,10 +60,6 @@ Buttons will appear pressed (with a darker background, darker border, and inset
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
{% endexample %}
<a id="buttons-disabled"></a>
## Disabled state
Make buttons look unclickable by adding the `disabled` boolean attribute to any `<button>` element.
@ -102,10 +91,6 @@ As `<a>` elements don't support the `disabled` attribute, you must add the `.dis
<p>While button classes can be used on <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements, only <code>&lt;button&gt;</code> elements are supported within our nav and navbar components.</p>
</div>
<a id="buttons-tags"></a>
## Button tags
Use the button classes on an `<a>`, `<button>`, or `<input>` element.
@ -117,7 +102,6 @@ Use the button classes on an `<a>`, `<button>`, or `<input>` element.
<input class="btn btn-secondary" type="submit" value="Submit">
{% endexample %}
<div class="bs-callout bs-callout-warning">
<h4>Cross-browser rendering</h4>
<p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>

27
docs/components/code.md
View File

@ -1,13 +1,10 @@
<a id="code"></a>
# Code
---
layout: page
title: Code
---
Styles for inline code snippets and longer, multiline blocks of code.
<a id="code-inline"></a>
## Inline code
Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets.
@ -16,10 +13,6 @@ Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endexample %}
<a id="code-user-input"></a>
## User input
Use the `<kbd>` to indicate input that is typically entered via keyboard.
@ -29,10 +22,6 @@ To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
{% endexample %}
<a id="code-block"></a>
## Preformatted text
Or, code blocks. Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering.
@ -43,10 +32,6 @@ Or, code blocks. Use `<pre>`s for multiple lines of code. Once again, be sure to
You may optionally add the `.pre-scrollable` class, which will set a max-height of 350px and provide a y-axis scrollbar.
<a id="code-variables"></a>
## Variables
For indicating variables use the `<var>` tag.
@ -55,10 +40,6 @@ For indicating variables use the `<var>` tag.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
{% endexample %}
<a id="code-sample-output"></a>
## Sample output
For indicating blocks sample output from a program use the `<samp>` tag.

100
docs/components/dropdowns.md Normal file
View File

@ -0,0 +1,100 @@
---
layout: page
title: Dropdowns
---
Toggleable, contextual menu for displaying lists of links. Made interactive with the [dropdown JavaScript plugin]({{ site.bsaeurl }}javascript/#dropdowns).
### Example
Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Then add the menu's HTML.
{% example html %}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Something else here</a>
</li>
</ul>
</div>
{% endexample %}
### Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
<div class="bs-callout bs-callout-warning">
<h4>May require additional positioning</h4>
<p>Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain <code>overflow</code> properties or appear out of bounds of the viewport. Address these issues on your own as they arise.</p>
</div>
{% highlight html %}
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
...
</ul>
{% endhighlight %}
### Menu headers
Add a header to label sections of actions in any dropdown menu.
{% example html %}
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another action</a>
</li>
</ul>
{% endexample %}
### Menu dividers
Separate groups of related menu items with a divider.
{% example html %}
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Something else here</a>
</li>
<li role="presentation" class="dropdown-divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
{% endexample %}
### Disabled menu items
Add `.disabled` to a `<li>` in the dropdown to disable the link.
{% example html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Regular link</a>
</li>
<li role="presentation" class="disabled">
<a role="menuitem" tabindex="-1" href="#">Disabled link</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another link</a>
</li>
</ul>
{% endexample %}

653
docs/components/forms.md
View File

@ -1,32 +1,15 @@
<div class="bs-docs-section">
<h1 id="forms" class="page-header">Forms</h1>
---
layout: page
title: Forms
---
<h2 id="forms-example">Basic example</h2>
<p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
<div class="bs-example">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-secondary">Submit</button>
</form>
</div><!-- /example -->
{% highlight html %}
Bootstrap normalizes common HTML5 form elements and adds a number of layout options for building forms of all sizes.
## Example form
Individual form controls automatically receive some global styling. All textual `<input>`, `<textarea>`, and `<select>` elements with `.form-control` are set to `width: 100%;` by default. Wrap labels and controls in `.form-group` for optimum spacing.
{% example html %}
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
@ -48,48 +31,27 @@
</div>
<button type="submit" class="btn btn-secondary">Submit</button>
</form>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Don't mix form groups with input groups</h4>
<p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
</div>
{% endexample %}
<div class="bs-callout bs-callout-warning">
<h4>Don't mix form groups with input groups</h4>
<p>Do not mix form groups directly with <a href="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
</div>
<h2 id="forms-inline">Inline form</h2>
<p>Add <code>.form-inline</code> to your <code>&lt;form&gt;</code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
<div class="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4>
<p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
</div>
<div class="bs-example">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-secondary">Sign in</button>
</form>
</div><!-- /example -->
{% highlight html %}
## Inline forms
Add `.form-inline` to your `<form>` for left-aligned and inline-block controls. **This only applies to forms within viewports that are at least 768px wide.**
<div class="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4>
<p>Inputs and selects have `width: 100%;` applied by default in Bootstrap. Within inline forms, we reset that to `width: auto;` so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>
</div>
<div class="bs-callout bs-callout-warning">
<h4>Always add labels</h4>
<p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class.</p>
</div>
{% example html %}
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
@ -112,42 +74,13 @@
</div>
<button type="submit" class="btn btn-secondary">Sign in</button>
</form>
{% endhighlight %}
{% endexample %}
## Horizontal forms
<h2 id="forms-horizontal">Horizontal form</h2>
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
<div class="bs-example">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Sign in</button>
</div>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
{% example html %}
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
@ -176,82 +109,47 @@
</div>
</div>
</form>
{% endhighlight %}
{% endexample %}
## Supported controls
<h2 id="forms-controls">Supported controls</h2>
<p>Examples of standard form controls supported in an example form layout.</p>
Examples of standard form controls supported in an example form layout.
<h3>Inputs</h3>
<p>Most common form control, text-based input fields. Includes support for all HTML5 types: <code>text</code>, <code>password</code>, <code>datetime</code>, <code>datetime-local</code>, <code>date</code>, <code>month</code>, <code>time</code>, <code>week</code>, <code>number</code>, <code>email</code>, <code>url</code>, <code>search</code>, <code>tel</code>, and <code>color</code>.</p>
<div class="bs-callout bs-callout-danger">
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
</div>
<div class="bs-example">
<form role="form">
<input type="text" class="form-control" placeholder="Text input">
</form>
</div><!-- /.bs-example -->
{% highlight html %}
### Inputs
Most common form control, text-based input fields. Includes support for all HTML5 types: `text`, `password`, `datetime`, `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel`, and `color`.
<div class="bs-callout bs-callout-danger">
<h4>Type declaration required</h4>
<p>Inputs will only be fully styled if their `type` is properly declared.</p>
</div>
{% example html %}
<input type="text" class="form-control" placeholder="Text input">
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<h4>Input groups</h4>
<p>To add integrated text or buttons before and/or after any text-based <code>&lt;input&gt;</code>, <a href="../components/#input-groups">check out the input group component</a>.</p>
</div>
{% endexample %}
<h3>Textarea</h3>
<p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
<div class="bs-example">
<form role="form">
<textarea class="form-control" rows="3"></textarea>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<div class="bs-callout bs-callout-info">
<h4>Input groups</h4>
<p>To add integrated text or buttons before and/or after any text-based `&lt;input&gt;`, <a href="../components/#input-groups">check out the input group component</a>.</p>
</div>
### Textarea
Form control which supports multiple lines of text. Change `rows` attribute as necessary.
{% example html %}
<textarea class="form-control" rows="3"></textarea>
{% endhighlight %}
{% endexample %}
<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>
<p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code>&lt;label&gt;</code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code>&lt;fieldset&gt;</code>.</p>
<h4>Default (stacked)</h4>
<div class="bs-example">
<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<br>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
### Checkboxes and radios
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`.
#### Default (stacked)
{% example html %}
<div class="checkbox">
<label>
<input type="checkbox" value="">
@ -283,36 +181,13 @@
Option three is disabled
</label>
</div>
{% endhighlight %}
{% endexample %}
<h4>Inline checkboxes and radios</h4>
<p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p>
<div class="bs-example">
<form role="form">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</form>
<br>
<form role="form">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
#### Inline checkboxes and radios
Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
{% example html %}
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
@ -332,30 +207,13 @@
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
{% endhighlight %}
{% endexample %}
<h3>Selects</h3>
<p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
<div class="bs-example">
<form role="form">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
#### Selects
Use the default option, or add `multiple` to show multiple options at once.
{% example html %}
<select class="form-control">
<option>1</option>
<option>2</option>
@ -371,28 +229,13 @@
<option>4</option>
<option>5</option>
</select>
{% endhighlight %}
{% endexample %}
## Static controls
<h2 id="forms-controls-static">Static control</h2>
<p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
<div class="bs-example">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
When you need to place plain text next to a form label within a horizontal form, use the `.form-control-static` class on a `<p>`.
{% example html %}
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
@ -407,68 +250,34 @@
</div>
</div>
</form>
{% endhighlight %}
{% endexample %}
<h2 id="forms-control-focus">Input focus</h2>
<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>
<div class="bs-example">
<form role="form">
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
</form>
</div>
<div class="bs-callout bs-callout-info">
<h4>Demo <code>:focus</code> state</h4>
<p>The above example input uses custom styles in our documentation to demonstrate the <code>:focus</code> state on a <code>.form-control</code>.</p>
</div>
## Focus state
We remove the default `outline` styles on some form controls and apply a `box-shadow` in its place for `:focus`.
<div class="bs-example">
<form role="form">
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
</form>
</div>
<div class="bs-callout bs-callout-info">
<h4>Demo `:focus` state</h4>
<p>The above example input uses custom styles in our documentation to demonstrate the `:focus` state on a `.form-control`.</p>
</div>
## Disabled states
Add the `disabled` boolean attribute on an `<input>`, `<select>`, or `<textarea>` to prevent user input and trigger a slightly different look.
<h2 id="forms-control-disabled">Disabled inputs</h2>
<p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
<div class="bs-example">
<form role="form">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
{% endhighlight %}
<h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
<p>Add the <code>disabled</code> attribute to a <code>&lt;fieldset&gt;</code> to disable all the controls within the <code>&lt;fieldset&gt;</code> at once.</p>
Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
<div class="bs-callout bs-callout-warning">
<h4>Caveat about link functionality of <code>&lt;a&gt;</code></h4>
<p>Our styles use <code>pointer-events: none</code> to try to disable the link functionality of <code>&lt;a class="btn btn-*"&gt;</code> buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
</div>
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
<div class="bs-example">
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
{% example html %}
<form role="form">
<fieldset disabled>
<div class="form-group">
@ -489,65 +298,31 @@
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
{% endhighlight %}
{% endexample %}
<div class="bs-callout bs-callout-warning">
<h4>Caveat about link functionality of `&lt;a&gt;`</h4>
<p>Our styles use `pointer-events: none` to try to disable the link functionality of `&lt;a class="btn btn-*"&gt;` buttons in this case, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. So to be safe, use custom JavaScript to disable such links.</p>
</div>
<h2 id="forms-control-readonly">Readonly inputs</h2>
<p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
<div class="bs-example">
<form role="form">
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the `disabled` attribute on a `&lt;fieldset&gt;`. Use custom JavaScript to disable the fieldset in these browsers.</p>
</div>
## Readonly inputs
Add the `readonly` boolean attribute on an input to prevent user input and style the input as disabled.
{% example html %}
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
{% endhighlight %}
{% endexample %}
## Validation
<h2 id="forms-control-validation">Validation states</h2>
<p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
<div class="bs-example">
<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
{% example html %}
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1">
@ -584,34 +359,16 @@
</label>
</div>
</div>
{% endhighlight %}
{% endexample %}
<h3>With optional icons</h3>
<p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p>
<div class="bs-callout bs-callout-warning">
<h4>Icons, labels, and input groups</h4>
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
</div>
<div class="bs-example">
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
</div>
{% highlight html %}
You can also add optional feedback icons with the addition of `.has-feedback` and the right icon.
<div class="bs-callout bs-callout-warning">
<h4>Icons, labels, and input groups</h4>
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the `sr-only` class. If you must do without labels, adjust the `top` value of the feedback icon. For input groups, adjust the `right` value to an appropriate pixel value depending on the width of your addon.</p>
</div>
{% example html %}
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
@ -627,21 +384,9 @@
<input type="text" class="form-control" id="inputError2">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
{% endhighlight %}
{% endexample %}
<h4>Optional icons in horizontal and inline forms</h4>
<div class="bs-example">
<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</form>
</div>
{% highlight html %}
{% example html %}
<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
@ -651,18 +396,9 @@
</div>
</div>
</form>
{% endhighlight %}
{% endexample %}
<div class="bs-example">
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>
</div>
{% highlight html %}
{% example html %}
<form class="form-inline" role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
@ -670,51 +406,23 @@
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</form>
{% endhighlight %}
{% endexample %}
<h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
<p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p>
<div class="bs-example">
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
{% highlight html %}
For form controls with no visible label, add the `.sr-only` class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.
{% example html %}
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
{% endhighlight %}
{% endexample %}
## Control sizing
<h2 id="forms-control-sizes">Control sizing</h2>
<p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
<h3>Height sizing</h3>
<p>Create taller or shorter form controls that match button sizes.</p>
<div class="bs-example bs-example-control-sizing">
<form role="form">
<div class="controls">
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input type="text" class="form-control" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">
<option value="">.input-lg</option>
</select>
<select class="form-control">
<option value="">Default select</option>
</select>
<select class="form-control input-sm">
<option value="">.input-sm</option>
</select>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
{% example html %}
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
@ -722,27 +430,11 @@
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
{% endhighlight %}
{% endexample %}
<h3>Horizontal form group sizes</h3>
<p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
<div class="bs-example">
<form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
Quickly size labels and form controls within `.form-horizontal` by adding `.form-group-lg` or `.form-group-sm` to existing `.form-group`s.
{% example html %}
<form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
@ -757,27 +449,13 @@
</div>
</div>
</form>
{% endhighlight %}
{% endexample %}
## Column sizing
<h3>Column sizing</h3>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<div class="bs-example">
<form role="form">
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
{% example html %}
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
@ -789,17 +467,12 @@
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
{% endhighlight %}
{% endexample %}
<h2 id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p>
<div class="bs-example">
<form role="form">
<input type="text" class="form-control">
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
</div><!-- /.bs-example -->
{% highlight html %}
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
{% endhighlight %}
</div>
## Help text
Block level help text for form controls.
{% example html %}
<p class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</p>
{% endexample %}

162
docs/components/navs.md Normal file
View File

@ -0,0 +1,162 @@
---
layout: page
title: Navs
---
Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
## Base nav
Roll your own navigation style by extending the base `.nav` component. All Bootstrap's nav components are built on top of this. Includes styles for the disabled state, but **not the active state**.
{% example html %}
<ul class="nav" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another link</a>
</li>
<li class="nav-item disabled">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
{% endexample %}
Classes are used throughout, so your markup can be super flexible. Use `<ul>`s like above, or roll your own with say a `<nav>` element.
{% example html %}
<nav class="nav" role="tablist">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Another link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
{% endexample %}
## Tabs
Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface.
{% example html %}
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active" role="presentation">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item" role="presentation">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item" role="presentation">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled" role="presentation">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
{% endexample %}
<div class="bs-callout bs-callout-info">
<h4>Requires JavaScript tabs plugin</h4>
<p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
</div>
## Pills
Take that same HTML, but use `.nav-pills` instead:
{% example html %}
<ul class="nav nav-pills" role="tablist">
<li class="nav-item active" role="presentation">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item" role="presentation">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item" role="presentation">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled" role="presentation">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
{% endexample %}
## Stacked pills
Just add `.nav-stacked` to the `.nav.nav-pills`.
{% example html %}
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="nav-item active" role="presentation">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item" role="presentation">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item" role="presentation">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled" role="presentation">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
{% endexample %}
## Using dropdowns
Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}javascript/#dropdowns).
### Tabs with dropdowns
{% example html %}
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active" role="presentation">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item" role="presentation">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled" role="presentation">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
{% endexample %}
### Pills with dropdowns
{% example html %}
<ul class="nav nav-pills" role="tablist">
<li class="nav-item active" role="presentation">
<a href="#" class="nav-link">Active</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item" role="presentation">
<a href="#" class="nav-link">Another link</a>
</li>
<li class="nav-item disabled" role="presentation">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
{% endexample %}

20
docs/components/scaffolding.md
View File

@ -5,10 +5,6 @@ title: Scaffolding
Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.
<a id="overview-doctype"></a>
### HTML5 doctype
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
@ -20,10 +16,6 @@ Bootstrap makes use of certain HTML elements and CSS properties that require the
</html>
{% endhighlight %}
<a id="overview-mobile"></a>
### Mobile first
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, **Bootstrap is mobile first**. Mobile first styles can be found throughout the entire library instead of in separate files.
@ -40,10 +32,6 @@ You can disable zooming capabilities on mobile devices by adding `user-scalable=
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
{% endhighlight %}
<a id="overview-type-links"></a>
### Typography and links
Bootstrap sets basic global display, typography, and link styles. Specifically, we:
@ -54,18 +42,10 @@ Bootstrap sets basic global display, typography, and link styles. Specifically,
These styles can be found within `scaffolding.less`.
<a id="overview-normalize"></a>
### Normalize
For improved cross-browser rendering, we use [Normalize.css](http://necolas.github.io/normalize.css/) to correct small inconsistencies across browsers and devices.
<a id="overview-containers"></a>
### Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to `padding` and more, neither container is nestable.

458
docs/components/tables.html
View File

@ -1,458 +0,0 @@
<div class="bs-docs-section">
<h1 id="tables" class="page-header">Tables</h1>
<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-example">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<table class="table">
...
</table>
{% endhighlight %}
<h2 id="tables-striped">Striped rows</h2>
<p>Use <code>.table-striped</code> to add zebra-striping to any table row within the <code>&lt;tbody&gt;</code>.</p>
<div class="bs-example">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<table class="table table-striped">
...
</table>
{% endhighlight %}
<h2 id="tables-bordered">Bordered table</h2>
<p>Add <code>.table-bordered</code> for borders on all sides of the table and cells.</p>
<div class="bs-example">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<table class="table table-bordered">
...
</table>
{% endhighlight %}
<h2 id="tables-hover-rows">Hover rows</h2>
<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-example">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<table class="table table-hover">
...
</table>
{% endhighlight %}
<h2 id="tables-condensed">Condensed table</h2>
<p>Add <code>.table-condensed</code> to make tables more compact by cutting cell padding in half.</p>
<div class="bs-example">
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<table class="table table-condensed">
...
</table>
{% endhighlight %}
<h2 id="tables-contextual-classes">Contextual classes</h2>
<p>Use contextual classes to color table rows or individual cells.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.active</code>
</td>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<td>
<code>.success</code>
</td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>
<code>.info</code>
</td>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<td>
<code>.warning</code>
</td>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<td>
<code>.danger</code>
</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
<div class="bs-example">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="success">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>6</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>8</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<td>9</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
{% highlight html %}
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
{% endhighlight %}
<h2 id="tables-responsive">Responsive tables</h2>
<p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
<div class="bs-callout bs-callout-warning">
<h4>Firefox and fieldsets</h4>
<p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
{% highlight css %}
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
{% endhighlight %}
<p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
</div>
<div class="bs-example">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
</div><!-- /example -->
{% highlight html %}
<div class="table-responsive">
<table class="table">
...
</table>
</div>
{% endhighlight %}
</div>

444
docs/components/tables.md Normal file
View File

@ -0,0 +1,444 @@
---
layout: page
title: Tables
---
Due to the widespread use of tables across plugins like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
## Basic example
{% example html %}
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
## Striped rows
Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.
{% example html %}
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
## Bordered table
Add `.table-bordered` for borders on all sides of the table and cells.
{% example html %}
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
## Hoverable rows
Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
{% example html %}
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
## Condensed table
Add `.table-condensed` to make tables more compact by cutting cell padding in half.
{% example html %}
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
{% endexample %}
## Contextual classes
Use contextual classes to color table rows or individual cells.
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>.active</code>
</td>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<td>
<code>.success</code>
</td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>
<code>.info</code>
</td>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<td>
<code>.warning</code>
</td>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<td>
<code>.danger</code>
</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
<div class="bs-example">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="success">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>6</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>8</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<td>9</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
{% highlight html %}
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
{% endhighlight %}
## Responsive tables
Create responsive tables by wrapping any `.table` in `.table-responsive` to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
<div class="bs-callout bs-callout-warning">
<h4>Firefox and fieldsets</h4>
<p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
{% highlight css %}
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
{% endhighlight %}
<p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
</div>
<div class="bs-example">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
</div>
{% highlight html %}
<div class="table-responsive">
<table class="table">
...
</table>
</div>
{% endhighlight %}

47
docs/components/type.md
View File

@ -1,13 +1,10 @@
<a id="type"></a>
# Typography
---
layout: page
title: Typography
---
Bootstrap includes simple and easily customized typography across the project. In addition to the standard headings, body text, and lists, utility classes are also included.
<a id="type-headings"></a>
## Headings
All HTML headings, `<h1>` through `<h6>`, are available. `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
@ -88,10 +85,6 @@ Create lighter, secondary text in any heading with a generic `<small>` tag or th
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
{% endhighlight %}
<a id="type-body-copy"></a>
## Body copy
Bootstrap's base text is sized with global `font-size: 16px;` and `line-height: 1.5;`. This is applied to the `<body>` and all paragraphs.
@ -102,10 +95,6 @@ Bootstrap's base text is sized with global `font-size: 16px;` and `line-height:
<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>
{% endexample %}
<a id="type-lead"></a>
## Lead
Make a paragraph stand out by adding `.lead`.
@ -116,10 +105,6 @@ Make a paragraph stand out by adding `.lead`.
</p>
{% endexample %}
<a id="type-inline-text"></a>
## Inline text elements
Styling for all the common inline HTML5 elements.
@ -141,10 +126,6 @@ Styling for all the common inline HTML5 elements.
<p>Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
</div>
<a id="type-alignment"></a>
## Alignment classes
Easily realign text to components with text alignment classes.
@ -157,10 +138,6 @@ Easily realign text to components with text alignment classes.
<p class="text-nowrap">No wrap text.</p>
{% endexample %}
<a id="type-transformation"></a>
## Transformation classes
Transform text in components with text capitalization classes.
@ -171,10 +148,6 @@ Transform text in components with text capitalization classes.
<p class="text-capitalize">Capitalized text.</p>
{% endexample %}
<a id="type-abbreviations"></a>
## Abbreviations
Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a `title` attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.
@ -195,10 +168,6 @@ Add `.initialism` to an abbreviation for a slightly smaller font-size.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
{% endexample %}
<a id="type-address"></a>
## Address
Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with `<br>`.
@ -217,10 +186,6 @@ Present contact information for the nearest ancestor or the entire body of work.
</address>
{% endexample %}
<a id="type-blockquotes"></a>
## Blockquotes
For quoting blocks of content from another source within your document.
@ -261,10 +226,6 @@ Add `.blockquote-reverse` for a blockquote with right-aligned content.
</blockquote>
{% endexample %}
<a id="type-lists"></a>
## Lists
### Unordered