プルダウンメニュー
特別な声明：Bootstrapのコンポーネントの相互作用効果はすべてjQueryライブラリによって書かれたプラグインに基づいているため、Bootstrap.min.jsを使用して効果を生成する前に、最初にjquery.min.jsをロードする必要があります。
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "dropdown">ドロップダウンメニュー<span> </span> </button> <ul role = "aria-labelledby =" dropdownmenu1 "> <li chole =" presention "> <a role =" menuitem "tabindex =" -1 "役割= "プレゼンテーション"> <aロール= "menuitem" tabindex = "-1" href = "＃">ドロップダウンメニュー項目</a> </li> <liロール= "プレゼンテーション"> <aロール= "menuitem" tabindex = "-1" href = "＃">ドロップダウンメニュー項目</a> href = "＃">ドロップダウンメニュー項目</a> </li> </ul> </div> <！ - jqueryはブートストラップの前にインポートする必要があります。 src = "// maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
複製写真：
実装の原則：
最初はディスプレイがありました。クラスにはありません。以下のCSSをご覧ください
.DropDown-Menu {position：absolute;/*親要素div.dropdown*/top：100％;/*親メニュー項目の下部にあるドロップダウンメニュー項目を置きます。親要素が相対的な位置付けを設定しない場合、要素はボディ要素に対して関連します*/左：0; z-index：1000;/*ドロップダウンメニュー項目を他の要素でカバーしない*/*ドロップダウンメニュー項目をデフォルトで非表示*/*左;左; width：160px;パディング：5px 0; #fff; background-clip：padding-box; border：1px solid #ccc; border：1px solid rgba（0、0、0、.15）; border-radius：4px; -webkit-box-shadow：0 6px 12px rgba（0、0、0、0、.175）; box-shadow：0 6px 12px rgba次に、クリックイベントを使用して、タグクラスの削除と追加を制御し、表示と非表示を実現します
JSテクノロジーを介して、クラス名「開く」を親コンテナ「Div.Dropdown」に追加または削除して、ドロップダウンメニューの表示または隠しを制御します。つまり、デフォルトでは、
「Div.DropDown」には、クラス名「開いている」がありません。ユーザーが初めてクリックすると、クラス名「open」がクラス名「Open」に追加されます。ユーザーが再びクリックすると、「div.dropdown」コンテナのクラス名「開く」が再び削除されます。ブラウザのFirebugを使用して、プロセス全体を表示できます。
デフォルト：
ユーザーが初めてクリックします：
ユーザーがもう一度クリックします：
CSSを開きます
.open> .dropdown-menu {display：block;}メニュースプリットラインを引き下げます
上記の例を見て、コードを貼り付けましょう！効果を見てください、あなたはまだJSファイルを導入する必要があります！その後はあまりありません！
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "dropdown">ドロップダウンメニュー<span> </span> </button> <ul role = "aria-labelledby =" dropdownmenu1 "> <li chole =" presention "> <a role =" menuitem "tabindex =" -1 "役割= "プレゼンテーション"> <aロール= "menuitem" tabindex = "-1" href = "＃">ドロップダウンメニュー項目</a> </li> <liロール= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = "＃">ドロップダウンメニュー項目</a> </li = < tabindex = "-1" href = "＃">ドロップダウンメニュー項目</a> </li> </ul> </div>
複製写真：
実際、もう1つのコードがあります
<liロール= "プレゼンテーション"> </li>
ドロップダウンメニューメニュータイトル
コードを直接アップロードします
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "dropdown">ドロップダウンメニュー<span> </span> </button> <ul lole = "aria-labelledby =" dropdownmenu1 "> <li chole =" lole = "lole"> part 1 menu header </li> <li = " href = "＃">ドロップダウンメニュー項目</a> </li> <liロール= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = ">ドロップダウンメニュー項</a> </li> <liロール="プレゼンテーション "役割= "プレゼンテーション"> </li> <liロール= "プレゼンテーション">パート2メニューヘッダー</li> <liロール= "lole =" menuitem "tabindex =" -1 "href ="＃ ">ドロップダウンメニュー項目</a> </li> <liロール="プレゼンテーション "> <a role =" menuitem "opindex =" -1 "href ="項目</a> </li> <liロール= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = "＃">ドロップダウンメニュー項目</a> </li> </ul> </div>
複製写真：
実際、追加されたコードは1つだけです。
<liロール= "プレゼンテーション">パート2メニューヘッダー</li>
プルダウンメニューアライメント
<h4>プル右クラスを使用して、ドロップダウンメニューを親コンテナの右側に合わせます</h4> <div style = "float：left;"> <button type = "button" id = "dropdownmenu1" date-toggle = "dropdown">
プルダウンメニュー
<span> </span> </button> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li chole = "presention"> <a role = "menuitem" tabindex = "-1" href = ">ドロップダウンメニュー項目</a> </li> <liロール="プレゼン項目</a> </li> <liロール= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = ">ドロップダウンメニュー項目</a> </li> <liロール="プレゼンテーション "> <aロール=" menuitem "tabindex =" -1 "href ="役割= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = ">ドロップダウンメニュー項目</a> </li> </ul> </div> <br/> <br/> <h4>ドロップダウンメニュー右h4>ドロップダウンメニュー右クラスを使用して、ドロップダウンメニューを右側の右側に並べるために並べるID = "DropDownmenu1" data-toggle = "Dropdown">
プルダウンメニュー
<span> </span> </button> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li chole = "presention"> <a role = "menuitem" tabindex = "-1" href = ">ドロップダウンメニュー項目</a> </li> <liロール="プレゼン項目</a> </li> <liロール= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = ">ドロップダウンメニュー項目</a> </li> <liロール="プレゼンテーション "> <aロール=" menuitem "tabindex =" -1 "href ="役割= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = ">">ドロップダウンメニュー項目</a> </li> </ul> </div> <br/> <br/> <h4>ドロップダウンメニューは、親コンテナの左側に並んでいます</h4> data-toggle = "ドロップダウン">
プルダウンメニュー
<span> </span> </button> <ul role = "menu" aria-labelledby = "dropdownmenu1"> <li chole = "presention"> <a role = "menuitem" tabindex = "-1" href = ">ドロップダウンメニュー項目</a> </li> <liロール="プレゼン項目</a> </li> <liロール= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = ">ドロップダウンメニュー項目</a> </li> <liロール="プレゼンテーション "> <aロール=" menuitem "tabindex =" -1 "href =" role = "Presention"> <a role = "menuitem" tabindex = "-1" href = "＃">ドロップダウンメニュー項目</a> </li> </ul> </div>
実際、「ドロップダウンメニュー」に「プル権」または「ドロップダウンメニュー」クラス名を追加します。ここで、CSSのスタイルコード
.dropdown-menu.pull-right {右：0;左：auto;}。ドロップダウンメニュー右{右：0;左：auto;}プルダウンメニュー（メニュー項目のステータス）
ドロップダウンメニュー項目のデフォルトの状態（設定なし）には、吊り下げ状（：ホバー）とフォーカス状態（：フォーカス）があります
上記の2つの状態に加えて、ドロップダウンメニュー項目には、現在の状態（.active）と無効状態（.disabled）もあります。
<div> <button type = "button" id = "dropdownmenu1" data-toggle = "dropdown">ドロップダウンメニュー<span> </span> </button> <ul role = "aria-labelledby =" dropdownmenu1 "> <li chole =" presention "> <a role =" menuitem "tabindex =" -1 "役割= "プレゼンテーション"> <aロール= "menuitem" tabindex = "-1" href = "＃">ドロップダウンメニュー項目</a> </li> <liロール= "プレゼンテーション"> <a role = "menuitem" tabindex = "-1" href = "＃">ドロップダウンメニュー項目</a> </li = < tabindex = "-1" href = "＃">ドロップダウンメニュー項目</a> </li> </ul> </div>
マウスをその上に置くと、禁止されたサインが障害者に表示されます。スクリーンショットを挿入できません！
ボタン（ボタングループ）
Webページでシングルボタンを使用しても、ビジネスニーズを満たしていない場合があります。リッチテキストエディターの小さなアイコンボタンのセットなど、複数のボタンが組み合わされていることがよくあります。
<div> <ボタンタイプ= "button"> <span> </span> </button> <button type = "button"> <span> </span> </button> <button type = "button"> <span> </span> </button> <button> "button"> <span> </span> </button> <ボタンタイプ= "ボタンtype = "button"> <span> </span> </button> <button> <button> <button> <button> "button"> <span> </span> </button> <button> <button> <button> <button = "button"> <span> </span> </button> <button> <button> <button> "button"> <span> </span> </button> <ボタン> <ボタン> type = "button"> <span> </span> </button> <button type = "button"> <span> </span> </button> </div>
複製写真：
ここでは、異なるアイコンに従って異なるアイコンボタンを生成できます！このWebサイト：http：//getbootstrap.com/components/#glyphiconsで見ることができます
ボタン（ボタンツールバー）
豊富なテキストエディターでは、グループのコピー、カット、貼り付けなど、グループボタングループが一緒になります。下の図に示すように、グループを左石号、中級、右整列、エンドアライインのグループの整理整列とエンドアライインします。
次に、ブートストラップフレームボタンツールバーもこのような作成方法を提供します。以下に示すように、大きなコンテナ「BTN-Toolbar」にグループに「BTN-GROUP」をグループに配置する必要があります。
<div> <div> <ボタンタイプ= "ボタン"> <スパン> </span> </button> <ボタンタイプ= "button"> <span> </span> </button> <button = "button"> <span> </span> </button> </div> <div> <ボタンタイプ= "ボタン"> <スパン> </スパン> < type = "button"> <span> </span> </button> </div> <div> <button = "button"> <span> </span> </button> </div> <div> <button = "button"> <span> </span> </button> <ボタン> <ボタン> </ボタン> <ボタン> </</<ボタンtype = "button"> <span> </span> </button> <button> </button> <button> <button = "button"> <span> </span> </button> <button = "button"> <span> </span> </button> </div> <div> <button type = "button"> <span> </span> </div>
複製写真：
図の2番目のアイコンセットは、クラスで追加されます。
BTN-GROUP-LG：大きなボタングループ
BTN-GROUP-SM：小さなボタングループ
BTN-GROUP-XS：ウルトラスモールボタングループ
対応するクラス名を「.btn-group」クラス名に追加して、さまざまなサイズのボタングループを取得します。
ボタン（ネストされたグループ化）
多くの場合、ドロップダウンメニューと通常のボタングループを手配して、ナビゲーションメニューと同様の効果を実現します。
それを使用する場合、もともと「BTNグループ」でドロップダウンメニューを作成した「ドロップダウン」を作成したコンテナを交換し、通常のボタンと同じレベルに配置する必要があります。
<div> <ボタンタイプ= "ボタン">ホーム</button> <ボタンタイプ= "ボタン">製品表示</button> <ボタンタイプ= "ボタン">ケース分析</button> <ボタンタイプ= "ボタン">連絡先</button> <div> <button data-toggle = "dropdown" type = "ボタンプロフィール</a> </li> <li> <a href = "##">企業文化</a> </li> <li> <a href = "##">組織構造</a> </li> <li> <a href = "##">カスタマーサービス</a> </li> </ul>
複製写真：
ボタン（垂直グループ）
前述の例では、ボタングループが水平に表示されます。しかし、実際に使用すると、垂直ディスプレイ効果に常に遭遇します。このスタイルは、Bootstrapフレームワークでも提供されています。水平グループの「BTN-GRAP」クラス名を「BTN-Group-vertical」に変更する必要があります
<div> <ボタンタイプ= "ボタン">ホーム</button> <ボタンタイプ= "ボタン">製品表示</button> <ボタンタイプ= "ボタン">ケース分析</button> <ボタンタイプ= "ボタン">連絡先</button> <div> <button data-toggle = "dropdown" type = "ボタンプロフィール</a> </li> <li> <a href = "##">企業文化</a> </li> <li> <a href = "##">組織構造</a> </li> <li> <a href = "##">カスタマーサービス</a> </li> </ul>
複製写真：
ボタン（等しいボタン）
等しいセグメントボタンの効果は、モバイル端子で特に実用的です。ボタングループの幅全体はコンテナの100％であり、ボタングループの各ボタンはコンテナ幅全体を分割します。たとえば、ボタングループに5つのボタンがある場合、各ボタンは幅20％、4つのボタンがある場合、各ボタンは幅25％などです。
イコライゼーションボタンは、多くの場合、適応グループ化ボタンとも呼ばれます。実装方法も非常に簡単です。以下に示すように、「BTN-Group-Yustified」クラス名をボタングループ「btn-group」に追加する必要があります。
<div> <div> <a href = "＃"> home </a> <a href = "＃">製品ディスプレイ</a> <a href = "＃">ケース分析</a> <a href = "＃">お問い合わせ</a> </div> </div>
画面の幅を変更します
特別なステートメント：Aliquotボタングループを作成するときは、<a>タグ要素を使用してボタンを作成してみてください。<button>タグ要素を使用する場合、表示：テーブルは一部のブラウザでサポートするのにフレンドリーではありません。
ボタンの下向きの上向きの三角形
ボタンの下向きの三角形では、ラベルに「」ラベル要素を追加し、「CARET」と名付けます。
ドロップダウンメニューがポップアップする場合があります（次のセクションで紹介します）。この時点で、三角形の方向を上方に表示する必要があります。実装方法：「Dropup」クラス名を「.btn-Group」クラスに追加する必要があります（これは、上向きのポップアップドロップダウンメニューに使用するクラス名でもあります）。
<div> <ボタンデータ-toggle = "ドロップダウン"タイプ= "ボタン">ボタンドロップダウンメニュー<span> </span> </button> <ul> <li> <a href = "##">ボタンドロップダウンメニュー</a> </li> <li>アイテム</a> </li> </ul> </div>
複製写真：
ナビゲーション（基本スタイル）
ナビゲーションは、フロントエンドの人にとって見知らぬ人ではありません。ナビゲーションはウェブサイトの重要な要素の1つであり、ユーザーがウェブサイトが提供するさまざまな機能サービスを見つけることを促進できると言えます。ナビゲーション方法も非常に多様で多様です。
ナビゲーションバーは、主に「.nav」スタイルを通じてブートストラップフレームワークで作られています。デフォルトの「.NAV」スタイルは、デフォルトのナビゲーションスタイルを提供しません。 「Nav-Tabs」、「Nav-Pills」など、効果的にするには、別のスタイルを取り付ける必要があります。たとえば、右側のコードエディターにタブナビゲーションバーの例があります。彼の実装方法は、UL Tag.NAVとNAV-Tabsに2つのクラススタイルを追加することです。
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##" href = "##">レスポンティブ</a> </li> </ul>
ナビゲーション（タグ型のタブナビゲーション）
タブナビゲーションとも呼ばれるタグ型ナビゲーション。特に、多くの内容がチャンクで表示される場合、このタブを使用してそれらをグループ化するのが非常に適しています。
タグ型のナビゲーションは、「Nav-Tabs」スタイルを通じて実装されています。タグ型のナビゲーションを作成するときは、このタイプの名前を元のナビゲーション「NAV」に追加する必要があります。
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##" href = "##">レスポンティブ</a> </li> </ul>
実際、上記の例の効果は、通常見られるタブ効果と一致していません。一般的に、タブは現在の選択を教えています。実際、ブートストラップフレームワークもそれに応じて提供されています。 「ホーム」アイテムが現在選択されているアイテムにしたいと仮定します。クラス名「class = "Active」をタグに追加するだけです。
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##" href = "##">レスポンティブ</a> </li> </ul>
複製写真：
現在のアイテムに加えて、一部のタブには障害状態もあります。この効果を達成するには、タグ項目に「class = "disabled」を追加するだけです。
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##" href = "##">レスポンティブ</a> </li> </ul>
複製写真：
ナビゲーション（ピル）ナビゲーション）
カプセルの形状（丸薬）ナビゲーションは、カプセルの形のように見えるので、少し厄介に聞こえます。しかし、それは私たちが通常見る大量ナビゲーションに似ています。現在のアイテムは、丸い角効果で強調表示されます。実装方法は「NAV-TABS」に似ています。同じ構造を使用すると、クラス名「Nav-Tabs」を「Nav-Pills」に置き換えるだけです。
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##" href = "##">レスポンティブ</a> </li> </ul>
複製写真：
上記と同じです！
ナビゲーション（垂直積み重ねられたナビゲーション）
実際の使用では、水平ナビゲーションに加えて、以前に導入された垂直方向のアレンジメントボタンと同様に、垂直ナビゲーションもあります。垂直スタックナビゲーションを作成するには、「NAVピル」に基づいて「NAVスタック」クラス名を追加する必要があります
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##" href = "##">レスポンティブ</a> </li> </ul>
複製写真：
ドロップダウンメニューセクションには、ドロップダウンメニューグループとグループの間に仕切りがあります。実際、垂直スタックナビゲーションにもこの効果があります。追加するだけです」
" ただ：
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##" href = "##">レスポンティブ</a> </li> </ul>
複製写真：
適応ナビゲーション（使用）
適応型ナビゲーションとは、コンテナの幅全体を占めるナビゲーションを指し、メニュー項目はテーブルのセルのような幅に適応できます。適応ナビゲーションは、「btn-group-justified」を使用して作成された適応ボタングループと同じです。ちょうどアダプティブナビゲーションを作成するとき、別のクラス名「Nav-justified」です。もちろん、彼は「Nav-Tabs」または「Nav-Pills」で使用する必要があります。のように：
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##" href = "##">レスポンティブ</a> </li> </ul>
複製写真：
これは別の画面です
ナビゲーションとプルダウンメニュー（セカンダリナビゲーション）
以前の例は、ブートストラップフレームワークを使用して第1レベルのナビゲーションを作成することですが、多くの場合、第2レベルのナビゲーションの効果はWebページとは分離できません。その後、ブートストラップフレームワークで二次ナビゲーションを作成する方が簡単です。 LIを親コンテナとして扱い、クラス名「ドロップダウン」を使用し、LIで別のリストULをネストし、前のドロップダウンメニューで紹介した方法を使用します。
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##" data-toggle = "dropdown">チュートリアル<span> </span> </a> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <li> <a href = "##"> jquery </a> </li> <li> <a href = "##">レスポンティブ</li> </li> <li> <a href = "## ">
複製写真：
ブラウザのデバッグツールを介して、セカンダリナビゲーションを使用してメニュー項目をクリックすると、「開いた」クラス名が自動的に追加されることを見つけることは難しくありません。もう一度クリックすると、追加された「開く」クラス名が削除され、ドロップダウンメニューの実装原則は同じです！
次に、セカンダリナビゲーションで分割線を使用する場合、「<li class = "nav-divider"> </li>」などの空のタグを追加する必要があります。
ブレッドクランブナビゲーション
パン粉は通常、ナビゲーションに使用され、その主な機能はユーザーにページの現在の場所を伝えることです（現在の場所）
<ol> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃">私の本</a> </li> <li> "図解CSS3" </li> </ol>
複製写真：