この記事では、主にBootstrapのメニューとナビゲーションを紹介します。
この記事から始めて、次のようにJavaScript関連ファイルを紹介します。
<！ - ボディタグの端に置いて、ページをより速く読み込む - >
<！ - ブートストラップのJSプラグインを使用する場合は、最初にjqueryに電話する必要があります - >
<スクリプトsrc = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script>
<！ - 必要に応じて使用できるすべてのブートストラップJSプラグインまたはJSプラグインを含む - >
<スクリプトsrc = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
ブートストラップでは、ドロップダウンメニューコンポーネントはスタンドアロンコンポーネントです。 Bootstrapのコンポーネントの相互作用効果はすべてjQueryライブラリによって記述されたプラグインに基づいているため、Bootstrap.min.jsを使用する前に、最初にjquery.min.jsを有効にするには、最初にjquery.min.jsをロードする必要があります。
1。プルダウンメニューベーシック使用
<！doctype html> <html> <head> <meta charset = "utf-8"> <title>ドロップダウンメニューの基本的な使用</title> <link rel = "styleSheet" href = "http://netdna.boottrapcdn.com/boottrap/3.1.1/cs/boottrap.min.スタイル - > <style>ボディ{マージン：50px;パディング：50px;} </style> </head> <body> <div> <button type = "button" id "=" dropdownmenu1 "data-toggle =" dropdown ">ドロップダウンメニューrole = "menuitem" tabindex = "-1" href = "＃"> menu1 </a> </li> <liロール= "Presention"> <a role = "menuitem" tabindex = "-1" href = "＃"> menu2 </a> </li> < tabindex = "-1" href = "＃"> menu3 </a> </li> <！ - メニュー項目のステータスを無効にする（.disabled） - > <liロール= "lole =" menuitem "tabindex =" -1 "href ="＃ ">メニュー4 </a> < tabindex = "-1" href = "＃">メニュー4 </a> </li> <liロール= "プレゼンテーション"> <aロール= "menuitem" tabindex = "-1" href = "＃">メニュー4 </a> </li> <liロール= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = "役割= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = ">メニュー6 </a> </li> </ul> </div> <！ - ページの読み込みをより速くするためにドキュメントの最後に配置 - > <！ - ブートトラップのJSプラグインを使用する場合は、最初にjqueryを使用する必要があります - > <> <> <> <> src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <！ - 必要に応じて使用できるすべてのJSプラグインまたはJSプラグインを含む - > <スクリプトsrc = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>注：上向きにバウンドする必要がある場合があるため、「ドロップアップ」クラス名を「ドロップダウン」クラス名に追加するだけでいい場合があります。
レンダリングは次のとおりです。
2。プルダウンメニューアライメント
Bootstrapのドロップダウンメニューは、デフォルトで左側に配置されます。下に示すように、ドロップダウンメニューを親コンテナに対して右に整列させたい場合は、「プル右」または「ドロップダウンメニュー右」のクラス名を「ドロップダウンメニュー」に追加できます。
<！ - コードの1-> ... <div> <ボタンタイプ= "ボタン" ID = "dropdownmenu1" data-toggle = "dropdown">ドロップダウンメニュー<span> </span> </button> <ulロール= "メニュー" aria-labelledby = "dropdownmenu1"> <li chriw = "項目</a> </li> <liロール= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = "＃">ドロップダウンメニュー</a> </li> </ul> </div> ...
レンダリングは次のとおりです。
3。ボタンボタングループ
ボタングループも独立したコンポーネントです。正常に実行するには、button.jsプラグインに依存する必要があります。 Bootstrap.jsはButton.jsプラグイン機能を統合しています。
使用法：「BTN-GROUP」コンテナを使用し、複数のボタンをこのコンテナに入れます。以下に示すように：
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> buttonグループ</title> <link rel = "styleSheet" http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/boottrap.min.cs ">ボディ{マージン：30px;パディング：30px; } </style> </head> <body> <div> <button = "button"> <span> </span> </button> <button type = "button"> <span> </span> </button> <button = "button"> </span> </span> </button> <ボタンタイプ= "=" button "> <span> </span> </</</</</</</</> < type = "button"> <span> </span> </button> <button = "button"> <span> </span> </button> <ボタンタイプ= "> <span> </span> </button> <ボタンタイプ="ボタン "> </span> </button> <ボタンタイプ="ボタン "> <スパン> <ボタン> < type = "button"> <span> </span> </button> <button = "button"> <span> </span> </button> <ボタンタイプ= "> <span> </span> </button> <ボタンタイプ="ボタン "> </span> </button> <ボタンタイプ="ボタン "> <スパン> <ボタン> < type = "button"> <span> </span> </button> </div> <！ - ドキュメントの最後に置いてページの読み込みをより速くする - > <！ - jqueryのJSプラグインを使用する場合は、最初にjqueryに電話する必要があります。必要に応じて呼び出すことができるすべてのブートストラップJSプラグインまたはJSプラグインを含む - > <スクリプトsrc = "http://maxcdn.bootstrapcdn.com/boottrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>レンダリングは次のとおりです。
4。ボタン - ネストされたグループ化
多くの場合、ドロップダウンメニューと通常のボタングループを手配して、ナビゲーションメニューと同様の効果を実現します。ブートストラップボタンのネストされたグループ化を使用する場合、ドロップダウンメニューを「BTNグループ」で作成し、通常のボタンと同じレベルに配置するコンテナ「ドロップダウン」を交換するだけです。以下に示すように：
<！ - 3-> ... <div> <ボタンタイプ= "button"> home </button> <div> <button data-toggle = "dropdown" type = "button">モバイル開発<span> </span> </button> <li> <a href = "##"> android </a> </ul> </div> <ボタンタイプ= "button"> java web開発</button> <button type = "button"> php development </button> <button type = "button">ビッグデータ</button> </div> ...
レンダリングは次のとおりです。
実際には、垂直ディスプレイ効果に常に遭遇します。このスタイルは、ブートストラップでも提供されています。ボタンの垂直グループを実現するために、水平グループの「BTNグループ」クラス名を「BTN-Group-vertical」に変更するだけです。
5。ボタンと同等のボタン
イコライゼーションボタンの実装方法（適応グループ化ボタン）も非常に簡単です。以下に示すように、「BTN-Group-Yustified」クラス名をボタングループ「btn-group」に追加する必要があります。
<div> <a href = "＃"> 1つの3分の1 </a> <a href = "＃"> 1つの3分の1 </a> <a href = "＃"> </a> <a href = "＃"> 1つの3分の1 </a> </div>
レンダリングは次のとおりです。
6。ナビゲーション - 基本的な使用
ナビゲーションバーは、主に「.nav」スタイルを通してブートストラップで作られています。 .nav "は、「ナビタブ」、「ナビキ」など、効果的であるために別のスタイルを添付する必要があります。
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> navigation-basic usage </title> <link rel = "styleSheet" href = "http://netdna.boottrapcdn.com/boottrap/3.1.1/cs/boottrap.min.css <style> body {margin：30px; padding：30px;} </style> </head> <body> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" <li> <a href = "##"> forum </a> </li> <！ - 無効ステータス - > <li> <li> <li> <li> <li> <li>フィードバック</a> </li> </ul> <！ - ドキュメントの終わりに置いてページの読み込みをより速くするために - > <！ src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <！ - 必要に応じて呼び出されるすべてのJSプラグインまたはJSプラグインを含む - > <スクリプトsrc = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>レンダリングは次のとおりです。
7。ナビゲーション - カプセル（錠剤）ナビゲーション
カプセル（錠剤）ナビゲーション、現在のアイテムが強調表示され、丸い角効果があります。クラス名「Nav-Tabs」を「Nav-Pills」に置き換えるだけです。
<ul> <！ - 現在のステータス - > <li> <a href = "##"> home </a> </li> <！ - 一時停止ステータス - > <li> <a href = "##"> news </a> </li> <li> href = "##">フロントエンドブログ</a> </li> <li> <a href = "##"> java blog </a> </li> </li> </li> <li> <a href = "##"> forum </a> </li> <
レンダリングは次のとおりです。
8。ナビゲーション - 垂直積み重ねられたナビゲーション
垂直スタックナビゲーションを作成するには、「NAVピル」に基づいて「NAVスタック」クラス名を追加する必要があります。
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> news </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "## "> href = "##">フィードバック</a> </li> </ul>
レンダリングは次のとおりです。
9。ナビゲーション - 適応ナビゲーション
Adaptive Navigation "Nav-justified"（bootstrap.cssファイル、3585行から3607行を参照してください）は、「nav-tabs」または「nav-pills」と併せて使用する必要があります。のように：
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> news </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "## "> href = "##">フィードバック</a> </li> </ul>
レンダリングは次のとおりです。
10。ナビゲーションブレッドクランブ
Breadcrumbは、一般的にナビゲーションに使用される独立したモジュールコンポーネントでもあり、その主な機能はユーザーにページの現在の場所（現在の場所）を伝えることです。使用方法は非常にシンプルです。BreadcrumbクラスをOLに追加します。
<ol> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃">中国</a> </li> <li> beijing </li> </ol>
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。