Bootstrap3.0 learning 13th rounds (navigation bar)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

This article mainly describes the following content:

A navigation bar is a responsive meta component that serves as a navigation header in your application or website. They can be folded (and turned on and off) on mobile devices and become horizontally expanded when the available width of the view increases.

Custom folding mode and horizontal mode threshold

Based on the length of the content you place on the navigation bar, you may need to adjust the threshold value for the navigation bar to enter the folding mode and horizontal mode. Change@grid-float-breakpointVariable values or CSS code added to your media query can meet your needs.

    <nav = role=>      <div =>          <button type= = data-toggle= data-target=>              <span =>Toggle navigation</span>              <span =></span>              <span =></span>              <span =></span>          </button>          <a = href=>Brand</a>      </div>      <div = id=>        <ul =>          <li =><a href=>Link</a></li>          <li><a href=>Link</a></li>          <li =>            <a href= = data-toggle=>Dropdown <b =></b></a>            <ul =>              <li><a href=>Action</a></li>              <li><a href=>Another action</a></li>              <li><a href=>Something  here</a></li>              <li =></li>              <li><a href=>Separated link</a></li>              <li =></li>              <li><a href=>One more separated link</a></li>            </ul>          </li>        </ul>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>        <ul =>          <li><a href=>Link</a></li>          <li =>            <a href= = data-toggle=>Dropdown <b =></b></a>            <ul =>              <li><a href=>Action</a></li>              <li><a href=>Another action</a></li>              <li><a href=>Something  here</a></li>              <li =></li>              <li><a href=>Separated link</a></li>            </ul>          </li>        </ul>      </div>    </nav>

This code is a bit long. Let's get some results first.

Next, we will gradually scale down the browser, that is, to make the browser width smaller.

First, the outermost container is the nav label, and the nav-bar style class is added to indicate that this is a navigation bar.

Then you can see the Header when the browser is scaled down to a certain extent.

      <div =>          <button type= = data-toggle= data-target=>              <span =>Toggle navigation</span>              <span =></span>              <span =></span>              <span =></span>          </button>          <a = href=>Brand</a>      </div>

Three span icons are nested in button labels. Then, give the navbar-toggle style class and attribute collapse (collapse). When you click it, the target is data-target.

Next, it is relatively simple. The drop-down menu, form, and drop-down menu are nested.

Enhance the accessibility of navigation bar

To enhance accessibility, you must add each navigation barrole="navigation".

Place the form in.navbar-formAnd collapse the viewport. The alignment option can be used to determine the position on the navigation bar.

Use.navbar-formAnd.form-inlineShared a lot of code.

     <nav = role=>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>     </nav> 

If you do not add a label to the input box, the screen reader may encounter problems. For the form in the navigation bar, you can use .sr-onlyClass hides the label.

 

For<form>In<button>Element, add.navbar-btnAfter this class, it can be vertically centered in the navigation bar.

<button type= =>Sign </button>

 

Wrap the text in.navbar-textTo have the correct line spacing and color<p>Label.

<p =>Signed   Mark Otto</p>

If you want to add a standard link to a standard navigation component, use.navbar-linkClass allows the link to have the correct default color and reversed color.

<p =>Signed   <a href= =>Mark Otto</a></p>

 

Use.navbar-leftOr.navbar-rightTool class alignment navigation links, forms, buttons, or text. Both types Use CSS floating styles in specific directions. For example, to align navigation links, place them in a separate tool class<ul>.

These classes are.pull-leftAnd.pull-rightBut they are limited to media queries, which makes it easier to process navigation bar components on screens of various sizes.

Add.navbar-fixed-topYou can pin the navigation bar to the top.

     <nav = role=>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>        <button type= =>Sign </button>     </nav> 

You need to set inner padding for the body tag)

This fixed navigation bar will cover other content on the page, unless you give<body>Thepadding. You can use your own values or the code given below. Tip: the default height of the navigation bar is 50px.

body { padding-top: 70px; }

Must be placed in the Bootstrap CSS Core FileAfter.

Use.navbar-fixed-bottom.

     <nav = role=>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>        <button type= =>Sign </button>     </nav> 

You need to set the internal (padding) for the body tag)

This fixed navigation bar will cover other content on the page, unless you give<body>Set at the bottompadding. You can use your own values or the code given below. Tip: the default height of the navigation bar is 50px.

body { padding-bottom: 70px; }

The core of Bootstrap CSS must be loaded.AfterUse it.

Add.navbar-static-topYou can create a navigation bar with the page. It disappears as the page rolls down. And.navbar-fixed-*You don't needbodyAdd padding.

     <nav = role=>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>        <button type= =>Sign </button>     </nav> 

Add.navbar-inverseClass to change the appearance of the navigation bar.

     <nav = role=>        <form = role=>          <div =>            <input type= = placeholder=>          </div>          <button type= =>Submit</button>        </form>        <button type= =>Sign </button>     </nav> 

The most important learning of a navigation bar is the simple case of the beginning. You just need to try it and then change the style through some style classes.

This article has been updated to Bootstrap3.0 getting started learning series http://www.cnblogs.com/aehyok/p/3404867.html