Bootstrap - Panoramica CSS

Questo capitolo fornisce una panoramica dei pezzi chiave dell'infrastruttura di Bootstrap, compreso l'approccio di Bootstrap a uno sviluppo web migliore, più veloce e più forte.

Doctype HTML5

Bootstrap fa uso di alcuni elementi HTML e proprietà CSS che richiedono l'uso del doctype HTML5. Quindi includi il seguente pezzo di codice per il doctype HTML5 all'inizio di tutti i tuoi progetti usando Bootstrap.

<!DOCTYPE html>
<html>
   ....
</html>

Mobile First

Da quando è stato lanciato Bootstrap 3, Bootstrap è diventato prima mobile. Significa che gli stili "mobile first" possono essere trovati in tutta la libreria invece che in file separati. Devi aggiungere il fileviewport meta tag al <head> elemento, per garantire un rendering corretto e lo zoom al tocco sui dispositivi mobili.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

  • La proprietà width controlla la larghezza del dispositivo. Impostandolo sulla larghezza del dispositivo si assicurerà che venga visualizzato correttamente su vari dispositivi (cellulari, desktop, tablet ...).

  • initial-scale = 1.0 garantisce che, una volta caricata, la tua pagina web verrà visualizzata in scala 1: 1 e non verrà applicato lo zoom fuori dalla scatola.

Inserisci user-scalable = no al contentattributo per disabilitare le funzionalità di zoom sui dispositivi mobili come mostrato di seguito. Gli utenti possono solo scorrere e non eseguire lo zoom con questa modifica e il tuo sito sembra un po 'più simile a un'applicazione nativa.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Normalmente viene utilizzata la scala massima = 1.0 insieme a scalabile dall'utente = no . Come menzionato soprauser-scalable = no può offrire agli utenti un'esperienza più simile a un'app nativa, quindi Bootstrap non consiglia di utilizzare questo attributo.

Immagini reattive

Bootstrap 3 ti consente di rendere le immagini reattive aggiungendo una classe .img-responsive al <img>etichetta. Questa classe si applicamax-width: 100%; e height: auto; all'immagine in modo che si adatti bene all'elemento genitore.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Tipografia e collegamenti

Bootstrap imposta una visualizzazione globale di base (sfondo), la tipografia e gli stili di collegamento -

  • Basic Global display- Imposta il colore di sfondo: #fff; sull'elemento <body> .

  • Typography- Utilizza gli attributi @ font-family-base , @ font-size-base e @ line-height-base come base tipografica.

  • Link styles- Imposta il colore del collegamento globale tramite l'attributo @ link-color e applica le sottolineature del collegamento solo su : hover .

Se intendi utilizzare LESS code, puoi trovare tutto questo all'interno di scaffolding.less .

Normalizzare

Bootstrap utilizza Normalize per stabilire la coerenza tra browser.

Normalize.css è un'alternativa moderna e pronta per HTML5 ai ripristini CSS. È un piccolo file CSS che fornisce una migliore coerenza tra browser nello stile predefinito degli elementi HTML.

Contenitori

Usa classe .container per avvolgere il contenuto di una pagina e centrare facilmente il contenuto come mostrato di seguito.

<div class = "container">
   ...
</div>

Dai un'occhiata al file .containerclasse nel file bootstrap.css -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Si noti che, a causa del riempimento e delle larghezze fisse, i contenitori non sono annidabili per impostazione predefinita.

Dai un'occhiata al file bootstrap.css -

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

Qui puoi vedere che CSS ha media-query per contenitori con width. Questo aiuta ad applicare la reattività e all'interno di questi la classe contenitore viene modificata di conseguenza per rendere correttamente il sistema a griglia.