Source

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.

Hiru zutabeetako bat

<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 .containerpixel-zabalera erantzuteko edo .container-fluidbistaratze width: 100%eta gailuen tamaina guztietan.
Errenkadak zutabeentzako bilgarriak dira. Zutabe bakoitzak horizontala du padding(erretena izenekoa) haien arteko espazioa kontrolatzeko. Ondoren padding, 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 widthautomatikoki zabalera berdineko zutabe gisa diseinatuko dituzte. Adibidez, lau instantzia .col-smbakoitzak 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 widthehunekotan ezartzen dira, beraz, beti fluidoak eta tamainakoak dira beren elementu nagusiarekiko.
Zutabeek horizontala dute paddingzutabe indibidualen arteko erretenak sortzeko, hala ere, marginerrenkadetatik eta paddingzutabeetatik .no-gutterskendu 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-4gailu txiki, ertain, handi eta handiei aplikatzen zaie, baina ez lehen xseten-puntuari).
.col-4Aurrez 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 ems edo rems erabiltzen dituen bitartean tamaina gehienak definitzeko, pxs 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 ≥576 px	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 bistaratze bakoitzari aplikatzen zaizkion bi sareta-diseinu, xstik xl. Gehitu unitaterik gabeko klase kopuru bat behar duzun eten puntu bakoitzeko eta zutabe bakoitzak zabalera berdina izango du.

2tik 1

2tik 2

3tik 1

3tik 2

3tik 3

<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 zutabeak hainbat lerrotan zati daitezke, baina Safari flexbox akats bat egon zen, hau esplizitu gabe flex-basisedo border. Badaude arakatzaile zaharren bertsioetarako konponbideak, baina ez lukete beharrezkoak izan behar eguneratuta bazaude.

Zutabea

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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.

3tik 1

2tik 3 (zabalagoa)

3tik 3

3tik 1

2tik 3 (zabalagoa)

3tik 3

<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}-autoklaseak zutabeak tamaina bere edukiaren zabalera naturalean oinarrituta.

3tik 1

Zabalera aldakorreko edukia

3tik 3

3tik 1

Zabalera aldakorreko edukia

3tik 3

<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>

Zabalera berdineko errenkada anitzeko

Sortu hainbat errenkada 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 .

kol

<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>

Klase sentikorrak

Bootstrap-en sareak aurredefinitutako bost klase-maila biltzen ditu, erantzun-diseinu konplexuak eraikitzeko. Pertsonalizatu zure zutabeen tamaina gailu oso txikietan, txikietan, ertainetan, handietan edo oso handietan, komeni zaizun moduan.

Eten puntu guztiak

Gailu txikienetik handienera berdinak diren sareetarako, erabili .coleta .col-*klaseak. Zehaztu zenbakidun klase bat tamaina bereziko zutabe bat behar duzunean; bestela, lasai atxikitzen .col.

kol

kol-8

kol-4

<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>

Horizontalean pilatuta

Klase multzo bakarra erabiliz, .col-sm-*oinarrizko sareta-sistema bat sor dezakezu, pilatuta hasten dena eta eten-puntu txikian horizontal bihurtzen dena ( sm).

kol-sm-8

kol-sm-4

kol-sm

<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>

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.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

Lerrokatzea

Erabili flexbox lerrokatzeko utilitateak zutabeak bertikalki eta horizontalki lerrokatzeko.

Lerrokadura bertikala

Hiru zutabeetako bat

<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>

Hiru zutabeetako bat

<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

Bi zutabeetako bat

<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 margins negatiboa .roweta 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 .containeredo .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 hau erabiltzen jarrai dezakezula aurrez definitutako sare-klase guztiekin (zutabeen zabalerak, erantzun-mailak, berrantolaketak eta abar barne).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .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 bakarrean, lerro berri batean bilduko da.

.col-9

.col-4
9 + 4 = 13 > 12 denez, 4 zutabe zabaleko div hau lerro berri batean biltzen da ondoko unitate gisa.

.col-6
Ondorengo zutabeek lerro berrian jarraitzen dute.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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>

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.

.col-6 .col-sm-3

<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>

Eten hau eten-puntu zehatzetan ere aplika dezakezu gure bistaratzeko erabilgarritasun erreaktiboekin .

.col-6 .col-sm-4

<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>

Berrantolatzea

Ordenatu klaseak

Erabili .order-klaseak zure edukiaren ordena bisuala kontrolatzeko. orderKlase hauek erantzuleak dira, beraz , eten-puntuaren arabera ezar dezakezu (adibidez, .order-1.order-md-2). Bost sare-maila guztietan 1bidezko laguntza barne hartzen du .12

Lehenik, baina ordenatu gabe

Bigarrena, baina azkena

Hirugarrena, baina lehenengoa

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Badaude ere responsive .order-firsteta .order-lastklaseak orderelementu baten aldea aldatzen dutenak order: -1eta order: 13( order: $columns + 1), hurrenez hurren. Klase hauek zenbakidun .order-*klaseekin ere nahas daitezke beharren arabera.

Lehenengoa, baina azkena

Bigarrena, baina ordenatu gabe

Hirugarrena, baina lehenengoa

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but 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-4mugitzen da..col-md-4

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<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>

Eten-puntu erantzuteko zutabeak garbitzeaz gain, baliteke desplazamenduak berrezarri behar izatea. Ikusi hau ekintza sarearen adibidean .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<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>

Marjina-erabilgarritasunak

Flexbox-era v4-ra pasatzean, marjina-erabilgarritasunak erabil ditzakezu .mr-autoanai-arreben zutabeak elkarrengandik urruntzea.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<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>

Habia egitea

Zure edukia sareta lehenetsiarekin habiratzeko, gehitu zutabe berri bat .roweta 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).

1. maila: .col-sm-9

2. maila: .col-8 .col-sm-6

2. maila: .col-4 .col-sm-6

<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>

Sass mixins

Bootstrap-en iturburuko Sass fitxategiak erabiltzean, Sass aldagaiak eta nahasketak erabiltzeko aukera duzu orrialde-diseinu pertsonalizatuak, semantikoak eta sentikorrak sortzeko. Aurredefinitutako sareta-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 mugikorrekin 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 {
  width: 800px;
  @include make-container();
}

.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);
  }
}

Eduki nagusia

Bigarren mailako edukiak

<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-columnszutabe bakoitzaren zabalerak (ehunekotan) sortzeko erabiltzen $grid-gutter-widthda, 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-breakpointseta eguneratuko zenuke $container-max-widthshonelako 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.