Bootstrap でタブ付きピルと垂直ピル ナビゲーション メニューを作成する

Bootstrap には、タブ付きピルや垂直ピルなどのナビゲーション メニューを作成するためのいくつかのオプションが用意されています。Bootstrap でこの種のナビゲーション メニューを作成するには、フレームワーク。これは、すべてのデバイスで適切に動作する、スタイリッシュで機能的なナビゲーション メニューの作成に役立ちます。

方法 - 1: タブ付きナビゲーション

このタイプのメニューでは、各タブが Web サイトの異なるセクションを表します。錠剤は水平に配置されます。タブをクリックするたびに、対応するセクションが表示されます。

＃＃＃アルゴリズム＃＃＃

Bootstrap の CSS および JavaScript ファイルを読み込みます。
「Tutorialspoint」という見出しを持つコンテナ要素を追加します。
3 つのタブを持つナビゲーション メニューを作成します。
各タブを宣言します。
各タブにコンテンツを追加します。
ブートストラップ JavaScript および jQuery ファイルをロードします。

• ＃＃＃例＃＃＃ リーリー
方法 - 2: 垂直ピル ナビゲーション

一方、垂直タブは、リンクが水平ではなく垂直に配置されるナビゲーション メニューの一種です。これは、スムーズなユーザー エクスペリエンスを生み出すのに役立ちます。

＃＃＃アルゴリズム＃＃＃

「Tutorialspoint」というタイトルのコンテナを作成します。

コンテナには 1 行 2 列が必要です。
最初の列には垂直ナビゲーション メニューが含まれ、2 番目の列には選択したメニュー項目のコンテンツが表示されます。
メニューは「nav」クラスと「nav-pill」クラスを使用して作成されます。これにより、メニュー項目がピルのような垂直スタイルで表示されます。
各項目は、対応するコンテンツを表示する「タブ パネル」にリンクする一意の「href」を持つアンカー タグです。
各メニューのコンテンツは、「タブ コンテンツ」クラスでラップされた「タブ ペイン」に表示されます。
JavaScript コードには、メニューを機能させるための jQuery ライブラリといくつかの Bootstrap JavaScript プラグインが含まれています。

• ＃＃＃例＃＃＃ リーリー ＃＃＃結論は＃＃＃
これらの種類のメニューは、Web サイトのユーザー インターフェイスとユーザー エクスペリエンスを向上させることができます。

• 代替実装方法には次のようなものがあります。

カスタム CSS および JavaScript 関数を使用してカスタム メニューを作成します。

Bootstrap に加えて、Materialize や Bulma などの CSS フレームワークも同様の機能を提供します。

jQuery UI、UIkit、Semantic UI などのサードパーティ ライブラリを使用して、この種のナビゲーション メニューを作成することもできます。

以上がBootstrap でタブ付きピルと垂直ピル ナビゲーション メニューを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。