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

ブートストラップはデフォルトのナビゲーションバーを実装します。

WBOY

リリース： 2016-05-16 15:23:06

オリジナル

1488 人が閲覧しました

ナビゲーションバーは、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 のコードです。皆さんの学習に役立つことを願っています。

ブートストラップはデフォルトのナビゲーション バーを実装します。

ブートストラップはデフォルトのナビゲーションバーを実装します。