ホームページ > 記事 > ウェブフロントエンド > ブートストラップは応答性の高いナビゲーション バーを実装します。
ブートストラップは応答性の高いナビゲーション バーを実装します。
- WBOYオリジナル
- 2016-05-16 15:22:591670ブラウズ
ナビゲーションバーにレスポンシブ機能を追加するには、折りたたむコンテンツをクラス .collapse、.navbar-collapse を使用して dc6dce4a544fdca2df29d5ac0ea9906b でラップする必要があります。折りたたまれたナビゲーション バーは、実際にはクラス .navbar-toggle と 2 つの data- 要素を持つボタンです。 1 つ目は data-toggle で、JavaScript にボタンの操作を指示します。2 つ目は data-target で、どの要素に切り替えるかを示します。クラス .icon-bar を持つ 3 つの 45a2772a6b6107b401db3c9b82c049c2 は、いわゆるハンバーガー ボタンを作成します。これらは .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>
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。