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">