ブートストラップにはどのような種類のナビゲーションがありますか?

Bootstrap は、基本的なラベル ベースおよびカプセル ラベル ナビゲーション、積み重ねまたは垂直ラベル ベースおよびカプセル ラベル ナビゲーション、ラベルおよびカプセル ラベルに基づくドロップダウン メニューなど、さまざまなナビゲーションを作成できます。ナビゲーション リストを使用してスタック ナビゲーションを作成し、JavaScript を使用してクリック可能なナビゲーション (さまざまな方向) を作成します。

基本タグ (推奨学習: Bootstrap ビデオ チュートリアル )

2 つの CSS クラス 。 nav および .nav-tabs は、基本的なタブベースのナビゲーションを作成するために使用されます。 Bootstrap バージョン v2.0.1 では、CSS クラス .nav のスタイルは行番号 2176 ～ 2220 で宣言されています (これには関連するスタイルも含まれています)。行番号 2222 ～ 2267 には、.nav-tabs のスタイルが含まれています。

次の例は、ブートストラップを使用して基本的なタグベースのナビゲーションを作成する方法を示しています。

<div>
    <div>
        <div>
            <ul>
                <li><a>Home</a></li>
                <li><a>Tutorials</a></li>
                <li><a>Practice Editor </a></li>
                <li><a>Gallery</a></li>
                <li><a>Contact</a></li>
            </ul>
        </div>
    </div>
</div>

基本的なカプセル タグ

Bootstrap を使用して基本的なタグベースのナビゲーションを作成する方法を理解すると、基本的なカプセルベースのタグ ナビゲーションの作成は、簡単そうに思えます。 。ここでは .nav-tabs クラスを使用する代わりに、.nav-pills クラスを使用します。 .nav-pill のスタイルは、bootstrap.css の 2222 ～ 2224 行目にあり、bootstrap.css の 2268 ～ 2280 行目 (最後のインスタンスで使用) で再度繰り返されます。

次の例は、基本的なカプセルタブベースのナビゲーションを作成する方法を示しています。

カプセル タグに基づいたブートストラップの基本ナビゲーションの例

<div>
    <div>
        <div>
            <ul>
                <li><a>Home</a></li>
                <li><a>Tutorials</a></li>
                <li><a>Practice Editor </a></li>
                <li><a>Gallery</a></li>
                <li><a>Contact</a></li>
            </ul>
        </div>
    </div>
</div>

スタックまたは垂直タグ

タブ付きナビゲーションの場合に基づいてスタックまたは垂直タグを作成するには、次の手順を実行する必要があります。 .nav-stacked、.nav、および .nav-tabs クラスをマークアップに追加します。これにより、デフォルトで水平タブベースのナビゲーションが作成されます。行番号 2281 ～ 2309 には .nav-stacked スタイルが含まれています。ここに一例を示します。

ブートストラップのスタック ナビゲーションまたは垂直タブ ベースのナビゲーションの例

<div>
    <div>
        <div>
            <ul>
                <li><a>Home</a></li>
                <li><a>Tutorials</a></li>
                <li><a>Practice Editor </a></li>
                <li><a>Gallery</a></li>
                <li><a>Contact</a></li>
            </ul>
        </div>
    </div>
</div>

タブ ベースのドロップダウン メニュー

タブ ベースのドロップダウン メニューを作成できます。ブートストラップ メニュー ナビゲーションを使用してダウンします。 .nav クラスと .nav-tabs クラスに加えて、.dropdown、.dropdown-toggle、.dropdown-menu、.caret という 4 つの CSS クラスが必要です。 bootstrap.css (バージョン 2.0.1) では、行番号 1545 ～ 1547 には .dropdown クラス スタイルが含まれ、行番号 1548 ～ 1553 には .dropdown-toggle スタイルが含まれ、行番号 1576 ～ 1632 には .dropdown-menu スタイルが含まれます。行番号 1554 ～ 1575 には .caret スタイルが含まれています。デモの例では、別の CSS クラス .divider も使用されていますが、必須ではありません。

もちろん、HTML ファイル内で 3 つの JavaScript ファイル (jquery.js、bootstrap-dropdown.js、および application.js) を参照する必要があります。これらはすべて docs/assets/js/ フォルダー内にあります。

以下は例です。

ブートストラップのラベルベースのドロップダウン メニュー ナビゲーションの例

nbsp;html> 


    <meta>
    <title>Bootstrap 基于标签的下拉菜单的导航实例</title>
    <meta>
    <link>
    <style>
        .container {
            margin-top: 200px;
        }
    </style>


<div>
    <div>
        <div>
            <ul>
                <li><a>Home</a></li>
                <li><a>About</a></li>
                <li>
<a>FrontEnd<b></b></a>
                    <ul>
                        <li><a>Twitter Bootstrap</a></li>
                        <li><a>Google Plus API</a></li>
                        <li><a>HTML5</a></li>
                        <li>
                        <li><a>Examples</a></li>
                    </ul>
                </li>
                <li>
<a>BackEnd<b></b></a>
                    <ul>
                        <li><a>PHP</a></li>
                        <li><a>MySQL</a></li>
                        <li><a>PostgreSQL</a></li>
                        <li>
                        <li><a>Live Demos</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<script></script>
<script></script>
<script></script>

ブートストラップ関連の技術記事の詳細については、ブートストラップ チュートリアル列にアクセスして学習してください。

以上がブートストラップにはどのような種類のナビゲーションがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。