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

ナビゲーションバー

前項で紹介した

ナビゲーションバー(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. まず、ナビゲーションリスト (

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

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

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

ログイン後にコピー

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

ログイン後にコピー

フォーム付き

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

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

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

ログイン後にコピー

分析：

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

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