Navbar Menu Variations - Bootstrap Jake Spurlock

The Bootstrap navbar can be dynamic in its positioning. By default, it is a block-level element that takes its positioning based on its placement in the HTML. With a few helper

Navbar | 55

classes, you can place it either on the top or bottom of the page, or you can make it scroll statically with the page.

Fixed top navbar

If you want the navbar fixed to the top, add .navbar-fixed-top to the .navbar class.

To prevent the navbar from sitting on top of other content in the body of the page, add at least 40 pixels of padding to the <body> tag:

<div class="navbar navbar-fixed-top">

<a class="brand" href="#">Title</a>

</ul>

</div>

</div>

Fixed bottom navbar

To affix the navbar to the bottom of the page, simply add the .fixed-navbar-bottom class to the navbar. Once again, to prevent overlap, add at least 40 pixels of padding to the <body> tag:

<div class="navbar navbar-fixed-bottom">

<a class="brand" href="#">Title</a>

</ul>

</div>

</div>

Static top navbar

To create a navbar that scrolls with the page, add the .navbar-static-top class. This class does not require adding the padding to the <body>:

<div class="navbar navbar-static-top">

<a class="brand" href="#">Title</a>

</ul>

</div>

</div>

Responsive navbar

Like the rest of Bootstrap, the navbar can be totally responsive as shown in Figure 3-26. To add the responsive features, the content that you want to be collapsed needs to be wrapped in a <div> with .nav-collapse.collapse as a class. The collapsing nature is tripped by a button that has a the class of .btn-navbar and then features two data- elements. The first, data-toggle, is used to tell the JavaScript what to do with the button, and the second, data-target, indicates which element to toggle. Three

<spans> with a class of .icon-bar create what I like to call the hamburger button. This will toggle the elements that are in the .nav-collapse <div>. For this feature to work, the bootstrap-responsive.css and either the collapse.js or the full bootstrap.js files must be included.

Figure 3-26. Responsive navbar

Use the following code to create a responsive navbar:

<div class="header">

<a class="btn btn-navbar" data-toggle="collapse"

data-target=".nav-collapse">

</a>

Navbar | 57

<a href="#" class="brand">Project Name</a>

</div>

</div>

Inverted navbar

To create an inverted navbar with a black background and white text as shown in Figure 3-27, simply add .navbar-inverse to the .navbar class:

<div class="navbar navbar-inverse">

...

</div>

Figure 3-27. Inverted navbar

Breadcrumbs

Breadcrumbs are a great way to show hierarchy-based information for a site (see Figure 3-28). In the case of blogs, breadcrumbs can show the dates of publishing, cat‐

egories, or tags. A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb. There is a also a helper class of .divider that mutes the colors and makes the text a little smaller. You can use forward slashes, arrows, or any divided that you choose. Note that the divider in the breadcrumbs has a slightly different markup than the navbar example.

The following code uses the class .breadcrumb:

<ul class="breadcrumb">

<li><a href="#">December</a> <span class="divider">/</span></li>

</ul>

<ul class="breadcrumb">

<li><a href="#">Dinner Menu</a> <span class="divider">→</span></li>

<li><a href="#">Specials</a> <span class="divider">→</span></li>

<li><a href="#">Steaks</a></li>

</ul>

<ul class="breadcrumb">

<li><a href="#">Electronics</a> <span class="divider">»</span></li>

<li><a href="#">Raspberry Pi</a></li>

</ul>

Figure 3-28. Breadcrumb

Pagination

Bootstrap handles pagination like a lot of other interface elements, an unordered list, with wrapper a <div> that has a specific class that identifies the element. In the basic form, adding .pagination to the parent <div> creates a row of bordered links. Each of the list items can be additionally styled by using the .disabled or .active class. See Figures 3-29 and 3-30 for examples of this.

Here’s the code for basic pagination:

<div class="pagination">

<ul>

</ul>

</div>

Pagination | 59

Figure 3-29. Basic pagination

And here’s the code for pagination using helper classes:

<div class="pagination pagination-centered">

<ul>

In addition to the .active and .disabled classes for list items, you can add .pagination-centered to the parent <div>. This will center the contents of the

<div>. If you want the items right-aligned in the <div>, add .pagination-right. For sizing, in addition to the normal size, there are three other sizes that can be applied by adding a class to the wrapper <div>: .pagination-large, .pagination-small, and .pagination-mini (see Figure 3-31):

<ul>

...

</ul>

</div>

Figure 3-31. Pagination sizes

Pager

If you need to create simple pagination links that go beyond text, the pager can work quite well. Like the pagination links, the markup is an unordered list that sheds the wrapper <div>. By default, the links are centered (see Figure 3-32).

Figure 3-32. Basic pager

The following is the code for a basic pager:

<ul class="pager">

<li><a href="#">Previous</a></li>

</ul>

To left- or right-align the links, you just need to add the .previous and .next class as to the list items (see Figure 3-33). Also, like .pagination in Figure 3-31, you can add the .disabled class for a muted look.

Figure 3-33. Aligned page links

Pagination | 61

The following is the code for aligning page links:

<ul class="pager">

<a href="#">← Older</a>

</li>

<a href="#">Newer →</a>

</li>

</ul>

Labels

Labels are great for offering counts, tips, or other markup for pages. They’re another of my favorite little Bootstrap touches. Figure 3-34 shows some labels that can be used.

Figure 3-34. Labels

Here’s the code to use these labels:

<span class="label">Default</span>

<span class="label label-success">Success</span>

<span class="label label-warning">Warning</span>

<span class="label label-important">Important</span>

<span class="label label-info">Info</span>

<span class="label label-inverse">Inverse</span>

Badges

Badges are similar to labels; the primary difference is that the corners are more rounded.

The colors of badges reflect the same classes as labels (see Figure 3-35).

Figure 3-35. Badges

The following code shows how to use badges:

<span class="badge">1</span>

<span class="badge badge-success">2</span>

<span class="badge badge-warning">4</span>

<span class="badge badge-important">6</span>

<span class="badge badge-info">8</span>

<span class="badge badge-inverse">10</span>

在文檔中 Bootstrap Jake Spurlock (頁 71-79)