Maison > interface Web > Tutoriel d'amorçage > le corps du texte

Comment configurer la liste déroulante bootstrap

(*-*)浩
Libérer: 2019-07-11 11:20:23
original
3445 Les gens l'ont consulté

Ce chapitre se concentrera sur les menus déroulants Bootstrap. Les menus déroulants sont modifiables et sont des menus contextuels qui affichent des liens sous forme de liste. Ceci peut être réalisé en interagissant avec le plugin JavaScript Dropdown.

Comment configurer la liste déroulante bootstrap

Si vous devez utiliser le menu déroulant, il vous suffit d'ajouter le menu déroulant dans la classe .dropdown . (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

L'exemple suivant illustre un menu déroulant de base :

<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>
Copier après la connexion
Classe
类 
描述
.dropdown
指定下拉菜单,下拉菜单都包裹在 .dropdown 里 
.dropdown-menu
创建下拉菜单
.dropdown-menu-right
下拉菜单右对齐
.dropdown-header
下拉菜单中添加标题
.dropup
指定向上弹出的下拉菜单
.disabled 
下拉菜单中的禁用项
.divider
下拉菜单中的分割线
Description

.dropdown Spécifiez le menu déroulant, le menu déroulant est enveloppé dans .dropdown
.dropdown-menu Créer un menu déroulant
.dropdown-menu-right Menu déroulant aligné à droite
.dropdown-header Ajouter un titre au menu déroulant
. dropup Spécifiez le menu déroulant qui apparaît td>
.disabled Éléments désactivés dans le drop- menu bas
.divider Diviser la ligne dans le menu déroulant
Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal