Bootstrap 4 Contenitori
Contenitori
Hai imparato dal capitolo precedente che Bootstrap richiede un elemento di contenimento per avvolgere i contenuti del sito.
I contenitori vengono utilizzati per riempire il contenuto al loro interno e sono disponibili due classi di contenitori:
- La
.containerclasse fornisce un contenitore reattivo a larghezza fissa - La
.container-fluidclasse fornisce un contenitore a larghezza intera , che copre l'intera larghezza della finestra
Contenitore fisso
Usa la .containerclasse per creare un contenitore reattivo a larghezza fissa.
Tieni presente che la sua larghezza ( max-width) cambierà su diverse dimensioni dello schermo:
|
Extra piccolo <576px |
Piccolo ≥576px |
Medio ≥768px |
Grande ≥992px |
Extra grande ≥1200px |
|
|---|---|---|---|---|---|
| larghezza massima | 100% | 540px | 720px | 960px | 1140px |
Apri l'esempio seguente e ridimensiona la finestra del browser per vedere che la larghezza del contenitore cambierà in diversi punti di interruzione:
Esempio
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Contenitore per liquidi
Usa la .container-fluidclasse per creare un contenitore a larghezza intera, che occuperà sempre l'intera larghezza dello schermo ( widthè sempre 100%):
Esempio
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Imbottitura del contenitore
Per impostazione predefinita, i contenitori hanno un riempimento sinistro e destro di 15px, senza riempimento superiore o inferiore. Pertanto, utilizziamo spesso utilità di spaziatura , come spaziatura interna e margini aggiuntivi per renderli ancora migliori. Ad esempio, .pt-3significa "aggiungi un riempimento superiore di 16px":
Esempio
<div class="container pt-3"></div>
Imparerai molto di più sulle utilità di spaziatura, nel nostro capitolo BS4 Utilities .
Bordo e colore del contenitore
Insieme ai contenitori vengono spesso utilizzate anche altre utilità, come bordi e colori:
Esempio
La mia prima pagina Bootstrap
Questo contenitore ha un bordo e alcune imbottiture e margini extra.
La mia prima pagina Bootstrap
Questo contenitore ha un colore di sfondo scuro e un testo bianco e alcuni margini e spazi interni aggiuntivi.
La mia prima pagina Bootstrap
Questo contenitore ha un colore di sfondo blu e un testo bianco e alcuni margini e spazi interni aggiuntivi.
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
Imparerai molto di più sui colori e sulle utilità per i bordi, nel nostro Capitolo Colori BS4 e Capitolo Utilità BS4 .
Contenitori reattivi
Puoi anche utilizzare le .container-sm|md|lg|xlclassi per creare contenitori reattivi.
Il max-widthdel contenitore cambierà su diverse dimensioni dello schermo/viewport:
| Classe |
Extra piccolo <576px |
Piccolo ≥576px |
Medio ≥768px |
Grande ≥992px |
Extra grande ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
Esempio
<div class="container-sm">.container-sm</div>
<div
class="container-md">.container-md</div>
<div
class="container-lg">.container-lg</div>
<div
class="container-xl">.container-xl</div>
Lo sapevate?
W3.CSS è un'ottima alternativa a Bootstrap 4.
W3.CSS è più piccolo, più veloce e più facile da usare.
Se vuoi imparare W3.CSS, vai al nostro Tutorial W3.CSS .