Bootstrap 4 - Pulsanti
Descrizione
Bootstrap fornisce un pulsante cliccabile per inserire contenuti come testo e immagini. È possibile includere il testo in pulsante utilizzando il tag <input>.
Puoi creare un pulsante usando la classe .btn seguita dallo stile desiderato (es. Btn-success). Bootstrap fornisce alcune opzioni per i pulsanti di stile, che sono elencate di seguito:
btn-primary
btn-secondary
btn-success
btn-danger
btn-warning
btn-info
btn-light
btn-dark
btn-link
L'esempio seguente mostra tutte le classi di pulsanti 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>Button Styles</h2>
<button type = "button" class = "btn btn-primary">Primary Button</button>
<button type = "button" class = "btn btn-secondary">Secondary Button</button>
<button type = "button" class = "btn btn-success">Success Button</button>
<button type = "button" class = "btn btn-danger">Danger Button</button>
<button type = "button" class = "btn btn-warning">Warning Button</button>
<button type = "button" class = "btn btn-info">Info Button</button>
<button type = "button" class = "btn btn-light">Light Button</button><br><br>
<button type = "button" class = "btn btn-dark">Dark Button</button>
<button type = "button" class = "btn btn-link">Link Button</button>
</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
Pulsanti di contorno
Bootstrap 4 fornisce un colore semantico al contorno di un pulsante utilizzando la classe .btn-outline seguita dallo stile desiderato (ad esempio btn-outline-success).
L'esempio seguente mostra la visualizzazione dei pulsanti delineati:
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 Outlines</h2>
<button type = "button" class = "btn btn-outline-primary">Primary Button</button>
<button type = "button" class = "btn btn-outline-secondary">Secondary Button</button>
<button type = "button" class = "btn btn-outline-success">Success Button</button>
<button type = "button" class = "btn btn-outline-danger">Danger Button</button>
<button type = "button" class = "btn btn-outline-light">Light Button</button>
<button type = "button" class = "btn btn-outline-warning">Warning Button</button>
<button type = "button" class = "btn btn-outline-info">Info Button</button>
<button type = "button" class = "btn btn-outline-dark">Dark Button</button>
</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 dei pulsanti e pulsanti a livello di blocco
Bootstrap 4 fornisce pulsanti sempre più piccoli utilizzando le classi .btn-sm e .btn-lg e la classe .btn-block crea un pulsante a livello di blocco che si estende su tutta la larghezza di un genitore 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 Sizes</h2>
<button type = "button" class = "btn btn-info btn-sm">Small button</button>
<button type = "button" class = "btn btn-info">Default button</button>
<button type = "button" class = "btn btn-info btn-lg">Large button</button>
</br>
</br>
<h2>Block Level Button</h2>
<button type = "button" class = "btn btn-info btn-lg btn-block">
Block Level Info Button
</button>
</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
Stato attivo e disabilitato
Bootstrap consente di modificare lo stato dei pulsanti come attivi e disabilitati . I pulsanti appariranno premuti quando è in stato attivo e il pulsante perderà la sfumatura e sbiadirà il colore del 50%, quindi diciamo che è in stato disabilitato.
Usa la classe .active per mostrare il pulsante attivato e aggiungi l' attributo disabled per rendere il pulsante inattivo. L'esempio seguente mostra gli stati del pulsante:
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 State</h2>
<button type = "button" class = "btn btn-lg btn-primary" >
Active button
</button>
<br>
<br>
<h2>Disabled State</h2>
<button type = "button" class = "btn btn-primary btn-lg" disabled>
Disabled Button
</button>
</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
Attiva / disattiva caselle di controllo e pulsanti di opzione
Bootstrap 4 consente di applicare gli stili dei pulsanti ai pulsanti di opzione e alle caselle di controllo per utilizzare la funzionalità di commutazione. Puoi fornire la commutazione delle caselle di controllo e dei pulsanti di opzione all'interno di un elemento <label>, aggiungendo data-toggle = "buttons" all'interno dell'elemento .btn-group .
L'esempio seguente mostra la commutazione delle caselle di controllo e dei pulsanti di opzione:
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>Checkbox</h2>
<div class = "btn-group btn-group-toggle" data-toggle = "buttons">
<label class = "btn btn-info active">
<input type = "checkbox" name = "options" id = "option1" autocomplete = "off" checked>
HTML-5
</label>
<label class = "btn btn-info">
<input type = "checkbox" name = "options" id = "option2" autocomplete = "off">
CSS-3
</label>
<label class = "btn btn-info">
<input type = "checkbox" name = "options" id = "option3" autocomplete = "off">
Bootstrap-4
</label>
</div>
<br>
<br>
<h2>Radio Buttons</h2>
<div class = "btn-group btn-group-toggle" data-toggle = "buttons">
<label class = "btn btn-primary active">
<input type = "radio" name = "options" id = "option1" autocomplete = "off" checked>
HTML-5
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option2" autocomplete = "off">
CSS-3
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option3" autocomplete = "off">
Bootstrap-4
</label>
</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: