Bootstrap 4 - Liste déroulante
La description
Les menus déroulants sont des menus contextuels basculants pour afficher les liens dans un format de liste.
Pour utiliser le menu déroulant, enveloppez simplement le menu déroulant dans la classe .dropdown . L'exemple suivant montre un menu déroulant de base -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Dropdown</h2>
<div class = "row">
<div class = "dropdown">
<button class = "btn btn-info dropdown-toggle" type = "button"
id = "dropdownMenuButton" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">Dropdown button</button>
<div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Liste déroulante avec boutons séparés
Vous pouvez créer une liste déroulante de bouton divisé en utilisant la classe .dropdown-toggle-split , qui fournit de l'espace autour du curseur et du bouton de la liste déroulante.
L'exemple suivant illustre ceci -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Dropdown with Split Buttons</h2>
<div class = "row">
<div class = "btn-group">
<button type = "button" class = "btn btn-primary">Primary</button>
<button type = "button" class = "btn btn-primary
dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-secondary">Secondary</button>
<button type = "button" class = "btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<div class = "btn-group">
<button type =" button" class = "btn btn-success">Success</button>
<button type = "button" class = "btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-info">Info</button>
<button type = "button" class = "btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-warning">Warning</button>
<button type = "button" class = "btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-danger">Danger</button>
<button type = "button" class = "btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle = "dropdown">
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Tailles de liste déroulante et boutons de division
Les boutons déroulants peuvent être affichés en petites et grandes tailles en utilisant les classes btn-lg et btn-sm , y compris les boutons déroulants fractionnés.
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Dropdown Sizes and Split Buttons</h2>
<div class = "btn-group">
<button class = "btn btn-info btn-lg dropdown-toggle" type = "button"
data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
Large button
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href =" #">Contact Us</a>
</div>
</div>
<div class = "btn-group">
<button class = "btn btn-info btn-lg" type = "button">
Large split button
</button>
<button type = "button" class = "btn btn-lg btn-info dropdown-toggle dropdown-toggle-split"
data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
<span class = "sr-only">Toggle Dropdown</span>
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<br>
<br>
<div class = "btn-group">
<button class = "btn btn-info btn-sm dropdown-toggle" type = "button"
data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
Small button
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<div class = "btn-group">
<button class = "btn btn-info btn-sm" type = "button">
Small split button
</button>
<button type = "button" class = "btn btn-sm btn-info dropdown-toggle dropdown-toggle-split"
data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
<span class = "sr-only">Toggle Dropdown</span>
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Directions déroulantes
Vous pouvez développer le menu déroulant vers le haut en utilisant la classe .dropup et également placer le menu déroulant à droite et à gauche en utilisant les classes .dropright ou .dropleft . L'exemple suivant montre les directions du menu déroulant -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<br>
<br>
<h2>Dropdown Directions</h2>
<br>
<br>
<div class = "row">
<div class = "btn-group dropright">
<button type = "button" class = "btn btn-info dropdown-toggle"
data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
Dropright
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<div class = "btn-group dropup">
<button type = "button" class = "btn btn-info dropdown-toggle"
data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
Dropup
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<div class = "btn-group dropleft">
<button type = "button" class = "btn btn-info dropdown-toggle"
data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
Dropleft
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
En-têtes, séparateurs et texte
Utilisez la classe .dropdown-header pour ajouter des en-têtes dans le menu déroulant, la classe .dropdown-divider ajoute un diviseur au menu déroulant avec une fine bordure horizontale et la classe .dropdown-item-text est utilisée pour placer du texte dans un menu déroulant.
L'exemple suivant montre la création d'en-têtes, de séparateurs et de texte à l'aide des classes ci-dessus -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Headers</h2>
<div class = "btn-group dropright">
<button type = "button" class = "btn btn-info dropdown-toggle"
data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
Headers Example
</button>
<div class = "dropdown-menu p-4 text-muted">
<h6 class = "dropdown-header">This is Header</h6>
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<br>
<br>
<h2>Dividers</h2>
<div class = "btn-group dropright">
<button type = "button" class = "btn btn-info dropdown-toggle"
data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
Dividers Example
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<div class = "dropdown-divider"></div>
<a class = "dropdown-item" href = "#">Contact Us</a>
</div>
</div>
<br>
<br>
<h2>Text</h2>
<div class = "dropdown">
<button type = "button" class = "btn btn-info dropdown-toggle" data-toggle = "dropdown">
Dropdown button
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item" href = "#">About Us</a>
<a class = "dropdown-item-text" href = "#">This is Text Link</a>
<span class = "dropdown-item-text" href = "#">Thi is just Text</span>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Élément actif et désactivé
Vous pouvez rendre les éléments actifs en ajoutant une classe .active aux éléments dans le menu déroulant et utiliser la classe .disabled pour désactiver l'élément dans le menu déroulant.
L'exemple suivant montre l'élément actif et désactivé dans le menu déroulant -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Active and Disabled item</h2>
<div class = "dropdown">
<button type = "button" class = "btn btn-info dropdown-toggle"
data-toggle = "dropdown">
Dropdown button
</button>
<div class = "dropdown-menu">
<a class = "dropdown-item" href = "#">Home</a>
<a class = "dropdown-item active" href = "#">About Us - Active Item</a>
<a class = "dropdown-item disabled" href = "#">Contct Us - Disabled Item</a>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -