Bootstrap 5 Container

Bootstrap 5 Container

Fra det forrige kapitel lærte du, at Bootstrap kræver et element til at indpakke webstedets indhold.

Vi fylder indhold i containere, og der er to containerklasser tilgængelige:

  • .container klassen tilbyder en responsiv, fast bredde container
  • .container-fluid klassen tilbyder en fuld bredde container, der strækker sig over hele vinduet

fast bredde container

bruges .container klassen opretter en responsiv, fast bredde container.

Bemærk, dens bredde (max-width）ændrer sig på forskellige skærmsstørrelser:

Ekstra lille
<576px 		Lille
≥576px 		Mellem
≥768px 		Stor
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Åbn venligst nedenstående eksempel og juster browservinduet for at se, hvordan containerens bredde ændrer sig ved forskellige skærmstørrelser:

Eksempel

<div class="container">
  <h1>Min første Bootstrap-side</h1>
  <p>Dette er nogle tekst.</p>
</div>

Prøv det selv

XXL skærmbrud (≥1400px) er en ny tilføjelse i Bootstrap 5, mens den største skærmbrud i Bootstrap 4 er Extra large (≥1200px).

flydende container

bruges .container-fluid klassen opretter en fuld bredde container, som altid strækker sig over hele skærmens bredde (width altid 100%）：

Eksempel

<div class="container-fluid">
  <h1>Min første Bootstrap-side</h1>
  <p>Dette er nogle tekst.</p>
</div>

Prøv det selv

container padding

Som standard har containere venstre og højre padding (venstre og højre indrykning), ingen top eller bund padding (øvre og nedre indrykning). Derfor bruger vi ofte spacing værktøjer（brugbare funktioner），som ekstra padding og margin, for at gøre dem ser bedre ud. For eksempel,.pt-5 betyder "tilføj en stortop padding”：

Eksempel

<div class="container pt-5"></div>

Prøv det selv

Containerkanter og farver

Andre værktøjer, såsom kanter og farver, bruges ofte sammen med containere:

Eksempel

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

Prøv det selv

Du vil lære mere om farver og kantværktøjer i de efterfølgende kapitler.

Responsiv container

Du kan også bruge .container-sm|md|lg|xl klasser for at bestemme, hvornår en container skal reagere.

k容器的 max-width vil ændre sig på forskellige skærmskalaer/visningsport:

Klasser Ekstra lille
<576px		 Lille
≥576px		 Mellem
≥768px		 Stor
≥992px		 Ekstra stor
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

Eksempel

<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>
<div class="container-xxl">.container-xxl</div>

Prøv det selv