Livre d'introduction à Bootstrap (4) Menus, boutons et compétences de navigation_javascript

En d'autres termes, il suffit de garder ces 3 étapes à l'esprit pour rendre le menu déroulant efficace. La balise à l'intérieur du Mais malgré cela, je recommande personnellement que dans le processus d'utilisation réel, d'autres attributs du menu déroulant du framework Bootstrap soient également ajoutés, afin qu'il soit plus convivial et offre une expérience de haute qualité pour différents clients tels que les lecteurs d'écran. .

Alors, comment ça marche ?

En regardant le code source CSS, vous pouvez voir que .dropdown-menu a un display:none, donc les éléments de la liste déroulante sont masqués par défaut

Nous continuons à ouvrir les outils de développement Chrome (F12), et nous pouvons voir qu'à chaque fois que l'élément de liste est affiché, une classe .open est ajoutée après la classe .dropdown, il va sans dire que cette classe est définitivement au travail ; , nous pouvons continuer en revenant au code source CSS et voir :

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

Vous ne devriez pas avoir besoin de trop expliquer lorsque vous voyez cela. Lorsque la classe .open est ajoutée, le menu .dropdown s'affichera naturellement.

Décoration du menu déroulant

Diviseur déroulant

Le menu déroulant du framework Bootstrap fournit également un séparateur déroulant. En supposant que le menu déroulant comporte deux groupes, vous pouvez ajouter un

.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}

Titre du menu

La section précédente a expliqué que les menus déroulants peuvent être regroupés en ajoutant un séparateur. Afin de rendre ce regroupement plus évident, vous pouvez également ajouter un en-tête (titre) à chaque groupe :

Les deux points clés du code source sont : la couleur de la police du titre est : color : #777 et le remplissage : 3px 20px ;

Alignement

<ul class="dropdown-menu pull-right" >

.dropdown-menu.pull-right,.dropdown-menu-right {/*两个类自选*/ right: 0; left: auto;}

.dropdown{ float: left;}

<div class="btn-group"> <button type="button" class="btn btn-default">向左</button> <button type="button" class="btn btn-danger">中间</button> <button type="button" class="btn btn-default">向右</button></div>

<div class= "btn-toolbar"> <!-- …… --> <div class= "btn-group "> <button type="button" class="btn btn-default">向左</button> <button type="button" class="btn btn-danger">中间</button> <button type="button" class="btn btn-default">向右</button> </div> <div class= "btn-group btn-group-sm"> <button type="button" class="btn btn-default">向左</button> <button type="button" class="btn btn-danger">中间</button> <button type="button" class="btn btn-default">向右</button> </div> <!-- …… --></div>

<div class="btn-group"> <button class="btn btn-default" type="button">首页</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">产品展示<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> <button class="btn btn-default" type="button">关于</button></div>