Bootstrap 4 - Gruppo di pulsanti
Descrizione
I gruppi di pulsanti consentono di impilare più pulsanti insieme su una singola riga.
Gruppo di pulsanti di base
È possibile creare il gruppo di pulsanti di base utilizzando la classe .btn-group all'interno dell'elemento <div> come mostrato nell'esempio seguente:
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>Button Group</h2>
<div class = "btn-group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
</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
Barra degli strumenti dei pulsanti
Puoi raggruppare insiemi di gruppi di pulsanti in una singola barra degli strumenti utilizzando la classe .btn-toolbar come mostrato nell'esempio seguente:
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>Button Toolbar</h2>
<div class = "btn-toolbar" role = "toolbar" aria-label = "Toolbar with button groups">
<div class = "btn-group mr-2" role = "group" aria-label = "First group">
<button type = "button" class =" btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
<button type = "button" class = "btn btn-info">Tennis</button>
</div>
<div class = "btn-group mr-2" role = "group" aria-label = "Second group">
<button type = "button" class = "btn btn-info">Basketball</button>
<button type = "button" class = "btn btn-info">Volleyball</button>
<button type = "button" class = "btn btn-info">Boxing</button>
</div>
<div class = "btn-group mr-2" role = "group" aria-label = "Third group">
<button type = "button" class = "btn btn-info">Archery</button>
<button type = "button" class = "btn btn-info">Badminton</button>
</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 del gruppo di pulsanti
Puoi controllare la dimensione del gruppo di pulsanti aggiungendo la classe .btn-group-sm o .btn-group-lg alla classe .button-group come mostrato nell'esempio seguente:
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>Button Group Sizes</h2>
<div class = "btn-group btn-group-lg" role = "group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
</div>
<br>
<br>
<div class = "btn-group" role = "group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
</div>
<br>
<br>
<div class = "btn-group btn-group-sm" role = "group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
</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
Gruppo di pulsanti verticali
È possibile visualizzare il gruppo di pulsanti verticalmente utilizzando la classe .btn-group-vertical come mostrato nell'esempio seguente:
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>Vertical Button Group</h2>
<div class = "btn-group-vertical" role = "group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
</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
Gruppo di pulsanti di annidamento
Puoi posizionare un gruppo .btn all'interno di un altro gruppo .btn , quando desideri visualizzare il menu a discesa all'interno di una serie di pulsanti.
L'esempio seguente mostra l'annidamento di gruppi di pulsanti:
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>Nesting Button Group</h2>
<div class = "btn-group" role = "group">
<button type = "button" class = "btn btn-info">Cricket</button>
<button type = "button" class = "btn btn-info">Football</button>
<button type = "button" class = "btn btn-info">Hockey</button>
<div class = "btn-group" role = "group">
<button id = "nestingbtngroup" type = "button" class = "btn btn-info
dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false">
Sports
</button>
<div class = "dropdown-menu" aria-labelledby = "nestingbtngroup">
<a class = "dropdown-item" href = "#">Cricket</a>
<a class = "dropdown-item" href = "#">Football</a>
<a class = "dropdown-item" href = "#">Hockey</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: