English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
This chapter will explain how to use Bootstrap buttons through examples. Any element with the class .btn elements will inherit the default appearance of rounded gray buttons. However, Bootstrap provides some options to define button styles, as shown in the following table:
The following styles can be used on <a>, <button>, or <input> elements:
| Class | Descrizione | Esempio |
|---|---|---|
| .btn | Add basic styles to the button | Try it |
| .btn-default | Default/standard button | Try it |
| .btn-primary | Original button style (unoperated) | Try it |
| .btn-success | Indicates a successful action | Try it |
| .btn-info | This style can be used for buttons that pop up information | Try it |
| .btn-warning | Button indicating a button that requires careful operation | Try it |
| .btn-danger | Button operation indicating a dangerous action | Try it |
| .btn-link | Make the button look like a link (while retaining button behavior) | Try it |
| .btn-lg | Make a large button | Try it |
| .btn-sm | Make a small button | Try it |
| .btn-xs | Make a very small button | Try it |
| .btn-block | Block-level button (stretches to 100% of the parent element's width) | Try it |
| .active | Button clicked | Try it |
| .disabled | Disabled button | Try it |
Di seguito sono riportati gli esempi che illustrano tutte le classi di pulsante menzionate sopra:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap example - Button options</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <!-- Standard button --> <button type="button" class="btn btn-default">Pulsante predefinito</button> <!-- Fornisce un'effetto visivo aggiuntivo, identificando l'azione originale in un gruppo di pulsanti --> <button type="button" class="btn btn-primary">Pulsante originale</button> <!-- Rappresenta un'azione di successo o positiva --> <button type="button" class="btn btn-success">Pulsante successo</button> <!-- Pulsante contestuale per messaggi di avviso informativi --> <button type="button" class="btn btn-info">Pulsante informazioni</button> <!-- Rappresenta un'azione da adottare con cautela --> <button type="button" class="btn btn-warning">Pulsante avviso</button> <!-- Rappresenta un'azione pericolosa o negativa potenziale --> <button type="button" class="btn btn-danger">Pulsante pericolo</button> <!-- Non enfatizza che è un pulsante, sembra un link, ma mantiene le funzionalità del pulsante --> <button type="button" class="btn btn-link">Pulsante link</button> </body> </html>Prova a Vedere ‹/›
Il risultato è come segue:
La seguente tabella elenca le classi per ottenere pulsanti di diverse dimensioni:
| Classe | Descrizione |
|---|---|
| .btn-lg | Questo renderà il pulsante più grande. |
| .btn-sm | Questo renderà il pulsante più piccolo. |
| .btn-xs | Questo renderà il pulsante particolarmente piccolo. |
| .btn-block | Questo creerà un pulsante di blocco, che coprirà tutta la larghezza dell'elemento genitore. |
Di seguito sono riportati gli esempi che illustrano tutte le classi di pulsante menzionate sopra:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Dimensione dei pulsanti</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p> <button type="button" class="btn btn-primary btn-lg"> Bottone originale grande</button> <button type="button" class="btn btn-default btn-lg"> Bottone grande</button> </p> <p> <button type="button" class="btn btn-primary"> Bottone originale di dimensione standard</button> <button type="button" class="btn btn-default">Pulsante di dimensione predefinita</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Pulsante originale piccolo</button> <button type="button" class="btn btn-default btn-sm">Pulsante piccolo</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Pulsante originale particolarmente piccolo</button> <button type="button" class="btn btn-default btn-xs">Pulsante particolarmente piccolo</button> </p> <p> <button type="button" class="btn btn-primary btn-lg btn-block">Pulsante originale a blocco</button> <button type="button" class="btn btn-default btn-lg btn-block">Pulsante a blocco</button> </p> </body> </html>Prova a Vedere ‹/›
Il risultato è come segue:
Bootstrap offre class per vari stati dei pulsanti come attivazione e disabilitazione, che saranno spiegati in dettaglio di seguito.
Il pulsante assume l'aspetto di essere premuto quando attivato (sfondo scuro, bordo scuro, ombra).
La tabella elenca le class per attivare l'elemento pulsante e l'elemento collegamento:
| elemento | Classe |
|---|---|
| elemento pulsante | aggiungere .active class per visualizzare il pulsante come attivato. |
| elemento ancore | aggiungere .active class per visualizzare il pulsante come attivato. |
Ecco un esempio che dimostra questo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Stato di attivazione del pulsante</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p> <button type="button" class="btn btn-default btn-lg">Pulsante predefinito</button> <button type="button" class="btn btn-default btn-lg active">Pulsante attivato</button> </p> <p> <button type="button" class="btn btn-primary btn-lg"> pulsante originale</button> <button type="button" class="btn btn-primary btn-lg active">Pulsante originale attivato</button> </p> </body> </html>Prova a Vedere ‹/›
Il risultato è come segue:
Quando disabiliti un pulsante, il suo colore diventa più debole del 50% e perde la transizione.
La tabella elenca le class per disabilitare l'elemento pulsante e l'elemento collegamento:
| elemento | Classe |
|---|---|
| elemento pulsante | aggiungere disabled proprietà fino al pulsante <button>. |
| elemento ancore | aggiungere disabled class fino al pulsante <a>. |
Ecco un esempio che dimostra questo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - stato di disabilitazione del pulsante</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p> <button type="button" class="btn btn-default btn-lg"> pulsante predefinito</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled"> pulsante disabilitato</button> </p> <p> <button type="button" class="btn btn-primary btn-lg"> pulsante originale</button> <button type="button" class="btn btn-primary btn-lg" disabled="disabled"> pulsante originale disabilitato</button> </p> <p> <a href="#" class="btn btn-default btn-lg" role="button"> collegamento</a> <a href="#" class="btn btn-default btn-lg disabled" role="button"> collegamento disabilitato</a> </p> <p> <a href="#" class="btn btn-primary btn-lg" role="button"> collegamento originale</a> <a href="#" class="btn btn-primary btn-lg disabled" role="button"> collegamento originale disabilitato</a> </p> </body> </html>Prova a Vedere ‹/›
Il risultato è come segue:
Puoi utilizzare la classe pulsante sui tag <a>、<button> o <input>. Tuttavia, si consiglia di utilizzare la classe pulsante sul tag <button> per evitare problemi di incompatibilità tra i browser.
Ecco un esempio che dimostra questo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - etichetta pulsante</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <a class="btn btn-default" href="#" role="button"> collegamento</a> <button class="btn btn-default" type="submit"> pulsante</button> <input class="btn btn-default" type="button" value="Inserisci"> <input class="btn btn-default" type="submit" value="Invia"> </body> </html>Prova a Vedere ‹/›
Il risultato è come segue:
Creare un gruppo pulsanti utilizzando direttamente .btn-group all'interno di div:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap esempio - Plugin pulsante Button singolo</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Gruppo pulsanti</h2> <p>La classe .btn-group viene utilizzata per creare gruppi pulsanti:</p> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> </div> </body> </html>Prova a Vedere ‹/›
Controllare la dimensione del gruppo pulsanti utilizzando .btn-group-lg|sm|xs:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap esempio - Gruppo pulsanti</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Gruppo pulsanti Button - Impostare la dimensione dei pulsanti</h2> <p>Controllare la dimensione dei pulsanti nel gruppo pulsanti utilizzando la classe .btn-group-*.</p> <h2>Pulsanti grandi:</h2> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> <h2>Pulsanti di default:</h2> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> <h2>Pulsanti piccoli:</h2> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> <h2>Pulsanti super piccoli:</h2> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> </div> </body> </html>Prova a Vedere ‹/›
Se si desidera impostare pulsanti verticali, si può impostare tramite la classe .btn-group-vertical:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Pulsanti</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Gruppo di pulsanti verticali</h2> <p>Se si desidera impostare pulsanti verticali, si può impostare tramite la classe .btn-group-vertical:</p> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div> </div> </body> </html>Prova a Vedere ‹/›
Si può impostare un gruppo di pulsanti adattivo dimensioni utilizzando la classe .btn-group-justified.
Esempio seguente utilizza etichetta a per mostrare:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Pulsanti</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Gruppo di pulsanti adattativo</h2> <p>Si può impostare un gruppo di pulsanti adattivo dimensioni utilizzando la classe .btn-group-justified.</p> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">Apple</a> <a href="#" class="btn btn-primary">Samsung</a> <a href="#" class="btn btn-primary">Sony</a> </div> </div> </body> </html>Prova a Vedere ‹/›
Attenzione: Se si utilizza l'elemento <button>, è necessario avvolgere l'esterno con la classe .btn-group:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Pulsanti</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Gruppo di pulsanti adattativo</h2> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Samsung</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">Sony</button> </div> </div> </div> </body> </html>Prova a Vedere ‹/›
I pulsanti incorporati nel gruppo di pulsanti possono essere configurati con menu a discesa, come nell'esempio seguente:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Pulsanti</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Gruppo di pulsanti incorporati</h2> <p>Creazione menu a discesa con gruppo di pulsanti incorporati:</p> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-primary">Sony <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Tablet</a></li> <li><a href="#">Smartphone</a></li> </ul> </div> </div> </div> </body> </html>Prova a Vedere ‹/›
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Pulsanti</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Separazione pulsanti</h2> <div class="btn-group"> <button type="button" class="btn btn-primary">Sony</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Tablet</a></li> <li><a href="#">Smartphone</a></li> </ul> </div> </div> </body> </html>Prova a Vedere ‹/›