Elementi di Bootstrap

Indice dei contenuti

In questa guida potrai imparare a creare e configurare gli elementi più importanti in Bootstrap per realizzare le tue pagine web. Nello specifico, ti spiegheremo come realizzare e personalizzare elementi come: tabelle, pulsanti, immagini e altri oggetti utili, attraverso classi CSS specifiche e tag HTML.

Per creare pagine web con Bootstrap questa sezione del corso è molto importante da imparare, poiché aiuta a capire come definire gli elementi più utilizzati e comuni.

Come sempre, ricordiamo che per seguire le guide su Bootstrap è importante conoscere l’HTML e il CSS, in questo caso puoi sempre seguire i nostri corsi dedicati (clicca qui per saperne di più).

Inoltre, ricordati che per funzionare, Bootstrap ha bisogno dell’integrazione delle referenze CSS e JS, di cui abbiamo parlato nell’introduzione a Bootstrap.

Gli elementi più utilizzati in Bootstrap

I paragrafi che seguiranno, tratteranno in modo semplificato gli elementi più importati ed utilizzati in Bootstrap. Molti di questi avranno riferimenti al puro HTML, con aggiunta di classi CSS dedicate e pre-impostate dal Framework.

In dettaglio, spiegheremo come creare e impostare:

Tabelle;
Pulsanti;
Immagini;
Alerts;

Tabelle

Le tabelle in Bootstrap seguono la stessa sintassi del puro HTML, in aggiunta però esistono classi CSS accuratamente programmate, per modificarne il comportamento e lo stile.

Qui la lista delle classi:

.table – Definisce una tabella standard, va indicata sempre;
.table-striped – Crea una tabella con righe a colore alternato;
.table-bordered – Imposta una tabella con i bordi esterni (le altre classi non hanno bordi);
.table-sm– Tabella pi compatta, con righe più piccole in altezza (ex “.table-condensed“);
.table-hover – Aggiunge un un effetto “hover” alle righe della tabella, cioè al passaggio del cursore su di esse cambieranno colore.
.table-dark – Inverte i colori della tabella a tema “dark“.

Puoi anche indicare più di una classe CSS di queste in una sola tabella per unire i differenti effetti grafici.

Generalmente le tabelle create con il Framework possono essere impostate come “responsive” attraverso l’apposita classe “table-responsive“, che va indicata nel “div container“.

Vediamo in dettaglio queste classi nel codice HTML.

   <div class="container table-responsive">
        <table class=" table table-striped table-bordered table-hover ">
          <thead>
            <tr>
              <th>Colonna 1</th>
              <th>Colonna 2</th>      
              <th>Colonna 3</th>
              <th>Colonna 4</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>A</td>
              <td>B</td>
              <td>C</td>
              <td>D</td>
            </tr>
            <tr>
              <td>E</td>
              <td>F</td>
              <td>G</td>
              <td>H</td>
            </tr>
            <tr>
              <td>I</td>
              <td>L</td>
              <td>M</td>
              <td>N</td>
            </tr>
          </tbody>
        </table>
      </div>

Risultato:

esempio tabella bootstrap — Tabella Bootstrap con classi .table, .table-striped, .table-bordered, .table-responsive

Ad ogni riga della tabella puoi attribuire anche le classi CSS speciali .active, .info, .warning., .success e .danger (che abbiamo visto nell’articolo sulla tipografia di Bootstrap.

Pulsanti (buttons)

Bootstrap consente di personalizzare lo stile dei pulsanti, detti “buttons“, sempre attraverso determinate classi CSS già presenti nel foglio di stile principale.

Queste impostazioni non cambiano il comportamento dei pulsanti all’interno di una pagina o un form, ma ne modificano esclusivamente lo stile.

Le classi da imparare sono:

.btn
.btn-primary
.btn-secondary
.btn-info
.btn-success
.btn-warning
.btn-danger
.btn-light
.btn-dark

pulsanti bootstrap — Esempio di pulsanti

Queste classi servono per creare visivamente un pulsante, ma questo non significa che siano obbligatoriamente da assegnare al tag <button>, ma è possibile farlo anche con i tag <input> e <a>.

Outline buttons

Le classi “outline” per i pulsanti servono a creare elementi “button” con uno stile differente dallo standard, senza colore di sfondo (background) ma solo con il bordo esterno.

Ovviamente gli “outline buttons” vanno in sostituzione di quelli che abbiamo visto nella lista precedente.

Queste classi sono:

.btn-outline-primary
.btn-outline-secondary
.btn-outline-info
.btn-outline-success
.btn-outline-warning
.btn-outline-danger
.btn-outline-light
.btn-outline-dark

Button size

Come per molti altri elementi in Bootstrap, anche per i pulsanti è possibile definire la grandezza (o dimensioni) grazie all’ausilio di specifiche classi, in aggiunta anche a quelle che abbiamo visto fino ad ora.

Parliamo delle classi .btn-lg per pulsanti grandi e .btn-sm per pulsanti piccoli.

Un esempio per come usarli nel codice:

<button class="btn btn-primary btn-lg">Pulsante grande</button>
<button class="btn btn-secondary btn-sm">Pulsante piccolo</button>

pulsanti con dimensione differente in bootstrap

In aggiunta è possibile definire la larghezza di un pulsante ereditando quella dell’elemento contenitore con la classe .btn-block.

Immagini

In Bootstrap sono presenti differenti classi CSS per definire il comportamento delle immagini di una pagina web. Tramite queste classi è possibile impostare immagini (tag HTML <img>) con dimensioni responsive e ottimizzate, oppure creare gallerie di file media con layout a griglia ben definito.

Anche in questo caso, ci sono da imparare le classi dedicate alle immagini:

.img-fluid – Le immagini con questa classe avranno una larghezza massima disponibile in base a quella del contenitore, conferendo dimensioni responsive (width:100%; height:auto;);
.img-thumbnail – Aggiunge un bordo arrotondato di 1px all’immagine, donandogli un aspetto da thumbnail (miniatura);
.rounded – Serve ad arrotondare gli angoli dell’immagine;
.float-left – Allineamento a sinistra;
.float-right – Allineamento a destra;
.mx-auto – Utilizzato anche con altri ambiti, serve a centrare l’elemento rispetto al suo contenitore.

Alerts

Gli alerts sono avvisi o messaggi a comparsa nelle pagine web, che compaiono generalmente dopo l’interazione degli utenti con un elemento del sito. In Bootstrap gli alerts hanno uno stile ben definito che cambia in base al tipo di messaggio da mostrare.

Le classi CSS da imparare in questo caso sono i seguenti:

.alert (Definisce un alert generico, da indicare sempre)
.alert-primary
.alert-secondary
.alert-success
.alert-info
.alert-warning
.alert-danger
.alert-light
.alert-dark

Esempio di codice:

     <div class="alert alert-success">
        <h4 class="alert-heading">Hello world!</h4>
        <p>Questo è un alert-success, per indicare qualcosa di positivo o confermare un operazione.</p>
        <hr>
        <p class="mb-0">Sezione aggiuntiva di testo</p>
      </div>
    </div>

Nel codice puoi notare ulteriori classi:

.alert-heading – Definisce il titolo dell’alert, un “heading” appunto;
.mb-0 – ad uso generico. “mb” sta per margin-bottom (margine inferiore) e 0 per “0 pixel“;

Riguardo a quest’ultima classe, approfondiremo il discorso sui margini e sul padding sul prossimo articolo del corso.

In Bootstrap 4 sono presenti altri elementi utili alla progettazione di una pagina web, detto in maniera semplice infatti, quasi tutti gli elementi HTML anno classi CSS personalizzate nel Framework, anche se come puoi ben vedere, le keyword usate sono quasi sempre le stesse (primary, info, success, danger etc…).

Visita il sito ufficiale per saperne di più.

⇦ Tipografia

Margini, padding e bordi ⇨

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti: