Navbar source code analysis in the Bootstrap navigation bar,

Navbar source code analysis in the Bootstrap navigation bar,

1. This document analyzes the bootstrap navigation bar and Its responsive implementation methods to improve its css level.

First, paste a bootstrap navigation bar template.

Http://v3.bootcss.com/examples/navbar-fixed-top/

2. The Code is as follows:

 1 <nav class="navbar navbar-default navbar-fixed-top"> 2         <div class="container-fluid"> 3           <div class="navbar-header"> 4             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 5               <span class="sr-only">Toggle navigation</span> 6               <span class="icon-bar"></span> 7               <span class="icon-bar"></span> 8               <span class="icon-bar"></span> 9             </button>10             <a class="navbar-brand" href="#">Project name</a>11           </div>12           <div id="navbar" class="navbar-collapse collapse">13             <ul class="nav navbar-nav">14               <li class="active"><a href="#">Home</a></li>15               <li><a href="#">About</a></li>16               <li><a href="#">Contact</a></li>17               <li class="dropdown">18                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>19                 <ul class="dropdown-menu">20                   <li><a href="#">Action</a></li>21                   <li><a href="#">Another action</a></li>22                   <li><a href="#">Something else here</a></li>23                   <li role="separator" class="divider"></li>24                   <li class="dropdown-header">Nav header</li>25                   <li><a href="#">Separated link</a></li>26                   <li><a href="#">One more separated link</a></li>27                 </ul>28               </li>29             </ul>30             <ul class="nav navbar-nav navbar-right">31               32             </ul>33           </div><!--/.nav-collapse -->34         </div><!--/.container-fluld -->35       </nav>

The effect is as follows;

Mobile Terminal:

 

 

3. Code Analysis

Analysis of each label and its style from the outside to the inside

3.1 div container on the outermost layer (style: navbar-default navbar-fixed-top ):

Source code

. Navbar {position: relative; min-height: 50px;/** the minimum width of the navigation bar is 50px **/margin-bottom: 20px;/*****/border: 1px solid transparent;} @ media (min-width: 768px) {/**> = 768 devices, actually pc, the width attribute of a mobile device is smaller than 768px. ** // ** many people may not understand it. In fact, the width attribute of a mobile device is measured by device-width, it is not a simple concept of number of images. If you have any questions, you are recommended to search for the device-width keyword **/. navbar {border-radius: 4px ;/****/}}. navbar-default {/** color of the device navigation bar **/background-color: # f8f8f8; border-color: # e7e7e7 ;}. navbar-fixed-top ,. navbar-fixed-bottom {position: fixed;/** relative browser positioning **/right: 0; left: 0; z-index: 1030; /** priorities of styles stacked on the upper layer **/}

The source code shows that the outermost div container is mainly used to create a bar container with a minimum height of 50px (. navbar), relative to browser positioning (. navbar-fixed-top) to determine the color of the navigation bar (. navbar-default)

For device-width knowledge, refer to this article http://www.tuicool.com/articles/ri2AJv

3.2 div container with navbar-header style

The css source code is as follows:

/** When displayed on the pc side, the style changes to the right. This style is invalid on the mobile side **/

@media (min-width: 768px) {  .navbar-header {    float: left;  }}

This div is displayed on pc and mobile as follows:

Pc end:

Mobile Terminal:

It can be seen that on the pc side, the browser width is sufficient, and this div only exists as a small block-level element. On the mobile side, the screen width is insufficient, therefore, it is implemented by pulling the menu below other elements in the navigation bar. This div fills the parent container separately.

There are also two word elements under navbar-header: <button> In the navbar-toggle style and <a> In the navbar-brand Style

The css source code is as follows:

. Navbar-toggle {/** draws a rounded rectangle on the rightmost side. **/position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px ;}. navbar-toggle: focus {outline: 0;} @ media (min-width: 768px) {/** this button is not displayed on the pc side **/. navbar-toggle {display: none ;}}. navbar-toggle. icon-bar {/** icon-bar draws a horizontal line in the button box **/display: block; width: 22px; height: 2px; border-radius: 1px ;}. navbar-brand {float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px ;}

At this point, we have figured out the navbar-header component. This is a responsive layout. On the pc side, navbar-header only displays brand text. On the mobile end, navbar-header will exclusively occupy the entire navigation bar navbar, and other parts will be hidden.

3.3 continue to view the navbar-collapse component

Source code:

/** Because. navbar-collapse ,. navbar-collapse.in ,. collapse is defined on the pc end (@ meida min-width: 768px). Therefore, the attribute is valid only for the mobile end **/

. Navbar-collapse {padding-right: 15px; padding-left: 15px; overflow-x: visible;-webkit-overflow-scrolling: touch; border-top: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba (255,255,255 ,. (1); box-shadow: inset 0 1px 0 rgba (255,255,255 ,. 1 );}. navbar-collapse.in {/** click the button of navbar-header navbar-toggle, navbar-collapse will be modified by js. Navbar-collapse in **/overflow-y: auto ;}. collapse {/** determines that this component is not displayed on the Mobile End **/display: none;/** the click event will be overwritten **/}

. Collapse. in {/** after a click event occurs, it is displayed as a block-level element to overwrite the display: none **/
Display: block;
}

@ Media (min-width: 768px) {/** pc end **/. navbar-collapse {width: auto; border-top: 0;-webkit-box-shadow: none ;}. navbar-collapse.collapse {display: block! Important;/** as a block-level display, because the navbar-header of the sibling node is a floating element, navbar-collapse occupies the width and height of the parent element. **/height: auto! Important; padding-bottom: 0; overflow: visible! Important ;}. navbar-collapse.in {overflow-y: visible ;}. navbar-fixed-top. navbar-collapse ,. navbar-static-top. navbar-collapse ,. navbar-fixed-bottom. navbar-collapse {padding-right: 0; padding-left: 0 ;}}

So far, we have figured out how the navbar-collapse component hides the navbar-collapse in charge of the exterior style of the component on the Mobile End. collapse is responsible for displaying the entire component (display: none is displayed on the pc side, and block-level elements are displayed when an event is clicked)

4. Summary

From the source code analysis of the bootstrap navigation bar, we can see the following points:

4.1: The bootstrap dimension style and color style are set separately. You can combine them as needed to increase code reusability and modify the color scheme as needed.

4.2: Implementation of the navigation bar: The fixed method of the navigation bar is as follows:Navbar-fixed-topImplementation. Other values includeNavbar-static-topAnd the default value has different display effects (determines the display position of the entire navigation bar)

The color is implemented by navbar-default. You can modify navbar-defau to modify the color of the entire navigation bar (which determines the color of the entire navigation bar)

The implementation of the drop-down menu is also the separation of the style and whether to display the style

5. Note: many of the details such as the changes in the margin padding is not discussed in this article, you can refer to this article http://www.cnblogs.com/zhangw1994/p/7124252.html