ホームページ > 記事 > ウェブフロントエンド > Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

青灯夜游転載: 2021-11-23 18:48:441912ブラウズ

この記事では、bootstrap のナビゲーションコンポーネントとタブコンポーネントについて学び、ナビゲーションコンポーネントとタブコンポーネントの使用方法を紹介します。

1 ナビゲーションの基本

ナビゲーションバーは Web サイトシステムに必要な機能です。以前は、適切なナビゲーションバーを作成するには多大な労力がかかりました。ナビゲーションバーが利用可能になりましたが、Bootstrap5 ナビゲーションが利用できるようになりました。今後は、コピーアンドペーストするだけで美しいナビゲーションバーを作成できます。 [関連する推奨事項: "ブートストラップチュートリアル"]

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <ul>
                <li>
                <a class="nav-link href="#">首页</a>
                </li>
                <li>
                <a href="#">文章</a>
                </li>
                <li>
                <a href="#">图片</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
                </li>
                </ul>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

コードをより簡潔にすることもできます

<nav class="nav">
  <a class="nav-link" href="#">首页</a>
  <a class="nav-link" href="#">文章</a>
  <a class="nav-link" href="#">图片</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>

このコード内部の使用不可ボタンについては、特別な用途（例えば会員は使用可能だが一般人は使用できないなど）が無い限りメニューに入れる必要はありません。

両方の記述方法にはそれぞれ独自の利点があります;

最初の方法はより整理されており、ナビゲーションにアイコンなどの他の装飾要素がある場合にわかりやすくなります。 , そしてそれも li 形式のクラスを書くことでリンクの表示方法を変更することができます企業によっては社員の仕事ぶりをコード量で評価することになります（多くの企業でそうしていると聞きました）。
2 番目のバージョンはより簡潔です。2 番目のバージョンで達成できることは、最初のバージョンでも達成できますが、その逆は当てはまりません。結局、ライトバージョンではいくつかの機能が去勢されています。
以下のデモでは 2 番目のタイプを使用しますが、すべてのデモで最初のタイプに切り替えても問題ありません。

2 共通スタイル

2.1 水平方向の配置

フレキシブルボックスの一般クラスを使用して、ナビゲーションの水平方向の配置を簡単に変更できます。ナビゲーションはデフォルトでは左揃えですが、中央または右に簡単に変更できます。

.justify-content-center を使用して中央に揃えます:
.justify-content-end を使用して右に揃えます:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <nav class="nav justify-content-center">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav justify-content-end">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

1 つのページに複数のナビゲーションを配置できることもわかります。

2.2 垂直ナビゲーション

.flex-column ジェネリッククラスを使用して、ナビゲーションを垂直ナビゲーションに変更します。特定のビューポートでのみスタックしたい場合は、レスポンシブバージョン (.flex-sm-column など) を使用してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <nav class="nav flex-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav flex-sm-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

ps: 垂直方向のナビゲーションは通常、二次ナビゲーションまたはページ内ナビゲーションに使用されるため、ブレークポイントよりも大きい場合、この応答は垂直方向になります。小さい縦型ナビゲーション読書スペースを占有するので、プレイする必要はありません。画面を小さくしたときに水平ナビゲーション機能を非表示にしたい場合は、次の章でナビゲーションツールバーについて詳しく紹介します。

2.3 タブスタイル

基本的なナビゲーションを使用し、.nav-tabs を追加して、ページングタブを備えたインターフェイスを生成します。切り替え可能なブロックを作成するには、以下の「タブの使用法」セクションのページング JavaScript プラグインを使用します。タブスタイルは非常にシンプルですが、特定の機能を実装したい場合は、後で詳しく紹介します。また、詳細なコードも後で説明します。

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

2.4 カプセル

カプセルはタブと同じように使用されますが、nav-tabs の代わりに .nav-pill を使用します:

<ul class="nav nav-pills">

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

2.5 塗りつぶしと整列

.nav コンテンツには幅拡張用の 2 つのクラスがあり、.nav-fill を使用すると、比例して .nav-item コンテンツにスペースが割り当てられます。これは水平方向のスペースをすべて占有しますが、すべてのナビゲーション項目が同じ幅になるわけではないことに注意してください。

等幅要素を作成するには、.nav-justified を使用してください。すべての水平スペースはナビゲーションリンクによって占められますが、上記の .nav-fill とは異なり、各ナビゲーション項目は同じ幅になります。

 <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

            <br><br>

            <ul class="nav nav-pills nav-justified">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

2 つのアライメント間の違いを比較できます。

3 ナビゲーションコンポーネントのさらなる拡張

3.1 フレキシブルボックスユーティリティクラスの使用

応答性に優れたナビゲーションの変更が必要な場合は、一連のフレキシブルボックスの共通クラスを使用してください。これらの一般クラスは、ブレークポイント間のさらなるカスタマイズを提供します。以下の例では、ナビゲーションが小さなブレークポイントの下に積み重ねられ、利用可能な幅をすべて埋めるように小さなブレークポイントから水平方向にレイアウトされます。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="nav nav-pills flex-column flex-sm-row">
                <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
                <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

異なるブラウザ幅で表示します。

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

3.2 使用下拉列表

加入额外的HTML和下拉菜单JavaScript插件

带下拉列表的选项卡

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <br><br><br>
            <ul class="nav nav-tabs">
                <li>
                <a class="nav-link active" aria-current="page" href="#">Active</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                <ul>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><hr></li>
                <li><a href="#">Separated link</a></li>
                </ul>
                </li>
                <li>
                <a href="#">Link</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
                </ul>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

带下拉列表的胶囊只需要将nav-tabs换成nav-pills

<ul class="nav nav-pills">

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

4 使用选项卡

4.1 普通选项卡

前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
                </li>
                <li role="presentation">
                <button id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">资料</button>
                </li>
                <li role="presentation">
                <button id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">联系方式</button>
                </li>
                </ul>

                <div id="myTabContent">

                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <h1>首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <h1>个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <h1>联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                </div>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

4.2 胶囊选项卡

跟前面胶囊一样，只是换一个标签这么简单。

<ul class="nav nav-pills" id="myTab" role="tablist">

1Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

4.3 垂直胶囊选项卡

这个段代码把普通链接改成了按钮，其实也是一样的，看着貌似很复杂，其实只需要复制进去，修改一下你要的地方就好了。

需要注意的是，垂直标签的内容显示在右侧（当然也可以菜单在右边，内容在左边），所以在布局的时候跟前面不太一样。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <div class="d-flex align-items-start">
                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</button>
                <button id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">资料</button>
                <button id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">信息</button>
                </div>

                <div id="v-pills-tabContent">

                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <h1>首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <h1>个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                        <h1>联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
               
            </div>
            </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

4.4 淡入淡出效果

要使选项卡或菜单淡入淡出，请将.fade加到每个.tab-pane分页中。第一个分页内容还必须具有.show以使初始内容可见。事实上上面已经用了淡入淡出效果，试着去掉tab-pane中的fade，看一下效果。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

以上がBootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript bootstrap html 堆 class JS column flex li

声明：

この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：ブートストラップでテーブルを使用するにはどうすればよいですか?強力なテーブルの使用法の簡単な分析次の記事：ブートストラップでテーブルを使用するにはどうすればよいですか?強力なテーブルの使用法の簡単な分析

続きを見る

Bootstrap でナビゲーション コンポーネントとタブ コンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

1 ナビゲーションの基本

2 共通スタイル

2.1 水平方向の配置

2.2 垂直ナビゲーション

2.3 タブ スタイル

2.4 カプセル

2.5 塗りつぶしと整列

3 ナビゲーション コンポーネントのさらなる拡張

3.1 フレキシブル ボックス ユーティリティ クラスの使用

3.2 使用下拉列表

4 使用选项卡

4.1 普通选项卡

4.2 胶囊选项卡

4.3 垂直胶囊选项卡

4.4 淡入淡出效果

関連記事

Bootstrap でナビゲーションコンポーネントとタブコンポーネントを追加するにはどうすればよいですか?使用状況の簡単な分析

2.3 タブスタイル

3 ナビゲーションコンポーネントのさらなる拡張

3.1 フレキシブルボックスユーティリティクラスの使用