ブートストラップは応答性の高いナビゲーションバーを実装します。-jsチュートリアル-php.cn

ブートストラップは応答性の高いナビゲーションバーを実装します。

WBOY

リリース： 2016-05-16 15:22:59

オリジナル

1676 人が閲覧しました

ナビゲーションバーにレスポンシブ機能を追加するには、折りたたむコンテンツをクラス .collapse、.navbar-collapse を使用して

でラップする必要があります。折りたたまれたナビゲーションバーは、実際にはクラス .navbar-toggle と 2 つの data- 要素を持つボタンです。 1 つ目は data-toggle で、JavaScript にボタンの操作を指示します。2 つ目は data-target で、どの要素に切り替えるかを示します。クラス .icon-bar を持つ 3 つのは、いわゆるハンバーガーボタンを作成します。これらは .nav-collapse

内の要素に切り替わります。これらの機能を実現するには、Bootstrap Collapse プラグインを含める必要があります。
レンダリング:

次の例はこれを示しています:

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

ログイン後にコピー

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。