Verkkojärjestelmä
Käytä tehokasta mobiili-first flexbox -ruudukkoamme rakentaaksesi kaikenmuotoisia ja -kokoisia asetteluja kahdentoista sarakejärjestelmän, viiden oletusarvoisen reagoivan tason, Sass-muuttujien ja -sekoitusten sekä kymmenien ennalta määritettyjen luokkien ansiosta.
Kuinka se toimii
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 katsaus ruudukon muodostamiseen.
Oletko uusi tai tuntematon flexbox? Lue tästä CSS Tricks flexbox -oppaasta tausta, terminologia, ohjeet ja koodinpätkät.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Yllä oleva esimerkki luo kolme yhtä leveää saraketta pienille, keskisuurille, suurille ja erittäin suurille laitteille käyttämällä ennalta määritettyjä ruudukkoluokkia. Nämä sarakkeet on keskitetty sivulle ylätason kanssa .container
.
Jaoteltuna se toimii seuraavasti:
- Säilöillä voit keskittää ja pehmustaa sivustosi sisältöä vaakasuunnassa. Käytä
.container
responsiiviseen pikselin leveyteen tai.container-fluid
kaikkiinwidth: 100%
näkymä- ja laitekokoihin. - Rivit ovat sarakkeiden kääreitä. Jokaisessa sarakkeessa on vaakasuora
padding
(kutsutaan kouruksi) niiden välisen tilan ohjaamiseksi. Tämänpadding
jälkeen riveillä on negatiivinen marginaali. Tällä tavalla kaikki sarakkeiden sisältö tasataan visuaalisesti vasemmalla puolella. - Ruudukkoasettelussa sisältö on sijoitettava sarakkeiden sisään, ja vain sarakkeet voivat olla rivien välittömiä jälkeläisiä.
- Flexboxin ansiosta ruudukon sarakkeet, joissa ei ole määritettyä, asettuvat
width
automaattisesti saman levyisiksi sarakkeiksi. Esimerkiksi neljä kappaletta.col-sm
on automaattisesti 25 % leveä pienestä keskeytyskohdasta ylöspäin. Katso lisää esimerkkejä automaattisen asettelun sarakkeiden osiosta. - Sarakeluokat osoittavat, kuinka monta saraketta haluat käyttää riviä kohden olevista 12 sarakkeesta. Joten jos haluat poikki kolme yhtä leveää saraketta, voit käyttää
.col-4
. - Sarakkeet
width
s on asetettu prosentteina, joten ne ovat aina juoksevia ja mitoitettuja suhteessa yläelementtiin. - Sarakkeissa on vaakasuuntainen
padding
kourujen luominen yksittäisten sarakkeiden väliin, mutta voit poistaamargin
rivit japadding
sarakkeet.no-gutters
-painikkeella.row
. - Jotta ruudukko saadaan reagoimaan, siinä on viisi ruudukon keskeytyspistettä, yksi kullekin reagoivalle keskeytyspisteelle : kaikki keskeytyskohdat (erittäin pieni), pieni, keskikokoinen, suuri ja erittäin suuri.
- Ruudukon keskeytyspisteet perustuvat vähimmäisleveyteen mediakyselyihin, mikä tarkoittaa, että ne koskevat tätä yhtä keskeytyspistettä ja kaikkia sen yläpuolella olevia (esim.
.col-sm-4
koskee pieniä, keskisuuria, suuria ja erittäin suuria laitteita, mutta ei ensimmäistäxs
keskeytyspistettä). - Voit käyttää ennalta määritettyjä ruudukkoluokkia (kuten
.col-4
) tai Sass-sekoituksia semanttisempaa merkintää varten.
Ole tietoinen flexboxin rajoituksista ja virheistä , kuten kyvyttömyydestä käyttää joitain HTML-elementtejä flex-säiliöinä .
Ruudukkovaihtoehdot
Vaikka Bootstrap käyttää kirjaimia em
s tai rem
s useimpien koon määrittämiseen, px
s-kirjainta käytetään ruudukon keskeytyspisteisiin ja säilön leveyksiin. Tämä johtuu siitä, että näkymän leveys on pikseleinä, eikä se muutu fontin koon mukaan .
Katso kätevästä taulukosta, miten Bootstrap-grid-järjestelmän osat toimivat useissa laitteissa.
Erittäin pieni <576px |
Pieni ≥ 576 pikseliä |
Keskikokoinen ≥ 768 kuvapistettä |
Suuri ≥ 992 pikseliä |
Erittäin suuri ≥1200px |
|
---|---|---|---|---|---|
Säiliön enimmäisleveys | Ei mitään (automaattinen) | 540 pikseliä | 720 pikseliä | 960 pikseliä | 1140 pikseliä |
Luokan etuliite | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# sarakkeita | 12 | ||||
Kourujen leveys | 30 kuvapistettä (15 kuvapistettä sarakkeen kummallakin puolella) | ||||
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
- xl
. Lisää mikä tahansa määrä yksikköä sisältämättömiä luokkia jokaiselle tarvitsemasi keskeytyspisteelle, ja jokainen sarake on samanleveinen.
<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>
Samanleveä monirivinen
Luo yhtä leveitä sarakkeita, jotka kattavat useita rivejä lisäämällä kohtaan, .w-100
jossa haluat sarakkeiden katkeavan uudelle riville. Tee tauoista responsiivisia yhdistämällä .w-100
niihin joitakin responsiivisia näyttöapuohjelmia .
Oli Safari flexbox -virhe , joka esti tätä toimimasta ilman nimenomaista flex-basis
tai border
. Vanhemmille selainversioille on olemassa kiertotapoja, mutta niiden ei pitäisi olla tarpeellisia, jos kohdeselaimesi eivät kuulu bugien versioihin.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</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ää viisi 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>
Vesikourut
Vesikourut voidaan säätää herkästi keskeytyskohtakohtaisilla pehmusteilla ja negatiivisen marginaalin hyödyllisyysluokilla. Jos haluat muuttaa tietyn rivin vesikourut, yhdistä negatiivinen marginaaliapuohjelma s:ssä .row
ja vastaava pehmusteapuohjelma .col
. Myös .container
ylätasoa .container-fluid
on ehkä säädettävä ei-toivotun ylivuodon välttämiseksi käyttämällä uudelleen vastaavaa pehmusteohjelmaa.
Tässä on esimerkki Bootstrap-ruudukon mukauttamisesta suuressa ( lg
) keskeytyskohdassa ja sen yläpuolella. Olemme lisänneet .col
pehmustetta painikkeella .px-lg-5
, estäneet .mx-lg-n5
sen yläosassa .row
ja säätäneet sitten .container
käärettä .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</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. Normaalit .col-*
luokat koskevat yksittäisiä sarakkeita (esim. .col-md-4
), kun taas rivisarakkeiden luokat asetetaan ylätason .row
pikakuvakkeeksi.
Näiden rivisarakkeiden luokkien avulla voit nopeasti luoda perusruudukon asetteluja tai hallita korttiasetteluja.
<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-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>
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);
}
}
Tasaus
Käytä flexbox-kohdistusapuohjelmia sarakkeiden kohdistamiseen pysty- ja vaakasuunnassa. Internet Explorer 10-11 ei tue joustavien kohteiden pystysuuntaista kohdistusta, kun joustavassa säiliössä on min-height
alla olevan kuvan mukainen. Katso lisätietoja kohdasta Flexbugs #3.
Pystysuuntainen kohdistus
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Vaakasuora kohdistaminen
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Ei vesikouruja
Ennalta määritettyjen ruudukkoluokkien sarakkeiden väliset kourut voidaan poistaa .no-gutters
. Tämä poistaa negatiiviset margin
s:t kaikista välittömistä alatason sarakkeista .row
ja vaakasuuntaiset .padding
Tässä on lähdekoodi näiden tyylien luomiseen. Huomaa, että sarakkeiden ohitukset koskevat vain ensimmäisiä alatason sarakkeita ja ne kohdistetaan määritteen valitsimen kautta . Vaikka tämä luo tarkemman valitsimen, sarakkeiden täyttöä voidaan silti muokata edelleen välitysapuohjelmilla .
Tarvitsetko reunasta reunaan -suunnittelua? Pudota vanhempi .container
tai .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Käytännössä se näyttää tältä. Huomaa, että voit jatkaa tämän käyttöä kaikkien muiden ennalta määritettyjen ruudukkoluokkien kanssa (mukaan lukien sarakkeiden leveydet, reagoivat tasot, uudelleenjärjestelyt ja muut).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Sarakkeen kääre
Jos yhdelle riville sijoitetaan enemmän kuin 12 saraketta, jokainen ylimääräisten sarakkeiden ryhmä rivittyy yhtenä yksikkönä uudelle riville.
Koska 9 + 4 = 13 > 12, tämä 4 sarakkeen levyinen div kääritään uudelle riville yhtenä yhtenäisenä yksikkönä.
Seuraavat sarakkeet jatkavat uutta riviä pitkin.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Sarake katkeaa
Sarakkeiden katkaiseminen uudelle riville flexboxissa vaatii pienen hakkeroinnin: lisää elementti uudelle riville, width: 100%
missä haluat rivittää sarakkeet. Normaalisti tämä suoritetaan useilla .row
s:illä, mutta kaikki toteutustavat eivät voi ottaa huomioon tätä.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Voit myös käyttää tätä taukoa tietyissä keskeytyspisteissä responsiivisten näyttöapuohjelmiemme avulla .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Järjestetään uudelleen
Tilaa luokat
Käytä .order-
luokkia hallitaksesi sisältösi visuaalista järjestystä . Nämä luokat ovat responsiivisia, joten voit asettaa order
keskeytyskohdan (esim. .order-1.order-md-2
). Sisältää tuen 1
läpikäymiselle 12
kaikilla viidellä ruudukkotasolla.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
On myös responsiivisia .order-first
ja .order-last
luokkia, jotka muuttavat order
elementin soveltamista order: -1
ja order: 13
( order: $columns + 1
), vastaavasti. Nämä luokat voidaan myös tarvittaessa sekoittaa numeroituihin .order-*
luokkiin.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Sarakkeiden offsetointi
Voit siirtää ruudukon sarakkeita kahdella tavalla: responsiiviset .offset-
ruudukkoluokat ja marginaaliapuohjelmamme . Ruudukkoluokat on mitoitettu vastaamaan sarakkeita, kun taas marginaalit ovat hyödyllisempiä nopeissa asetteluissa, joissa siirtymän leveys vaihtelee.
Offset-luokat
Siirrä sarakkeita oikealle .offset-md-*
luokkien avulla. Nämä luokat lisäävät sarakkeen vasenta marginaalia *
sarakkeilla. Esimerkiksi .offset-md-4
siirtyy .col-md-4
neljän sarakkeen yli.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Responsiivisten keskeytyspisteiden sarakkeen tyhjentämisen lisäksi saatat joutua nollaamaan siirtymät. Katso tämä toiminnassa ruudukkoesimerkissä .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Marginaaliset apuohjelmat
Kun olet siirtynyt flexboxiin v4:ssä, voit käyttää marginaaliapuohjelmia, kuten .mr-auto
pakottaa sisarussarakkeet poispäin toisistaan.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
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-9">
Level 1: .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 mixins
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: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
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();
@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-ruudukkomuuttujiemme 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: 30px !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. Tämä tulostaa aivan uuden joukon ennalta määritettyjä ruudukkoluokkia sarakkeiden leveyksille, 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 %
).