mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-26 05:19:15 +02:00
Merge branch 'master' into v4
Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
This commit is contained in:
Mark Otto
@@ -16,7 +16,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Default</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@@ -26,7 +26,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@@ -36,7 +36,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success</button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@@ -46,7 +46,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info</button>
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@@ -56,7 +56,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning</button>
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@@ -66,7 +66,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@@ -80,7 +80,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
{% highlight html %}
|
||||
<!-- Single button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -100,7 +100,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
<div class="bs-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Default</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -113,7 +113,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -126,7 +126,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -139,7 +139,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -152,7 +152,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -165,7 +165,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -182,7 +182,7 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
<!-- Split button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -202,7 +202,7 @@ Button dropdowns work with buttons of all sizes.
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -216,7 +216,7 @@ Button dropdowns work with buttons of all sizes.
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -230,7 +230,7 @@ Button dropdowns work with buttons of all sizes.
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
Extra small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -247,7 +247,7 @@ Button dropdowns work with buttons of all sizes.
|
||||
{% highlight html %}
|
||||
<!-- Large button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -257,7 +257,7 @@ Button dropdowns work with buttons of all sizes.
|
||||
|
||||
<!-- Small button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -267,7 +267,7 @@ Button dropdowns work with buttons of all sizes.
|
||||
|
||||
<!-- Extra small button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
Extra small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -284,7 +284,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -297,7 +297,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-primary">Right dropup</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
@@ -314,7 +314,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
||||
{% highlight html %}
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
|
||||
@@ -10,12 +10,19 @@ Group a series of buttons together on a single line with the button group. Add o
|
||||
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Ensure correct <code>role</code> and provide a label</h4>
|
||||
<p>In order for assistive technologies – such as screen readers – to convey that a series of buttons is grouped, an appropriate <code>role</code> attribute needs to be provided. For button groups, this would be <code>role="group"</code>, while toolbars should have a <code>role="toolbar"</code>.</p>
|
||||
<p>One exception are groups which only contain a single control (for instance the <a href="#btn-groups-justified">justified button groups</a> with <code><button></code> elements) or a dropdown.</p>
|
||||
<p>In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct <code>role</code> attribute. In the examples provided here, we use <code>aria-label</code>, but alternatives such as <code>aria-labelledby</code> can also be used.</p>
|
||||
</div>
|
||||
|
||||
### Basic example
|
||||
|
||||
Wrap a series of buttons with `.btn` in `.btn-group`.
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
@@ -27,19 +34,19 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
|
||||
Combine sets of button groups into button toolbars for more complex components.
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-secondary">3</button>
|
||||
<button type="button" class="btn btn-secondary">4</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-secondary">5</button>
|
||||
<button type="button" class="btn btn-secondary">6</button>
|
||||
<button type="button" class="btn btn-secondary">7</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-secondary">8</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,41 +57,36 @@ Combine sets of button groups into button toolbars for more complex components.
|
||||
Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to the `.btn-group`.
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-lg">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group" role="group" aria-label="Default button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group btn-group-xs">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group btn-group-xs" role="group" aria-label="Extra small button group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="btn-group btn-group-lg">...</div>
|
||||
<div class="btn-group">...</div>
|
||||
<div class="btn-group btn-group-sm">...</div>
|
||||
<div class="btn-group btn-group-xs">...</div>
|
||||
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
|
||||
<div class="btn-group" role="group" aria-label="...">...</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
|
||||
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
|
||||
{% endhighlight %}
|
||||
|
||||
### Nesting
|
||||
@@ -92,12 +94,12 @@ Instead of applying button sizing classes to every button in a group, just add `
|
||||
Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||||
<button type="button" class="btn btn-secondary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
|
||||
@@ -113,11 +115,11 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
|
||||
Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**
|
||||
|
||||
<div class="bs-example">
|
||||
<div class="btn-group-vertical">
|
||||
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
@@ -127,8 +129,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
|
||||
@@ -136,8 +138,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
@@ -145,8 +147,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
@@ -176,18 +178,19 @@ Make a group of buttons stretch at equal sizes to span the entire width of its p
|
||||
|
||||
Just wrap a series of `.btn`s in `.btn-group.btn-group-justified`.
|
||||
|
||||
{% example html %}
|
||||
<div class="bs-example">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
|
||||
<a class="btn btn-secondary" href="#" role="button">Left</a>
|
||||
<a class="btn btn-secondary" href="#" role="button">Middle</a>
|
||||
<a class="btn btn-secondary" href="#" role="button">Right</a>
|
||||
</div>
|
||||
<br>
|
||||
<div class="btn-group btn-group-justified">
|
||||
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group with nested dropdown">
|
||||
<a class="btn btn-secondary" href="#" role="button">Left</a>
|
||||
<a class="btn btn-secondary" href="#" role="button">Middle</a>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-secondary dropdown-toggle" href="#" data-toggle="dropdown">
|
||||
<div class="btn-group" role="group">
|
||||
<a class="btn btn-secondary dropdown-toggle" href="#" data-toggle="dropdown"role="button" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -200,41 +203,29 @@ Just wrap a series of `.btn`s in `.btn-group.btn-group-justified`.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% highlight html %}
|
||||
<div class="btn-group btn-group-justified">
|
||||
...
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Links acting as buttons</h4>
|
||||
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
#### With `<button>` elements
|
||||
|
||||
To use justified button groups with `<button>` elements, **you must wrap each button in a button group**. Most browsers don't properly apply our CSS for justification to `<button>` elements, but since we support button dropdowns, we can workaround that.
|
||||
To use justified button groups with `<button>` elements, **you must wrap each button in a button group**. Most browsers don't properly apply our CSS for justification to `<button>` elements, but since we support button dropdowns, we can work around that.
|
||||
|
||||
{% example html %}
|
||||
<div class="bs-example">
|
||||
<div class="btn-group btn-group-justified">
|
||||
<div class="btn-group">
|
||||
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="btn-group btn-group-justified">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Left</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Middle</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Right</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
{% endexample %}
|
||||
|
||||
@@ -25,6 +25,33 @@ Use any of the available button classes to quickly create a styled button.
|
||||
<button type="button" class="btn btn-link">Link</button>
|
||||
{% endexample %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Conveying meaning to assistive technologies</h4>
|
||||
<p>Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
## Button tags
|
||||
|
||||
Use the button classes on an `<a>`, `<button>`, or `<input>` element.
|
||||
|
||||
{% example html %}
|
||||
<a class="btn btn-secondary" href="#" role="button">Link</a>
|
||||
<button class="btn btn-secondary" type="submit">Button</button>
|
||||
<input class="btn btn-secondary" type="button" value="Input">
|
||||
<input class="btn btn-secondary" type="submit" value="Submit">
|
||||
{% endexample %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Links acting as buttons</h4>
|
||||
<p>If the <code><a></code> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate <code>role="button"</code>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Cross-browser rendering</h4>
|
||||
<p>As a best practice, <strong>we highly recommend using the <code><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
|
||||
<p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox <30</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
|
||||
</div>
|
||||
|
||||
## Sizes
|
||||
|
||||
Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.
|
||||
@@ -53,7 +80,7 @@ Create block level buttons—those that span the full width of a parent—by add
|
||||
|
||||
## 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.
|
||||
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` (and include the <code>aria-pressed="true"</code> attribute) should you need to replicate the state programmatically.
|
||||
|
||||
{% example html %}
|
||||
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
|
||||
@@ -83,27 +110,10 @@ As `<a>` elements don't support the `disabled` attribute, you must add the `.dis
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Link functionality caveat</h4>
|
||||
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, 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>
|
||||
<p>This class uses <code>pointer-events: none</code> to try to disable the link functionality of <code><a></code>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support <code>pointer-events: none</code>, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Context-specific usage</h4>
|
||||
<p>While button classes can be used on <code><a></code> and <code><button></code> elements, only <code><button></code> elements are supported within our nav and navbar components.</p>
|
||||
</div>
|
||||
|
||||
## Button tags
|
||||
|
||||
Use the button classes on an `<a>`, `<button>`, or `<input>` element.
|
||||
|
||||
{% example html %}
|
||||
<a class="btn btn-secondary" href="#" role="button">Link</a>
|
||||
<button class="btn btn-secondary" type="submit">Button</button>
|
||||
<input class="btn btn-secondary" type="button" value="Input">
|
||||
<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><button></code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
|
||||
<p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox <30</a> that prevents us from setting the <code>line-height</code> of <code><input></code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@ Bootstrap normalizes common HTML5 form elements and adds a number of layout opti
|
||||
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">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
||||
@@ -52,17 +52,11 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
|
||||
</div>
|
||||
|
||||
{% example html %}
|
||||
<form class="form-inline" role="form">
|
||||
<form class="form-inline">
|
||||
<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">
|
||||
@@ -72,7 +66,21 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-secondary">Sign in</button>
|
||||
<button type="submit" class="btn btn-default">Sign in</button>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">$</div>
|
||||
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
|
||||
<div class="input-group-addon">.00</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Transfer cash</button>
|
||||
</form>
|
||||
{% endexample %}
|
||||
|
||||
@@ -81,7 +89,7 @@ Add `.form-inline` to your `<form>` for left-aligned and inline-block controls.
|
||||
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">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
@@ -253,7 +261,7 @@ Use the default option, or add `multiple` to show multiple options at once.
|
||||
When you need to place plain text next to a form label within a form, use the `.form-control-static` class on a `<p>`.
|
||||
|
||||
{% example html %}
|
||||
<form class="form-horizontal" role="form">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
@@ -270,7 +278,7 @@ When you need to place plain text next to a form label within a form, use the `.
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<form class="form-inline" role="form">
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<label class="sr-only">Email</label>
|
||||
<p class="form-control-static">email@example.com</p>
|
||||
@@ -288,7 +296,7 @@ When you need to place plain text next to a form label within a form, use the `.
|
||||
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">
|
||||
<form>
|
||||
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
|
||||
</form>
|
||||
</div>
|
||||
@@ -309,7 +317,7 @@ Add the `disabled` boolean attribute on an `<input>`, `<select>`, or `<textarea>
|
||||
Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
|
||||
|
||||
{% example html %}
|
||||
<form role="form">
|
||||
<form>
|
||||
<fieldset disabled>
|
||||
<div class="form-group">
|
||||
<label for="disabledTextInput">Disabled input</label>
|
||||
@@ -333,7 +341,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Caveat about link functionality of `<a>`</h4>
|
||||
<p>Our styles use `pointer-events: none` to try to disable the link functionality of <code><a class="btn btn-*"></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>
|
||||
<p>By default, browsers will treat all native form controls (<code><input></code>, <code><select></code> and <code><button></code> elements) inside a <code><fieldset disabled></code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code><a ... class="btn btn-*"></code> elements, these will only be given a style of <code>pointer-events: none</code>. As noted in the section about <a href="#buttons-disabled">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
@@ -418,7 +426,7 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<form class="form-horizontal" role="form">
|
||||
<form class="form-horizontal">
|
||||
<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">
|
||||
@@ -430,7 +438,7 @@ You can also add optional feedback icons with the addition of `.has-feedback` an
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<form class="form-inline" role="form">
|
||||
<form class="form-inline">
|
||||
<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">
|
||||
@@ -466,7 +474,7 @@ Set heights using classes like `.input-lg`, and set widths using grid column cla
|
||||
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">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group form-group-lg">
|
||||
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
|
||||
<div class="col-sm-10">
|
||||
|
||||
@@ -20,6 +20,10 @@ Convey meaning through color with a handful of emphasis utility classes. These m
|
||||
<h4>Dealing with specificity</h4>
|
||||
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Conveying meaning to assistive technologies</h4>
|
||||
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.</p>
|
||||
</div>
|
||||
|
||||
### Contextual backgrounds
|
||||
|
||||
@@ -38,6 +42,11 @@ Similar to the contextual text color classes, easily set the background of an el
|
||||
<p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code><div></code> with the class.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Conveying meaning to assistive technologies</h4>
|
||||
<p>As with <a href="#helper-classes-colors">contextual colors</a>, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.</p>
|
||||
</div>
|
||||
|
||||
### Close icon
|
||||
|
||||
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`.
|
||||
|
||||
@@ -122,7 +122,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@@ -138,7 +138,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@@ -160,7 +160,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
@@ -179,7 +179,7 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
|
||||
@@ -12,17 +12,18 @@ Here's what you need to know before getting started with the navbar:
|
||||
- Navbars require a wrapping `.navbar` and either a color scheme class or custom styles.
|
||||
- When using multiple components in a navbar, some [alignment classes](#alignment) are required.
|
||||
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
|
||||
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
|
||||
|
||||
### Branding
|
||||
|
||||
Name your company, product, or project with `.navbar-brand`.
|
||||
|
||||
{% example html %}
|
||||
<div class="navbar navbar-default">
|
||||
<nav class="navbar navbar-default">
|
||||
<h3 class="navbar-brand">
|
||||
<a href="#">Navbar</a>
|
||||
</h3>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### Navigation
|
||||
@@ -30,10 +31,10 @@ Name your company, product, or project with `.navbar-brand`.
|
||||
Use `.nav-pills` within a navbar for basic navigation.
|
||||
|
||||
{% example html %}
|
||||
<div class="navbar navbar-default">
|
||||
<nav class="navbar navbar-default">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home</a>
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
@@ -45,7 +46,7 @@ Use `.nav-pills` within a navbar for basic navigation.
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### Inline forms
|
||||
@@ -53,12 +54,12 @@ Use `.nav-pills` within a navbar for basic navigation.
|
||||
Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons.
|
||||
|
||||
{% example html %}
|
||||
<div class="navbar navbar-default">
|
||||
<nav class="navbar navbar-default">
|
||||
<form class="form-inline">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-primary" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### Containers
|
||||
@@ -66,22 +67,22 @@ Add an `.inline-form` within the navbar with nearly any combination of form cont
|
||||
Although it's not required, you can wrap a navbar in a `.container` or add one within for basic horizontal control.
|
||||
|
||||
{% example html %}
|
||||
<div class="navbar navbar-default">
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container">
|
||||
<h3 class="navbar-brand">
|
||||
<a href="#">Navbar</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<div class="navbar navbar-default">
|
||||
<nav class="navbar navbar-default">
|
||||
<h3 class="navbar-brand">
|
||||
<a href="#">Navbar</a>
|
||||
</h3>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
@@ -90,13 +91,13 @@ Although it's not required, you can wrap a navbar in a `.container` or add one w
|
||||
Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
|
||||
|
||||
{% example html %}
|
||||
<div class="navbar navbar-default">
|
||||
<nav class="navbar navbar-default">
|
||||
<h3 class="navbar-brand pull-left">
|
||||
<a href="#">Navbar</a>
|
||||
</h3>
|
||||
<ul class="nav nav-pills pull-left">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home</a>
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
@@ -116,7 +117,7 @@ Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
|
||||
<a class="nav-link" href="#">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### Inverse color scheme
|
||||
@@ -124,13 +125,13 @@ Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
|
||||
Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text.
|
||||
|
||||
{% example html %}
|
||||
<div class="navbar navbar-inverse">
|
||||
<nav class="navbar navbar-inverse">
|
||||
<h3 class="navbar-brand pull-left">
|
||||
<a href="#">Navbar</a>
|
||||
</h3>
|
||||
<ul class="nav nav-pills pull-left">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home</a>
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
@@ -146,12 +147,12 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
<button class="btn btn-primary" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
### Collapsible content
|
||||
|
||||
Our collapse plugin allows you to use a `<button>` to toggle hidden content.
|
||||
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
|
||||
|
||||
{% example html %}
|
||||
<div class="collapse" id="navbar-header">
|
||||
@@ -160,9 +161,9 @@ Our collapse plugin allows you to use a `<button>` to toggle hidden content.
|
||||
<p>Toggleable via the navbar brand.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-default">
|
||||
<nav class="navbar navbar-default">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
|
||||
☰
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
@@ -5,12 +5,16 @@ 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.
|
||||
|
||||
## Regarding accessibility
|
||||
|
||||
If you are using navs to provide a navigation bar, be sure to add a `role="navigation"` to the most logical parent container of the `<ul>`, or wrap a `<nav>` element around the whole navigation. Do not add the role to the `<ul>` itself, as this would prevent it from being announced as an actual list by assistive technologies.
|
||||
|
||||
## 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">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
@@ -29,7 +33,7 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
|
||||
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">
|
||||
<nav class="nav">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Another link</a>
|
||||
@@ -39,10 +43,10 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
|
||||
|
||||
## Tabs
|
||||
|
||||
Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface.
|
||||
Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our [tab JavaScript plugin](../javascript/tabs).
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item active" role="presentation">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
@@ -58,17 +62,12 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
|
||||
</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">
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item active" role="presentation">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
@@ -89,7 +88,7 @@ Take that same HTML, but use `.nav-pills` instead:
|
||||
Just add `.nav-stacked` to the `.nav.nav-pills`.
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-pills nav-stacked" role="tablist">
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li class="nav-item active" role="presentation">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
@@ -112,12 +111,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||
### Tabs with dropdowns
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<ul class="nav nav-tabs">
|
||||
<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>
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
@@ -138,12 +137,12 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||
### Pills with dropdowns
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<ul class="nav nav-pills">
|
||||
<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>
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
|
||||
@@ -12,13 +12,23 @@ Simple pagination inspired by Rdio, great for apps and search results. The large
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li><a href="#">«</a></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
@@ -30,25 +40,41 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><a href="#">«</a></li>
|
||||
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
|
||||
<li class="disabled">
|
||||
<a href="#">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="active">
|
||||
<a href="#">1 <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
You can optionally swap out active or disabled anchors for `<span>` to remove click functionality while retaining intended styles.
|
||||
You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.
|
||||
|
||||
{% highlight html %}
|
||||
<nav>
|
||||
<ul class="pagination">
|
||||
<li class="disabled"><span>«</span></li>
|
||||
<li class="disabled">
|
||||
<span>
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</span>
|
||||
</li>
|
||||
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
|
||||
...
|
||||
</ul>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
@@ -61,11 +87,21 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination pagination-lg">
|
||||
<li><a href="#">«</a></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
@@ -73,11 +109,21 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm">
|
||||
<li><a href="#">«</a></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">»</a></li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
@@ -106,8 +152,8 @@ Alternatively, you can align each link to the sides:
|
||||
{% example html %}
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li class="previous"><a href="#">← Older</a></li>
|
||||
<li class="next"><a href="#">Newer →</a></li>
|
||||
<li class="previous"><a href="#">Older</a></li>
|
||||
<li class="next"><a href="#">Newer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endexample %}
|
||||
@@ -120,8 +166,8 @@ Pager links also use the `.disabled` class.
|
||||
{% highlight html %}
|
||||
<nav>
|
||||
<ul class="pager">
|
||||
<li class="previous disabled"><a href="#">← Older</a></li>
|
||||
<li class="next"><a href="#">Newer →</a></li>
|
||||
<li class="previous disabled"><a href="#">Older</a></li>
|
||||
<li class="next"><a href="#">Newer</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
@@ -19,19 +19,19 @@ Due to the widespread use of tables across plugins like calendars and date picke
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@@ -54,19 +54,19 @@ Due to the widespread use of tables across plugins like calendars and date picke
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@@ -91,19 +91,19 @@ Use one of two modifier classes to make `<thead>`s appear light or dark gray.
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@@ -119,19 +119,19 @@ Use one of two modifier classes to make `<thead>`s appear light or dark gray.
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@@ -156,19 +156,19 @@ Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td>Larry</td>
|
||||
<td>the Bird</td>
|
||||
<td>@twitter</td>
|
||||
@@ -193,7 +193,7 @@ Add `.table-bordered` for borders on all sides of the table and cells.
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2">1</td>
|
||||
<th scope="rowspan" rowspan="2">1</tg>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
@@ -204,13 +204,13 @@ Add `.table-bordered` for borders on all sides of the table and cells.
|
||||
<td>@TwBootstrap</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
@@ -234,19 +234,19 @@ Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
@@ -270,19 +270,19 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
@@ -308,33 +308,33 @@ Use contextual classes to color table rows or individual cells.
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="rowspan">
|
||||
<code>.active</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Applies the hover color to a particular row or cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="rowspan">
|
||||
<code>.success</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a successful or positive action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="rowspan">
|
||||
<code>.info</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a neutral informative change or action</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="rowspan">
|
||||
<code>.warning</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a warning that might need attention</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<th scope="rowspan">
|
||||
<code>.danger</code>
|
||||
</td>
|
||||
</th>
|
||||
<td>Indicates a dangerous or potentially negative action</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -353,55 +353,55 @@ Use contextual classes to color table rows or individual cells.
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="active">
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="success">
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<th scope="rowspan">4</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="info">
|
||||
<td>5</td>
|
||||
<th scope="rowspan">5</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<th scope="rowspan">6</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="warning">
|
||||
<td>7</td>
|
||||
<th scope="rowspan">7</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<th scope="rowspan">8</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
</tr>
|
||||
<tr class="danger">
|
||||
<td>9</td>
|
||||
<th scope="rowspan">9</th>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
<td>Column content</td>
|
||||
@@ -459,7 +459,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@@ -468,7 +468,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@@ -477,7 +477,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@@ -504,7 +504,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@@ -513,7 +513,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@@ -522,7 +522,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@@ -561,7 +561,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th scope="rowspan">1</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@@ -570,7 +570,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th scope="rowspan">2</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
@@ -579,7 +579,7 @@ Create responsive tables by wrapping any `.table` in `.table-responsive` to make
|
||||
<td>Table cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th scope="rowspan">3</th>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
<td>Table cell</td>
|
||||
|
||||
Reference in New Issue
Block a user