mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03: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
+14
-15
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user