Skip to content
GitLab
Commit d9bb7dda authored by Mark Otto's avatar Mark Otto
Browse files

rearrange docs components

parent 60cf7d45
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1017 additions and 1550 deletions
+1017 -1550
docs/_includes/components/alerts.html deleted 100644 → 0
+ 0
- 85
View file @ 60cf7d45
<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>
docs/_includes/components/badges.html deleted 100644 → 0
+ 0
- 72
View file @ 60cf7d45
<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>
docs/_includes/components/dropdowns.html deleted 100644 → 0
+ 0
- 98
View file @ 60cf7d45
<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>
docs/_includes/components/navs.html deleted 100644 → 0
+ 0
- 235
View file @ 60cf7d45
<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>
docs/components.html
+ 0
- 4
View file @ d9bb7dda
......@@ -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 %}
docs/components/alerts.md 0 → 100644
+ 66
- 0
View file @ d9bb7dda
---
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 %}
docs/components/badges.md 0 → 100644
+ 68
- 0
View file @ d9bb7dda
---
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 %}
docs/components/buttons.md
+ 4
- 20
View file @ d9bb7dda
<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>
......
docs/components/code.md
+ 4
- 23
View file @ d9bb7dda
<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.
......
docs/components/dropdowns.md 0 → 100644
+ 100
- 0
View file @ d9bb7dda
---
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 %}
docs/components/forms.md
+ 165
- 492
View file @ d9bb7dda
This diff is collapsed.
docs/components/navs.md 0 → 100644
+ 162
- 0
View file @ d9bb7dda
---
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 %}
docs/components/scaffolding.md
+ 0
- 20
View file @ d9bb7dda
......@@ -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.
......
docs/components/tables.html deleted 100644 → 0
+ 0
- 458
View file @ 60cf7d45
<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>
docs/components/tables.md 0 → 100644
+ 444
- 0
View file @ d9bb7dda
---
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 %}
docs/components/type.md
+ 4
- 43
View file @ d9bb7dda
<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
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment