Comment configurer le menu déroulant dans bootstrap4-Tutoriel d'amorçage-php.cn

"Comment

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>

Copier après la connexion

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

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>

Copier après la connexion

Titre dans le menu déroulant

　　.dropdown-header La classe

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

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

par le bouton :

<div class="dropup">

Copier après la connexion

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>

Copier après la connexion

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：

bootstrap

source：php.cn

Article précédent：Comment centrer l'image dans bootstrap Article suivant：Comment créer un div correctement dans bootstrap

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

Derniers articles par auteur