ブートストラップにはどのような種類のナビゲーションがありますか?-ブートストラップのチュートリアル-php.cn

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

(*-*)浩

リリース： 2019-07-25 13:06:28

オリジナル

4395 人が閲覧しました

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

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

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

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

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

<div class="container">
    <div class="row">
        <div class="span6">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

ログイン後にコピー

基本的なカプセルタグ

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

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

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

<div class="container">
    <div class="row">
        <div class="span8">
            <ul class="nav nav-pills">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

ログイン後にコピー

スタックまたは垂直タグ

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

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

<div class="container">
    <div class="row">
        <div class="span8">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Practice Editor </a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">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/ フォルダー内にあります。

以下は例です。

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

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 基于标签的下拉菜单的导航实例</title>
    <meta name="description" content="Bootstrap 基于标签的下拉菜单的导航实例">
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
    <style type="text/css">
        .container {
            margin-top: 200px;
        }
    </style>
</head>
<body>
<div>
    <div>
        <div>
            <ul class="nav nav-tabs">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a data-toggle="dropdown" href="#">FrontEnd<b></b></a>
                    <ul>
                        <li><a href="#">Twitter Bootstrap</a></li>
                        <li><a href="#">Google Plus API</a></li>
                        <li><a href="#">HTML5</a></li>
                        <li></li>
                        <li><a href="#">Examples</a></li>
                    </ul>
                </li>
                <li><a data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
                    <ul class="dropdown-menu bottom-up pull-right">
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">PostgreSQL</a></li>
                        <li></li>
                        <li><a href="#">Live Demos</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>

ログイン後にコピー

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

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