Bootstrap 3.0 学習ノートのボタンとドロップダウン メニュー

前回の記事はBootstrap CSS部分の簡単なレビューであり、多くの詳細が見落とされていました。しかし、私はほとんどのコンテンツを読み、コードで実装し、実際の効果を確認しました。かなり良い。次の数回の記事では、主に Bootstrap のコンポーネントについて説明します。この記事では主に以下の内容について説明します

1. ドロップダウンメニュー

2. ボタングループ

3. ボタンのドロップダウンメニュー

4. まとめ

コードに慣れてページの作成を始めましょう。まず、新しいテストWebページを作成し、次のコードを追加します。

わからないことがあれば、前回の記事で紹介しました。リンクをクリックしてご覧ください。http://www.cnblogs.com/aehyok/p/3398359.html

ドロップダウンメニュー

リンクのリストを表示するための切り替え可能なコンテキスト メニュー。

場合

ドロップダウン トリガーとドロップダウン メニューを .dropdown でラップし、メニューを構成する HTML コードを追加します。

上記のコードから、見慣れないスタイルのクラスや属性が多数あることがわかります。

ドロップダウン ボタンと右側の小さなアイコン キャレット。もちろん、小さなアイコンとボタンのテキストは同じレベルにあります。

まず、ボタンにはドロップダウン トグルとデータ トグル属性があります。この属性に基づいてリストがポップアップ表示されます。

ul タグの直後のドロップダウン メニューは、上のボタンのスタイル クラス dropdown-toggle と組み合わせて使用​​し、aria-labelledby を通じて上のボタンにバインドする必要があります。

次に、4 番目の li タグに区切り線がありますが、これは実際には区切り線のスタイル クラスです。

おそらく私はこのように理解しているのでしょうが、完全な理解ではないことは確かです。

配置オプション

テキストを右揃えにするには、ドロップダウン メニュー .dropdown-menu に .text-right を追加します。

上記のコードの ul タグに text-right クラスを追加するだけです。

タイトル

どのドロップダウン メニューでも、タイトルを追加することでアクションのグループを識別できます。

重要なのは、.dropdown-header スタイル クラスを持つ <li role="presentation" class="dropdown-header">ドロップダウン ヘッダー</li> を追加することです。

無効なメニュー項目

リンクを無効にするには、ドロップダウン メニューの <li> に .disabled を追加します。

上記のコードを変更し続けて、Something else here行のコードを置き換えます。

重要なのは、 li タグに .disabled スタイル クラスを追加することです。

実行後、効果を確認することができます。実際、効果は上記のタイトルスタイルに似ています。クリックすると、無効アイコンが表示されます。写真を撮れません。

ボタングループ

ボタングループ内のツールチップとポップアップには特別な設定が必要です

.btn グループ内の要素にツールチップまたはポップオーバーを適用する場合は、望ましくない副作用 (ツールチップまたはポップオーバーがトリガーされたときにページ要素の幅が広くなったり、角の丸みが失われたりするなど) を回避するために、container: 'body' オプションを指定する必要があります。

基本的なケース

一連の .btn ボタンを .btn グループに配置します。

.btn-groupを使用すると、ボタンのグループをグループ化し、スタイルクラスbtnを追加できます。

ボタンツールバー

より複雑なコンポーネントを作成するには、<div class="btn-group"> のグループを <div class="btn-toolbar"> に結合します。

サイズ

グループ内のすべてのボタンにサイズ クラスを適用する代わりに、.btn-group に .btn-group-* を追加するだけです。

ネスティング

ドロップダウン メニューを一連のボタンに統合するには、.btn グループを別の .btn グループ内に配置します。

縦方向の配置

ボタンのグループを水平ではなく垂直に表示します。

両端揃えのリンク配置

ボタンのグループを同じサイズに引き伸ばし、親要素の幅に合わせます。

<button> にはこれらのスタイルを適用できないため、これは <a> 要素でのみ機能します。

ボタンのドロップダウンメニュー

ボタンを .btn グループに配置し、適切なメニュー マークアップを追加することで、任意のボタンをドロップダウン メニュー トリガーにすることができます。

単一ボタンのドロップダウンメニュー

いくつかの基本的なマークアップを変更することで、ボタンをドロップダウン メニュー スイッチに変えることができます。

分割ボタンのドロップダウンメニュー

同様に、分割ボタンのドロップダウン メニューには同じ変更マークアップが必要ですが、分割ボタンが追加されます。

ドロップダウン メニューを表示するには、小さいアイコンをクリックするだけです。

サイズ

ドロップダウン メニュー ボタンは、あらゆるサイズのボタンで使用できます。

ボタンのサイズを制御するには、スタイル クラス .btn-lg、.btn-sm、および .btn-xs を使用します。

ポップアップメニュー

親要素に .dropup を追加すると、要素の上にドロップダウン メニューが表示されます。

要約する

この記事では、主にボタンとドロップダウン メニューを学習し、次にボタンとドロップダウン メニューの組み合わせを学習します。バリエーションはかなり多く、スタイルも優れていますが、ここでの紹介はあまり詳細ではなく、学習するのがまだ少し難しいため、使い始めるのはまだそれほど便利ではありません。しかし、それは問題ではありません。もっと練習すれば、ゆっくりと理解できるようになります。