Come usare il CSS di base in Bootstrap

Una delle cose più complesse quando si tratta di lavorare con il web design è superare le sottili differenze tra i browser, anche se in teoria ogni browser deve rispettare gli standard, e nella maggior parte dei casi lo è, ci sono piccole differenze molto sottili che possono rendere il nostro design difficile da implementare.

Prima dell'esistenza di Bootstrap un file chiamato reset.cssIn questo, ciò che è stato fatto è stato definire esplicitamente tutti i valori degli elementi di base e chiave come i rilievi, i margini, il carattere predefinito, ecc. Con questo, abbiamo impedito al browser di fare ciò che voleva durante la definizione di elementi che non avevamo modificato nei nostri stili personalizzati.

Al giorno d'oggi Bootstrap si prende cura di questi dettagli per noi, questo si ottiene con un file chiamato bootstrap.css che è popolarmente noto come file di base.

RequisitiPer poter eseguire gli esempi e gli esercizi in questo tutorial dobbiamo avere un progetto con il Bootstrap già scaricato, o in mancanza, una connessione Internet per poter utilizzare le librerie direttamente dal tuo CDN. Abbiamo bisogno di un browser moderno come Cromo o Firefox nelle sue ultime versioni, e finalmente abbiamo bisogno di un editor di testo come Testo sublime o NotePad ++ per creare il contenuto HTML in un modo più amichevole, anche se se lo desideriamo gedit o blocco note servono ai nostri scopi.

intestazioni
Una delle cose che più attira l'attenzione su un sito web sono i titoli e i sottotitoli dei contenuti, ovviamente questa è la funzione di questi elementi, il CSS base di Bootstrap ha un modo interessante di gestirlo, prima di tutto ha alcune dimensioni e un carattere definito per l'elemento h in una qualsiasi delle sue numerazioni che vanno da 1 a 6, ma ha anche classi che corrispondono a ciascun elemento, in modo che possiamo applicare questi stessi stili a un div o ancora span.

Un'altra cosa interessante è che possiamo usare l'elemento piccolo per diminuire la dimensione di una sezione del titolo ma mantenendo la proporzione rispetto all'elemento o all'elemento che utilizza la classe corrispondente.

Con questo semplicemente che quando abbiamo più browser viene mantenuta un'omogeneità del nostro design, quindi i titoli non devono apparire diversi, ad esempio, in Safari a Firefox, quando sappiamo che entrambi i browser funzionano con caratteri diversi per impostazione predefinita.

Mettere in pratica ciò che hai imparato
Creeremo una piccola pagina dove faremo un elenco di titoli, posizioneremo le due pendenze una sopra l'altra in modo da vedere come le differenze non esistono più grazie al file di base di Bootstrap. Diamo prima un'occhiata al codice e poi vedremo come appare nel nostro browser.

 Utilizzo del file Base BootstrapQuesto è un div con la classe H1 la sorgente piccola
Questo è un titolo H4 il carattere piccolo
Questo è un div con la classe H4 la sorgente piccola

Qui vediamo come abbiamo realizzato all'interno del corpo i diversi elementi che useremo come titoli, inoltre mostriamo come funziona l'elemento in modo da poterlo combinare con i titoli per ottenere effetti molto interessanti. Includiamo anche uno stile aggiuntivo per aggiungerne un po' imbottiture aggiuntivo in modo da poter avere un risultato come quello che vedremo nell'immagine seguente:

INGRANDIRE

paragrafi
Una volta che abbiamo catturato l'attenzione di un lettore o di un utente con i titoli della nostra applicazione, di solito abbiamo bisogno di alcuni contenuti che possono essere consumati, normalmente è un testo che inseriamo in un paragrafo sebbene possa anche essere un'immagine, audio o video.

Tornando al paragrafo, già l'elemento

porta uno stile predefinito dal CSS di base, tuttavia questa base ci offre anche un tipo speciale di paragrafo che si chiama condurre, quando aggiungiamo questa classe a un paragrafo la faremo immediatamente risaltare dal resto dei suoi simili, poiché la sua dimensione viene aumentata e alcune proprietà dei caratteri vengono modificate.

Vediamo nel codice seguente come funziona questo che abbiamo appena spiegato, in questo esempio andremo a creare due paragrafi dove il primo avrà la classe condurre, in questo modo vedremo come evidenzierà, ovviamente tutto questo funziona se abbiamo Bootstrap nel nostro progetto, vediamo il nostro codice:

 Utilizzo del file Base Bootstrap
Bacon ipsum pain amet in laboris magna ullamco, in drumstick pain boudin eiusmod andouille leberkas pork belly exercitation ex. Costine di manzo magna corned beef incididunt id. Kevin groppa in coda biltong. Filet mignon quis di tacchino, stinco di cervo ullamco jerky lonza di maiale non voluptate.

Bacon ipsum pain amet in laboris magna ullamco, in drumstick pain boudin eiusmod andouille leberkas pork belly exercitation ex. Costine di manzo magna corned beef incididunt id. Kevin groppa in coda biltong. Filet mignon quis di tacchino, stinco di cervo ullamco jerky lonza di maiale non voluptate.

Eseguiamo il nostro esempio e vediamo come appare nel nostro browser:

INGRANDIRE

Allinea il testo
Una delle cose che è anche molto importante è l'allineamento del testo, poiché a volte abbiamo bisogno che il nostro testo sia giustificato, allineato a destra, al centro o forzatamente a sinistra, sebbene ci siano equivalenti nei CSS che hanno una classe per questo ci fa risparmiare molto lavoro e ci aiuta anche a dare consistenza al codice.

Nell'esempio seguente vedremo come applichiamo ciascuna di queste classi a diversi elementi e affinché il nostro codice abbia una migliore leggibilità creeremo tutti i paragrafi degli elementi. Vediamo il codice:

 Utilizzo del file Base Bootstrap
Bacon ipsum dolor amet in laboris magna ullamco, in coscia dolor boudin eiusmod andouille
Esercizio di pancia di maiale leberkas ex. Costine di manzo magna corned beef incididunt id.
Esercizio di pancia di maiale leberkas ex. Costine di manzo magna corned beef incididunt id. Esercizio di pancia di maiale leberkas ex. Costine di manzo magna corned beef incididunt id. Kevin groppa

in coda biltong. Filet mignon quis di tacchino, stinco di cervo ullamco jerky lonza di maiale non voluptate.

Ora vediamo come si comporta ogni classe nel nostro browser, c'è un caso particolare con il giustificare, che è molto sottile, quindi il suo effetto potrebbe non essere visto molto.

INGRANDIRE

Elenchi
Gli elenchi sono spesso necessari e non esclusivamente per elencare le cose, sono parti vitali del design molte volte. Bootstrap li gestisce in modo trasparente come gli elementi precedenti che abbiamo visto, le liste hanno uno stile predefinito dal CSS base, tuttavia abbiamo un paio di varianti, ad esempio l'elenco senza stili per evitare punti elenco e l'elenco con in linea, quest'ultimo rende l'elenco orizzontale.

Vediamo quindi nel codice seguente un esempio di ciascuna di queste liste in modo da poterle utilizzare nel nostro codice:

 Utilizzo del file Base Bootstrap
Elenco in linea

Primo elemento
Secondo elemento
Terzo elemento
Quarto elemento
Quinto Elemento

Elenco senza stili

Primo elemento
Secondo elemento
Terzo elemento
Quarto elemento
Quinto Elemento

Elenco standard

Primo elemento
Secondo elemento
Terzo elemento
Quarto elemento
Quinto Elemento

Ora vediamo come appare nel nostro browser, dove possiamo vedere che le differenze sono immediatamente evidenti:

Con questo finiamo questo tutorial, abbiamo visto che il CSS di base di Bootstrap Ci fornisce una base standard per garantire che gli elementi che non abbiamo definito o personalizzato appaiano in un modo particolare direttamente nel browser, dandoci così il pieno controllo sulla nostra applicazione indipendentemente dal browser.