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 .containerpixelaren zabalera sentikorretarako edo bistaratze .container-fluideta width: 100%gailuen tamaina guztietan.
• Errenkadak zutabeentzako bilgarriak dira. Zutabe bakoitzak horizontala du padding(gutuna deritzona) 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.

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 xseta 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-100zutabeak 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-basisedo 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}-autoklaseak 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 .coleta .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 .roweta bat datorren betegarriko utilitateetan .cols. Baliteke .containeredo .container-fluidgurasoa 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. .colBetegarria rekin handitu dugu, .px-lg-5horri aurre egin diogu .mx-lg-n5gurasoari .roweta gero egokitu dugu .containerbilgarria .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 .rowlasterbide gisa.

Erabili errenkada-zutabeen klase hauek oinarrizko sareta-diseinuak azkar sortzeko edo zure txartelaren 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-heightbehean 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 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 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.

<div class="container">
  <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>
</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. 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

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

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

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

<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 v4-ra pasatzean, marjina-erabilgarritasunak erabil ditzakezu .mr-autoanai-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 .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).

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

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