Bootstrap 4 houers
Houers
U het uit die vorige hoofstuk geleer dat Bootstrap 'n bevat-element benodig om werfinhoud te verpak.
Houers word gebruik om die inhoud binne-in hulle te vul, en daar is twee houerklasse beskikbaar:
- Die
.containerklas bied 'n responsiewe houer met vaste breedte - Die
.container-fluidklas bied 'n volle breedte houer wat oor die hele breedte van die uitsigpoort strek
Vaste houer
Gebruik die .containerklas om 'n responsiewe houer met vaste breedte te skep.
Let daarop dat sy breedte ( max-width) op verskillende skermgroottes sal verander:
|
Ekstra klein <576px |
Klein ≥576 px |
Medium ≥768 px |
Groot ≥992px |
Ekstra groot ≥1200px |
|
|---|---|---|---|---|---|
| maksimum breedte | 100% | 540 px | 720 px | 960px | 1140 px |
Maak die voorbeeld hieronder oop en verander die grootte van die blaaiervenster om te sien dat die houerwydte by verskillende breekpunte sal verander:
Voorbeeld
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Vloeistofhouer
Gebruik die .container-fluidklas om 'n volle breedte houer te skep wat altyd oor die hele breedte van die skerm sal strek ( widthis altyd 100%):
Voorbeeld
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Houervulling
Houers het by verstek 15px linker- en regtervulling, met geen bo- of ondervulling nie. Daarom gebruik ons dikwels spasiëringshulpmiddels , soos ekstra vulling en kantlyne om dit nog beter te laat lyk. Beteken byvoorbeeld .pt-3"voeg 'n boonste opvulling van 16px by":
Voorbeeld
<div class="container pt-3"></div>
Jy sal baie meer leer oor spasiëringsnutsprogramme in ons BS4 Utilities Hoofstuk .
Houerrand en kleur
Ander hulpmiddels, soos grense en kleure, word ook dikwels saam met houers gebruik:
Voorbeeld
My eerste selflaaiblad
Hierdie houer het 'n rand en 'n paar ekstra vulling en kantlyne.
My eerste selflaaiblad
Hierdie houer het 'n donker agtergrondkleur en 'n wit teks, en 'n paar ekstra opvulling en kantlyne.
My eerste selflaaiblad
Hierdie houer het 'n blou agtergrondkleur en 'n wit teks, en 'n paar ekstra opvulling en kantlyne.
<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>
Jy sal baie meer leer oor kleure en randhulpmiddels, in ons BS4 Kleure Hoofstuk en BS4 Nuts Hoofstuk .
Responsiewe houers
Jy kan ook die .container-sm|md|lg|xlklasse gebruik om responsiewe houers te skep.
Die max-widthvan die houer sal verander op verskillende skermgroottes/kykpoorte:
| Klas |
Ekstra klein <576px |
Klein ≥576 px |
Medium ≥768 px |
Groot ≥992px |
Ekstra groot ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540 px | 720 px | 960px | 1140 px |
.container-md |
100% | 100% | 720 px | 960px | 1140 px |
.container-lg |
100% | 100% | 100% | 960px | 1140 px |
.container-xl |
100% | 100% | 100% | 100% | 1140 px |
Voorbeeld
<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>
Het jy geweet?
W3.CSS is 'n uitstekende alternatief vir Bootstrap 4.
W3.CSS is kleiner, vinniger en makliker om te gebruik.
As jy W3.CSS wil leer, gaan na ons W3.CSS-tutoriaal .