ブートストラップ学習ロード (2) - ナビゲーション コンポーネント_html/css_WEB-ITnose

ブートストラップ学習パス (2) - ナビゲーションコンポーネント_html/css_WEB-ITnose

ブートストラップでは、ナビゲーション バーのスタイルは .nav クラスに依存し、スタイルは次のような多くのタイプに分類されます:

タブ ページスタイルは次のとおりです: .nav-tabs

<ul class="nav nav-tabs">
          <li class="active"><a href="http://www.weixh.net">微笑话</a></li>
          <li><a href="#">图文</a></li>
          <li><a href="#">文字</a></li>
        </ul>

これは最も単純なタブスタイルのナビゲーションです。li タグ内のアクティブは、現在のページのステータスです。

カプセル スタイルのタブの場合、.nav-tabs クラスを .nav-pills クラスに置き換えるだけで済みます。実行時の効果は次のとおりです。

もちろん、カプセルはタブであり、縦に積み重ねることもできます。 .nav-stacked クラスを追加するだけです。

<ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="http://www.weixh.net">微笑话</a></li>
          <li><a href="#">图文</a></li>
          <li><a href="#">文字</a></li>
        </ul>

操作の効果は次のとおりです:

整列されたタブ:

768pxを超える画面では、.nav-justifiedクラスまたはカプセルラベルを追加することで簡単にタブを作成できます等幅に見えます。小さな画面では、ナビゲーション リンクが積み重なって表示されます。

<div class="container-fluid">
        <ul class="nav nav-tabs nav-justified">
          <li class="active"><a href="http://www.weixh.net">微笑话</a></li>
          <li><a href="#">图文</a></li>
          <li><a href="#">文字</a></li>
        </ul>
    </div>

実行中の効果は次のとおりです:

画面が768pxより大きい場合

説明、3番目のタブはマウス通過のスタイルであり、これらは書き換えることができます、さあ、話しましょう それは単なる導入です。

画面が小さくなると、自動的にスタックスタイルに変わり、一気に高級感が出ると思いませんか？

デフォルトのスタイルのナビゲーション バー:

ナビゲーション バーは、アプリケーションまたは Web サイトのナビゲーション ヘッダーとして機能する応答性の高い基本コンポーネントです。モバイル デバイスでは折りたたまれ (開閉可能)、ビューポートの幅が増加するにつれて徐々に水平方向に拡張されます。

ブラウザのビューポート (ビューポート) の幅が @grid-float-breakpoint の値より小さい場合、ナビゲーション バー内の要素は折りたたまれ、ブラウザのビューポート (ビューポート) がモバイル デバイスの表示モードに変換されます。幅が @grid-float-breakpoint 値より大きい場合、ナビゲーション バー内の要素は水平に配置されます。つまり、非モバイル デバイスの表示モードに変換されます。ソース コードでこの値を調整することで、ナビゲーション バーをいつ積み重ねるか、いつ水平に配置するかを制御できます。デフォルト値は 768px (小さな画面またはタブレットの最小値) です。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
          data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://www.weixh.net"><img src="images/waplogo.png" alt="微笑话" />
          微笑话</a>
        </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav nav-pills">
           <li class="active"><a href="http://www.weixh.net">全部</a></li>
                <li><a href="#">图文</a></li>
                <li><a href="#">文字</a></li>
                </ul>
          </div>
        </nav>

説明:

この応答性の高いナビゲーション バーは、使用している Bootstrap バージョンに含まれている折りたたみプラグインに依存しています。

.navbar-default クラスはナビゲーションのデフォルトのスタイルですが、独自のスタイルを再定義して追加することもできます。

.navbar-fixed-top はアクセシビリティを向上させるために、必ず追加してください。各ナビゲーション バーの属性。

JavaScript に依存します

JavaScript が無効で、ビューポートが狭くてナビゲーション バーが折りたたまれる場合、ナビゲーション バーは開きません。navbar-collapse に含まれるコンテンツも表示されません。

class="navbar-toggle Collapse" は折りたたみスタイル、data-target="#bs-example-navbar-collapse-1" は折りたたみターゲットを指します。

操作の効果は次のとおりです。ウィンドウが十分に大きい場合、ナビゲーションは平らに広がります:

画面が小さくなると、ナビゲーションは自動的に折りたたまれ、ナビゲーション スイッチが表示されます:

スイッチをクリックすると、折りたたまれたナビゲーションを開きます:

とても便利だと思いませんか?今のところはこれですべてです。もし間違っていることがあれば、評価してください。批判や修正をお待ちしています。また、私が最近失敗したジョーク Web サイトにアクセスしてジョークなどを見ることもできます:
www.weixh.net、次回はリスト コンポーネントについて説明します。

上記は、Bootstrap Learning Path (2)-Navigation Component_html/css_WEB-ITnose の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。