ブートストラップのチュートリアル

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

青灯夜游

Nov 23, 2021 pm 06:48 PM

bootstrapタブコンポーネント

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

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

        </div>
   
     <script  ></script>
  </body>
</html>

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

4.4 淡入淡出效果

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

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

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

声明

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

Bootstrap vs.その他のフレームワーク：比較概要Apr 18, 2025 am 12:06 AM

Bootstrapは、使いやすく、レスポンシブWebサイトをすばやく開発できるため、Tailwindcss、Foundation、およびBulmaよりも優れています。 1.BootStrapは、事前に定義されたスタイルとコンポーネントの豊富なライブラリを提供します。 2。そのCSSおよびJavaScriptライブラリは、レスポンシブデザインとインタラクティブな機能をサポートしています。 3.迅速な発展に適していますが、カスタムスタイルはより複雑になる場合があります。

Reactのブートストラップスタイルの統合：方法とテクニックApr 17, 2025 am 12:04 AM

Reactプロジェクトにブートストラップを統合することは、2つの方法で行うことができます。1）小規模プロジェクトまたは迅速なプロトタイピングに適したCDNを使用して導入します。 2）NPMパッケージマネージャーを使用したインストール。深いカスタマイズが必要なシナリオに適しています。これらの方法を使用すると、Reactで美しく応答性の高いユーザーインターフェイスをすばやく構築できます。

Reactのブートストラップ：利点とベストプラクティスApr 16, 2025 am 12:17 AM

BootstrapをReactプロジェクトに統合することの利点には、1）迅速な開発、2）一貫性と保守性、および3）レスポンシブデザインが含まれます。 CSSファイルを直接導入するか、React-Bootstrapライブラリを使用することにより、ReactプロジェクトでBootstrapのコンポーネントとスタイルを効率的に使用できます。

ブートストラップ：WebフレームワークのクイックガイドApr 15, 2025 am 12:10 AM

Bootstrapは、Twitterが開発したフレームワークであり、レスポンシブでモバイルファーストのWebサイトとアプリケーションを迅速に構築できます。 1.使いやすさとリッチなコンポーネントライブラリにより、開発が速くなります。 2。巨大なコミュニティは、サポートとソリューションを提供します。 3.レスポンシブグリッドの作成など、CDNを介してスタイルを制御するためにクラス名を紹介および使用します。 4。カスタマイズ可能なスタイルと拡張コンポーネント。 5.利点には、迅速な開発とレスポンシブデザインが含まれますが、欠点はスタイルの一貫性と学習曲線です。

ブートストラップの分解：それが何であり、なぜそれが重要なのかApr 14, 2025 am 12:05 AM

bootstrapisafree、open-sourcessframeworkthatsthatssponsiveandmobile-firstwebitedevelopment。

ブートストラップ：Webデザインを簡単にしますApr 13, 2025 am 12:10 AM

Webデザインがブートストラップを簡単にするものは何ですか？そのプリセットコンポーネント、レスポンシブデザイン、豊富なコミュニティサポート。 1）プリセットコンポーネントライブラリとスタイルにより、開発者は複雑なCSSコードの作成を避けることができます。 2）ビルトイングリッドシステムは、レスポンシブレイアウトの作成を簡素化します。 3）コミュニティサポートは、豊富なリソースとソリューションを提供します。

Bootstrapの影響：Web開発の加速Apr 12, 2025 am 12:05 AM

BootstrapはWeb開発を加速し、事前に定義されたスタイルとコンポーネントを提供することにより、開発者は迅速にレスポンシブWebサイトを構築できます。 1）プロジェクトの数日以内に基本的なレイアウトを完了するなど、開発時間を短縮します。 2）SASS変数とミキシンを通じて、ブートストラップにより、カスタムスタイルが特定のニーズを満たすことができます。 3）CDNバージョンを使用すると、パフォーマンスを最適化し、負荷速度を向上させることができます。

ブートストラップの理解：コアの概念と機能Apr 11, 2025 am 12:01 AM

Bootstrapはオープンソースのフロントエンドフレームワークであり、その主な機能は、開発者がレスポンシブWebサイトを迅速に構築できるようにすることです。 1）複雑なUI効果の実装を容易にするために、事前定義されたCSSクラスとJavaScriptプラグインを提供します。 2）ブートストラップの作業原則は、メディアクエリを通じてレスポンシブデザインを実現するために、そのCSSおよびJavaScriptコンポーネントに依存しています。 3）使用の例には、ボタンの作成などの基本的な使用法や、カスタムスタイルなどの高度な使用法が含まれます。 4）一般的なエラーには、クラス名のスペルミスやファイルの導入が誤っています。ブラウザ開発者ツールを使用してデバッグすることをお勧めします。 5）パフォーマンスの最適化は、カスタムビルドツールを通じて実現できます。

See all articles