Eine eingehende Analyse der Dropdown-Menükomponente in Bootstrap

Verwandte Empfehlungen: „Bootstrap-Tutorial“

Die Dropdown-Menükomponente im Bootstrap-Framework ist eine unabhängige Komponente:

weniger. Der entsprechende Quellcode Datei ist: Die Quellcodedatei, die dropdowns.less

sass entspricht, ist: _dropdowns.scss

Wenn Sie das von Bootstrap erstellte Dropdown-Menü verwenden, müssen Sie die vom Bootstrap-Framework bereitgestellte Datei bootstrap.js aufrufen . Für die unkompilierte Version finden Sie unter js eine Datei mit dem Namen dropdown.js, die Sie auch aufrufen können. Sie können auch die komprimierte Datei bootstrap.min.js aufrufen

Beispiel von der offiziellen Website:

<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>

Detaillierte Erklärung:

1. Verwenden Sie einen Container mit dem Namen „dropdown“, um das gesamte Dropdown-Menüelement einzuschließen.

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

2 Menü und definieren Sie die Klassennamen-Dropdown-Umschalt-Attribute und die benutzerdefinierten Daten-Umschaltattribute. Der Wert muss mit dem äußersten Container-Klassennamen übereinstimmen -menu

data-toggle=“dropdown”

im Bootstrap Die Dropdown-Menüelemente werden standardmäßig ausgeblendet: keine

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

Wenn der Benutzer auf das übergeordnete Menü klickt, wird das Dropdown-Menü angezeigt Auch hier bleibt das Dropdown-Menü weiterhin ausgeblendet Das heißt, p.dropdown öffnet standardmäßig nicht den Klassennamen. Wenn der Benutzer zum ersten Mal darauf klickt, wird der Klassenname hinzugefügt Der Name im p.dropdown-Container wird entfernt. piderl zu diesem li, um die Funktion des Hinzufügens von Dropdown-Trennzeichen zu realisieren

.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); }

Menütitel

Um diese Gruppe schöner zu machen Natürlich können Sie jeder Gruppe auch einen Kopftitel hinzufügen.

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

css-Stil:

.dropdown-menu .divider {

  height: 1px;

  margin: 9px 0;

  overflow: hidden;

  background-color: #e5e5e5; 
}

Das Dropdown-Menü im Bootstrap-Framework ist standardmäßig linksbündig. Wenn Sie möchten, dass das Dropdown-Menü relativ zum übergeordneten Container rechtsbündig ist, können Sie eine Klasse .dropdown hinzufügen -menu-right im Dropdown-Menü. Hinweis: Ab Version v3.1.0 wird die Verwendung der .pull-right-Klasse für Dropdown-Menüs nicht mehr empfohlen

<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>

.dropdown-header {

  display: block;

  padding: 3px 20px;

  font-size: 12px;

  line-height: 1.42857143;

  color: #999;
 }

Menüelementstatus

Der Standardstatus Das Dropdown-Menü enthält den Suspendierungsstatus: Hover und den Fokusstatus: Focus Menüpunkt

<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>

CSS:

.dropdown-menu-right {

  right: 0;

  left: auto;
   }

.dropdown{
float: left; 
}

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse der Dropdown-Menükomponente in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!