Bootstrap 4 - Dropdown
Descrizione
I menu a discesa sono menu contestuali attivabili per visualizzare i collegamenti in un formato elenco.
Per utilizzare il menu a discesa, racchiudi il menu a discesa all'interno della classe .dropdown . L'esempio seguente mostra un menu a discesa di base:
Esempio
<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>Produrrà il seguente risultato:
Produzione
Menu a discesa con pulsanti divisi
È possibile creare un elenco a discesa del pulsante di divisione utilizzando la classe .dropdown-toggle-split , che fornisce spazio attorno al cursore a discesa e al pulsante.
Il seguente esempio lo dimostra:
Esempio
<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>Produrrà il seguente risultato:
Produzione
Dimensioni elenco a discesa e pulsanti di divisione
I pulsanti a discesa possono essere visualizzati in dimensioni grandi e piccole utilizzando le classi btn-lg e btn-sm , inclusi i pulsanti a discesa divisi.
Esempio
<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>Produrrà il seguente risultato:
Produzione
Indicazioni a discesa
Puoi espandere il menu a discesa verso l'alto utilizzando la classe .dropup e anche posizionare il menu a discesa sul lato destro e sinistro utilizzando le classi .dropright o .dropleft . L'esempio seguente mostra le direzioni del menu a discesa:
Esempio
<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>Produrrà il seguente risultato:
Produzione
Intestazioni, divisori e testo
Usa la classe .dropdown-header per aggiungere intestazioni all'interno del menu a discesa, la classe .dropdown-divider aggiunge un divisore al menu a discesa con un bordo orizzontale sottile e la classe .dropdown-item-text viene utilizzata per posizionare il testo all'interno di un menu a discesa.
L'esempio seguente mostra la creazione di intestazioni, divisori e testo utilizzando le classi precedenti:
Esempio
<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>Produrrà il seguente risultato:
Produzione
Elemento attivo e disabilitato
Puoi rendere gli elementi come attivi aggiungendo la classe .active agli elementi nel menu a discesa e utilizzare la classe .disabled per disabilitare l'elemento nel menu a discesa.
L'esempio seguente mostra l'elemento attivo e disattivato nel menu a discesa:
Esempio
<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>Produrrà il seguente risultato: