search

Home  >  Article  >  Web Front-end  >  Analyze bootstrap navigation bar and its responsive implementation

Analyze bootstrap navigation bar and its responsive implementation

零下一度
零下一度Original
2017-07-18 18:06:333125browse

  1. 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

  2. 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>

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;/**样式层叠在上层的优先级**/
}

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>
/**在pc端显示时向右浮动，在移动端此样式无效**/
@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }}

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:

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Example tutorial of setting up Checkbox with pure CSSNext article：Example tutorial of setting up Checkbox with pure CSS

Related articles

See more