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
2026-06-11 18:02:28 +03:00 · 2014-11-30 20:17:45 -08:00
parent b53ad74d47 0eb2c922d8
commit b648a77ed3
89 changed files with 4375 additions and 2859 deletions
@@ -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">
    &#9776;
  </button>
-</div>
+</nav>
 {% endexample %}