bootstrap a un menu déroulant ; le menu des boutons peut non seulement être déroulant, mais également affiché. Vous devez modifier le menu déroulant par défaut en un menu déroulant. Il vous suffit d'ajouter ".dropup". l'élément parent pour déclencher le menu déroulant au-dessus de l'élément. La syntaxe est "
".L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 5, ordinateur DELL G3
bootstrap a un menu déroulant
Déclenchez le menu déroulant au-dessus de l'élément en ajoutant .dropup à l'élément parent.
Le menu des boutons peut non seulement être déroulé vers le bas, mais également vers le haut. Pour changer la liste déroulante par défaut en pull-up, ajoutez simplement une classe .dropup au conteneur .btn-group. Par exemple :
<!-- Default dropup button --> <div class="btn-group dropup"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropup </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> </div> </div> <!-- Split dropup button --> <div class="btn-group dropup"> <button type="button" class="btn btn-secondary"> Split dropup </button> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <!-- Dropdown menu links --> </div> </div>Copier après la connexionRésultat de sortie :
Développer les connaissances
Tout d'abord, il faut comprendre : le menu déroulant est composé de : boutons, icônes déroulantes et listes non ordonnées.
Les déclencheurs de menu déroulant et les menus déroulants sont inclus dans .dropdown.
Dans la balise bouton, les attributs utilisés sont
class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"Copier après la connexionDans la balise span, les valeurs d'attribut utilisées sont
à gauche et à droite, vous pouvez utiliser le menu déroulant à droite pour les aligner à droite et utiliser le menu déroulant à gauche pour les aligner à gauche.
Liste ordonnée
Éléments
. Les attributs OL couramment utilisés incluent Type : spécifiez le type d'étiquette utilisé dans les listes.
- Élément
. Les étiquettes L & lt; li & gt; peuvent être utilisées dans des listes ordonnées (& lt; ol & gt;) et des listes non en série (& lt; ul & gt;). Le bouton 下 Line fait tomber le menu.
Plus
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Copier après la connexionRecommandations associées :
tutoriel bootstrap
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!