@@ -16,7 +16,6 @@ The navbar is a simple wrapper for positioning branding, navigation, and other e
...
@@ -16,7 +16,6 @@ The navbar is a simple wrapper for positioning branding, navigation, and other e
Here's what you need to know before getting started with the navbar:
Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
- Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
- 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.
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use `.pull-left` and `.pull-right` to quickly align sub-components.
- Use `.pull-left` and `.pull-right` to quickly align sub-components.
- 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.
- 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.
<p>This example is a quick exercise to illustrate how the default navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
<p>This example is a quick exercise to illustrate how the default navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
@@ -65,7 +65,7 @@ Put it all together and your pages should look like this:
...
@@ -65,7 +65,7 @@ Put it all together and your pages should look like this:
</html>
</html>
{% endhighlight %}
{% endhighlight %}
That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/scaffolding) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
That's all you need for overall page requirements. Visit the [Layout docs]({{ site.baseurl }}/layout/overview) or [our official examples]({{ site.baseurl }}/examples/) to start laying out your site's content and components.
@@ -96,7 +96,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
...
@@ -96,7 +96,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
<divclass="bd-featurette">
<divclass="bd-featurette">
<divclass="container">
<divclass="container">
<h2class="bd-featurette-title">Built with Bootstrap.</h2>
<h2class="bd-featurette-title">Built with Bootstrap.</h2>
<pclass="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <ahref="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
<pclass="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <ahref="../examples">collection of examples</a> or by exploring some of our favorites.</p>