Maison > interface Web > Questions et réponses frontales > Bootstrap a-t-il un menu déroulant ?

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

WBOY
Libérer: 2022-08-22 16:05:54
original
1488 Les gens l'ont consulté

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 "

".

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

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 connexion

Résultat de sortie :

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

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 connexion

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">
      Copier après la connexion

      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!

É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