Analyze bootstrap navigation bar and its responsive implementation-HTML Tutorial-php.cn

Analyze bootstrap navigation bar and its responsive implementation

零下一度

Release： 2017-07-18 18:06:33

Original

3190 people have browsed it

The purpose of this article: to analyze the bootstrap navigation bar and its responsive implementation, so as to improve your programming technology to a higher level
Let’s analyze it first How to implement it? The first step is to paste a bootstrap navigation bar template

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>

Copy after login

The effect is as follows;

Mobile terminal:

3. Code analysis

Analyze the role of each tag and its style from the outside to the inside

3.1 The outermost div container (style is navbar navbar-default navbar-fixed-top):

Source code

.navbar {
  position: relative;
  min-height: 50px;/**导航条最小宽度为50px**/
  margin-bottom: 20px;/****/
  border: 1px solid transparent;
}@media (min-width: 768px) {/**>=768的设备，其实就是pc，移动设备width属性都小于768px**//**可能有很多人不理解，实际上移动端的width属性是以device-width来计量的，不是单纯的像数的概念，建议有疑问的同学自行搜索device-width关键字**/
  .navbar {
    border-radius: 4px;/****/
  }}
.navbar-default {/**设备导航栏的配色**/
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;/**相对浏览器定位**/
  right: 0;
  left: 0;
  z-index: 1030;/**样式层叠在上层的优先级**/
}

Copy after login

As can be seen from the source code, the main function of the outermost div container is to create a bar container (.navbar) with a minimum height of 50px, which is positioned relative to the browser (.navbar- fixed-top), determine the color of the navigation bar (.navbar-default)

For relevant knowledge about device-width, please refer to this article

3.2 div container with navbar-header style

The css source code is as follows

<br>

Copy after login

/**在pc端显示时向右浮动，在移动端此样式无效**/

Copy after login

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

Copy after login

The display effect of this div on the PC and mobile terminals is as follows

PC side:

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; and On the mobile side, because the screen width is not enough, other elements of the navigation bar are implemented in the form of drop-down menus, and this div alone fills the parent container.

There are two text elements under navbar-header: