Bootstrap 5 Gitter: Ekstremt Store Enheder
- Forrige side BS5 Gitter Large
- Næste side BS5 Gitter XXL
Store enheder netværks eksempel
XSmall | Small | Medium | Large | Extra Large | XXL | |
---|---|---|---|---|---|---|
Klassepræfiks | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
Skærmbredde | <576px | >=576px | >=768px | >=992px | >=1200px | >=1400px |
I det forrige kapitel viste vi et netværks eksempel, der indeholder klasser til små, mellemstore og store enheder. Vi brugte to div'er (kolonner) og foretog en 25%/75% opdeling på små enheder, en 50%/50% opdeling på mellemstore enheder og en 33%/66% opdeling på store enheder:
<div class="col-sm-3 col-md-6 col-lg-4">....</div> <div class="col-sm-9 col-md-6 col-lg-8">....</div>
Men på xlarge-enheder kan et design med 20% / 80% opdeling være bedre.
Store enheder defineres som skærmbredde på 1200 pixel og derover。
For xlarge-enheder vil vi bruge .col-xl-*
Klasse:
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
Følgende eksempel vil føre til opdeling i 25%/75% på små enheder, 50%/50% på mellemstore enheder, 33%/66% på store enheder samt 20%/80% opdeling på xlarge og xxlarge enheder. På ekstremt små enheder vil det automatisk stille sig op (100%):
Eksempel
<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2"> <p>World Wide Fund for Nature (WWF), grundlagt den 29. april 1961, har pandaen som sit symbol...</p> </div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10"> <p>1980, WWF kom officielt til Kina, inviteret af den kinesiske regering til at udføre beskyttelsesarbejde for pandaer og deres levesteder...</p> </div> </div> </div>
Bemærk:sørg for, at summen altid er 12.
brug kun XLarge
i nedenstående eksempel specificerer vi kun .col-xl-6
klasser (uden .col-lg-*
,.col-md-*
og/eller .col-sm-*
)。 Dette betyder, at xlarge og xxlarge enheder vil blive opdelt i 50/50%. Men for store, mellemstore, små og ekstra små enheder vil de blive placeret lodret (100% bredde):
Eksempel
<div class="container-fluid"> <div class="row"> <div class="col-xl-6"> <p>World Wide Fund for Nature (WWF), grundlagt den 29. april 1961, har pandaen som sit symbol...</p> </div> <div class="col-xl-6"> <p>1980, WWF kom officielt til Kina, inviteret af den kinesiske regering til at udføre beskyttelsesarbejde for pandaer og deres levesteder...</p> </div> </div> </div>
automatisk layout kolonner
i Bootstrap 5 findes der en simpel måde at oprette ensbreddede kolonner for alle enheder: bare fra .col-xl-*
fjern tallene og brug kun på col-elementet .col-xl
klassen. Bootstrap vil identificere antallet af kolonner, og hver kolonne vil få samme bredde.
hvis skærmstørrelsenmindre end 1200pxkolonnerne vil blive placeret vandret:
<!-- To kolonner: på enheder over ultra-stor er 50% bredde --> <div class="row"> <div class="col-xl">1 af 2</div> <div class="col-xl">2 af 2</div> </div> <!-- Fire kolonner: på enheder over ultra-stor er 25% bredde --> <div class="row"> <div class="col-xl">1 af 4</div> <div class="col-xl">2 af 4</div> <div class="col-xl">3 af 4</div> <div class="col-xl">4 af 4</div> </div>
- Forrige side BS5 Gitter Large
- Næste side BS5 Gitter XXL