Bootstrap Grid System
Bootstrap Grid System
Bootstrap se roosterstelsel laat tot 12 kolomme oor die bladsy toe.
As jy nie al 12 kolomme individueel wil gebruik nie, kan jy die kolomme saam groepeer om groter kolomme te skep:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Bootstrap se roosterstelsel reageer, en die kolomme sal herrangskik na gelang van die skermgrootte: Op 'n groot skerm lyk dit dalk beter met die inhoud wat in drie kolomme georganiseer is, maar op 'n klein skerm sal dit beter wees as die inhouditems gestapel is bo-op mekaar.
Wenk: Onthou dat roosterkolomme tot twaalf vir 'n ry moet optel. Meer as dit, kolomme sal gestapel word, ongeag die uitsigpoort.
Roosterklasse
Die Bootstrap-roosterstelsel het vier klasse:
xs(vir fone - skerms minder as 768px breed)sm(vir tablette - skerms gelyk aan of groter as 768px breed)md(vir klein skootrekenaars - skerms gelyk aan of groter as 992px breed)lg(vir skootrekenaars en rekenaars - skerms gelyk aan of groter as 1200px breed)
Die klasse hierbo kan gekombineer word om meer dinamiese en buigsame uitlegte te skep.
Wenk: Elke klas skaal op, so as jy dieselfde breedtes vir xs en sm wil stel, hoef jy net xs te spesifiseer.
Roosterstelselreëls
Sommige Bootstrap-roosterstelselreëls:
- Rye moet binne 'n
.container(vaste breedte) of.container-fluid(volle breedte) geplaas word vir behoorlike belyning en opvulling - Gebruik rye om horisontale groepe kolomme te skep
- Inhoud moet binne kolomme geplaas word, en slegs kolomme mag onmiddellike kinders van rye wees
- Vooraf gedefinieerde klasse soos
.rowen.col-sm-4is beskikbaar om vinnig roosteruitlegte te maak - Kolomme skep geute (gapings tussen kolominhoud) via vulling. Daardie opvulling word verreken in rye vir die eerste en laaste kolom via negatiewe marge op
.rows - Roosterkolomme word geskep deur die aantal 12 beskikbare kolomme wat jy wil span te spesifiseer. Byvoorbeeld, drie gelyke kolomme sal drie gebruik
.col-sm-4 - Kolomwydtes is in persentasie, so hulle is altyd vloeibaar en groot relatief tot hul ouerelement
Basiese struktuur van 'n selflaai-rooster
Die volgende is 'n basiese struktuur van 'n Bootstrap-rooster:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
Dus, om die uitleg te skep wat jy wil hê, skep 'n houer ( <div
class="container">). Skep dan 'n ry ( <div
class="row">). Voeg dan die verlangde aantal kolomme by (etikette met toepaslike
.col-*-*klasse). Let daarop dat getalle in .col-*-*altyd 12 vir elke ry moet optel.
Grid Opsies
Die volgende tabel som op hoe die Bootstrap-roosterstelsel oor verskeie toestelle werk:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Voorbeelde
Die volgende hoofstukke toon voorbeelde van roosterstelsels vir verskillende toestelle: