Analysieren Sie die Bootstrap-Navigationsleiste und ihre reaktionsfähige Implementierung

零下一度
Freigeben: 2017-07-18 18:06:33
Original
3133 Leute haben es durchsucht
  1. Der Zweck dieses Artikels: die Bootstrap-Navigationsleiste und ihre reaktionsfähige Implementierung zu analysieren, um Ihre Programmiertechnologie auf ein höheres Niveau zu verbessern

  2. Lassen Sie uns Analysieren Sie es zuerst. Der erste Schritt besteht darin, eine Bootstrap-Navigationsleistenvorlage einzufügen

2. Der Code lautet wie folgt

 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>
Nach dem Login kopieren

Der Effekt ist wie folgt:

Mobile Version:

3. Code-Analyse

Analysieren Sie die Rolle jedes Tags und seinen Stil von außen nach innen

3.1 Der äußerste div-Container (Stil ist navbar-navbar-standardmäßig navbar-fixed -top):

Quellcode

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

Wie aus dem Quellcode ersichtlich ist, besteht die Hauptfunktion des äußersten Div-Containers darin, einen Balken zu erstellen. geformter Container (.navbar) mit einer Mindesthöhe von 50 Pixel, der relativ zum Browser positioniert ist (.navbar-fixed-top), bestimmen Sie die Farbe der Navigationsleiste (.navbar-default)

Für relevant Informationen zur Gerätebreite finden Sie in diesem Artikel

3.2 Stil ist Navbar- Der Div-Container des Headers

enthält den folgenden CSS-Quellcode

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

Der Anzeigeeffekt dieses Divs auf PC und Mobilgeräten ist wie folgt

PC-Seite:

Mobile-Seite:

Auf der PC-Seite ist zu erkennen, dass das div nur als kleines Element auf Blockebene vorhanden ist Da die Bildschirmbreite nicht ausreicht, werden andere Elemente der Navigationsleiste in Form von Dropdown-Menüs implementiert und dieses Div allein füllt den übergeordneten Container.

Es gibt zwei Textelemente unter „navbar-header“:

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage