logo Portale zerozetasm.it



Guida Bootstrap: INIZIARE

01. Modello di partenza
Si può scaricare e utilizzare il modelli-base di bootstrap con CDN.
Configurare le proprie pagine HtmL5 con bootstrap 4 e gli ultimi standard:
(oggi 12-04-2019 --> BootStrap 4.3.1)
Includere nel doctype HTML5 un meta tag viewport per il comportamento responsivo.
Si può scaricare il modello originale all'idirizzo che segue:
Collegamento alla pagina BootStrap Modello di partenza

le pagine dovrebbero assomigliare al codice che segue:

Codice 

<!doctype html>
<html lang="it">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

02. Dimensionamento-box
Per un dimensionamento più semplice nei CSS, il valore box-sizing é cambiato da content-box a border-box.
Ciò garantisce un padding che non influenza l'elemento rispetto alla larghezza finale calcolata.

Codice 

.selettore {
  box-sizing: content-box;
}

03. Contenitori
I contenitori sono l'elemento base del layout in Bootstrap e sono richiesti quando si utilizza il sistema di griglia predefinito.
Si può scegliere un contenitore reattivo a larghezza fissa ,container o a larghezza del 100% ,container-fluid.

Codice 

<div class="container">
  <!-- Contenuto -->
</div>

<div class="container-fluid">
  <!-- Contenuto -->
</div>

04. Punti di rottura reattivi
Bootstrap utilizza le media query per creare punti di rottura per l'interfaccia del layout.
Bootstrap è sviluppato per prima cosa sul mobile, una strategia in cui si ottimizza prima il codice per i dispositivi mobili e poi si scalano i componenti secondo necessità utilizzando le query multimediali CSS.
Per garantire il corretto rendering e il controllo dello zoom per tutti i dispositivi, aggiungere il meta tag viewport reattivo all'head.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Questi punti di interruzione si basano principalmente sulla larghezza minima del viewport
consentendo di ridimensionare gli elementi man mano che la finestra cambia.
Bootstrap utilizza principalmente i seguenti intervalli di query multimediali o punti di interruzione nel sistema di griglia e di componenti.

In misura minore si utilizzano anche le media query che vanno nella direzione opposta ovvero sulla larghezza massima del viewport

Occasionalmente esistono anche media query con dimensioni dello schermo che utilizzando la larghezza minima e massima del viewport


Codice 
LARGHEZZA MINIMA 
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

LARGHEZZA MASSIMA
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { ... }
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { ... }
/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { ... }
/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { ... }

LARGHEZZA MINIMA E MASSIMA
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { ... }
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { ... } 
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { ... } 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { ... } 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

05. Z-index
Diversi componenti Bootstrap utilizzano z-index, la proprietà CSS che aiuta a controllare il layout fornendo un terzo asse per organizzare il contenuto.
In Bootstrap si utilizza una scala z-index predefinita progettata per una stratificazione corretta.
Non si incoraggia la personalizzazione di questi valori individuali; per cambiarne uno, probabilmente si dovranno cambiare tutti.

Codice 

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

06. Stack di caratteri nativi
I caratteri web predefiniti (Helvetica Neue, Helvetica e Arial) sono stati sostituiti in Bootstrap 4 con uno "stack di caratteri nativi" per il rendering ottimale del testo su ogni dispositivo e sistema operativo.

Codice 

$font-family-sans-serif:
  /* Safari for macOS and iOS (San Francisco) */
  -apple-system,
  /* Chrome < 56 for macOS (San Francisco) */
  BlinkMacSystemFont,
  /* Windows */
  "Segoe UI",
  /* Android */
  "Roboto",
  /* Basic web fallback */
  "Helvetica Neue", Arial, sans-serif,
  /* Emoji fonts */
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

07. Javascript
Componenti che richiedono javascript


 - ALERTS                  - per la dismissione
 - BUTTONS                 - per gli stati di commutazione e la funzionalità checkbox/radio
 - CAROUSEL                - per tutti i comportamenti, i controlli e gli indicatori delle diapositive
 - COLLAPSE                - per attivare la visibilità del contenuto
 - DROPDOWN                - per la visualizzazione e il posizionamento (richiede anche Popper.js )
 - MODALITÀ MODALE         - per la visualizzazione, il posizionamento e il comportamento di scorrimento
 - BARRA DI NAVIGAZIONE    - per estendere il nostro plug-in Collapse per implementare un comportamento reattivo
 - SUGGERIMENTI E POPOVER  - per la visualizzazione e il posizionamento (richiede anche Popper.js )
 - SCROLLSPY               - per il comportamento di scorrimento e gli aggiornamenti di navigazione

08. Doctype HtmL5
Bootstrap richiede l'uso del doctype HtmL5, altrimenti lo stile sarà incompleto

Codice 

<!doctype html>
<html lang="it">
  ...
</html>

09. Reboot
Per migliorare il rendering cross-browser e correggere le incoerenze tra browser e dispositivi si utilizza il riavvio (reboot).
Il riavvio si basa su Normalize, che fornisce molti elementi HtmL e usa solo selettori di elementi.
Lo style aggiuntivo viene eseguito solo con le classi.
Cosa sovrascrivere nel riavvio:
- Aggiorna alcuni valori predefiniti del browser per utilizzare "rems" invece di "ems" per la spaziatura dei componenti scalabile.
- Evita margin-top perchè i margini verticali possono collassare, producendo risultati imprevisti.
- Per semplificare il ridimensionamento, degli elementi di blocco forza l'uso di "rems" per il margine.
- Mantiene le dichiarazioni di proprietà dei fonts correlate al minimo, utilizzando inherit quando possibile.


10. Browser supportati
Bootstrap supporta le ultime versioni stabili di tutti i principali browser e piattaforme. Su Windows, supporta Internet Explorer 10-11 / Microsoft Edge.

I browser alternativi che utilizzano l'ultima versione di WebKit, Blink o Gecko, direttamente o tramite l'API della vista web della piattaforma, non sono supportati esplicitamente. Tuttavia, Bootstrap dovrebbe (nella maggior parte dei casi) visualizzare e funzionare correttamente anche in questi browser.


11. Bootstrap tematico
In Bootstrap 3, il tema era in gran parte guidato da sostituzioni variabili in LESS, CSS personalizzati e un foglio di stile a tema separato.

Ora, il tema è compiuto dalle variabili Sass, dalle mappe Sass e dai CSS personalizzati.
In Bootstrap 4, non ci sono più fogli di stile tematici dedicati.

Vedere direttamente le specifiche sul sito di bootstrap 4


12. Accessibilità
Bootstrap offre un quadro di facile utilizzo di stili pronti, strumenti di layout e componenti interattivi, che consente agli sviluppatori di creare siti Web e applicazioni visivamente accattivanti, funzionalmente ricchi e accessibili fin dall'inizio.

Panoramica e limitazioni
L'accessibilità generale di qualsiasi progetto creato con Bootstrap dipende dal markup dell'autore, dallo stile aggiuntivo e dagli script inclusi.
Tuttavia, a condizione che siano stati implementati correttamente, dovrebbe essere perfettamente possibile creare siti Web e applicazioni con Bootstrap che soddisfano le WCAG 2.0 (A / AA / AAA), la Sezione 508 e requisiti e standard di accessibilità simili.

Vedere direttamente l'accessibilità sul sito di bootstrap 4


13. Margine negativo
Nei CSS, la Proprietà margin può utilizzare valori negativi ( per il padding é impossibile) Queste utilità é ideale per la personalizzazione lo spazio tra righe e colonne della griglia.
Abbiamo aggiunto utilità per i margini negativi di ogni dimensione per un intero diverso da zero.
La sintassi è la stessa delle utilità di margine positivo predefinite, ma con l'aggiunta di -n seguita da un numero (1, 2, 3, 4, 5) prima della dimensione richiesta.
Ecco un esempio della classe nei CSS con margine negativo:

  
.mt-n1 {
  margin-top: -0.25rem !important;
}

Ecco un esempio di personalizzazione della griglia Bootstrap al punto di interruzione medio md.

Custom column padding
Custom column padding

Codice 

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>