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

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

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

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

2. ボタングループ

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

4. まとめ

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


コードをコピー
コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<title>ブートストラップ</title>
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<!-- ブートストラップ -->
<link href="css/bootstrap.min.css" rel="スタイルシート" media="screen">
<!-- HTML5 Shim と Respond.js IE8 による HTML5 要素とメディア クエリのサポート -->
<!-- 警告: file:// 経由でページを表示すると Respond.js は動作しません --> <!--[if lt IE 9]>
<script src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->
</head>
<body> 内の <script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</本文>
</html>

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

ドロップダウンメニュー

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

場合

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


コードをコピー
コードは次のとおりです。

<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> ドロップダウン <span class="caret"></span>
</ボタン>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">アクション</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">その他のアクション</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">ここには他にも何か</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">分離されたリンク</a></li>
</ul>
</div>

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

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

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

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

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

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

配置オプション

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


コードをコピー
コードは次のとおりです。

<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> ドロップダウン <span class="caret"></span>
</ボタン>
<ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">アクション</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">その他のアクション</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">ここには他にも何か</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">分離されたリンク</a></li>
</ul>
</div>

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

タイトル

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


コードをコピー
コードは次のとおりです。

<h1>ドロップダウン メニュー</h1>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> ドロップダウン <span class="caret"></span>
</ボタン>
<ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">ドロップダウン ヘッダー</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">アクション</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">その他のアクション</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">ここには他にも何か</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">ドロップダウン ヘッダー</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">分離されたリンク</a></li>
</ul>
</div>

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

無効なメニュー項目

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

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


コードをコピー
コードは次のとおりです。
<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">ここには他にも何か</a></li>

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

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

ボタングループ

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

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

基本的なケース

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


コードをコピー
コードは次のとおりです。

<div class="btn-group">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中央</button>
<button type="button" class="btn btn-default">右</button>
</div>

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

ボタンツールバー

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


コードをコピー
コードは次のとおりです。

<div class="btn-toolbar" role="ツールバー">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">7</button>
<button type="button" class="btn btn-default">8</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">9</button>
</div>
</div>

サイズ

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


コードをコピー
コードは次のとおりです。

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">7</button>
<button type="button" class="btn btn-default">8</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">9</button>
</div>

ネスティング

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


コードをコピー
コードは次のとおりです。

<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button></p> <p> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> ドロップダウン <span class="caret"></span>
</ボタン>
<ul class="ドロップダウンメニュー">
<li><a href="#">ドロップダウン リンク</a></li>
<li><a href="#">ドロップダウン リンク</a></li>
</ul>
</div>
</div>

縦方向の配置

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


コードをコピー
コードは次のとおりです。

<div class="btn-group btn-group-vertical">
<a href="#">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>

</a>
<div class="btn-group">
<a href="#">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> ドロップダウン </button>
</a>
<ul class="ドロップダウンメニュー">
<li><a href="#">ドロップダウン リンク</a></li>
<li><a href="#">ドロップダウン リンク</a></li>
</ul>
</div>
</div>
</div>

両端揃えのリンク配置

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

特定の要素の使用

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


コードをコピー
コードは次のとおりです。

<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-default">左</button>
<button type="button" class="btn btn-default">中央</button>
<button type="button" class="btn btn-default">右</button>
</div>

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

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

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

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


コードをコピー
コードは次のとおりです。

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> アクション <span class="caret"></span>
</ボタン>
<ul class="dropdown-menu" role="menu">
<li><a href="#">アクション</a></li>
<li><a href="#">別のアクション</a></li>
<li><a href="#">ここには他にも何か</a></li>
<li class="divider"></li>
<li><a href="#">分離されたリンク</a></li>
</ul>
</div>

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

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


コードをコピー
コードは次のとおりです。

<div class="btn-group">
<button type="button" class="btn btn-danger">アクション</button>
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">ドロップダウンを切り替える</span>
</ボタン>
<ul class="dropdown-menu" role="menu">
<li><a href="#">アクション</a></li>
<li><a href="#">別のアクション</a></li>
<li><a href="#">ここには他にも何か</a></li>
<li class="divider"></li>
<li><a href="#">分離されたリンク</a></li>
</ul>
</div>
</div>


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

サイズ

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


コードをコピー
コードは次のとおりです。

<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> 大きいボタン <span class="caret"></span>
</ボタン>
<ul class="dropdown-menu"> ... </ul>
</div>
<!-- 小さなボタン グループ -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> 小さいボタン <span class="caret"></span>
</ボタン>
<ul class="dropdown-menu"> ... </ul>
</div>
<!-- 極小ボタン グループ -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> 極小ボタン <span class="caret"></span>
</ボタン>
<ul class="dropdown-menu"> ... </ul>
</div>

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

ポップアップメニュー

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


コードをコピー
コードは次のとおりです。

<div class="btn-group ドロップアップ">
<button type="button" class="btn btn-default">ドロップアップ</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">ドロップダウンを切り替える</span>
</ボタン>
<ul class="ドロップダウンメニュー">
<!-- ドロップダウン メニュー リンク -->
</ul>
</div>

要約する

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

<<:  CSSは複数の要素をボックスの両端に揃える効果を実現します

>>:  CentOS 7.6 仮想ネットワーク カードのバッチ追加、変更、削除操作の紹介

推薦する

React の国際化 react-intl の使用

React で国際化を実現するにはどうすればよいでしょうか? react-intlプラグインは、Re...

Vue.$set の失敗の落とし穴の発見と解決

偶然、プロジェクト内でVue.$setが無効であることがわかりましたデータ フィルタリングを追加する...

ウェブサイトの再設計はどの家族にとっても難しい作業です

<br />どの家庭にもそれぞれの問題があり、改訂はどの IT 企業にとっても問題の 1...

JavaScript の構造化代入の一般的なシナリオと例 5 つ

目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...

JSはユーザー登録インターフェース機能を実装します

この記事の例では、ユーザー登録インターフェース機能を実装するためのJSの具体的なコードを参考までに共...

MySql 学習ノートにおけるトランザクション分離レベルの詳細な説明

背景トランザクションについて話すとき、誰もがそれに精通している必要があります。MySQL データベー...

CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...

MySQL 8.0.12 のインストールと設定方法のグラフィック チュートリアル (Windows10)

この記事は、参考のためにMySQL 8.0.12のインストールグラフィックチュートリアルを記録してい...

Vue フロントエンド開発補助機能状態管理詳細例

目次マップ状態マップゲッターマップミューテーションマップアクション例まとめマップ状態コンポーネントが...

クリックナンバーゲームを実装するネイティブJS

参考までに、クリックナンバーゲームをネイティブJSで実装しました。具体的な内容は以下のとおりです。最...

MySQL Strict Modeの知識ポイントの詳細な説明

I. 厳密モードの説明MySQL 5.0 以降の厳密モード (STRICT_TRANS_TABLES...

時間に基づいて日付をクエリするためのMySQL最適化テクニック

たとえば、昨日新規登録されたユーザーを照会するには、次の 2 つの書き方があります。 説明する ch...

Docker Docker の保存場所を変更する コンテナイメージのサイズ制限を変更する操作

これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...

CSS フロートプロパティ図 フロートプロパティの詳細

CSS の float プロパティを正しく使用することは、カバーすべき内容が多く、ブラウザの互換性の...