Bottoni
Pulsanti di interfaccia per la tua applicazione.
Utilizzo
Per aggiungere un bottone personalizzato, è sufficiente utilizzare la classe .btn, associandola a classi di tipo .btn- per applicarne le varianti di stile, dimensione, ecc.
Le classi .btn sono state pensate per essere utilizzate con l’elemento <button>. Tuttavia, è possibile applicare lo stile per i bottoni anche ad elementi di tipo <a> o <input>, anche se alcuni browser potrebbero mostrare un rendering lievemente diverso.
In questi casi, non dimenticare di utilizzare in modo appropriato gli attributi role="button" per trasmettere il loro scopo alle tecnologie assistive.
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">Varianti di colore
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary outline</button>
<button type="button" class="btn btn-primary disabled">Primary disabled</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-outline-secondary">Secondary outline</button>
<button type="button" class="btn btn-secondary disabled">Secondary disabled</button>Note sullo stato disabilitato
- I tag
<a>non supportano l’attributodisabled, per cui è necessario usare la classe.disabledper farli apparire visivamente disabilitati, e in modo da disabilitarepointer-eventssu di essi sui browser che lo supportano. - I bottoni disabilitati includeranno l’attributo
aria-disabled="true"per indicare lo stato dell’elemento alle tecnologie assistive.
Trasmettere significato alle tecnologie assistive
L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe .sr-only.
Su sfondo scuro
<div class="btn-example ml-2 mt-2">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-primary">Primary outline</button>
<button type="button" class="btn btn-primary disabled">Primary disabled</button>
</div>
<div class="btn-example mt-2 ml-2 mb-2">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-outline-secondary">Secondary outline</button>
<button type="button" class="btn btn-secondary disabled">Secondary disabled</button>
</div>
</div>Varianti di dimensione
Per ottenere bottoni di dimensione più grande o più piccola, è sufficiente utilizzare le classi .btn-lg, .btn-sm e .btn-xs.
Aggiungendo la classe .btn-block si ottengono invece bottoni che prendono tutta l’ampiezza a loro disposizione, a seconda delle dimensioni del loro contenitore. In questo caso, anche i bordi non sono più arrotondati.
<button type="button" class="btn btn-primary btn-lg">Primary Large</button>
<button type="button" class="btn btn-secondary btn-lg">Secondary Large</button>
<button type="button" class="btn btn-primary btn-sm">Primary Small</button>
<button type="button" class="btn btn-secondary btn-sm">Secondary Small</button>
<button type="button" class="btn btn-primary btn-xs">Primary Mini</button>
<button type="button" class="btn btn-secondary btn-xs">Secondary Mini</button>
<div class="mt-2">
<button type="button" class="btn btn-primary btn-lg btn-block">Primary Block</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Secondary Block</button>
</div>