Sare sistema
Erabili gure mugikorrerako lehen flexbox sare indartsua forma eta tamaina guztietako diseinuak eraikitzeko hamabi zutabe-sistemari, bost erantzun-maila lehenetsiei, Sass aldagaiei eta mixinei eta aurrez definitutako dozenaka klaseri esker.
Nola dabil
Bootstrap-en sareta-sistemak edukiontzi, errenkada eta zutabe batzuk erabiltzen ditu edukia diseinatzeko eta lerrokatzeko. Flexbox -ekin eraikita dago eta guztiz sentikorra da. Jarraian adibide bat eta sarea nola elkartzen den aztertzen da.
Flexbox-en berri edo ez duzu ezagutzen? Irakurri CSS Tricks flexbox gida hau atzeko planoa, terminologia, jarraibideak eta kode zatiak ikusteko.
<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>
Goiko adibideak zabalera berdineko hiru zutabe sortzen ditu gailu txiki, ertain, handi eta handietan, aurrez definitutako sareta-klaseak erabiliz. Zutabe horiek orrialdean zentratuta daude gurasoarekin .container
.
Apurtuz, hona nola funtzionatzen duen:
- Edukiontziek zure guneko edukiak erdiratu eta horizontalki betetzeko baliabidea eskaintzen dute. Erabili
.container
pixelaren zabalera sentikorretarako edo bistaratze.container-fluid
etawidth: 100%
gailuen tamaina guztietan. - Errenkadak zutabeentzako bilgarriak dira. Zutabe bakoitzak horizontala du
padding
(gutuna deritzona) haien arteko espazioa kontrolatzeko. Ondorenpadding
, marjina negatiboa duten errenkadetan kontrajartzen da. Horrela, zure zutabeetako eduki guztia ezkerreko aldean lerrokatzen da bisualki. - Sare-diseinu batean, edukia zutabeen barruan kokatu behar da eta zutabeak soilik izan daitezke errenkaden berehalako seme-alabak.
- Flexbox-i esker, zehaztu gabeko sareta-zutabeek
width
automatikoki zabalera berdineko zutabe gisa diseinatuko dituzte. Adibidez, lau instantzia.col-sm
bakoitzak automatikoki % 25eko zabalera izango du eten-puntu txikitik aurrera. Ikusi diseinu automatikoko zutabeen atala adibide gehiago lortzeko. - Zutabe klaseek errenkada bakoitzeko 12 zutabeetatik erabili nahi dituzun zutabe kopurua adierazten dute. Beraz, zabalera berdineko hiru zutabe nahi badituzu, erabil dezakezu
.col-4
. - Zutabeak
width
ehunekotan ezartzen dira, beraz, beti fluidoak eta tamainakoak dira beren elementu nagusiarekiko. - Zutabeek horizontala dute
padding
zutabe indibidualen arteko erretenak sortzeko, hala ere,margin
errenkadetatik etapadding
zutabeetatik.no-gutters
kendu dezakezu.row
. - Sareak erantzuteko, bost sareko eten-puntu daude, bat erantzuteko eten -puntu bakoitzeko : eten-puntu guztiak (txikiak), txikiak, ertainak, handiak eta oso handiak.
- Sarearen eten-puntuak zabalera minimoko multimedia-kontsultetan oinarritzen dira, hau da, eten-puntu horri eta haren gainetik dauden guztiei aplikatzen zaizkie (adibidez,
.col-sm-4
gailu txiki, ertain, handi eta handiei aplikatzen zaie, baina ez lehenxs
eten-puntuari). .col-4
Aurrez definitutako sareta-klaseak (adibidez ) edo Sass nahasketak erabil ditzakezu markaketa semantiko gehiagorako.
Kontuan izan flexbox-en inguruko mugak eta akatsak , hala nola HTML elementu batzuk flex edukiontzi gisa erabiltzeko ezintasuna .
Sarearen aukerak
Bootstrap- ek em
s edo rem
s erabiltzen dituen bitartean tamaina gehienak definitzeko, px
s sarearen eten puntuetarako eta edukiontzien zabaleretarako erabiltzen da. Ikuspegiaren zabalera pixeletan dagoelako eta letra- tipoaren tamainarekin ez da aldatzen .
Ikusi Bootstrap sare sistemaren alderdiek gailu askotan nola funtzionatzen duten taula erabilgarri batekin.
Oso txikia <576px |
Txikia ≥576px |
Ertaina ≥768 px |
Handia ≥992px |
Oso handia ≥1200px |
|
---|---|---|---|---|---|
Gehienezko edukiontziaren zabalera | Bat ere ez (automatikoki) | 540 px | 720 px | 960 px | 1140 px |
Klaseko aurrizkia | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
zutabe kopurua | 12 | ||||
Erretenaren zabalera | 30 px (15 px zutabe baten albo bakoitzean) | ||||
Kokatuta | Bai | ||||
Zutabeen ordenazioa | Bai |
Diseinu automatikoko zutabeak
Erabili eten puntuko zutabe-klase espezifikoak zutabeen tamaina errazteko, adibidez, zenbakizko klase espliziturik gabe .col-sm-6
.
Zabalera berdina
Esate baterako, hona hemen gailu eta ikuslei guztiei aplikatzen zaizkien bi sareta-diseinu, hasi xs
eta xl
. Gehitu unitaterik gabeko klase kopuru bat behar duzun eten puntu bakoitzeko eta zutabe bakoitzak zabalera berdina izango du.
<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>
Zabalera berdineko lerro anitzeko
Sortu hainbat lerro hartzen dituzten zabalera berdineko zutabeak, .w-100
zutabeak lerro berri batean apurtzea nahi duzun tokian txertatuz. Egin etenaldiak sentikorrenak bistaratzeko erabilgarritasun.w-100
batzuekin nahastuz .
Safari flexbox akats bat egon zen, hau esplizituki flex-basis
edo border
. Badaude arakatzaileen bertsio zaharragoetarako konponbideak, baina ez lirateke beharrezkoak izan behar zure xede arakatzaileak akatsen bertsioetan sartzen ez badira.
<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>
Zutabe bateko zabalera ezartzea
Flexbox sareko zutabeen diseinu automatikoak zutabe baten zabalera ezar dezakezula eta anai-arreben zutabeak automatikoki tamainaz alda ditzakezula esan nahi du. Aurrez definitutako sareta-klaseak (behean erakusten den bezala), sare-nahasketak edo lerroko zabalerak erabil ditzakezu. Kontuan izan beste zutabeek tamaina aldatuko dutela erdiko zutabearen zabalera edozein dela ere.
<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>
Zabalera aldakorreko edukia
Erabili col-{breakpoint}-auto
klaseak zutabeak tamaina bere edukiaren zabalera naturalean oinarrituta.
<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>
Klase sentikorrak
Bootstrap-en sareak aurredefinitutako bost klase-maila biltzen ditu diseinu erreaktibo konplexuak eraikitzeko. Pertsonalizatu zure zutabeen tamaina gailu txikietan, txikietan, ertainetan, handietan edo oso handietan, komeni zaizun moduan.
Eten puntu guztiak
Gailu txikienetik handienera berdinak diren sareetarako, erabili .col
eta .col-*
klaseak. Zehaztu zenbakidun klase bat tamaina bereziko zutabe bat behar duzunean; bestela, lasai atxikitzen .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>
Horizontalean pilatuta
Klase multzo bakarra erabiliz, .col-sm-*
pilatuta hasten den eta eten-puntu txikian ( ) horizontal bihurtzen den oinarrizko sareta-sistema sor dezakezu 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>
Nahastu eta lotu
Ez dituzu nahi zure zutabeak sare-maila batzuetan pilatzea? Erabili klase ezberdinen konbinazioa maila bakoitzerako, behar izanez gero. Ikusi beheko adibidea dena nola funtzionatzen duen jakiteko.
<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>
Erretenak
Erretenak modu erreaktiboan doi daitezke eten-puntu espezifikoen betegarrien eta marjina negatiboen erabilgarritasun klaseen bidez. Errenkada jakin bateko erretenak aldatzeko, parekatu marjina negatiboko erabilgarritasun bat .row
eta bat datorren betegarriko utilitateetan .col
s. Baliteke .container
edo .container-fluid
gurasoa ere egokitu behar izatea nahi ez den gainezka ekiditeko, berriro bat datorren betegarrien erabilgarritasuna erabiliz.
Hona hemen Bootstrap sarea pertsonalizatzeko adibide bat ( lg
) eten-puntu handian eta goian. .col
Betegarria rekin handitu dugu, .px-lg-5
horri aurre egin diogu .mx-lg-n5
gurasoari .row
eta gero egokitu dugu .container
bilgarria .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>
Errenkadako zutabeak
Erabili erantzuneko .row-cols-*
klaseak zure edukia eta diseinua hobekien errendatzen duten zutabe kopurua azkar ezartzeko. Klase normalak .col-*
zutabe indibidualei aplikatzen zaizkien arren (adibidez, .col-md-4
), errenkada-zutabeen klaseak gurasoan ezartzen dira .row
lasterbide gisa.
Erabili errenkada-zutabeen klase hauek oinarrizko sareta-diseinuak azkar sortzeko edo zure txartelen diseinuak kontrolatzeko.
<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>
Doako Sass mixin ere erabil dezakezu 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);
}
}
Lerrokatzea
Erabili flexbox lerrokatzeko utilitateak zutabeak bertikalki eta horizontalki lerrokatzeko. Internet Explorer 10-11ek ez du onartzen elementu malgutuen lerrokatze bertikala edukiontzi malguak min-height
behean erakusten den moduan. Ikusi Flexbugs #3 xehetasun gehiagorako.
Lerrokadura bertikala
<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>
Lerrokadura horizontala
<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>
Erretenak ez
Aurrez definitutako gure sareta-klaseetako zutabeen arteko erretenak ken daitezke .no-gutters
. Honek berehalako zutabe seme-alaba guztien margin
s negatiboa .row
eta horizontala kentzen ditu.padding
Hona hemen estilo hauek sortzeko iturburu kodea. Kontuan izan zutabeen gainidatziak lehen zutabe semeei soilik ezartzen zaizkiela eta atributu-hautatzailearen bidez bideratzen direla . Honek hautatzaile zehatzago bat sortzen duen arren, zutabeen betegarria oraindik gehiago pertsonalizatu daiteke zuriunearen utilitateekin .
Ertz-ertzeko diseinua behar duzu? Jarri gurasoa .container
edo .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
Praktikan, hona hemen nolakoa den. Kontuan izan aurrez zehaztutako sareko beste klase guztiekin erabiltzen jarrai dezakezula (zutabeen zabalerak, erantzun-mailak, berrantolaketak eta abar barne).
<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>
Zutabeak biltzea
Errenkada bakarrean 12 zutabe baino gehiago jartzen badira, zutabe gehigarrien talde bakoitza, unitate batean, lerro berri batean bilduko da.
9 + 4 = 13 > 12 denez, 4 zutabe zabaleko div hau lerro berri batean biltzen da ondoko unitate gisa.
Ondorengo zutabeek lerro berrian jarraitzen dute.
<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>
Zutabe-hausteak
Flexbox-en zutabeak lerro berri batera apurtzeak hack txiki bat behar du: gehitu elementu bat width: 100%
zure zutabeak lerro berri batean bildu nahi dituzun tokian. Normalean hau s anitzekin lortzen da .row
, baina inplementazio-metodo guztiek ezin dute hori kontuan izan.
<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>
Eten hau eten-puntu zehatzetan ere aplika dezakezu gure bistaratzeko erabilgarritasun erreaktiboekin .
<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>
Berrantolatzea
Ordenatu klaseak
Erabili .order-
klaseak zure edukiaren ordena bisuala kontrolatzeko. order
Klase hauek erantzuleak dira, beraz , eten-puntuaren arabera ezar dezakezu (adibidez, .order-1.order-md-2
). Bost sare-maila guztietan 1
bidezko laguntza barne hartzen du .12
<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>
Badaude ere responsive .order-first
eta .order-last
klaseak order
elementu baten aldea aldatzen dutenak order: -1
eta order: 13
( order: $columns + 1
), hurrenez hurren. Klase hauek zenbakidun .order-*
klaseekin ere nahas daitezke beharren arabera.
<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>
Zutabeak desplazatzea
Sare-zutabeak bi modutara konpentsatu ditzakezu: gure .offset-
sare-klase sentikorrak eta gure marjina-utilitateak . Sare-klaseek zutabeekin bat etortzeko tamaina dute, eta marjinak erabilgarriagoak dira desplazamenduaren zabalera aldakorra den diseinu bizkorretan.
Offset klaseak
Mugitu zutabeak eskuinera .offset-md-*
klaseak erabiliz. Klase hauek zutabe baten ezkerreko marjina zutabeka handitzen dute *
. Adibidez, lau zutabetan .offset-md-4
mugitzen da..col-md-4
<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>
Eten-puntu erantzuteko zutabeak garbitzeaz gain, baliteke desplazamenduak berrezarri behar izatea. Ikusi hau ekintza sarearen adibidean .
<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>
Marjina-erabilgarritasunak
Flexbox-era pasatzean v4-n, marjina-erabilgarritasunak erabil ditzakezu .mr-auto
anai-arreben zutabeak elkarrengandik urruntzea.
<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>
Habia egitea
Zure edukia sareta lehenetsiarekin habiratzeko, gehitu zutabe berri bat .row
eta multzo .col-sm-*
bat lehendik dagoen .col-sm-*
zutabe batean. Habiaraturiko errenkadek 12 edo gutxiago gehitzen dituzten zutabe multzo bat izan behar dute (ez da beharrezkoa erabilgarri dauden 12 zutabe guztiak erabiltzea).
<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
Bootstrap-en iturburuko Sass fitxategiak erabiltzean, Sass aldagaiak eta nahasketak erabiltzeko aukera duzu orri-diseinu pertsonalizatuak, semantikoak eta sentikorrak sortzeko. Aurrez definitutako sareko klaseek aldagai eta nahasketa hauek erabiltzen dituzte erabiltzeko prest dauden klase multzo oso bat eskaintzeko, erantzun azkarreko diseinuetarako.
Aldagaiak
Aldagaiek eta mapek zutabe kopurua, erretenaren zabalera eta zutabe mugikorrak hasteko multimedia kontsulta-puntua zehazten dute. Hauek goian dokumentatutako sare-klase aurredefinituak sortzeko erabiltzen ditugu, baita behean zerrendatutako nahasketa pertsonalizatuetarako ere.
$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
);
Mixinak
Mixinak sareko aldagaiekin batera erabiltzen dira sareko zutabe indibidualetarako CSS semantikoa sortzeko.
// 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);
Erabilera adibidea
Aldagaiak zure balio pertsonalizatuetara alda ditzakezu edo nahasketak erabil ditzakezu balio lehenetsiekin. Hona hemen ezarpen lehenetsiak erabiltzearen adibide bat bi zutabe-diseinua sortzeko tartea duen.
.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>
Sarea pertsonalizatzea
Sass sareko aldagaiak eta mapak erabiliz, posible da aurrez definitutako sareta-klaseak guztiz pertsonalizatzea. Aldatu maila-kopurua, multimedia-kontsulten dimentsioak eta edukiontziaren zabalerak; gero birkonpilatu.
Zutabeak eta erretenak
Sass aldagaien bidez sareko zutabe kopurua alda daiteke. $grid-columns
zutabe bakoitzaren zabalerak (ehunekotan) sortzeko erabiltzen $grid-gutter-width
da, zutabeen erretenen zabalera ezartzen duen bitartean.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Sare-mailak
Zutabeetatik haratago, sare-maila kopurua ere pertsonaliza dezakezu. Lau sare-maila besterik ez bazenitu nahi, $grid-breakpoints
eta eguneratuko zenuke $container-max-widths
honelako zerbaitetara:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sass aldagaietan edo mapetan aldaketak egiterakoan, aldaketak gorde eta berriro konpilatu beharko dituzu. Hori eginez gero, aurrez definitutako sareta-klaseen multzo berri bat aterako da zutabeen zabaleretarako, desplazamenduetarako eta ordenatzeko. Ikusgarritasun-erabilgarritasunak ere eguneratuko dira eten-puntu pertsonalizatuak erabiltzeko. Ziurtatu sareko balioak px
(ez rem
, em
, edo %
) atalean ezartzen dituzula.