Heim > Web-Frontend > Bootstrap-Tutorial > So richten Sie die Bootstrap-Dropdown-Liste ein

So richten Sie die Bootstrap-Dropdown-Liste ein

(*-*)浩
Freigeben: 2019-07-11 11:20:23
Original
3471 Leute haben es durchsucht

Dieses Kapitel konzentriert sich auf Bootstrap-Dropdown-Menüs. Dropdown-Menüs sind umschaltbar und sind Kontextmenüs, die Links in einem Listenformat anzeigen. Dies kann durch Interaktion mit dem Dropdown-JavaScript-Plugin erreicht werden.

So richten Sie die Bootstrap-Dropdown-Liste ein

Wenn Sie das Dropdown-Menü verwenden müssen, müssen Sie nur das Dropdown-Menü in der Klasse .dropdown hinzufügen. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Das folgende Beispiel zeigt ein einfaches Dropdown-Menü:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" 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="#">Java</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>
Nach dem Login kopieren
eingeschlossen Zeile im Dropdown-Menü teilen
Klasse
类 
描述
.dropdown
指定下拉菜单,下拉菜单都包裹在 .dropdown 里 
.dropdown-menu
创建下拉菜单
.dropdown-menu-right
下拉菜单右对齐
.dropdown-header
下拉菜单中添加标题
.dropup
指定向上弹出的下拉菜单
.disabled 
下拉菜单中的禁用项
.divider
下拉菜单中的分割线
Beschreibung

.dropdown Geben Sie das Dropdown-Menü an. Das Dropdown-Menü wird in .dropdown
.dropdown-menu Dropdown-Menü erstellen
.dropdown-menu-right Dropdown-Menü rechtsbündig
.dropdown-header Fügen Sie einen Titel zum Dropdown-Menü hinzu
. dropup Geben Sie das Dropdown-Menü an, das angezeigt wird td>
.disabled Deaktivierte Elemente im Dropdown-Menü menu
.divider
Weitere technische Artikel zu Bootstrap finden Sie hier Besuchen Sie die Spalte Bootstrap-Tutorial, um mehr zu erfahren!

Das obige ist der detaillierte Inhalt vonSo richten Sie die Bootstrap-Dropdown-Liste ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage