So bedienen Sie jedes Element der Bootstrap-Navigationsleiste (Formular, Schaltfläche, Text)

So bedienen Sie jedes Element der Bootstrap-Navigationsleiste (Formular, Schaltfläche, Text)_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:22:58

Original

1545 Leute haben es durchsucht

Dieser Artikel umfasst hauptsächlich drei Hauptaspekte. Bitte lesen Sie ihn sorgfältig durch.

1. Formular in der Navigationsleiste
Das Formular in der Navigationsleiste verwendet nicht die im Bootstrap-Formularkapitel erwähnte Standardklasse, sondern die Klasse .navbar-form. Dadurch wird die korrekte vertikale Ausrichtung des Formulars und das Kollapsverhalten in engeren Ansichtsfenstern sichergestellt. Verwenden Sie die Ausrichtungsoptionen (die im Abschnitt „Komponentenausrichtung“ ausführlich erläutert werden), um zu entscheiden, wo der Inhalt in der Navigationsleiste platziert wird.

Das folgende Beispiel zeigt dies:

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bootstrap 实例 - 默认的导航栏</title> 
  <link href="bootstrap.min.css" rel="stylesheet"> 
  <script src="jquery-2.1.4.min.js"></script> 
  <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-default" role="navigation"> 
  <div class="navbar-header"> 
   <a class="navbar-brand" href="#">林炳文在此～</a> 
  </div> 
  <div> 
   <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">导航一</a></li> 
     <li><a href="#">导航二</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
        下拉菜单 
        <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
        <li><a href="#">我是谁呢？</a></li> 
        <li><a href="#">我也不知道</a></li> 
        <li><a href="#">你是谁呢？</a></li> 
        <li class="divider"></li> 
        <li><a href="#">分离的链接</a></li> 
        <li class="divider"></li> 
        <li><a href="#">另一个分离的链接</a></li> 
      </ul> 
     </li> 
   </ul> 
  </div> 
  <div> 
   <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">搜一下</button> 
   </form>   
  </div> 
</nav> 
</body> 
</html>

Nach dem Login kopieren

Wirkung:

Schwarzer Effekt

2. Schaltflächen in der Navigationsleiste
Sie können die Klasse .navbar-btn verwenden, um eine Schaltfläche zu einem