Nel 2011, Twitter ha introdotto il framework Bootstrap. Da allora, questo framework CSS ha visto due importanti riscritture, con la più recente (Bootstrap 3) rilasciata nel 2013. Bootstrap 3 ha trasformato la libreria CSS implementando un approccio mobile first che ha lasciato il framework completamente reattivo.
A partire dal 2022, Bootstrap è alla versione cinque ed è uno dei framework frontend più popolari. Ha un ampio elenco di componenti predefiniti e un'impressionante raccolta di plugin JavaScript. In questo articolo imparerai come utilizzare Bootstrap e sfruttare al massimo le sue funzionalità.
Installazione di Bootstrap nel tuo progetto
Ci sono tre modi per farlo usa Bootstrap nel tuo progetto. Puoi scaricare e ospitare i file CSS e JavaScript, installarlo nel tuo progetto utilizzando npm o copiare e incollare i collegamenti cdn appropriati nel tuo progetto.
Con l'approccio cdn, devi ricordarti di posizionare il link Bootstrap prima di qualsiasi altro link CSS nel tag head del tuo file HTML.
Alcuni componenti di Bootstrap hanno attività funzionali, come l'attivazione/disattivazione dei pulsanti e il posizionamento che richiedono l'importazione di JavaScript e script Popper. Quindi, se intendi utilizzare componenti funzionali, dovrai aggiungere anche il tag script al tuo file HTML.
L'ultima cosa di cui hai bisogno per iniziare a usare Bootstrap è il vista etichetta.
Poiché Bootstrap è una tecnologia mobile first, il vista etichetta aiuterà nel design reattivo. Un modo semplice per utilizzare bootstrap nel tuo progetto è semplicemente copiare Il modello iniziale di Bootstrap.
Creazione di un sito Web con Bootstrap
Quando crei un nuovo sito web, una delle prime cose che devi considerare è il layout. Successivamente, puoi passare ad altri componenti come pulsanti e tipografia.
Bootstrap ha una raccolta di componenti strutturali che puoi utilizzare per organizzare gli elementi su una pagina web. Queste strutture di layout includono:
- Contenitori
- Griglia
- Colonne
- grondaie
- Punti di interruzione
Utilizzando una versione leggermente modificata del modello di avvio Bootstrap, puoi iniziare a delineare la struttura della tua pagina web e aggiungere nuovi componenti.
Il file index.html
Meta tag obbligatoriCSS Bootstrap
Bootstrap
Separa Popper e Bootstrap JS
La classe del contenitore Bootstrap
Il Bootstrap contenitore blocchi di classe, contiene e allinea gli elementi sulla tua pagina web. Se prevedi di utilizzare Bootstrap's griglia predefinita, quindi dovrai utilizzare anche Bootstrap contenitore classe. Ci sono tre tipi di contenitore classi; contenitore, contenitore-fluido, e contenitore-{punto di interruzione}. La classe container è il container predefinito; è reattivo e ha una larghezza di correzione in ciascuno dei sei punti di interruzione di Bootstraps.
I sei punti di interruzione predefiniti di Bootstrap includono:
- Piccolissimo: Meno di 576px.
- Piccolo: Maggiore o uguale a 576px.
- Medio: Maggiore o uguale a 768px.
- Grande: Maggiore o uguale a 992px.
- X-Grande: Maggiore o uguale a 1200px.
- XX-Grande: Maggiore o uguale a 1400px.
Per usare Bootstrap contenitore nel tuo progetto, puoi semplicemente aggiungere la classe contenitore desiderata all'esterno div sulla tua pagina web.
Utilizzo del contenitore di Bootstrap
posizionare gli elementi del sito Web qui L'inserimento del codice sopra nel corpo del tuo file HTML esistente renderà la tua pagina web reattiva e creerà anche padding su ciascun lato della tua pagina web.
Il sistema a griglia Bootstrap
La griglia di Bootstrap utilizza un sistema a dodici colonne che si basa su riga e col classi grid, così come la classe contenitore. Ogni riga ha dodici colonne e qualsiasi elemento può estendersi su una o più di queste colonne. La classe column indicherà quante colonne dovrebbe occupare un elemento. Ad esempio, un elemento che utilizza col-2 la classe si estenderà su due colonne, un elemento che utilizza col-3 la classe si estenderà su tre colonne e così via.
Il sistema a griglia Bootstrap si basa sul modulo flexbox. Se solo due colonne occupano una riga, divideranno lo spazio equamente tra loro. Il grondaia class è uno degli elementi strutturali di Bootstrap e controlla la spaziatura tra ogni colonna nella sistema a griglia. Ogni griglia la colonna ha 12px di riempimento su entrambi i lati.
Utilizzo del sistema a griglia di Bootstrap
contenuto principale di una pagina web
Articolo
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae
obcaecati illo laboriosam a, voluptate molestias eum velit, distinzione impedit
ratione facere numquam, optio eligendi delectus cumque quos.
L'inserimento del codice sopra nel contenitore div creerà un sistema di griglia Bootstrap di tre righe e due colonne. La prima riga in alto conterrà la barra di navigazione, la terza riga in basso conterrà il piè di pagina del sito Web e la seconda riga al centro conterrà il contenuto della pagina Web. La seconda riga ha due colonne: l'articolo principale e una parte.
La creazione di un file CSS locale e l'aggiunta di un bordo a ciascuna sezione della griglia ti consentirà di vederlo più chiaramente.
Il file style.css
.riga{
bordo: 2px blu solido;
}
.col, .col-sm-4{
bordo: solido rosso 2px;
}
Il collegamento al file CSS sopra creerà il seguente output nel tuo browser:
Un'ovvia differenza nell'immagine sopra è la dimensione delle colonne. Di solito, due (o più) colonne in una riga occupano la stessa quantità di spazio, a meno che tu non dichiari esplicitamente il contrario. Il col-sm-4 class nel codice HTML sopra assicura che la seconda colonna si estenda solo su quattro delle dodici colonne nella riga. Il sm nel col-sm-4 class rappresenta il punto di interruzione piccolo, quindi la sezione a lato occuperà solo quattro colonne dal punto di interruzione piccolo e oltre.
Componenti Bootstrap
Dopo aver deciso il layout della tua pagina Web, il passaggio successivo consiste nell'aggiungere elementi di costruzione del sito Web, che Bootstrap chiama componenti. L'elenco dei componenti di Bootstrap include:
- barra di navigazione
- Bottoni
- Gruppo di pulsanti
- Gruppo elenco
- Carte
- Crollo
- Dropdown
La classe Bootstrap Navbar
Ogni barra di navigazione Bootstrap richiede il barra di navigazione classe. Richiedono anche l'uso del oppure assegnando al Bootstrap la parola chiave “navigazione”. ruolo attributo nel genitore della barra di navigazione div. Per rendere reattiva la barra di navigazione dovrai utilizzare il comprimi il plugin JavaScript.
Il Bootstrap barra di navigazione la classe usa un aria-corrente attributo che assume il valore "page" per indicare la pagina corrente o "true" per indicare la sezione corrente di una pagina web. Il valore che assegni dipenderà dalla struttura del tuo sito web (pagina singola o più pagine). Dovresti anche usare il classe attiva per indicare la pagina o la sezione corrente.
Utilizzo della barra di navigazione di Bootstrap
Sostituzione della navigazione riga del Bootstrap griglia con il codice sopra creerà il seguente output nel tuo browser:
Ci sono molte altre classi importanti e attributi Bootstrap nel codice sopra, come il navbar-marca class, che ha come target la sezione del logo del tuo barra di navigazione. Il barra di navigazione è anche completamente reattivo grazie al comprimi il plugin JavaScript.
Barra di navigazione reattiva
Ricorderai che Bootstrap ha sei impostazioni predefinite punti di interruzione e uno di questi breakpoint è grande (lg). Il navbar-expand-lg classe nel sopra si espande in un elenco orizzontale di elementi di navigazione in corrispondenza del punto di interruzione grande e sopra, e quell'elenco torna a un pulsante in qualsiasi punto di interruzione sotto grande.
Se vuoi saperne di più sulla creazione di siti Web reattivi, abbiamo messo insieme un pezzo che delinea come farlo con le media query in HTML e CSS.
Il componente del pulsante Bootstrap
Il Bootstrap pulsante componente utilizza il e richiede di impostare il genere attributo al “pulsante”.
Bootstrap ha diversi tipi di pulsanti. Per creare il pulsante più convenzionale dovresti usare il btn classe, ma per creare un pulsante hamburger come nel codice sopra dovresti usare il barra di navigazione attiva classe.
Quando dovresti usare Bootstrap?
Bootstrap è conosciuto come uno dei framework CSS più popolari perché è un pioniere. Molto prima che il design reattivo fosse così comune nello sviluppo di software, Bootstrap si è trasformato in un framework completamente reattivo.
Nel corso degli anni, Bootstrap ha continuato a progredire e migliorare, diventando la scelta numero uno per le migliori aziende, come Twitter e Spotify. Tuttavia, non sarà sempre l'opzione migliore per le tue esigenze di sviluppo software. Ad esempio, se stai creando un'applicazione React, c'è un sistema di progettazione chiamato MUI che è personalizzato per le applicazioni React.
Material-UI ha un nuovo nome e mira a creare un nuovo sistema di design alternativo al Material Design. Ecco come utilizzare MUI nei progetti ReactJS.
Leggi Avanti
- Programmazione
- Suggerimenti per la codifica
- Programmazione
- Strumenti di programmazione
Kadeisha Kean è uno sviluppatore di software full-stack e uno scrittore tecnico/tecnologico. Ha la spiccata capacità di semplificare alcuni dei concetti tecnologici più complessi; produrre materiale che può essere facilmente compreso da qualsiasi principiante della tecnologia. È appassionata di scrittura, sviluppo di software interessanti e viaggi per il mondo (attraverso i documentari).
Iscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti
