cari

Rumah >hujung hadapan web >tutorial js >Cara mengendalikan setiap elemen bar navigasi Bootstrap (borang, butang, teks)_kemahiran javascript

Cara mengendalikan setiap elemen bar navigasi Bootstrap (borang, butang, teks)_kemahiran javascript

WBOY
WBOYasal
2016-05-16 15:22:581542semak imbas

Artikel ini merangkumi tiga aspek utama, sila kaji dengan teliti.

1. Borang dalam bar navigasi
Borang dalam bar navigasi tidak menggunakan kelas lalai yang disebut dalam bab borang Bootstrap, ia menggunakan kelas .navbar-form. Ini memastikan penjajaran menegak yang betul bagi bentuk dan gelagat runtuh dalam port pandangan yang lebih sempit. Gunakan pilihan penjajaran (yang diterangkan secara terperinci dalam bahagian Penjajaran Komponen) untuk memutuskan di mana kandungan dalam bar navigasi diletakkan.

Contoh berikut menunjukkan ini: 

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

Kesan:

Kesan hitam

2. Butang dalam bar navigasi
Anda boleh menggunakan kelas .navbar-btn untuk menambah butang pada elemen 07cb10094d7fc1aeafbde86dbf86ce42 yang tidak berada di dalam f09171dd5a17ba951a950f7c55eddfd5, dengan butang dipusatkan secara menegak pada bar navigasi. .navbar-btn boleh digunakan pada 3499910bf9dac5ae3c52d5ede7383485 dan d5fd7aea971a85678ba271703566ebfd

Jangan gunakan .navbar-btn pada 3499910bf9dac5ae3c52d5ede7383485 elemen di dalam .navbar-nav kerana ia bukan kelas butang standard.
Contoh berikut menunjukkan ini: 

<!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-inverse" 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>  
   <button type="button" class="btn btn-default navbar-btn"> 
     导航栏按钮 
   </button>    
  </div> 
</nav> 
</body> 
</html>

Kesannya adalah seperti berikut:

3. Teks dalam bar navigasi
Jika anda perlu memasukkan rentetan teks dalam navigasi, gunakan class .navbar-text. Ini biasanya digunakan bersama dengan tag e388a4556c0f65e1904146cc1a846bee Contoh berikut menunjukkan ini: 

<div class="navbar-header"> 
   <a class="navbar-brand" href="#">林炳文在此～</a>   
  </div> 
  <div> 
   <p class="navbar-text">导航栏中的文本</p> 
  </div> 
  <div>

Kesannya adalah seperti berikut:

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia dapat membantu pembelajaran semua orang, supaya semua orang boleh melaksanakan bar navigasi Bootstrap dengan lebih mahir.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pengenalan ringkas kepada penukaran jenis tersirat bagi kemahiran type_javascript data JavaScriptArtikel seterusnya：Pengenalan ringkas kepada penukaran jenis tersirat bagi kemahiran type_javascript data JavaScript

Artikel berkaitan

Lihat lagi