Primi passi con Bootstrap - Java Boss - Dalle basi ai principali framework

Dopo aver creato la nostra prima web application con Bootstrap (si veda Creare una Web Application con Bootstrap) vediamo alcune caratteristiche di questo framework di fornt-end.

Trattandosi di un framework eseguito sul client, alcune delle caratteristiche di cui parleremo possono essere testate utilizzando gli strumenti per lo sviluppatore disponibili nei principali browser.

Esempio base

Cominciamo con alcuni concetti principali:

Bootstrap utilizza alcune caratteristiche di HTML e CSS che richiedono il doctype HTML5;
Bootstrap è progettato per essere responsive su dispositivi mobili adottando la politica mobile-first, ovvero è ottimizzato per massimizzare l’esperienza degli utenti mobile;
Bootstrap richiede un elemento contenitore che include tutti i contenuti del sito.

Un codice minimale per Bootstrap è quindi:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>         
        <script src="js/bootstrap.min.js"></script>  
    </head>
    <body>
        <div class="container">
          <h1>My First Bootstrap Page</h1>
          <p>This is some text.</p> 
        </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

</div>

</body>

</html>

La proprietà width=device-width assicura che la larghezza della pagina segua quella del dispositivo, mentre initial-scale=1definisce lo zoom iniziale al caricamento della pagina.

Esaminando il body troviamo poi il tag div con la classe container. In Bootstrap esistono due tipi di classi container: .container e .container-fluid. La differenza tra i due è in questa porzione di css che qualifica la prima classe ma non la seconda:

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

@media (min-width: 768px) {

.container {

width: 750px;

}

@media (min-width: 992px) {

.container {

width: 970px;

}

@media (min-width: 1200px) {

.container {

width: 1170px;

}

Questo implica che .container-fluid espande il div fino ad occupare tutto lo spazio disponibile e si ridimensiona ad ogni aggiustamento della finestra del browser. Differentemente .container definisce solamente tre possibili larghezze per il div che vengono selezionate in funzione della larghezza della finestra. Nell’immagine seguente vediamo la nostra pagina di esempio e gli strumenti per lo sviluppatore di chrome ci indicano che la larghezza assunta dal div è 1170 come stabilito dal css.

Grid system

Per il posizionamento dei contenuti nella pagina Bootstrap utilizza un sistema griglia fluida, che scala in modo responsive fino ad avere 12 colonne in funzione della dimensione del dispositivo.

La definizione della griglia avviene sempre all’interno di una classe .container o .container-fluid ed inizia con una classe .row all’interno della quale sono inserite le colonne. Le colonne invece sono caratterizzate dalla classe .coll-X-Y dove la X indica una possibile tra le seguenti opzioni:

xs: dispositivi con schermo molto piccolo (mobile phones)
sm: dispositivi con schermo piccolo (tablets)
md: dispositivi con schermo medio (desktops)
lg: dispositivi con schermo grande (desktops più grandi)

che ottimizzano la griglia in funzione del tipo di dispositivo. Tali classi possono essere mixate per ottenere per ottenere il giusto comportamento sui vari dispositivi (responsive). Le classi sono gerarchiche, ovvero la xs si applica a tutti i dispositivi più grandi a meno che non sia ridefinita. Infine la Y indica lo span del div rispetto alle 12 colonne totali.

Alcuni esempi di grid layout possono essere visionati al link https://getbootstrap.com/examples/grid/ dal quale estraiamo e commentiamo il seguente esempio:

<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

</div>

Per dispositivi con schermo piccolo o molto piccolo (xs e ms) la prima colonna ha uno span di 12 mentre la seconda di 6. Essendo le colonne totali 12 questo implica che le colonne vengono “impilate”, come nell’immagine seguente:

Diversamente per tutti i dispositivi desktop la prima colonna occupa il 2/3 dello schermo mentre la seconda solamente 1/3, rimanendo comunque in linea.

Tornando all’esempio mostrato nel post Creare una Web Application con Bootstrap una nuova pagina di ricerca con i concetti descritti sopra potrebbe essere:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>Employees</h2>
            <div class="raw">
                <div class="col-xs-3">
                    <h4 class="text-right">Name</h4>
                </div>
                <div class="col-xs-3">
                    <input type="text" name="employeeName" id="employeeName"
                        placeholder="Type the Name of the employee" class="form-control" />
                </div>
                <div class="col-xs-3">
                    <h4 class="text-right">Surname</h4>
	        </div>
                <div class="col-xs-3">
                    <input type="text" name="employeeSurname" id="employeeSurname"
                        placeholder="Type the Last Name of the employee" class="form-control" />
                </div>
                <div class="raw">
                    <div class="col-xs-12">
                        <p class="text-center">
                            <button type="submit" class="btn btn-info">
                                <span class="glyphicon glyphicon-search"></span> Search
                            </button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Employees</h2>

</div>

<input type="text" name="employeeName" id="employeeName"

placeholder="Type the Name of the employee" class="form-control" />

</div>

<h4 class="text-right">Surname</h4>

</div>

<input type="text" name="employeeSurname" id="employeeSurname"

placeholder="Type the Last Name of the employee" class="form-control" />

</div>

<span class="glyphicon glyphicon-search"></span> Search

</button>

</p>

</div>

</body>

</html>

Tabelle

Tralasciamo tutti gli aspetti tipografici dei vari elementi HTML, in quanto sarebbero un semplice elenco senza commenti specifici, veniamo alla definizione dello stile delle tabelle. Innanzitutto Bootstrap richiede per l’applicazione del suo stile la dichiarazione obbligatoria della classe .table, al fine di evitare collisioni con stili di altri componenti che utilizzano le tabelle (es. i vari calendari).

<table class="table">
  ...
</table>

...

</table>

Altri stili applicabili sono:

.table-striped: per colorare le righe in modo alternato (non disponibile in IE8);
.table-bordered: per evidenziare i bordi della tabella e delle celle;
.table-hover: per evidenziare la riga al passaggio del mouse;
.table-condensed: per condensare la tabella riducendo il padding;

Alle singole righe o celle, ovvero qualificando i tag tr, td o th, è possibile associare una classe “contestuale” che colora l’elemento in modo predefinito allo scopo di indicare le seguenti informazioni:

.active: indica riga o cella attiva (grigio);
.success: indica azione riuscita (verde);
.info: indicazione neutra (celeste);
.warning: indica di porre attenzione (giallo);
.danger: indica pericolo (rosso);

Poiché tali informazioni non sono lette dagli screen reader ed essendo intese per rendere un ulteriore contenuto informativo è opportuno specificare ulteriormente tale informazione con testo addizionale (hidden) qualificato con la classe .sr-only.

Infine per ottenere tabelle responsive, la sua definizione deve essere contenuta in un div con classe .table-responsive. L’effetto è quello di inserire una barra di scorrimento orizzontale visibile solamente per dispositivi con schermo al di sotto dei 768px.

Form

Iniziamo col dire che i controlli delle form ricevono automaticamente lo stile globale di Bootstrap. Alcune regole di base per le form sono:

inserendo la proprietà role="form" al tag form migliora l’accessibilità della form e la sua leggibilità per screen reader;
label e controllo devono essere inclusi in un div con classe form-group per ottimizzarle la spaziatura;
in tutti i controlli testuali <input>, <textarea>, and <select> utilizzare la classe .form-control per avere una larghezza predefinita del campo del 100%;
se possibile utilizzare sempre le label altrimenti gli screen reader potrebbero avere problemi di lettura; in alternativa potete nascondere la label utilizzando la classe .sr-only;
i campi di testo riceveranno lo stile di Bootstrap solamente se l’attributo type è correttamente valorizzato;

Con questi pochi principi rivisitiamo la form di ricerca della nostra web application nel modo seguente:

<div class="container">
    <h2>Employees</h2>
    <form role="form">
        <div class="form-group">
            <label for="employeeName">Name</label> 
            <input type="text" name="employeeName" id="employeeName" placeholder="Type the Name of the employee" class="form-control" />
        </div>
        <div class="form-group">
            <label for="employeeSurname">Surname</label> 
            <input type="text" name="employeeSurname" id="employeeSurname" placeholder="Type the Last Name of the employee" class="form-control" />
        </div>
        <button type="submit" class="btn btn-info">
            <span class="glyphicon glyphicon-search"></span> Search
        </button>
    </form>
</div>

<h2>Employees</h2>

</div>

<label for="employeeSurname">Surname</label>

</div>

<span class="glyphicon glyphicon-search"></span> Search

</button>

</form>

</div>

Il posizionamento delle label e dei campi può essere modificato qualificando opportunamente il tag form con .form-horizontal o .form-inline. Nel primo caso si modifica il comportamento della classe .form-group in modo che agisca come la riga in una griglia. Non c’è bisogno di specificare la classe .row e l’effetto è quello di poter allineare label e controllo su stessa riga utilizzando il grid system di Bootstrap.

Applicato il concetto al nostro esempio aggiungiamo la classe col-sm-2 alla label per occupare le prime due celle della griglia e includiamo i controlli di input in un div con classe col-sm-10 per collocarli nelle successive 10 celle.

<div class="container">
    <h2>Employees</h2>
    <form role="form" class="form-horizontal">
        <div class="form-group">
            <label for="employeeName" class="col-sm-2">Name</label> 
            <div class="col-sm-10">
                <input type="text" name="employeeName" id="employeeName" placeholder="Type the Name of the employee" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label for="employeeSurname" class="col-sm-2">Surname</label> 
            <div class="col-sm-10">
                <input type="text" name="employeeSurname" id="employeeSurname" placeholder="Type the Last Name of the employee" class="form-control" />
            </div>
        </div>
        <button type="submit" class="btn btn-info">
            <span class="glyphicon glyphicon-search"></span> Search
        </button>
    </form>
</div>

<h2>Employees</h2>

</div>

<label for="employeeSurname" class="col-sm-2">Surname</label>

</div>

<span class="glyphicon glyphicon-search"></span> Search

</button>

</form>

</div>

La classe .form-inline invece, consente di avere tutta la form su un’unica linea (applicabile solamente a dispositivi con larghezza inferiore a 768px).

Pulsanti

Terminiamo il post con qualche cenno sui pulsanti. Bootstrap mette a disposizione la classe btn che può essere applicata indifferentemente ai tag <a>, <button> ed <input>, con i seguenti accorgimenti:

solo l’elementi <button> può essere utilizzata nei componenti Bootstrap nav e navbar;
se il tag <a> è utilizzato per agire come un pulsante (non naviga su altro documento ma attiva delle funzioni sulla pagina) deve essere valorizzata la proprietà role=button";
è sempre da preferire l’elemento <button> per compatibilità con tutti i browser;

Bootstrap mette inoltre a disposizione alcune classi di stile che consentono di controllare il colore, la dimensione e lo stato dei pulsanti. Nel nostro codice, ad esempio, è stato utilizzata la classe .button-info per dare al pulsante la colorazione blu. Altre classi sono:

Per la colorazione: btn-default, btn-primary, btn-success, .button-info, btn-warning, btn-danger e btn-link;
Per il sizing: btn-lg, btn-sm, btn-xs e btn-block;
Per lo stato: active (non necessario), disabled.

Esempio base

Grid system

Tabelle

Form

Pulsanti

Related Posts: