ホームページ >ウェブフロントエンド >htmlチュートリアル >Bootstrap ドロップダウン メニューの例の詳細な説明
Bootstrap ドロップダウン メニューの例の詳細な説明
- 零下一度オリジナル
- 2017-07-03 11:03:281456ブラウズ
前の言葉
Webページを操作するとき、コンテキストメニューや非表示/表示メニュー項目が必要になることがよくありますが、Bootstrapではデフォルトでリンクリストを表示するための切り替え可能なコンテキストメニューが提供されています。また、さまざまな対話状態でのメニュー表示は、JavaScript プラグインと併用する必要があります。この記事では、Bootstrapのドロップダウンメニューの使い方を詳しく紹介します
Bootstrapフレームワークのドロップダウンメニューを使用する場合、Bootstrapフレームワークが提供するbootstrap.jsファイルを呼び出す必要があります。もちろん、コンパイルされていないバージョンを使用している場合は、js フォルダーに「dropdown.js」という名前のファイルがあり、この js ファイルを呼び出すこともできます
Bootstrap のコンポーネント インタラクション エフェクトはすべて jQuery ライブラリに基づいて記述されているため、プラグインなので、効果を生み出すために bootstrap.js を使用する前に jquery.js をロードする必要があります
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11" rel="stylesheet"></head><body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></script></body></html>
基本的な使用法
Bootstrap フレームワークでドロップダウン メニュー コンポーネントを使用するときは、次のことを使用することが非常に重要です正しい構造が重要です。構造とクラス名が正しく使用されないと、コンポーネントが正常に使用できるかどうかに直接影響します
1.「dropdown」という名前のコンテナを使用して、ドロップダウン メニュー要素全体をラップします
<div class="dropdown"></div>
2. <ボタン>を使用します。ボタンは親メニューとして使用され、クラス名「dropdown-toggle」とカスタムの「data-toggle」属性を定義します。値は最も外側のメニューと一致する必要があります。コンテナクラス名
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
3. ドロップダウンメニュー項目はulリストを使用し、「dropdown-menu」という名前のクラスを定義します
<ul class="dropdown-menu" role="menu">
ActionAnother actionSomething else here
4. By set the .dropup class forドロップダウン メニューの親要素で、メニューをポップアップさせることができます (デフォルトでは下方向にポップアップします)
<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropup<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li> </ul></div>
原理分析
Bootstrap フレームワークのドロップダウン メニュー コンポーネント、ユーザーがクリックすると、「dropdown-menu」のデフォルト スタイルが「display:none」に設定されているため、そのドロップダウン メニュー項目はデフォルトで非表示になります。親メニュー項目をクリックすると、ドロップダウン メニューが表示されます。ユーザーが再度クリックすると、ドロップダウン メニューは引き続き非表示になります
.dropdown-menu {
position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/
top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
left: 0;
z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
display: none;/*默认隐藏下拉菜单项*/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #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, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}それでは、実装原理を分析してみましょう。これは、js テクノロジーを使用して、親コンテナー「div」.dropdown」を追加または削除します。クラス名「open」を使用して、ドロップダウン メニューの表示または非表示を制御します。つまり、デフォルトでは、「div.dropdown」にはクラス名「open」がありません。ユーザーが初めてクリックすると、「div.dropdown」にはクラス名「open」が追加されます。もう一度、 "div.dropdown" "コンテナ内のクラス名 "open" が再び削除されます
.open > .dropdown-menu {
display: block;
}
拡張使用法
[区切り文字]
Bootstrap フレームワークのドロップダウン メニューには、ドロップダウン メニューが用意されています。 down Separator を使用すると、ドロップダウン メニュー グループが 2 つあると仮定し、グループ間に空の
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}<li role="separator" class="divider"></li>
【メニュータイトル】
任意のドロップダウンメニューに一連のアクションを示すタイトルを追加できます
<li class="dropdown-header">Dropdown header</li>
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
}<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span> </button> <ul class="dropdown-menu" 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" class="divider"></li><li role="presentation" class="dropdown-header">第二部分菜单头部</li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul></div>
【配置】
ブートストラップフレーム中段と下段のプルメニュー デフォルトは左揃えです。ドロップダウンメニューを親コンテナに対して右揃えにしたい場合は、「dropdown-menu-right」クラスを追加します。 name を "dropdown-menu" に変更します
.dropdown-menu-right {
right: 0;
left: auto;
}
display: inline-block; margin-left: 60px;
<div class="dropdown" style="display: inline-block;margin-left: 60px;"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-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>
以上がBootstrap ドロップダウン メニューの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。