Pulsanti con Bootstrap

Le classi button sono utilizzabili con elementi come <a>, <button>, oppure  <input>. Nell’elemento <a>  è necessario specificare il ruolo che ha come pulsante con
role=”button”, ma facciamo subito un esempio pratico:

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

Con Bootstrap viene offerta la possibilità di creare agevolmente pulsanti colorati con la semplice aggiunta di uno stile predeterminato:

<!-- Standard button -->
<pre><button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Proviamo a creare un pulsante e utilizziamo le proprietà delle griglie per spostarlo all’interno del nostro <div>. Come prima cosa creaiamo il container e la riga in ciu far apparire il nostro pulsante:

<div class="container-fluid">
<div class="row"></div>
</div>

Fatto questo, aggiungiamo il pulsante DANGER:

<div class="container-fluid">
<div class="row">
<button type="button" class="btn btn-danger">Danger</button></div>
</div>

Con questi pulsanti non c’è bisogno di definire lo stile CSS in quanto contengono già valori specifici preimpostati nelle proprietà.
Il pulsante che appare sarà nell’angolo in alto a sinistra. Per spostarlo in altre posizioni possiamo utilizzare diversi metodi. Se ci interessa avere un pulsante al centro del esatto del nostro container, non dobbiamo far altro che assegnare alla classe row la proprietà text-align: center;

.row {
&nbsp; text-align: center;
}

Possiamo sfruttare le proprietà offset delle colonne, annidando il nostro pulsante all’interno di una classe column:

<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-sm-offset-6">
<button type="button" class="btn btn-danger">Pulsante</button></div>
</div>
</div>

Ma cosa succederebbe se avessimo più di un pulsante, e volessimo averli uno accanto all’altro?
Ancora una volta annidiamo i nostri pulsanti all’interno delle classi column. Per averli uno accanto all’altro però, i pulsanti dovranno essere non solo nella stessa riga, ma anche nella stessa colonna:

<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-primary">Primo pulsante</button>
<button type="button" class="btn btn-danger">Secondo Pulsante</button></div>
</div>
</div>

Possiamo sempre utilizzare la classe column per separare i pulsanti in più colonne con proprietà distinte:

<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button type="button" class="btn btn-primary">Primo pulsante</button></div>
<div class="col-sm-3">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button type="button" class="btn btn-success">Secondo Pulsante</button></div>
<div class="col-sm-3">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button type="button" class="btn btn-warning">Terzo Pulsante</button></div>
<div class="col-sm-3">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button type="button" class="btn btn-danger">Quarto Pulsante</button></div>
</div>
</div>

Proprietà dei pulsanti

Possiamo assegnare ai pulsanti alcune proprietà intrinseche come dimensione e stato attivo/disattivo.

<button class="btn btn-primary btn-lg" type="button">Pulsante grande</button>
<button class="btn btn-primary" type="button">Pulsante normale</button>
<button class="btn btn-primary btn-sm" type="button">Pulsante piccolo</button>
<button class="btn btn-primary btn-xs" type="button">Pulsante molto piccolo</button>

Sarebbe possibile fare in modo che il nostro pulsante abbia la stessa dimensione del contenitore con l’utilizzo di btn-block:

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

Per definire lo stato attivo/disattivo è necessario l’utilizzo della classe active. Lo stato active si può impostare di default su un pulsante, ma dovrà essere modificato programmaticamente.

HTML

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg">Button</button>

 Javascript/jQuery

$('.btn-primary').on('click', function() {
&nbsp; if ($(".btn-primary").hasClass("active")) {
&nbsp;&nbsp; $(".btn-default").removeClass("active");
&nbsp;&nbsp; $(".btn-primary").addClass("active");
&nbsp; });

$('.btn-default').on('click', function() {
&nbsp; if ($(".btn-default").hasClass("active")) {
&nbsp;&nbsp; $(".btn-primary").removeClass("active");
&nbsp;&nbsp; $(".btn-default").addClass("active");
&nbsp; });

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.