Maison  >  Article  >  interface Web  >  Analyser la barre de navigation bootstrap et sa mise en œuvre réactive

Analyser la barre de navigation bootstrap et sa mise en œuvre réactive

零下一度
零下一度original
2017-07-18 18:06:333059parcourir
  1. Le but de cet article : analyser la barre de navigation bootstrap et sa mise en œuvre réactive, afin d'améliorer votre technologie de programmation à un niveau supérieur

  2. Voyons analysez-le d'abord Comment l'implémenter ? La première étape consiste à coller un modèle de barre de navigation bootstrap

2 Le code est le suivant

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

L'effet est le suivant ;

Version mobile :

3. Analyse du code

Analyser le rôle de chaque balise et son style de l'extérieur vers l'intérieur

3.1 Le conteneur div le plus externe (le style est navbar navbar-default navbar-fixed-top ):

Code source

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

Comme le montre le code source, la fonction principale du conteneur div le plus externe est de créer un conteneur de barres (. navbar) d'une hauteur minimale de 50px, qui est positionnée par rapport au navigateur (.navbar-fixed-top), déterminez la couleur de la barre de navigation (.navbar-default)

Pour des connaissances pertinentes sur l'appareil- largeur, veuillez vous référer à cet article

3.2 Le style est la barre de navigation - Le conteneur div de l'en-tête

a le code source CSS comme suit

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

L'effet d'affichage de ce div sur PC et mobile est le suivant

Côté PC :

Côté mobile :

On constate que côté PC, la largeur du navigateur est suffisante, le div n'existe que comme un petit élément de niveau bloc côté mobile, du fait d'une largeur d'écran insuffisante, d'autres éléments de la barre de navigation sont implémentés sous forme de menus déroulants, et ce div remplit à lui seul le conteneur parent.

Il y a deux éléments de texte sous navbar-header :