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

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>

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

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>

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

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

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“: mit „navbar-toggle“-Stil und mit „navbar-brand“-Stil

Der CSS-Quellcode lautet wie folgt:

.navbar-toggle {/**在最右侧画了一个圆角矩形**/
  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) {/**此button在pc端不显示**/
  .navbar-toggle {
    display: none;
  }}
.navbar-toggle .icon-bar {/**icon-bar负责在button盒子里画横线**/
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

Zu diesem Zeitpunkt haben wir die Navbar-Header-Komponente herausgefunden. Auf der PC-Seite zeigt der Navbar-Header nur Markentext an Mobile Seite, Navigationsleiste – Der Header nimmt ausschließlich die gesamte Navigationsleiste ein und andere Teile werden ausgeblendet.

3.3 Schauen Sie sich weiterhin die Navbar-Collapse-Collapse-Komponente an

Quellcode:

/**由于.navbar-collapse，.navbar-collapse.in，.collapse在（@meida min-width:768px）pc端均有定义，故一下的属性只对移动端有效**/

.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 {/**点击navbar-header的navbar-toggle的button后， navbar-collapse collapse会被js修改成。navbar-collapse collapse in**/
  overflow-y: auto;
}.collapse {/**决定了本组件在移动端时不显示**/
  display: none;/**点击事件发生后将被覆盖**/
}<br>

.collapse.in {/**Nachdem das Klickereignis aufgetreten ist, wird es als Element auf Blockebene angezeigt und deckt display: none* ab.* /<br> 　display: block;<br> }

@media (min-width: 768px) {/**pc端**/
  .navbar-collapse {
    width: auto;border-top: 0;-webkit-box-shadow: none;box-shadow: none;
  }
  .navbar-collapse.collapse {display: block !important;/**作为块级显示，由于兄弟节点navbar-header是浮动元素，所以navbar-collapse会占满父元素的宽高**/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;
  }}

An diesem Punkt haben wir auch herausgefunden, wie die Navbar-Collapse-Collapse-Komponente auf der mobilen Seite ausgeblendet wird. navbar-collapse ist für den Darstellungsstil der Komponente verantwortlich, und .collapse ist dafür verantwortlich, ob die gesamte Komponente angezeigt wird (normalerweise auf der PC-Seite angezeigt, nicht auf der mobilen Seite angezeigt (Anzeige: keine) und als Blockebene angezeigt wird Element nach Auftreten eines Klickereignisses)

4. Zusammenfassung

Aus der Analyse des Quellcodes der Bootstrap-Navigationsleiste können wir die folgenden Punkte erkennen

4.1: Der Größenstil Es ist vorstellbar, dass solche Einstellungen nach Belieben kombiniert werden können, was die Komplexität des Codes erhöht. Sie können die Farbanpassung auch nach Belieben ändern.

4.2: Navigationsleisten-Implementierung: Die Navigationsleiste wird durch navbar-fixed-top fixiert. Weitere Werte sind navbar-static-top und der Standardwert . Der Anzeigeeffekt ist ebenfalls unterschiedlich (bestimmt die Anzeigeposition der gesamten Navigationsleiste)

Die Farbimplementierung wird durch navbar-default implementiert, und die gesamte Farbanpassung kann durch Ändern von navbar-defau (bestimmt die) geändert werden Farbanpassung der gesamten Navigationsleiste)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　〉

von

Das obige ist der detaillierte Inhalt vonAnalysieren Sie die Bootstrap-Navigationsleiste und ihre reaktionsfähige Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!