Stili Button
Bootstrap fornisce sette stili di pulsanti:
Per conseguire gli stili di pulsanti sopra, Bootstrap ha le seguenti classi:
-
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
L'esempio seguente mostra il codice per i diversi stili di pulsanti:
Esempio
<button type="button" class="btn btn-default">Default</button>
<button
type="button" class="btn btn-primary">Primary</button>
<button
type="button" class="btn btn-success">Success</button>
<button
type="button" class="btn btn-info">Info</button>
<button type="button"
class="btn btn-warning">Warning</button>
<button type="button" class="btn
btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button> Prova tu stesso " Le classi dei pulsanti possono essere utilizzati su un <a> , <button> , o <input> elemento:
Esempio
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input
type="submit" class="btn btn-info" value="Submit Button"> Prova tu stesso " Perché abbiamo messo un # nella href attributi del collegamento?
Dal momento che non abbiamo qualsiasi pagina, per collegarlo a, e noi non vogliamo ottenere un "404" messaggio, mettere # come il collegamento. Nella vita reale dovrebbe essere, naturalmente, un vero e proprio URL alla pagina "Ricerca".
Misure Button
Bootstrap fornisce quattro dimensioni dei pulsanti:
Le classi che definiscono le diverse dimensioni sono:
-
.btn-lg -
.btn-md -
.btn-sm -
.btn-xs
L'esempio seguente mostra il codice per le diverse dimensioni dei pulsanti:
Esempio
<button
type="button" class="btn btn-primary btn-lg">Large</button>
<button
type="button" class="btn btn-primary btn-md">Medium</button>
<button
type="button" class="btn btn-primary btn-sm">Small</button>
<button
type="button" class="btn btn-primary btn-xs">XSmall</button>
Prova tu stesso " Pulsanti a livello di blocco
Un pulsante a livello di blocco si estende per l'intera larghezza dell'elemento genitore.
Aggiungi classe .btn-block per creare un pulsante a livello di blocco:
/ Pulsanti disabili attivi
Un pulsante può essere impostato su un uno stato disattivato (cliccabile) attiva (appare premuto) oppure:
La classe .active rende un pulsante appare premuto, e la classe .disabled rende un pulsante cliccabile:
Esempio
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button> Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»
Completa Pulsante Bootstrap di riferimento
Per un riferimento completo di tutte le classi dei pulsanti, vai alla nostra completa Bootstrap pulsante di riferimento .