Bootstrap melaksanakan kemahiran effect_javascript bar navigasi responsif-tutorial js-php.cn

Untuk menambah ciri responsif pada navbar, kandungan yang anda ingin runtuhkan mesti dibungkus dalam

dengan kelas .collapse, .navbar-collapse. Bar navigasi yang runtuh sebenarnya adalah butang dengan kelas .navbar-toggle dan dua elemen data. Yang pertama ialah togol data, yang memberitahu JavaScript perkara yang perlu dilakukan dengan butang, dan yang kedua ialah sasaran data, yang menunjukkan elemen yang hendak ditukar. Tiga dengan kelas .icon-bar mencipta apa yang dipanggil butang hamburger. Ini akan bertukar kepada elemen dalam .nav-collapse

. Untuk mencapai ciri ini, anda mesti memasukkan pemalam Bootstrap Collapse.
Penyampaian:

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"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" 
   data-target="#example-navbar-collapse"> 
   <span class="sr-only">切换导航</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
  </button> 
  <a class="navbar-brand" href="#">12345</a> 
 </div> 
 <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">iOS</a></li> 
   <li><a href="#">fgghh</a></li> 
   <li class="dropdown"> 
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    Java <b class="caret"></b> 
   </a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">vgghhr</a></li> 
    <li><a href="#">dg</a></li> 
    <li><a href="#">sfg</a></li> 
    <li class="divider"></li> 
    <li><a href="#">分离的链接</a></li> 
    <li class="divider"></li> 
    <li><a href="#">另一个分离的链接</a></li> 
   </ul> 
   </li> 
  </ul> 
 </div> 
</nav> 
 
 
</body> 
</html>

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Label berkaitan：

bootstrap 导航

sumber：php.cn

Artikel sebelumnya：Mengapa js tidak boleh mengendalikan operasi perpuluhan dengan betul? _kemahiran javascript Artikel seterusnya：Pelaksanaan pemalam pemilihan bulan berdasarkan jQuery dengan kod sumber download_jquery

Kenyataan Laman Web ini

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 terbaru oleh pengarang