Come creare più colonne reattive con Bootstrap 3
Pubblicato: 2022-02-16
Vorresti migliorare la reattività del tuo sito web con Bootstrap? L'aspetto più importante di Bootstrap è il suo sistema mobile first grid a 12 colonne. Questo è ciò che usi per creare un layout reattivo.
In questo video tutorial, creerai un sito Web di base utilizzando Bootstrap e imparerai come utilizzare il sistema di griglia Bootstrap per creare un layout reattivo con più colonne.
Prima di guardare il tutorial
Prima di poter seguire il video tutorial qui sotto e imparare a creare le tue colonne reattive, avrai bisogno di:
- Conoscenza di base di cosa sia Bootstrap
- Conoscenza di base di cosa sia il sistema di griglia Bootstrap
- Scarica Bootstrap sul tuo disco rigido
- Crea un file Bootstrap index.html di base su cui basarti
Cos'è Bootstrap
- Bootstrap è un framework per sviluppatori HTML, CSS e JavaScript che lavorano sulla reattività del sito web.
- Consiste in uno stile CSS reattivo già predefinito per colonne, elenchi, navigazione, moduli Web e molti altri elementi Web.
Comprensione del sistema di griglia Bootstrap
- Il sistema a griglia Bootstrap classifica le dimensioni dello schermo in quattro tipi: Extra-piccolo, Piccolo, Medio e Grande.
- L'Extra-piccolo è per i telefoni cellulari. The Small è per tablet, come I-Pad. Il mezzo è per monitor desktop. E il Large è solo per i monitor desktop più grandi.
- Per aiutarti a ottimizzare la reattività per questi quattro tipi di schermi, Bootstrap divide la larghezza dei dispositivi di visualizzazione Web nel sistema a griglia a 12 colonne.
- Ognuno di questi quattro tipi di griglia Bootstrap diventa reattivo solo se gli si assegna la propria classe CSS designata.
- Ad esempio, per rendere un div reattivo per dispositivi extra piccoli, il div deve avere la propria classe Bootstrap .col-xs-<number_of_columns_to_take>, come <div class="col-xs-6">.
Download Bootstrap
- Vai su getboostrap.com e fai clic sul pulsante "Scarica Bootstrap":
- Vedrai la pagina "Per iniziare". Fare clic sul pulsante "Scarica Bootstrap":
- Salva questo file sul disco rigido del tuo computer, dove vuoi. Non deve essere salvato su un server web.
- Decomprimi questo file e rinomina la cartella estratta in "bootstrap".
Preparativi per la tua pagina Bootstrap di base index.html
Passo 1. Crea il tuo file bootstrap index.html
- Torna alla pagina "Guida introduttiva" (http://getbootstrap.com/getting-started/#download) e fai clic sul collegamento "Modello di base" nella barra laterale destra:
- Vedrai il codice "Modello di base". Fare clic sul pulsante "Copia" per copiare il codice:
- Incolla il codice "Modello di base" nel tuo editor di testo e salvalo come index.html nella stessa cartella in cui hai salvato la cartella "bootstrap". Ora diventerà la prima pagina del tuo sito Bootstrap.
- Apri il index.html appena creato e dai un'occhiata al tuo sito Web Bootstrap di base:
- Apri il file index.html nel tuo editor di testo e tra i tag di apertura <body> e <h1> aggiungi <div class="container"> (1). Chiudi questo nuovo div dopo il tag di chiusura </h1> (2) e salva il file:
- Controlla il front-end della pagina e nota come "Hello World!" non è più bloccato sul bordo della pagina e ora si è spostato leggermente a destra, per farlo sembrare un po' più ordinato. La classe "container" di Bootstrap che hai assegnato a questo div ha aggiunto a questo testo un certo margine:
- Torna al tuo file index.html. Tra i tag <h1> e </h1> sostituisci "Hello World!" a "Trusthub". Salva il file e controlla il front-end del tuo sito.
Passo 2. Aggiungi alcuni contenuti e una barra laterale
- Torna al tuo file index.html e sotto il codice <h1>Trustub</h1> copia e incolla il codice seguente:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- Torna al front-end del tuo sito. Aggiornalo. Ora dovresti vedere i tuoi contenuti e la barra laterale "Il nostro team", senza ancora un layout reattivo a colonne:
- Torna al sito web getbootstrap.com e nel menu in alto fai clic sul pulsante "CSS":
- Nella barra laterale fare clic sul pulsante "Sistema griglia":
- Scorri la pagina verso il basso fino alla sezione "Opzioni griglia" (1) e prendi nota del sistema di griglia a 12 colonne Bootstrap con i suoi quattro tipi di dimensioni dello schermo, la loro larghezza e i prefissi di classe CSS designati (2):
- Non preoccuparti se le opzioni del sistema di griglia Bootstrap non hanno ancora senso per te. Verrà tutto insieme per te in un secondo quando inizierai a giocarci intorno sul tuo sito.
- Apri di nuovo il tuo file index.html e sotto <div class="row">, per il tuo <div> esistente inserisci la classe "col-md-9". Il tuo nuovo div ora dovrebbe apparire "div class="col-md-9">:
- Ora vai al tuo div, situato proprio sopra l'intestazione <h2> "Out Team" e assegnagli la classe CSS della griglia Bootstrap "col-md-3". Salva il file:
- Torna al tuo sito per vedere questa modifica in azione. Premi il tasto F5 sulla tastiera per aggiornare il tuo sito web. Ora vedrai che l'area dei contenuti e la barra laterale sono affiancate.
- Il tuo contenuto div ora occupa 9 delle colonne disponibili nella griglia Bootstrap 12 (75% dell'intera larghezza dello schermo del desktop). E la tua barra laterale occupa 3 delle sue 12 colonne della griglia Bootstrap (25% dell'intera larghezza dello schermo del desktop):
Brillante! Ora sei pronto per seguire il video tutorial qui sotto. Iniziamo.
Congratulazioni! Hai appena imparato a creare un layout di pagina Web reattivo con più colonne utilizzando Bootstrap. Vuoi saperne di più su Bootstrap? Se sì, visita il nostro canale YouTube OSTraining e guarda i "Tutorial di Bootstrap Framework".