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.

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

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.

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

Mitovy sakan'ny andalana maro

Mamorona tsanganana mitovy sakan'ny tsipika maromaro amin'ny alàlan'ny fampidirana .w-100toerana tianao hidiran'ny tsanganana amina tsipika vaovao. Ataovy mamaly ny fiatoana amin'ny alàlan'ny fampifangaroana .w-100amin'ireo fitaovana fampiratiana mandray andraikitra .

Nisy bug Safari flexbox izay nanakana an'io tsy hiasa tsy flex-basismisy border. Misy vahaolana ho an'ny dikan-teny tranainy kokoa, saingy tsy tokony ho ilaina izany raha toa ka tsy tafiditra ao anatin'ny dikan-teny buggy ny navigateur kendrenao.

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

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.

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

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

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.

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

Mivondrona mankany amin'ny horizontaly

Amin'ny fampiasana .col-sm-*kilasy tokana iray dia azonao atao ny mamorona rafitra grid fototra izay manomboka mivondrona ary lasa mitsivalana eo amin'ny teboka tapaka kely ( 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>

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.

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

tatatra

Ny tatatra dia azo amboarina tsara amin'ny alàlan'ny padding voafaritra manokana sy ny kilasy fampiasa amin'ny sisiny ratsy. Mba hanovana ny tatatra amin'ny laharana iray dia ampifanaraho ny fampiasa amin'ny sisiny ratsy eo amin'ny .rowkojakoja padding mifanentana amin'ny .cols. Ny .containerna ny .container-fluidray aman-dreny dia mety mila amboarina ihany koa mba hisorohana ny fihoaram-pefy tsy ilaina, amin'ny fampiasana fitaovana padding mifanentana indray.

Ity misy ohatra iray amin'ny fanamboarana ny tsipika Bootstrap amin'ny teboka lehibe ( lg) tapaka sy ambony. Nampitomboinay ny .colpadding tamin'ny .px-lg-5, nanohitra izany tamin'ny .mx-lg-n5ray aman-dreny .rowary avy eo nanitsy ny .containerfonony tamin'ny .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>

Andry andalana

Ampiasao ireo .row-cols-*kilasy mamaly mba hametrahana haingana ny isan'ny tsanganana izay manome tsara indrindra ny atiny sy ny drafitrao. Raha .col-*mihatra amin'ny tsanganana tsirairay ny kilasy mahazatra (oh, .col-md-4), ny kilasin'ny tsanganana andalana dia napetraka amin'ny ray aman-dreny .rowho toy ny hitsin-dàlana.

Ampiasao ireto kilasin'ny tsanganana andalana ireto mba hamoronana lamina fototra fototra na hifehezana ny fandrafetana karatrao.

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

Azonao atao koa ny mampiasa ny mixin Sass miaraka aminy 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);
  }
}

Fanitsiana

Mampiasà fitaovana fampifanarahana flexbox mba hampifanaraka ny tsanganana mitsangana sy mitsivalana. Ny Internet Explorer 10-11 dia tsy manohana ny fampifanarahana mitsangana amin'ny zavatra flex raha toa ka misy min-heighttoy ny aseho eto ambany ny fitoeran'entana flex. Jereo ny Flexbugs #3 raha mila fanazavana fanampiny.

Fandrindrana mitsangana

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

Fandrindrana marindrano

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

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

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.

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

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.

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

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

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

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.

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

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.

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

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.

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

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 .

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

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.

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

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

<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

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

<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) isaky ny tsanganana tsirairay ary $grid-gutter-widthmametraka ny sakany ho an'ny tatatra andry.

$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 %).