Comment configurer le menu déroulant dans bootstrap4

Menu déroulant Bootarp 4

Tutoriel recommandé : Manuel Bootstarp

Le menu déroulant est basculable et est un menu contextuel qui affiche les liens sous forme de liste. La classe

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div></div>

Interprétation du code

　　.dropdown  est utilisée pour spécifier un menu déroulant.

Nous pouvons utiliser un bouton ou un lien pour ouvrir le menu déroulant. Le bouton ou le lien doit ajouter les attributs .dropdown-toggle et data-toggle="dropdown". Ajoutez la classe

à l'élément

 .dropdown-menu dc6dce4a544fdca2df29d5ac0ea9906b pour configurer le menu déroulant réel, puis ajoutez la classe  .dropdown-item  aux options du menu déroulant.

Ligne de séparation dans le menu déroulant

　　.dropdown-divider 

　

.dropdown-divider est utilisé Créez un séparateur horizontal dans le menu déroulant :

<div class="dropdown-divider"></div>

Titre dans le menu déroulant

　　.dropdown-header  La classe

<p>　.dropdown-header <strong></strong></p> est utilisée pour ajouter des en-têtes dans les menus déroulants :

<div class="dropdown-header">Dropdown header 1</div>

　　.active dans les menus déroulants Éléments disponibles et désactivés La classe

.disabled

mettra en évidence les options du menu déroulant (ajouter un fond bleu).

Si vous souhaitez désactiver les options du menu déroulant, vous pouvez utiliser la classe .

<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>

Positionnement du menu déroulant.dropdown-menu.dropdown-menu-right

Si on veut que le menu déroulant soit aligné à droite, on peut ajouter la classe

sur l'élément. Ajoutez ensuite la classe .

<div class="dropdown-menu dropdown-menu-right">

Spécifiez un menu déroulant qui apparaît class="dropdown""dropup"

Si vous souhaitez que le menu déroulant apparaisse. Le menu apparaît, vous pouvez remplacer le de l'élément dc6dce4a544fdca2df29d5ac0ea9906b par le bouton :

<div class="dropup">

pour définir le menu déroulant

On peut ajouter un menu déroulant au bouton :

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div></div>

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!