Bootstrap 5 konteinerit

Bootstrap 5 konteinerit

Edellisessä luvussa oppisit, että Bootstrap tarvitsee sisäänrakennetut elementit, jotta se voi käsitellä sivuston sisältöä.

Konttiin täytämme sisältöä, ja käytettävissä on kaksi konttiluokkaa:

  • .container luokka tarjoaa vastaanottavuuden mukaisen, kiinteän leveyden kontin
  • .container-fluid luokka tarjoaa täyden leveyden kontin, joka kattaa koko näkymän leveyden

Kiinteä kontti

käyttää .container luokka luo vastaanottavuuden mukaisen, kiinteän leveyden kontin.

Huomaa, että sen leveys (max-widthmuuttuu eri näytönkoolissa:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Erittäin suuri
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

Avaa seuraava esimerkki ja muuta selaimen ikkunankokoa, jotta voit nähdä kontin leveyden muuttuvan eri jakopisteissä:

Esimerkki

<div class="container"></div>
  <h1>Ensimmäinen Bootstrap-sivuni</h1>
  <p>Tämä on joitakin tekstejä.</p>
</div>

Kokeile itse

XXL jakopiste (≥1400px) on lisätty Bootstrap 5:ssä, kun taas Bootstrap 4:ssä suurin jakopiste on erittäin suuri (≥1200px).

virtuaalinen kontti

käyttää .container-fluid luokka luo täyden leveyden kontin, joka kattaa aina koko näytön leveyden (leveys aina 100%）：

Esimerkki

<div class="container-fluid"></div>
  <h1>Ensimmäinen Bootstrap-sivuni</h1>
  <p>Tämä on joitakin tekstejä.</p>
</div>

Kokeile itse

konttipäivitys

Oletuksena kontti sisältää vasemman ja oikean yläpeitön (vasemman ja oikean sisätilan), mutta ei ylä- tai alapeittoa (ylä- ja alasäädöksiä). Siksi käytämme usein tilavuus työkalut（työkalut），kuten ylimääräistä ylä- ja alapeittoa sekä reunaviivoja, jotta ne näyttäisivät paremmalta. Esimerkiksi:.pt-5 tarkoittaa "lisätä suurenyläpeitto：

Esimerkki

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

Kokeile itse

Konttien reunat ja värit

Muut työkalut, kuten reunat ja värit, käytetään usein konttien kanssa:

Esimerkki

<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>

Kokeile itse

Myöhemmin luvuissa opit lisää väreistä ja reunavälineistä.

vastauskykyisiä kontteja

Voit myös käyttää .container-sm|md|lg|xl luokka määrittää, milloin kontti tulisi vastata.

containerin max-width Muuttuu eri näyttökokojen ja näkymien mittasuhteissa:

Luokka Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥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

Esimerkki

<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>

Kokeile itse