Source

Rafitra Grid

Ampiasao ny gridbox flexbox voalohany amin'ny finday mahery vaika mba hananganana lamina amin'ny endrika sy habe rehetra noho ny rafitra tsanganana roa ambin'ny folo, ambaratonga dimy mamaly default, sass variables sy mixins, ary kilasy am-polony efa voafaritra mialoha.

Ahoana ny fiasan'izany

Ny rafitry ny grid Bootstrap dia mampiasa andiana kaontenera, andalana ary tsanganana mba hamolavolana sy hampifanaraka ny atiny. Namboarina tamin'ny flexbox izy io ary mamaly tanteraka. Ity ambany ity ny ohatra iray sy ny fijerena lalindalina ny fomba fiarahan'ny grid.

Vaovao na tsy mahazatra amin'ny flexbox? Vakio ity torolalana flexbox CSS Tricks ity ho an'ny fiaviana, ny teny, ny torolàlana ary ny sombin-kaody.

Iray amin'ireo tsanganana telo

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

Ny ohatra etsy ambony dia mamorona tsanganana telo mitovy sakany amin'ny fitaovana kely, antonony, lehibe ary lehibe kokoa amin'ny alàlan'ny kilasin'ny grid efa voafaritra mialoha. Ireo tsanganana ireo dia eo afovoan'ny pejy misy ny ray aman-dreny .container.

Ny fandravana azy dia izao no fomba fiasa:

Ny kaontenera dia manome fitaovana entina iantohana sy marindrano ny votoatin'ny tranokalanao. Ampiasaina .containeramin'ny sakan'ny piksela mamaly na .container-fluidho an'ny habaka width: 100%rehetra sy ny haben'ny fitaovana.
Ny andalana dia fonosina ho an'ny tsanganana. Ny tsanganana tsirairay dia manana marindrano padding(antsoina hoe tatatra) mba hifehezana ny habaka eo anelanelan'izy ireo. Izany paddingdia mifanohitra amin'ny andalana misy sisiny ratsy. Amin'izany fomba izany, ny votoaty rehetra ao amin'ny tsangananao dia mirindra tsara amin'ny ilany havia.
Amin'ny rindran-tsary dia tsy maintsy apetraka ao anatin'ny tsanganana ny atiny ary ny tsanganana ihany no mety ho zanaky ny andalana avy hatrany.
Noho ny flexbox, ny tsanganana grid tsy misy voatondro widthdia hapetraka ho tsanganana mitovy sakany. Ohatra, ny tranga efatra .col-smdia samy ho tonga ho azy 25% ny sakany avy amin'ny toerana tapaka kely sy ambony. Jereo ny fizarana tsanganana fandrindrana mandeha ho azy raha te hahitana ohatra bebe kokoa.
Ny kilasin'ny tsanganana dia manondro ny isan'ny tsanganana tianao hampiasaina amin'ny mety ho 12 isaky ny andalana. Noho izany, raha mila tsanganana telo mitovy sakany ianao dia azonao atao ny mampiasa .col-4.
Ny tsanganana widthdia napetraka amin'ny isan-jato, noho izany dia miovaova sy habe foana izy ireo raha oharina amin'ny singa ray aman-dreniny.
Ny tsanganana dia manana marindrano paddingmba hamoronana ny tatatra eo anelanelan'ny tsanganana tsirairay, na izany aza, azonao atao ny manala ny marginandalana sy paddingny tsanganana miaraka .no-guttersamin'ny .row.
Mba hahatonga ny grid ho mamaly dia misy teboka dimy tapaka, iray isaky ny tapaka mamaly : teboka rehetra (kely fanampiny), kely, antonony, lehibe ary lehibe fanampiny.
Ny teboka tapaka dia mifototra amin'ny fangatahan'ny haino aman-jery sakan'ny kely indrindra, izany hoe mihatra amin'io teboka tapaka io sy ireo rehetra eo amboniny (oh: .col-sm-4mihatra amin'ny fitaovana kely, antonony, lehibe ary lehibe kokoa, fa tsy ny xsteboka voalohany).
Azonao atao ny mampiasa kilasy grid efa voafaritra mialoha (toy ny .col-4) na Sass mixins ho marika semantika bebe kokoa.

Tandremo ny famerana sy ny bibikely manodidina ny flexbox , toy ny tsy fahafahana mampiasa singa HTML sasany ho toy ny container flex .

Grid safidy

Raha mampiasa ems na rems ny Bootstrap hamaritana ny ankamaroan'ny habe, pxny s kosa dia ampiasaina amin'ny teboka tapaka sy ny sakan'ny fitoeran-javatra. Izany dia satria amin'ny pixel ny sakan'ny seranan-tsambo ary tsy miova amin'ny haben'ny endritsoratra .

Jereo ny fomba fiasan'ny rafitra grid Bootstrap amin'ny fitaovana maro miaraka amin'ny latabatra azo ampiasaina.

	Kely fanampiny <576px	Kely ≥576px	antonony ≥768px	Lehibe ≥992px	Lehibe fanampiny ≥1200px
Max sakan'ny fitoeran-javatra	Tsy misy (auto)	540px	720px	960px	1140px
Prefix kilasy	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# tsanganana	12
Sakan'ny tatatra	30px (15px amin'ny lafiny tsirairay amin'ny tsanganana)
Nestable	ENY
Filaharana tsanganana	ENY

Tsanganana fandrindrana mandeha ho azy

Mampiasà kilasy tsanganana manokana ho an'ny fametahana tsanganana mora tsy misy kilasy misy laharana mazava toy ny .col-sm-6.

Mitovy sakany

Ohatra, ireto misy rindrankajy roa mihatra amin'ny fitaovana tsirairay sy ny seranan-tsambo, manomboka xsamin'ny xl. Ampio kilasy latsaky ny isa isaky ny teboka ilainao ary hitovy ny sakany ny tsanganana tsirairay.

1 amin'ny 2

2 ny 2

1 amin'ny 3

2 ny 3

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

Ny tsanganana mitovy amin'ny sakany dia azo zaraina amin'ny tsipika maromaro, saingy nisy ny Safari flexbox bug izay nanakana izany tsy hiasa tsy flex-basismisy border. Misy fomba fiasa ho an'ny dikan-tranonkala tranainy, saingy tsy tokony ho ilaina izany raha toa ka manaraka ny vaovao ianao.

Tsanganana

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

Fametrahana sakan'ny tsanganana iray

Ny fandrindrana mandeha ho azy ho an'ny tsanganana flexbox grid dia midika ihany koa fa azonao atao ny mametraka ny sakan'ny tsanganana iray ary manana ny tsanganana mpiray tam-po aminy hanova azy ho azy. Azonao atao ny mampiasa ny kilasin'ny grid efa voafaritra mialoha (araka ny aseho eto ambany), ny fifangaroan'ny grid, na ny sakany an-tsipika. Mariho fa ny tsanganana hafa dia hanova ny habeny na inona na inona sakan'ny tsanganana afovoany.

1 amin'ny 3

2 amin'ny 3 (lehibe kokoa)

3 ny 3

1 amin'ny 3

2 amin'ny 3 (lehibe kokoa)

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

Votoaty sakany miovaova

Mampiasà col-{breakpoint}-autokilasy hamehezana tsanganana mifototra amin'ny sakany voajanahary amin'ny atiny.

1 amin'ny 3

Votoaty sakany miovaova

3 ny 3

1 amin'ny 3

Votoaty sakany miovaova

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

Mitovy sakan'ny andalana maro

Mamorona tsanganana mitovy sakany izay mivelatra andalana maromaro amin'ny alàlan'ny fampidirana ny .w-100toerana tianao hidiran'ny tsanganana amin'ny tsipika vaovao. Ataovy mamaly ny fiatoana amin'ny alàlan'ny fampifangaroana ny fitaovana fampirantiana mandray andraikitra.w-100 sasany .

tsang

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

Kilasy mandray andraikitra

Ny grid's Bootstrap dia ahitana ambaratonga dimy amin'ny kilasy efa voafaritra mialoha ho an'ny fananganana rindran-tsary mamaly be pitsiny. Amboary ny haben'ny tsangananao amin'ny fitaovana kely, kely, antonony, lehibe, na lehibe kokoa araka izay hitanao fa mety.

Tapatapaka rehetra

Ho an'ny grids mitovy amin'ny fitaovana kely indrindra ka hatramin'ny lehibe indrindra, ampiasao ny .coland .col-*classes. Manondro kilasy misy laharana rehefa mila tsanganana manokana ianao; raha tsy izany, aza misalasala mifikitra amin'ny .col.

tsang

col-8

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

Mivondrona mankany amin'ny horizontaly

Amin'ny fampiasana .col-sm-*kilasy tokana iray dia azonao atao ny mamorona rafitra grid fototra izay manomboka mivondrona alohan'ny hahatongavanao mitsivalana miaraka amin'ny teboka tapaka kely ( sm).

col-sm-8

col-sm-4

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

Afangaro ary ampifanaraho

Tsy tianao ve ny tsanganana mba hiangona fotsiny amin'ny ambaratonga sasany? Mampiasà fitambarana kilasy samihafa ho an'ny ambaratonga tsirairay araka izay ilaina. Jereo ny ohatra etsy ambany raha te hahalala tsara kokoa ny fomba fiasan'izy rehetra.

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

Fanitsiana

Mampiasà fitaovana fampifanarahana flexbox mba hampirindra ny tsanganana mitsangana sy mitsivalana.

Fandrindrana mitsangana

Iray amin'ireo tsanganana telo

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

Iray amin'ireo tsanganana telo

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

Fandrindrana marindrano

Iray amin'ireo tsanganana roa

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

Tsy misy tatatra

Azo esorina miaraka amin'ny .no-gutters. Izany dia manala ny ratsy sy marginny .rowmarindrano paddingamin'ny tsanganana ankizy rehetra.

Ity ny kaody loharano hamoronana ireo fomba ireo. Mariho fa ny fanodinkodinana tsanganana dia miompana amin'ny tsanganana ankizy voalohany ihany ary lasibatra amin'ny alalan'ny fisafidianana toetra . Na dia miteraka mpisafidy manokana kokoa aza izany, ny padding tsanganana dia mbola azo amboarina bebe kokoa miaraka amin'ny fitaovana fanasarahana .

Mila endrika mitongilana? Atsaharo ny ray aman-dreny .containerna .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Amin'ny fampiharana, toy izao ny endriny. Mariho fa azonao atao ny manohy mampiasa an'io miaraka amin'ireo kilasin'ny grid hafa efa voafaritra mialoha (anisan'izany ny sakan'ny tsanganana, ny ambaratongam-pandrenesana, ny fanavaozana, ary ny maro hafa).

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

Famonosana tsanganana

Raha tsanganana mihoatra ny 12 no apetraka ao anatin'ny andalana iray, ny vondrona tsirairay misy tsanganana fanampiny dia, amin'ny maha singa iray, dia mifono tsipika vaovao.

.col-9

.col-4
Hatramin'ny 9 + 4 = 13 > 12, ity div misy tsanganana 4 ity dia mifamatotra amin'ny tsipika vaovao ho singa iray mifanakaiky.

.col-6
Mitohy manaraka ny tsipika vaovao ny tsanganana manaraka.

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

Tapaka ny tsanganana

Ny fanapahana tsanganana amin'ny tsipika vaovao ao amin'ny flexbox dia mitaky hack kely: ampio singa iray miaraka width: 100%amin'izay tianao hametahana ny tsangananao amin'ny tsipika vaovao. Amin'ny ankapobeny dia vita amin'ny .rows maromaro izany, saingy tsy ny fomba fampiharana rehetra no afaka mitantana izany.

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

Azonao atao ihany koa ny mampihatra an'io fiatoana io amin'ny toerana fiatoana manokana miaraka amin'ireo fitaovana fampirantiana mandray andraikitra .

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

Fandaminana indray

Manafatra kilasy

Mampiasà .order-kilasy hifehezana ny filaharan'ny maso ny atiny. Ireo kilasy ireo dia mamaly, noho izany dia azonao atao ny mametraka ny orderteboka (ohatra, .order-1.order-md-2). Ahitana fanohanana amin'ny 1alàlan'ny 12ambaratonga dimy rehetra.

Voalohany, fa tsy voalamina

Faharoa, fa farany

Fahatelo, fa voalohany

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

Misy ihany koa ireo kilasy mamaly .order-firstsy .order-lastmanova ny ordersinga iray amin'ny fampiharana order: -1sy order: 13( order: $columns + 1), tsirairay avy. Ireo kilasy ireo koa dia azo ampifandraisina amin'ireo .order-*kilasy voaisa raha ilaina.

Voalohany, fa farany

Faharoa, nefa tsy voalamina

Fahatelo, fa voalohany

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

Andry offset

Azonao atao ny manonitra ny tsanganana tsanganana amin'ny fomba roa: ny .offset-kilasin'ny grids mandray andraikitra sy ny fampiasa amin'ny sisiny . Ny kilasin'ny grid dia mifanandrify amin'ny tsanganana raha toa ka mahasoa kokoa ny sisiny ho an'ny fandrindrana haingana izay miovaova ny sakan'ny offset.

Kilasy offset

Alefaso miankavanana ny tsanganana amin'ny fampiasana .offset-md-*kilasy. Ireo kilasy ireo dia mampitombo ny sisiny havia amin'ny tsanganana amin'ny *tsanganana. Ohatra, .offset-md-4mihetsika .col-md-4mihoatra ny tsanganana efatra.

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

Ho fanampin'ny famafana tsanganana amin'ny toerana fiatoana mamaly, mety mila averinao indray ny offset. Jereo ity hetsika ity ao amin'ny ohatra grid .

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

Fampiasana margin

Miaraka amin'ny fifindrana mankany amin'ny flexbox ao amin'ny v4, azonao atao ny mampiasa fitaovana margin toy .mr-autony manery ny tsanganana mpiray tam-po amin'ny tsirairay.

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

akany

Mba hanakanana ny atiny amin'ny rindran-damina mahazatra, ampio tsanganana vaovao .rowsy andiana .col-sm-*tsanganana iray ao anatin'ny .col-sm-*tsanganana efa misy. Ny andalana voatokana dia tokony ahitana andiana tsanganana miampy 12 na latsaka (tsy voatery hampiasa ny tsanganana 12 rehetra misy ianao).

Ambaratonga 1: .col-sm-9

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

Ambaratonga 2: .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

Rehefa mampiasa fisie Sass loharanon'ny Bootstrap ianao dia manana safidy amin'ny fampiasana ny fari-pahaizan'ny Sass sy ny mixins mba hamoronana fandrafetana pejy mahazatra, semantika ary mandray andraikitra. Ny kilasin'ny grid efa nofaritanay dia mampiasa ireo fari-pahalalana sy mixins ireo ihany mba hanomezana andiana kilasy vonona hampiasaina ho an'ny fandrindrana mandray andraikitra haingana.

hiovaova

Ny fiovaovana sy ny sarintany no mamaritra ny isan'ny tsanganana, ny sakan'ny tatatra, ary ny toerana fangataham-baovao hanombohana tsanganana mitsingevana. Ampiasainay ireo mba hamoronana ny kilasin'ny grid efa voafaritra mialoha voarakitra etsy ambony, ary koa ho an'ny mixins mahazatra voatanisa etsy ambany.

$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
);

Mixins

Ny mixins dia ampiasaina miaraka amin'ny fari-piainan'ny grid mba hamoronana CSS semantika ho an'ny tsanganana tsirairay.

// 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);

Fampiasana ohatra

Azonao atao ny manova ny fari-piainana amin'ny soatoavinao manokana, na mampiasa fotsiny ny mixins miaraka amin'ny sanda mahazatra azy. Ity misy ohatra iray amin'ny fampiasana ny firafitry ny default mba hamoronana lamina misy tsanganana roa misy elanelana eo anelanelany.

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

Votoaty fototra

Votoaty faharoa

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

Fanamboarana ny grid

Amin'ny fampiasana ny fari-piadidiana sy ny sari-tany Sass ao anatiny, dia azo atao ny mampifanaraka tanteraka ny kilasin'ny grid efa voafaritra mialoha. Ovay ny isan'ny ambaratonga, ny refin'ny fangatahana media ary ny sakan'ny fitoeran-javatra—dia avereno amboarina.

Tsanganana sy tatatra

Ny isan'ny tsanganana grid dia azo ovaina amin'ny alàlan'ny fari-piadidiana Sass. $grid-columnsdia ampiasaina hamokarana ny sakany (amin'ny isan-jato) amin'ny tsanganana tsirairay ary $grid-gutter-widthmamela ny sakany manokana amin'ny teboka tapaka izay zaraina mitovy padding-leftsy padding-rightho an'ny tatatra tsanganana.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Tiers Grid

Mifindra any ivelan'ny tsanganana, azonao atao koa ny mampifanaraka ny isan'ny tsanganana. Raha mila tiers grid efatra fotsiny ianao dia havaozina ny $grid-breakpointssy $container-max-widthsamin'ny zavatra toy izao:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Rehefa manao fanovana amin'ny fari-piadidiana na sari-tany Sass dia mila mitahiry ny fanovanao ianao ary manangona indray. Ny fanaovana izany dia hamoaka andiana kilasin'ny grid efa voafaritra mialoha ho an'ny sakan'ny tsanganana, ny offset ary ny filaharana. Havaozina ihany koa ny fampitaovana fahitana mamaly mba hampiasana ireo teboka fiatoana mahazatra. Ataovy azo antoka ny mametraka ny soatoavin'ny grid px(tsy rem, em, na %).