Verkkojärjestelmä
Käytä tehokasta mobiili-first flexbox -ruudukkoamme rakentaaksesi kaikenmuotoisia ja -kokoisia asetteluja kahdentoista sarakejärjestelmän, kuuden oletusarvoisen reagoivan tason, Sass-muuttujien ja -sekoitusten sekä kymmenien ennalta määritettyjen luokkien ansiosta.
Esimerkki
Bootstrapin ruudukkojärjestelmä käyttää useita säiliöitä, rivejä ja sarakkeita sisällön asettelemiseen ja tasaamiseen. Se on rakennettu flexboxilla ja on täysin reagoiva. Alla on esimerkki ja syvällinen selitys siitä, kuinka verkkojärjestelmä muodostuu.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Yllä oleva esimerkki luo kolme yhtä leveää saraketta kaikille laitteille ja näkymäporteille käyttämällä ennalta määritettyjä ruudukkoluokkia. Nämä sarakkeet on keskitetty sivulle ylätason kanssa .container
.
Kuinka se toimii
Jaoteltuna ruudukkojärjestelmä muodostuu seuraavasti:
-
Ruudukkomme tukee kuutta reagoivaa keskeytyspistettä . Katkaisupisteet perustuvat
min-width
mediakyselyihin, mikä tarkoittaa, että ne vaikuttavat siihen ja kaikkiin sen yläpuolella oleviin (esim..col-sm-4
koskeesm
,md
,lg
,xl
, jaxxl
). Tämä tarkoittaa, että voit hallita säilön ja sarakkeen kokoa ja toimintaa kunkin keskeytyskohdan mukaan. -
Säiliöt keskittävät ja pehmustavat sisältösi vaakasuunnassa. Käytä
.container
responsiivista pikselin leveyttä,.container-fluid
kaikissawidth: 100%
kuvaporteissa ja laitteissa tai reagoivaa säiliötä (esim..container-md
) nestemäisen ja pikselinleveyden yhdistelmälle. -
Rivit ovat sarakkeiden kääreitä. Jokaisessa sarakkeessa on vaakasuora
padding
(kutsutaan kouruksi) niiden välisen tilan ohjaamiseksi. Tämäpadding
torjutaan riveillä negatiivisilla marginaaleilla varmistaakseen, että sarakkeiden sisältö on visuaalisesti kohdistettu vasemmalle puolelle. Rivit tukevat myös muokkausluokkia, joilla voidaan soveltaa yhtenäisesti sarakkeiden kokoa , ja kouruluokkia sisältösi välien muuttamiseen. -
Sarakkeet ovat uskomattoman joustavia. Yhdellä rivillä on 12 mallisaraketta, joten voit luoda erilaisia elementtien yhdistelmiä, jotka kattavat minkä tahansa määrän sarakkeita. Sarakeluokat osoittavat span mallisarakkeiden lukumäärän (esim.
col-4
ulottuu neljä).width
s on asetettu prosentteina, joten sinulla on aina sama suhteellinen koko. -
Vesikourut ovat myös herkkiä ja muokattavissa. Kouruluokat ovat saatavilla kaikissa keskeytyspisteissä, kaikki samankokoisina kuin marginaalimme ja pehmustevälimme . Vaihda vaakakourut
.gx-*
luokilla, pystykourut -painikkeella.gy-*
tai kaikki kourut.g-*
luokilla..g-0
on saatavilla myös vesikourujen poistamiseen. -
Sass-muuttujat, kartat ja sekoitukset syöttävät verkkoon. Jos et halua käyttää ennalta määritettyjä ruudukkoluokkia Bootstrapissa, voit käyttää grid-lähdettä Sass luodaksesi omasi semanttisemmalla merkinnällä. Sisällytämme myös joitain mukautettuja CSS-ominaisuuksia käyttääksesi näitä Sass-muuttujia, mikä lisää joustavuutta sinulle.
Ole tietoinen flexboxin rajoituksista ja virheistä , kuten kyvyttömyydestä käyttää joitain HTML-elementtejä flex-säiliöinä .
Ruudukkovaihtoehdot
Bootstrapin ruudukkojärjestelmä voi mukautua kaikkien kuuden oletusarvoisen keskeytyskohdan ja kaikkien mukautettavien keskeytyspisteiden kesken. Kuusi oletusruudukkotasoa ovat seuraavat:
- Erittäin pieni (xs)
- Pieni (sm)
- Keskikokoinen (md)
- Suuri (lg)
- Erittäin suuri (xl)
- Erittäin erittäin suuri (xxl)
Kuten edellä todettiin, jokaisella näistä keskeytyspisteistä on oma säilönsä, yksilöllinen luokkaetuliite ja muuttajat. Näin ruudukko muuttuu näiden keskeytyspisteiden välillä:
xs <576px |
sm ≥ 576px |
md ≥ 768px |
lg ≥ 992 kuvapistettä |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Säiliömax-width |
Ei mitään (automaattinen) | 540 pikseliä | 720 pikseliä | 960 pikseliä | 1140 pikseliä | 1320 pikseliä |
Luokan etuliite | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# sarakkeita | 12 | |||||
Kourujen leveys | 1,5 rem (.75 rem vasemmalla ja oikealla) | |||||
Räätälöidyt vesikourut | Joo | |||||
Pesimäinen | Joo | |||||
Sarakkeiden järjestys | Joo |
Automaattinen asettelu sarakkeet
Hyödynnä keskeytyskohtakohtaisia sarakeluokkia sarakkeiden koon helpottamiseen ilman eksplisiittistä numeroitua luokkaa, kuten .col-sm-6
.
Sama leveys
Tässä on esimerkiksi kaksi ruudukkoasettelua, jotka koskevat jokaista laitetta ja näkymää, alkaen xs
- xxl
. Lisää mikä tahansa määrä yksikköä sisältämättömiä luokkia jokaiselle tarvitsemasi keskeytyspisteelle, niin jokainen sarake on sama leveä.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Yhden sarakkeen leveyden asettaminen
Flexbox-ruudukon sarakkeiden automaattinen asettelu tarkoittaa myös sitä, että voit määrittää yhden sarakkeen leveyden ja saada sisarussarakkeiden kokoa automaattisesti muuttamaan sen ympärillä. Voit käyttää ennalta määritettyjä ruudukkoluokkia (kuten alla näkyy), ruudukkosekoituksia tai rivin leveyksiä. Huomaa, että muiden sarakkeiden koko muuttuu keskisarakkeen leveydestä riippumatta.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Muuttuvan leveyden sisältö
Käytä col-{breakpoint}-auto
luokkia sarakkeiden kokoamiseen niiden sisällön luonnollisen leveyden perusteella.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Responsiiviset luokat
Bootstrapin ruudukko sisältää kuusi tasoa ennalta määritettyjä luokkia monimutkaisten reagoivien asettelujen rakentamiseen. Mukauta sarakkeiden kokoa erittäin pienissä, pienissä, keskikokoisissa, suurissa tai erittäin suurissa laitteissa haluamallasi tavalla.
Kaikki keskeytyskohdat
Käytä luokkia .col
ja ruudukoille, jotka ovat samoja pienimmistä laitteista suurimpaan. .col-*
Määritä numeroitu luokka, kun tarvitset erityisen kokoisen sarakkeen; muuten pysy vapaasti .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Pinottu vaakasuoraan
Käyttämällä yhtä .col-sm-*
luokkien sarjaa voit luoda perusruudukkojärjestelmän, joka alkaa pinottuna ja muuttuu vaakasuoraksi pienestä keskeytyskohdasta ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Sekoita ja sovita
Etkö halua, että sarakkeet vain pinoutuvat joihinkin ruudukkotasoihin? Käytä eri luokkien yhdistelmää kullekin tasolle tarpeen mukaan. Katso alla oleva esimerkki saadaksesi paremman käsityksen siitä, miten se kaikki toimii.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Rivi sarakkeet
Käytä responsiivisia .row-cols-*
luokkia määrittääksesi nopeasti sarakkeiden lukumäärän, jotka näyttävät parhaiten sisällön ja asettelun. Kun normaalit .col-*
luokat koskevat yksittäisiä sarakkeita (esim. .col-md-4
), rivisarakkeiden luokat on asetettu ylätason .row
oletusarvoksi sisältyville sarakkeille. .row-cols-auto
Voit antaa sarakkeille niiden luonnollisen leveyden .
Näiden rivisarakeluokkien avulla voit luoda nopeasti perusruudukon asetteluja tai hallita korttiasetteluja ja ohittaa niitä tarvittaessa saraketasolla.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
Voit myös käyttää mukana tulevaa Sass-mixiiniä row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Pesivä
Jos haluat upottaa sisältösi oletusruudukkoon, lisää uusi .row
ja joukko .col-sm-*
sarakkeita olemassa olevaan .col-sm-*
sarakkeeseen. Sisäkkäisten rivien tulee sisältää sarja sarakkeita, joiden yhteenlaskettu summa on enintään 12 (kaikkia 12 käytettävissä olevaa saraketta ei vaadita).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass
Kun käytät Bootstrapin Sass-lähdetiedostoja, voit luoda mukautettuja, semanttisia ja reagoivia sivuasetteluja käyttämällä Sass-muuttujia ja mixinejä. Ennalta määritetyt ruudukkoluokat käyttävät näitä samoja muuttujia ja sekoituksia tarjotakseen koko sarjan käyttövalmiita luokkia nopeita reagoivia asetteluja varten.
Muuttujat
Muuttujat ja kartat määrittävät sarakkeiden lukumäärän, kourujen leveyden ja mediakyselypisteen, josta kelluvat sarakkeet aloitetaan. Käytämme näitä edellä dokumentoitujen ennalta määritettyjen ruudukkoluokkien luomiseen sekä alla lueteltuihin mukautettuihin mixineihin.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Seokset
Mixiinejä käytetään yhdessä ruudukkomuuttujien kanssa semanttisen CSS:n luomiseen yksittäisille ruudukon sarakkeille.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Käyttöesimerkki
Voit muokata muuttujia omiksi mukautetuiksi arvoihisi tai vain käyttää mixinejä niiden oletusarvojen kanssa. Tässä on esimerkki oletusasetusten käyttämisestä kahden sarakkeen asettelun luomiseen, jossa on väli.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Ruudukon mukauttaminen
Sisäänrakennettujen Sass-ruudukkomuuttujien ja -karttojen avulla on mahdollista mukauttaa ennalta määritettyjä ruudukkoluokkia täysin. Muuta tasojen määrää, mediakyselyn mittoja ja säilön leveyksiä – käännä sitten uudelleen.
Pylväät ja vesikourut
Ruudukon sarakkeiden määrää voidaan muuttaa Sass-muuttujien avulla. $grid-columns
käytetään luomaan kunkin yksittäisen sarakkeen leveydet (prosentteina) samalla kun $grid-gutter-width
se määrittää sarakkeen kourujen leveyden.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Ruudukkotasot
Itse sarakkeiden lisäksi voit myös muokata ruudukkotasojen määrää. Jos halusit vain neljä ruudukkotasoa, päivität $grid-breakpoints
ja $container-max-widths
johonkin tämän kaltaiseen:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Kun teet muutoksia Sass-muuttujiin tai -karttoihin, sinun on tallennettava muutokset ja käännettävä uudelleen. Näin tulostetaan aivan uudet ennalta määritettyjä ruudukkoluokkia sarakkeiden leveydelle, siirtymille ja järjestykselle. Myös reagoivat näkyvyysapuohjelmat päivitetään käyttämään mukautettuja keskeytyskohtia. Varmista, että asetat ruudukon arvot px
(ei rem
, em
, tai %
).