Bootstrap 3: come utilizzare i bottoni

Tra i diversi componenti di Bootstrap sicuramente dobbiamo citare i bottoni:

 

sono quelli che ci permettono di creare delle “call to action” efficaci per l’utente e semplici da realizzare.

I bottoni di Bootstrap hanno delle classi CSS ben precise, ci basta referenziare il nome del bottone per ottenerlo.

Qui sotto potete vedere come si presentano:

 <div class="col-lg-12">
<!-- Bottone standard -->
<button type="button" class="btn btn-default">Default</button>

<!-- Primary -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Success -->
<button type="button" class="btn btn-success">Success</button>

<!-- Info -->
<button type="button" class="btn btn-info">Info</button>

<!-- Warning -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Danger -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Link -->
<button type="button" class="btn btn-link">Link</button>
    </div>

 

 

Come potete vedere, ogni tipo di bottone ha le sue classi, una è uguale per tutti (.btn), le altre sono ben distinte a seconda del messaggio che vogliamo dare al visitatore.

 

Basta richiamare le classi predefinite di Bootstrap per ottenerli, se preferiamo un bottone più grande o più piccolo basta aggiungere la classe corrispondente (in questo caso large o small).

 

 

<div class="col-lg-12">
<!-- Bottone standard -->
<button type="button" class="btn btn-default btn-lg">Default</button>

<!-- Primary -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Success -->
<button type="button" class="btn btn-success btn-sm">Success</button>

<!-- Info -->
<button type="button" class="btn btn-info btn-xs">Info</button>

    </div>

 

 

Alla pagina ufficiale di Bootstrap ci sono diversi esempi che potranno soddisfare la vostra curiosità.

I bottoni di Bootstrap possono anche essere riuniti in gruppi, in questo modo:

 

<div class="col-lg-12">
      <div class="row">
        <div class="btn-group btn-group-lg" role="group" aria-label="...">
        <button type="button" class="btn btn-danger">Sinistra</button>
        <button type="button" class="btn btn-warning">Centro</button>
        <button type="button" class="btn btn-success">Destra</button>
      </div>
      </div>
    </div>

    <div class="col-lg-12">
      <div class="row">
        <div class="btn-group btn-group-sm" role="group" aria-label="...">
        <button type="button" class="btn btn-danger">Sinistra</button>
        <button type="button" class="btn btn-warning">Centro</button>
        <button type="button" class="btn btn-success">Destra</button>
      </div>
      </div>
    </div>

    <div class="col-lg-12">      
       <div class="row">
          <div class="btn-group btn-group-xs" role="group" aria-label="...">
        <button type="button" class="btn btn-danger">Sinistra</button>
        <button type="button" class="btn btn-warning">Centro</button>
        <button type="button" class="btn btn-success">Destra</button>
      </div>
       </div>
    </div>

 

 

Può essere un’idea per aggiungere i numeri delle pagine di un blog (paginazione):

 

 

<div class="row">
      <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
        <button type="button" class="btn btn-default">4</button>
      </div>
      <div class="btn-group" role="group" aria-label="Second group">
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
        <button type="button" class="btn btn-default">7</button>
      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-default">8</button>
      </div>
    </div>
    </div>

 

Vi rimando al video in cui trovate tutti gli esempi spiegati in questo articolo.

Buona visione 🙂

 

 

 

Link utili:

• Bootstrap – il sito ufficiale
• Start Bootstrap – Templates e temi gratuiti da scaricare
• Bootstrapzero – Collezione di templates gratuiti e a pagamento
• Bootstrap Hero – Inesauribile risorsa Bootstrap in cui troverete componenti, templates, link e riferimenti a tutto il materiale disponibile su questo framework

Precedenti tutorial:

Twitter Bootstrap: creare un template (prima parte)

 

 

Scarica i files del tutorial