Bootstrap a-t-il un menu déroulant ?

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>

Ré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"

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

1. É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">

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