Se stai facendo qualcosa legato al web, probabilmente hai sentito parlare di Bootstrap . Se a questo punto non sai ancora cos’è Bootstrap . Come includere i componenti Bootstrap sul nostro sito Web?
Oppure vuoi semplicemente avere una visione migliore di ciò che è e di ciò che funziona meglio, sei nel posto giusto.
Come includere i componenti Bootstrap sul nostro sito Web?
Modello HTML di base Bootstrap Un modello HTML Bootstrap di base dovrebbe assomigliare a questo: <! DOCTYPE html> <html lang = "en"> <Head> <meta charset = "utf-8"> <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> <meta name = "viewport" content = "larghezza = larghezza dispositivo, scala iniziale = 1"> <title> Modello Bootstrap </title> <link href = "css / bootstrap.min.css" rel = "stylesheet"> </ Head> <Body> <h1> Ciao, mondo! </h1> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> <script src = "js / bootstrap.min.js"> </script> </ Body> </ Html>
È importante avviare qualsiasi HTML con una dichiarazione Doctype HTML 5, in modo che i browser sappiano quale tipo di documento possono aspettarsi.
L’intestazione contiene tre importanti tag <meta> che devono essere dichiarati per primi e tutti i tag di intestazione aggiuntivi devono essere aggiunti successivamente.
Modelli Bootstrap e componenti dell’interfaccia utente
Bootstrap viene fornito con modelli di progettazione HTML e CSS di base che includono molti componenti dell’interfaccia utente comuni. Questi includono tipografia, tabelle, moduli, pulsanti, glifi, menu a discesa, pulsanti e gruppi di input.
Navigazione, impaginazione, etichette e badge, avvisi, barre di avanzamento, maniere, schede, fisarmoniche, giostre e molti altri. Molti di questi usano estensioni JavaScript e plugin jQuery.
Bootstrap Grid System
Le griglie forniscono struttura al progetto, definendo linee guida orizzontali e verticali per organizzare il contenuto e far rispettare i margini.
Le griglie offrono anche una struttura intuitiva per gli spettatori, poiché è facile seguire un flusso di contenuti da sinistra a destra o da destra a sinistra che si sposta attraverso la pagina.
Il sistema a griglia Bootstrap ha quattro livelli di classe: xs per telefoni (<768px), sm per tablet (≥768px), md per desktop (≥992px) e lg per desktop più grandi (≥1200px).
Fondamentalmente definiscono le dimensioni in cui le colonne collasseranno o si estenderanno in orizzontale. I livelli di classe possono essere utilizzati in qualsiasi combinazione per ottenere design dinamici e flessibili.
Ad esempio, se vogliamo ottenere due righe, una con due colonne e una con quattro, potremmo scrivere:
<div class = "row"> <div class = "col-md-6"> Prima colonna </div> <div class = "col-md-6"> Seconda colonna </div> </ Div> <div class = "row"> <div class = "col-md-3"> Prima colonna </div> <div class = "col-md-3"> Seconda colonna </div> <div class = "col-md-3"> Terza colonna </div> <div class = "col-md-3"> Quarta colonna </div> </ Div>
Tipografia Bootstrap
Gli sviluppatori principianti presumono spesso che il loro HTML puro e senza stile sarà lo stesso in tutti i browser.
Sfortunatamente, ogni browser ha il proprio foglio di stile ” user agent ” che si applica all’HTML e nessun due browser ha gli stessi valori predefiniti.
Bootstrap imposta la visualizzazione globale di base, la tipografia e gli stili di collegamento. in particolare:
- Imposta colore di sfondo: #fff; nel corpo
- Usa gli attributi @ font-family-base , @ font-size-base e @ line-height-base come base tipografica
- Imposta il colore del collegamento globale tramite @ link-color e applica la sottolineatura del collegamento solo a: hover
- Questi stili possono essere trovati all’interno di scaffolding.less.
forme
Mentre HTML5 ha introdotto una serie di nuovi attributi di modulo, tipi di input e altri elementi ausiliari, i browser non hanno migliorato notevolmente la forma visiva.
Questa è un’area in cui Bootstrap brilla davvero, perché allineare e stilizzare etichette o voci , convalidare moduli e visualizzare messaggi di errore può essere complicato senza aiuto.
Immagini e icone
Bootstrap viene fornito con oltre 260 glifi in formato carattere , il che è sorprendente. Le icone dei caratteri hanno molti vantaggi rispetto alle semplici immagini bitmap, una delle quali è che sono scalabili.
Possono anche essere facilmente personalizzati utilizzando solo CSS , quindi manipolare dimensioni o colore o persino aggiungere un’ombra è molto semplice.
Pulsanti, gruppi di pulsanti e menu a discesa
I pulsanti sono una delle cose che ogni browser presenta in un modo completamente diverso. Se vuoi avere un design coerente in tutti i browser, questo è potenzialmente un grosso problema.
Fortunatamente Bootstrap ha una soluzione elegante anche per i pulsanti. E oltre a renderli coerenti, offre molte varianti.
È possibile applicare il lasb .btn agli elementi <a> e <input> . Puoi raggruppare una serie di pulsanti su una singola riga usando la classe. btn-group nel <div> principale.
Con un piccolo aiuto da JavaScript, puoi creare un comportamento in stile radio e una casella di controllo sui pulsanti.
In alternativa, è possibile convertire i pulsanti in menu a discesa posizionandoli all’interno di un gruppo .btn e fornendo il markup del menu appropriato per l’elenco di elementi non ordinati.
