ホームページ > 記事 > ウェブフロントエンド > ブートストラップはデフォルトのナビゲーション バーを実装します。
ブートストラップはデフォルトのナビゲーション バーを実装します。
- WBOYオリジナル
- 2016-05-16 15:23:061441ブラウズ
ナビゲーション バーは、Bootstrap Web サイトの優れた機能であり、目立つ機能です。ナビゲーション バーは、アプリケーションまたは Web サイトのナビゲーション ヘッダーとして機能する応答性のメタ コンポーネントです。ナビゲーション バーは、モバイル ビューポートでは折りたたまれ、使用可能なビューポートの幅が増加するにつれて水平に広がります。 Bootstrap ナビゲーション バーの中核には、サイト名と基本的なナビゲーションのスタイルの定義が含まれています。
デフォルトのナビゲーション バーを作成する手順は次のとおりです:
- クラス .navbar、.navbar-default (白の背景に黒のテキスト)、navbar-inverse (黒の背景に白のテキスト) を タグに追加します。
- アクセシビリティを向上させるために、上記の要素に role="navigation" を追加します。
- ヘッダー クラス .navbar-header を、クラス navbar-brand の 要素を含む 要素に追加します。これにより、文字が大きく表示されます。
ナビゲーション バーにリンクを追加するには、クラス .nav、.navbar-nav を使用して順序なしリストを追加するだけです。
次の例はこれを示しています:
<!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> </nav> </body> </html>
効果は次のとおりです:
置いてください
<nav class="navbar navbar-inverse" role="navigation">
が
に変更されました<nav class="navbar navbar-default" role="navigation">
効果は次のとおりです:
上記は、デフォルトのナビゲーション バー効果を実装するための Bootstrap のコードです。皆さんの学習に役立つことを願っています。
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。