Bootstrap のドロップダウン メニュー コンポーネントの詳細な分析

関連する推奨事項: 「ブートストラップ チュートリアル 」

ブートストラップ フレームワークのドロップダウン メニュー コンポーネントは独立したコンポーネントです。別のバージョンに変更すると、対応するファイル:

less 対応するソース コード ファイル:dropdowns.less

sass 対応するソース コードファイル: _dropdowns. scss

ブートストラップによって作成されたドロップダウン メニューを使用する場合は、ブートストラップ フレームワークによって提供される bootstrap.js ファイルを呼び出す必要があります。コンパイルされていないバージョンの場合は、js の下に Dropdown.js という名前のファイルがあり、このファイルを呼び出すこともできます。圧縮ファイル bootstrap.min.js

ブートストラップ コンポーネントのインタラクティブな効果はすべて、jQuery ライブラリによって記述されたプラグインに依存しているため、ブートストラップを使用する前に確認する必要があります。 .min.js まずはjQuery.min.jsを読み込みます

公式サイトの例:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

下拉菜单

<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <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>

詳しい説明:

1.ドロップダウンを使用する コンテナーはドロップダウン メニュー要素

<div class="dropdown"></div>

2 全体をラップし、 ボタンを親メニューとして使用し、クラス名の Dropdown-toggle 属性とカスタム data-toggle 属性を定義します。値は最も外側のコンテナ クラスと同じである必要があります。名前は一貫しています

data-toggle=“dropdown”

3。ドロップダウン メニュー項目は ul リストを使用し、dropdown-menu

<ul class="dropdown-menu"></ul>

という名前のクラスを定義します。ブートストラップのドロップダウン メニュー項目はデフォルトで非表示になっています。ドロップダウン メニュー 表示設定: 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 を介して親コンテナー p.dropdown に open を追加または開き、ドロップダウン メニューの表示を制御します。または非表示、つまり、デフォルトでは p.dropdown にはクラス名がありません。 open。ユーザーが初めてクリックすると、p.dropdown はクラス名 open を追加します。ユーザーが再度クリックすると、p.dropdown コンテナ内のクラス名は Removed

.open > .dropdown-menu {
display: block; 
}

Drop になります。 -down Separator

ドロップダウン メニューに 2 つのグループがあると仮定すると、グループ間に空の

を追加し、この li にクラス名 .piderl を追加して、ドロップダウン区切り文字を追加する機能

.dropdown-menu .divider {

  height: 1px;

  margin: 9px 0;

  overflow: hidden;

  background-color: #e5e5e5; 
}

メニュー タイトル

このグループ化をより明確にするために、次のことができます。各グループにヘッダー タイトルも追加します。

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="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" class="divider"></li> <li role="presentation" class="dropdown-header">第二部分菜单头部</li>

…

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

css スタイル:

.dropdown-header {

  display: block;

  padding: 3px 20px;

  font-size: 12px;

  line-height: 1.42857143;

  color: #999;
 }

ブートストラップ フレームワークのドロップダウン メニューはデフォルトで左揃えになっています。ドロップダウン メニューを親コンテナに対して右揃えにしたい場合は、では、dropdown-menu.dropdown -menu-right にクラスを追加できます。v3.1.0 以降、ドロップダウン メニューに .pull-right クラスを使用することは推奨されなくなりました。

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

  下拉菜单
  
<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">

   …
  
</ul> </div>

.dropdown-menu-right {

  right: 0;

  left: auto;
   }

.dropdown{
float: left; 
}

メニュー項目のステータス

ドロップダウン メニューデフォルトの状態には、ホバー状態: ホバーおよびフォーカス状態: focus

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

  color: #262626;

  text-decoration: none;

  background-color: #f5f5f5; }

ドロップダウン メニューには、現在の状態とこれら 2 つの状態を使用するには、対応するクラス名を対応するメニュー項目に追加するだけです

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

  下拉菜单
  
<span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

    ….
    
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

CSS:

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {

  color
: #fff;

  text-decoration
: none;

  background-color
: #428bca;

  outline
: 0; }

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus 
{
  color: #999; 
 }

.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus 
{

  text-decoration: none;

  cursor: not-allowed;

  background-color: transparent;

  background-Bootstrap のドロップダウン メニュー コンポーネントの詳細な分析: none;

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
}

プログラミング関連の知識の詳細については、次を参照してください。 プログラミングビデオ! ！

以上がBootstrap のドロップダウン メニュー コンポーネントの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。