Bootstrap - Pulsanti
Questo capitolo copre l'età d'uso del pulsante Bootstrap con esempi. Tutto ciò a cui viene assegnata una classe.btnerediterà l'aspetto predefinito di un pulsante grigio con angoli arrotondati. Tuttavia, Bootstrap fornisce alcune opzioni per i pulsanti di stile, che sono riassunte nella seguente tabella:
| Sr.No. | Classe e descrizione |
|---|---|
| 1 | btn Pulsante predefinito / standard. |
| 2 | btn-primary Fornisce un peso visivo aggiuntivo e identifica l'azione principale in una serie di pulsanti. |
| 3 | btn-success Indica un'azione riuscita o positiva. |
| 4 | btn-info Pulsante contestuale per messaggi di avviso informativi. |
| 5 | btn-warning Indica che è necessario prestare attenzione con questa azione. |
| 6 | btn-danger Indica un'azione pericolosa o potenzialmente negativa. |
| 7 | btn-link Riduci l'enfasi a un pulsante facendolo sembrare un collegamento mantenendo il comportamento del pulsante. |
L'esempio seguente mostra tutte le classi di pulsanti precedenti:
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>Dimensione pulsante
La tabella seguente riassume le classi utilizzate per ottenere pulsanti di varie dimensioni:
| Sr.No. | Classe e descrizione |
|---|---|
| 1 | .btn-lg Questo aumenta la dimensione del pulsante. |
| 2 | .btn-sm Ciò riduce le dimensioni del pulsante. |
| 3 | .btn-xs Questo rende la dimensione del pulsante molto piccola. |
| 4 | .btn-block Questo crea pulsanti a livello di blocco, quelli che coprono l'intera larghezza di un genitore. |
Il seguente esempio lo dimostra:
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Large Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg">
Large button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary">
Default size Primary button
</button>
<button type = "button" class = "btn btn-default">
Default size button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-sm">
Small Primary button
</button>
<button type = "button" class = "btn btn-default btn-sm">
Small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-xs">
Extra small Primary button
</button>
<button type = "button" class = "btn btn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg btn-block">
Block level button
</button>
</p>Stato del pulsante
Bootstrap fornisce classi che consentono di modificare lo stato dei pulsanti come attivi, disabilitati ecc., Ognuna delle quali viene discussa nelle sezioni seguenti.
Stato attivo
I pulsanti appariranno premuti (con uno sfondo più scuro, un bordo più scuro e un'ombra all'interno) quando attivi. La tabella seguente riepiloga le classi utilizzate per rendere attivi gli elementi pulsante e gli elementi di ancoraggio:
| Elemento | Classe |
|---|---|
| Elemento pulsante | Uso .active classe per mostrare che è attivato. |
| Elemento di ancoraggio | Uso .active class a <a> pulsanti per mostrare che è attivato. |
Il seguente esempio lo dimostra:
<p>
<button type = "button" class = "btn btn-default btn-lg ">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg active">
Active Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg active">
Active Primary button
</button>
</p>Stato disabilitato
Quando disabiliti un pulsante, il colore si sbiadirà del 50% e perderà il gradiente.
La tabella seguente riepiloga le classi utilizzate per disabilitare l'elemento pulsante e l'elemento di ancoraggio:
| Elemento | Classe |
|---|---|
| Elemento pulsante | Aggiungi il disabled attributo ai pulsanti <button>. |
| Elemento di ancoraggio | Aggiungi il disabled class ai pulsanti <a>. Note- Questa classe cambierà solo l'aspetto di <a>, non la sua funzionalità. È necessario utilizzare JavaScript personalizzato per disabilitare i collegamenti qui. |
Il seguente esempio lo dimostra:
<p>
<button type = "button" class = "btn btn-default btn-lg">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
Disabled Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
Disabled Primary button
</button>
</p>
<p>
<a href = "#" class = "btn btn-default btn-lg" role = "button">
Link
</a>
<a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
Disabled Link
</a>
</p>
<p>
<a href = "#" class = "btn btn-primary btn-lg" role = "button">
Primary link
</a>
<a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
Disabled Primary link
</a>
</p>Tag dei pulsanti
Puoi usare classi di pulsanti con l'elemento <a>, <button> o <input>. Ma si consiglia di utilizzarlo con gli elementi <button> principalmente per evitare problemi di incoerenza tra browser.
Il seguente esempio lo dimostra:
<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">