Bootstrap入門書(5)ナビゲーションバー、ページングナビゲーション_JavaScriptスキル

ナビゲーションバー

ナビゲーションバー(navbar)とBootstrap入門書(4)メニュー・ボタン・ナビゲーション。ナビゲーション (nav) は、単語が 1 つ違うだけで、「bar」という単語が追加されています。実際、Bootstrap フレームワークでは依然として明らかに異なります。ナビゲーション バー (navbar) には背景色があり、ナビゲーション バーは純粋なリンク (ナビゲーションと同様)、フォーム、またはフォームとナビゲーションの組み合わせにすることができます。モバイル デバイスでは折りたたまれ (開閉可能)、ビューポートの幅が増加するにつれて徐々に水平方向に拡張されます。

基本ナビゲーション バー

実際には、ナビゲーション バーとナビゲーションの外観上の違いはそれほど大きくありませんが、実際に使用すると、ナビゲーション バーはナビゲーションよりもはるかに複雑です。基本的なナビゲーション バーを実装してみましょう。

<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
</div>

達成できる効果は次のとおりです:

ワイドスクリーン:

狭い画面:

基本的なナビゲーション バーを作成するときは、次の点に注意してください:

1. まず、ナビゲーション リスト (

) に基づいてクラス名 .navbar-nav
を追加します。

2. ここで許可されている場合は、コンテナ (div) を追加し、クラス名 .navbar と .navbar-default を使用することをお勧めします。


3. navbar クラスの主な機能は、左右のパディングや角丸などの効果を設定することです。.navbar-inverse などのナビゲーション バーの色を制御します。




タイトル付き、サブメニュー

Web ページの制作では、通常、メニューの前にタイトルが表示されます (テキスト サイズは他のテキストよりわずかに大きくなります)。実際、Bootstrap フレームワークは、.navbar- を通じてこれをすべての人に考慮しています。 header と .navbar-brand を達成するための例:

<div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
</div>

ログイン後にコピー
もちろん、中国の公式ウェブサイトに記載されているように、ロゴの作成にも使用できますが、ここでは詳しく説明しません。
セカンダリメニューについては以前のブログで詳しく説明していますので、まだ理解できない場合は、次の段落のコードをもう一度読んでください。達成可能な効果: (ここでは navbar-inverse ナビゲーション バーが使用されていることに注意してください)

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li class="dropdown" >
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">JavaScript
 <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Vue</a></li>
 <li><a href="#">NodeJS</a></li>
 </ul>
 </li>
 <li ><a href="#">PHP</a></li>
 </ul>
</div>

ログイン後にコピー
効果は次のとおりです:




フォーム付き

Zhihu、Sina Weibo など、ナビゲーション バーに検索フォームがよく表示されます。もちろん、Bootstrap フレームワークにそのようなものが欠けているはずはありません。使用方法も非常に簡単です:
Bootstrap フレームワークでは .navbar-form が提供されています。.navbar コンテナに .navbar-form クラス名を持つフォームを配置し、フォームを左に配置して配置を改善します。
Bootstrap では、要素をナビゲーション バーの右側に配置するための .navbar-right スタイルも提供されています。
このコードをコードにコピーして、効果を確認してください:

<form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
</form>

ログイン後にコピー

ボタン、テキスト、リンク

上記のスタイルの一部に加えて、ブートストラップ フレームワークは他の 3 つのスタイルを提供します。
1. ナビゲーション バーのボタン navbar-btn により、ボタンがナビゲーション バーの垂直方向の中央に配置されなくなります。




2. ナビゲーション バーのテキスト navbar-text は、通常、最適な行間隔を実現するために

要素を使用します。


3. ナビゲーション バーの通常のリンク navbar-link、非ナビゲーション リンク、このクラスを追加して、正しいデフォルトの色と反転色の設定を設定します

ただし、これら 3 つのスタイルはフレームワークで使用する場合に特定の制限があり、navbar-brand および navbar-nav と組み合わせて使用​​する必要があります。また、使用量にも一定の制限があり、通常1～2個であれば問題ありませんが、2個以上使用すると問題が発生します。




固定ナビゲーション バー ナビゲーション バーをブラウザの上部または下部に固定したい場合があります。Bootstrap では、そのようなスタイルを実現するための 2 つのクラスが便利に提供されています。

.navbar-fixed-top: ナビゲーション バーはブラウザ ウィンドウの上部に固定されています

.navbar-fixed-bottom: ナビゲーション バーはブラウザ ウィンドウの下部に固定されています


使用方法は非常に簡単で、ナビゲーション バーの一番外側のコンテナー (ナビゲーション バー) に対応するクラス名を追加するだけです。


这个固定的导航条会 遮住页面上的其它内容 ，除非你给 元素底部设置了 padding 。提示：导航条的 默认高度 是 50px。如： body { padding-bottom: 70px; } ，当然你也可以使用你自己的值。

响应式导航条

在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还 直接把所有的导航项直接展现出来就不适合了 。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！




窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下：

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="#" class="navbar-brand">WEB开发</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
 </div>
</div>

ログイン後にコピー

分析：

和普通导航条一样，最外层使用