Source

Grid system

Gwiritsani ntchito gridi yathu yamphamvu yoyambira flexbox kuti mupange masanjidwe amitundu yonse ndi makulidwe ake chifukwa cha magawo khumi ndi awiri, magawo asanu omvera osakhazikika, zosinthika za Sass ndi zosakaniza, ndi makalasi ambiri omwe adafotokozedwatu.

Momwe zimagwirira ntchito

Dongosolo la grid ya Bootstrap limagwiritsa ntchito zotengera zingapo, mizere, ndi mizere kuti isanjidwe ndikugwirizanitsa zomwe zili. Imapangidwa ndi flexbox ndipo imayankha kwathunthu. Pansipa pali chitsanzo ndi kuyang'ana mozama momwe gululi limakhalira pamodzi.

Zatsopano kapena simukuzidziwa ndi flexbox? Werengani izi CSS Tricks flexbox guide for background, terminology, guidelines, ndi code snippets.

Chimodzi mwa mizati itatu

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

Chitsanzo chapamwambachi chimapanga mizati itatu yofanana m'lifupi pazida zazing'ono, zapakati, zazikulu, ndi zazikulu zowonjezera pogwiritsa ntchito makalasi athu omwe tawafotokozeratu. Mizati imeneyo ili pakati pa tsamba ndi kholo .container.

Kuyiphwanya, nayi momwe imagwirira ntchito:

Zotengera zimakupatsirani njira yokhazikitsira pakati ndikuwongolera mopingasa zomwe zili patsamba lanu. Gwiritsani ntchito kukula kwa .containerpixel komvera kapena pamawonekedwe onse ndi makulidwe a chipangizo..container-fluidwidth: 100%
Mizere ndi zokutira pamizere. Chigawo chilichonse chili ndi chopingasa padding(chotchedwa gutter) chowongolera danga pakati pawo. Izi paddingndiye zimatsutsidwa pamizere yokhala ndi malire olakwika. Mwanjira iyi, zonse zomwe zili m'mipingo yanu zimayang'aniridwa kumanzere.
Pamasanjidwe a gridi, zomwe zili mumizere ziyenera kuyikidwa m'mizere ndipo magawo okhawo omwe angakhale ana amizere.
Chifukwa cha flexbox, mizati ya gridi popanda kutchulidwa widthimangokhazikitsidwa ngati mizere yofanana m'lifupi. Mwachitsanzo, magawo anayi amtundu .col-smuliwonse adzakhala 25% m'lifupi kuchokera pagawo laling'ono kupita mmwamba. Onani gawo lazopanga zokha kuti mupeze zitsanzo zambiri.
Makalasi amizere amawonetsa kuchuluka kwa magawo omwe mukufuna kugwiritsa ntchito pa 12 pa mzere uliwonse. Chifukwa chake, ngati mukufuna mizati itatu yopingasa yofanana, mutha kugwiritsa ntchito .col-4.
Mizati widths imayikidwa muzochulukira, kotero nthawi zonse imakhala yamadzimadzi komanso yokulirapo poyerekeza ndi gawo la makolo awo.
Mizati imakhala yopingasa paddingkuti ipange ngalande pakati pa mizati payokha, komabe, mutha kuchotsa marginmizere ndi mizere paddingyokhala .no-guttersndi .row.
Kuti gululi liziyankha, pali zodulitsa ma gridi asanu, imodzi pagawo lililonse loyankhidwa : ma breakpoints onse (owonjezera ang'onoang'ono), ang'onoang'ono, apakatikati, akulu, ndi akulu owonjezera.
Kudumpha kwa ma gridi kumatengera mafunso ochepera a m'lifupi mwake, kutanthauza kuti amagwira ntchito pagawo limodzi ndi onse omwe ali pamwamba pake (mwachitsanzo, .col-sm-4zimagwira ntchito pazida zazing'ono, zapakati, zazikulu, ndi zazikulu, koma osati poyambira xs).
Mutha kugwiritsa ntchito makalasi ofotokozedweratu (monga .col-4) kapena ma Sass ophatikizika kuti musinthe mawonekedwe.

Dziwani zoperewera ndi nsikidzi kuzungulira flexbox , monga kulephera kugwiritsa ntchito zinthu zina za HTML ngati zotengera zosinthika .

Zosankha zamagulu

Pomwe Bootstrap imagwiritsa ntchito ems kapena rems kutanthauzira makulidwe ambiri, pxs amagwiritsidwa ntchito podulira ma gridi ndi m'lifupi mwake. Izi zili choncho chifukwa m'lifupi mwake malo owonera ndi ma pixel ndipo sasintha ndi kukula kwa mawonekedwe .

Onani momwe ma gridi a Bootstrap amagwirira ntchito pazida zingapo zokhala ndi tebulo lothandizira.

	Zocheperako < 576px	Yaing'ono ≥576px	Wapakatikati ≥768px	Chachikulu ≥992px	Chachikulu kwambiri ≥1200px
M'lifupi mwake	Palibe (yokha)	540px	720px	960px	1140px
Chiyambi cha kalasi	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ya mizati	12
Kuchuluka kwa ngalande	30px (15px mbali iliyonse ya ndime)
Nestable	Inde
Kuyitanitsa ndindalama	Inde

Zopanga zokha mizati

Gwiritsani ntchito makalasi a magawo enieni a magawo kuti musinthe magawo mosavuta popanda kalasi yodziwika bwino ngati .col-sm-6.

Kufanana m'lifupi

Mwachitsanzo, apa pali mitundu iwiri ya gridi yomwe imagwira ntchito pa chipangizo chilichonse ndi malo owonera, kuyambira xsmpaka xl. Onjezani kuchuluka kwa makalasi opanda ma unit pagawo lililonse lomwe mungafune ndipo gawo lililonse likhala lofanana m'lifupi.

1 mwa2

2 mwa2

1 mwa 3

2 mwa 3

3 mwa3

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

Mizati yofanana m'lifupi imatha kuthyoledwa m'mizere ingapo, koma panali cholakwika cha Safari flexbox chomwe chinalepheretsa izi kugwira ntchito popanda kumveka flex-basiskapena border. Pali ma workaround amitundu akale asakatuli, koma siziyenera kukhala zofunikira ngati mukusintha.

Mzere

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

Kukhazikitsa m'lifupi ndime imodzi

Kukonzekera kwa Auto kwa mizati ya grid flexbox kumatanthauzanso kuti mutha kuyika m'lifupi mwagawo limodzi ndikupangitsa kuti mizere ya abale anu isinthe kukula mozungulira. Mutha kugwiritsa ntchito makalasi ofotokozedweratu (monga momwe tawonetsera pansipa), zophatikizira za gridi, kapena makulidwe amzere. Zindikirani kuti mizati ina idzakula mosasamala kanthu za kukula kwa ndime yapakati.

1 mwa 3

2 mwa 3 (yambiri)

3 mwa3

1 mwa 3

2 mwa 3 (yambiri)

3 mwa3

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

Zosintha m'lifupi mwake

Gwiritsani ntchito col-{breakpoint}-automakalasi kuti agwirizane ndi kukula kwake kwazomwe zili.

1 mwa 3

Zosintha m'lifupi mwake

3 mwa3

1 mwa 3

Zosintha m'lifupi mwake

3 mwa3

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

Mizere yofanana m'lifupi

Pangani mizati yotalika yofanana yomwe imayenda mizere ingapo poyikapo .w-100pomwe mukufuna kuti mizere iduke pamzere watsopano. Pangani nthawi yopuma kuti iyankhe posakaniza .w-100ndi zina zowonetsera zowonetsera .

kolo

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

Makalasi omvera

Gululi la Bootstrap limaphatikizapo magawo asanu a makalasi omwe adafotokozedwatu kuti amange masanjidwe ovuta kuyankha. Sinthani kukula kwa mizati yanu pazida zing'onozing'ono, zazing'ono, zapakatikati, zazikulu, kapena zazikulu monga momwe mungafunire.

Ma breakpoints onse

Kwa ma gridi omwe ali ofanana kuyambira pazida zazing'ono kwambiri mpaka zazikulu, gwiritsani ntchito .colndi .col-*makalasi. Tchulani kalasi yowerengeka pamene mukufuna gawo lalikulu; apo ayi, khalani omasuka kumamatira .col.

kolo

mkolo-8

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

Zaunikidwa mpaka yopingasa

Pogwiritsa ntchito gulu limodzi la .col-sm-*makalasi, mutha kupanga makina oyambira a gridi omwe amayambira atakusanjidwa ndikukhala opingasa pagawo laling'ono ( sm).

Col-sm-8

Col-sm-4

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

Sakanizani ndikugwirizanitsa

Kodi simukufuna kuti zipilala zanu zizingounjika m'magulu ena a gridi? Gwiritsani ntchito makalasi osiyanasiyana pagawo lililonse ngati pakufunika. Onani chitsanzo pansipa kuti mudziwe bwino momwe zonsezi zimagwirira ntchito.

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

Kuyanjanitsa

Gwiritsani ntchito zida zoyankhulirana za flexbox kuti mulumikizane molunjika komanso mopingasa.

Kuyanjanitsa koyima

Chimodzi mwa mizati itatu

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

Chimodzi mwa mizati itatu

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

Kuyanjanitsa kopingasa

Chimodzi mwa mizati iwiri

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

Palibe ngalande

Miyendo pakati pa mizati m'magulu athu omwe tafotokozeratu amatha kuchotsedwa ndi .no-gutters. Izi zimachotsa zoipa margins kuchokera .rowndi yopingasa paddingkuchokera mzati zonse za ana.

Nayi code yoyambira yopangira masitayelo awa. Zindikirani kuti zotuluka m'mipingo zimangoyang'aniridwa ndi ana oyamba okha ndipo amangosankhidwa posankha zilembo . Ngakhale kuti izi zimapanga chosankha chodziwika bwino, padding pazidutswa imatha kusinthidwanso ndi zida zapakati .

Mukufuna mapangidwe am'mphepete mpaka m'mphepete? Kugwetsa kholo .containerkapena .container-fluid.

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

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

Mwakuchita, umu ndi momwe zimawonekera. Zindikirani kuti mutha kupitiliza kugwiritsa ntchito izi ndi makalasi ena onse omwe afotokozedweratu (kuphatikiza makulidwe amzere, magawo omvera, kuyitanitsa, ndi zina zambiri).

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

Kuzimata ndime

Ngati mizati yopitilira 12 yayikidwa pamzere umodzi, gulu lililonse la zigawo zowonjezera, ngati gawo limodzi, likulungidwa pamzere watsopano.

.col-9

.col-4
Popeza 9 + 4 = 13 > 12, div-column-wide iyi 4 imakutidwa pamzere watsopano ngati gawo limodzi lolumikizana.

.col-6
Mizati yotsatira ikupitilira pamzere watsopano.

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

Kuthyoka kwa magawo

Kuthyola zipilala ku mzere watsopano mu flexbox kumafuna kuthyolako pang'ono: onjezani chinthu ndi width: 100%paliponse pomwe mukufuna kukulunga mizati yanu ku mzere watsopano. Kawirikawiri izi zimachitika ndi ma multiples .row, koma si njira zonse zogwiritsira ntchito zomwe zingathe kuwerengera izi.

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

Mutha kugwiritsanso ntchito nthawi yopumirayi pakanthawi kochepa ndi zida zathu zowonetsera .

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

Kuyitanitsanso

Onjezani makalasi

Gwiritsani ntchito .order-makalasi kuwongolera mawonekedwe azinthu zanu. Maphunzirowa ndi omvera, kotero mutha kukhazikitsa orderndi breakpoint (mwachitsanzo, .order-1.order-md-2). Zimaphatikizapo chithandizo chamagulu onse asanu 1a 12gridi.

Choyamba, koma osayendetsedwa

Chachiwiri, koma chomaliza

Chachitatu, koma choyamba

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

Palinso makalasi omvera .order-firstkomanso .order-lastomwe amasintha orderchinthucho pogwiritsa ntchito order: -1ndi order: 13( order: $columns + 1), motsatana. Maphunzirowa amathanso kusakanikirana ndi .order-*makalasi owerengeka ngati pakufunika.

Choyamba, koma chomaliza

Chachiwiri, koma osalamulidwa

Chachitatu, koma choyamba

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

Kuchepetsa mizati

Mutha kusintha magawo a gridi m'njira ziwiri: .offset-makalasi athu omvera a gridi ndi zida zathu zam'mphepete . Magulu a gridi amakula kuti agwirizane ndi mipingo pomwe m'mphepete mwake ndi othandiza kwambiri pamasanjidwe ofulumira pomwe m'lifupi mwake ndikusintha.

Maphunziro a Offset

Sunthani mizati kumanja pogwiritsa ntchito .offset-md-*makalasi. Makalasi awa amawonjezera malire akumanzere kwa gawo ndi magawo *. Mwachitsanzo, .offset-md-4amasuntha .col-md-4mizati inayi.

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

Kuphatikiza pa kukonza magawo pazigawo zongoyankha, mungafunike kukonzanso zosintha. Onani izi muzochitika mu grid chitsanzo .

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

Zida zam'mphepete

Ndi kusunthira ku flexbox mu v4, mutha kugwiritsa ntchito zida zam'mphepete monga .mr-autokukakamiza mizere ya abale kutali.

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

Nesting

Kuti mutsegule zomwe zili ndi gridi yokhazikika, onjezani magawo atsopano .rowndi magulu omwe ali .col-sm-*mgulu lomwe lilipo .col-sm-*. Mizere yokhazikitsidwa iyenera kukhala ndi magawo 12 kapena kucheperapo (sikufunika kuti mugwiritse ntchito magawo 12 onse omwe alipo).

Gawo 1: .col-sm-9

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

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

Zosakaniza za Sass

Mukamagwiritsa ntchito mafayilo a Sass a Bootstrap, muli ndi mwayi wogwiritsa ntchito zosinthika za Sass ndi zosakaniza kuti mupange masanjidwe amasamba, a semantic, ndi omvera. Makalasi athu omwe adafotokozedwatu amagwiritsa ntchito zosinthika zomwezi ndi zosakaniza kuti apereke gulu lonse la makalasi okonzeka kugwiritsa ntchito masanjidwe omvera mwachangu.

Zosintha

Zosintha ndi mamapu zimatsimikizira kuchuluka kwa mizati, m'lifupi mwa ngalande, ndi malo ochezera a pawailesi pomwe amayambira mizati yoyandama. Timagwiritsa ntchito izi kupanga makalasi a gridi omwe afotokozedwa pamwambapa, komanso zosakaniza zomwe zalembedwa pansipa.

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

Zosakaniza

Mixins amagwiritsidwa ntchito molumikizana ndi ma gridi osiyanasiyana kuti apange CSS ya semantic pamizere ya gridi iliyonse.

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

Kugwiritsa ntchito chitsanzo

Mutha kusintha zosinthika kukhala zomwe mumakonda, kapena ingogwiritsani ntchito zosakaniza zomwe zili ndi zikhalidwe zawo. Nachi chitsanzo chogwiritsa ntchito zosintha zosasinthika kuti mupange masanjidwe a magawo awiri okhala ndi kusiyana pakati.

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

Zomwe zili zofunika kwambiri

Zachiwiri

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

Kusintha gridi mwamakonda anu

Pogwiritsa ntchito zosinthika zathu za grid Sass ndi mamapu, ndizotheka kusinthiratu magulu omwe tawafotokozeratu. Sinthani kuchuluka kwa ma tiers, miyeso yamafunso a media, ndi makulidwe a chidebe - kenaka phatikizaninso.

Mizere ndi ngalande

Chiwerengero cha mizere ya gridi chikhoza kusinthidwa kudzera mumitundu ya Sass. $grid-columnsamagwiritsidwa ntchito kupanga m'lifupi (mu peresenti) ya ndime iliyonse payekha $grid-gutter-widthndikuyika m'lifupi mwazitsulo zazitsulo.

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

Mitundu ya gridi

Kupitilira mizati yokha, mutha kusinthanso kuchuluka kwa ma grid tiers. Ngati mumangofuna magawo anayi a gridi, mutha kusintha $grid-breakpointsndi $container-max-widthszina monga izi:

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

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

Mukapanga zosintha zilizonse pamitundu kapena mamapu a Sass, muyenera kusunga zosintha zanu ndikubwezeretsanso. Kuchita izi kudzatulutsa gulu latsopano lamagulu ofotokozedweratu amtundu wa magawo, ma offsets, ndi kuyitanitsa. Zida zowonekera zidzasinthidwanso kuti zigwiritse ntchito ma breakpoints. Onetsetsani kuti mwakhazikitsa ma grid mu px(osati rem, em, kapena %).