Source

Sistimi ea grid

Sebelisa marang-rang a rona a matla a mobile-first flexbox ho aha meralo ea libopeho le boholo bohle ka lebaka la sistimi ea likholomo tse leshome le metso e 'meli, mekhahlelo e mehlano e arabelang ka ho sa feleng, mefuta ea Sass le metsoako, le lihlopha tse ngata tse boletsoeng esale pele.

Kamoo e sebetsang kateng

Sistimi ea grid ea Bootstrap e sebelisa letoto la lijana, mela le likholomo ho hlophisa le ho hokahanya litaba. E hahiloe ka flexbox 'me e arabela ka botlalo. Ka tlase ke mohlala le pono e tebileng ea hore na marang-rang a kopana joang.

Na u sa tsoa tloaelana le flexbox? Bala tataiso ena ea CSS Tricks flexbox bakeng sa bokamorao, poleloana, litataiso, le likotlo tsa khoutu.

E 'ngoe ea litšiea tse tharo

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

Mohlala o ka holimo o theha likholomo tse tharo tse bophara bo lekanang ho lisebelisoa tse nyane, tse mahareng, tse kholo le tse kholo ho feta ho sebelisa litlelase tsa rona tse boletsoeng esale pele. Likholomo tseo li bohareng ba leqephe la motsoali .container.

Ho e senya, ke kamoo e sebetsang kateng:

Lits'oants'o li fana ka mokhoa oa ho beha bohareng le ho tsamaisa litaba tsa sebaka sa hau sa marang-rang. Sebelisa .containerbakeng sa bophara ba pixel bo arabelang kapa .container-fluidbakeng sa width: 100%libaka tsohle tsa pono le boholo ba lisebelisoa.
Mela ke wrappers bakeng sa likholomo. Kholomo e 'ngoe le e 'ngoe e na le e rapameng padding(e bitsoang gutter) bakeng sa ho laola sebaka se pakeng tsa tsona. Joale sena paddingse hanyetsoa meleng e nang le mathoko a mabe. Ka tsela ena, litaba tsohle tse likholomong tsa hau li hokahane ka pono ho theosa le lehlakore le letšehali.
Ka moralo oa marang-rang, likahare li tlameha ho behoa ka har'a likholomo 'me likholomo feela e ka ba bana ba haufi ba mela.
Ka lebaka la flexbox, li-columns tsa grid ntle le tse boletsoeng widthli tla hlophisoa ka bohona e le likholomo tse lekanang tsa bophara. Ka mohlala, liketsahalo tse 'nè tsa .col-sme mong le e mong e tla ba bophara ba 25% ho tloha sebakeng se senyenyane ho ea holimo. Sheba karolo ea li-columns tsa moralo o ikemetseng bakeng sa mehlala e meng.
Lihlopha tsa kholomo li bontša palo ea likholomo tseo u ka ratang ho li sebelisa ho tse ka bang 12 ka mola. Kahoo, haeba u batla likholomo tse tharo tse bophara bo lekanang ka bophara, u ka sebelisa .col-4.
Kholomo widths li behiloe ka liphesente, kahoo li lula li le metsi 'me li lekana le karolo ea motsoali oa tsona.
Likholomo li na le tse rapameng paddingho theha likhoele lipakeng tsa litšiea ka bomong, leha ho le joalo, o ka tlosa marginmela le paddinglikholomo tse nang .no-guttersle .row.
Ho etsa hore grid e arabele, ho na le li-breakpoints tse hlano, e le 'ngoe bakeng sa sebaka se seng le se seng se arabelang : li-breakpoints kaofela (tse nyane haholo), tse nyane, tse mahareng, tse kholo, le tse kholo ho feta.
Li-breakpoints tsa grid li ipapisitse le lipotso tsa media tse bophara bo tlase, ho bolelang hore li sebetsa sebakeng se le seng le tse ka holimo ho eona (mohlala, .col-sm-4li sebetsa ho lisebelisoa tse nyane, tse mahareng, tse kholo le tse kholo, empa eseng sebaka sa pele xs).
U ka sebelisa litlelase tsa grid tse boletsoeng esale pele (joaloka .col-4) kapa li-mix tsa Sass bakeng sa markup ea semantic.

Ela hloko mefokolo le litšitšili tse potolohileng flexbox , joalo ka ho se khone ho sebelisa likarolo tse ling tsa HTML joalo ka lijana tsa flex .

Likhetho tsa grid

Leha Bootstrap e sebelisa ems kapa rems ho hlalosa boholo ba boholo, pxs e sebelisoa bakeng sa likheo tsa marang-rang le bophara ba setshelo. Lebaka ke hobane bophara ba sebaka sa pono bo ka lipikselse 'me ha bo fetohe le boholo ba fonte .

Bona hore na likarolo tsa sistimi ea Bootstrap li sebetsa joang ho lisebelisoa tse ngata tse nang le tafole e sebetsang.

	E nyane haholo <576px	E nyane ≥576px	Hare ≥768px	E kholo ≥992px	E kholo haholo ≥1200px
Boholo ba bophara ba setshelo	Ha ho letho (auto)	540px	720px	960px	1140px
Sehlongoapele sa sehlopha	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ea likholomo	12
Bophara ba sekoti	30px (15px ka lehlakoreng le leng la kholomo)
Nestable	Ee
Ho laela ka kholomo	Ee

Likholomo tsa moralo oa boiketsetso

Sebelisa lihlopha tse khethehileng tsa likholomo bakeng sa ho etsa boholo bo bonolo ba likholomo ntle le sehlopha se hlakileng sa linomoro joalo ka .col-sm-6.

Bophara bo lekanang

Mohlala, mona ho na le meralo e 'meli ea marang-rang e sebetsang sesebelisoa se seng le se seng le sebaka sa pono, ho tloha xsho xl. Kenya palo efe kapa efe ea litlelase tse se nang li-unit sebakeng se seng le se seng seo u se hlokang 'me kholomo e' ngoe le e 'ngoe e tla lekana ka bophara.

1 ho tse 2

2 ea 2

1 ho tse 3

2 ho tse 3

3 ho tse 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>

Likholomo tse bophara bo lekanang li ka aroloa ka mela e mengata, empa ho ne ho e-na le Safari flexbox bug e neng e thibela sena ho sebetsa ntle le ho hlaka flex-basiskapa border. Ho na le li-workaround bakeng sa liphetolelo tsa khale tsa sebatli, empa ha lia lokela ho hlokahala haeba u le nakong.

Kholomo

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

Ho beha bophara ba kholomo e le 'ngoe

Ponahalo e iketsang bakeng sa likholomo tsa gridbox ea flexbox e boetse e bolela hore o ka seta bophara ba kholumo e le 'ngoe ebe o etsa hore litšiea tsa banab'eno li ikemisetse ho e potoloha. U ka sebelisa litlelase tsa grid tse boletsoeng esale pele (joalo ka ha ho bonts'itsoe ka tlase), li-mixins tsa grid, kapa bophara ba inline. Hlokomela hore litšiea tse ling li tla fetola boholo ho sa tsotellehe bophara ba kholomo e bohareng.

1 ho tse 3

2 ho tse 3 (bophara)

3 ho tse 3

1 ho tse 3

2 ho tse 3 (bophara)

3 ho tse 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>

Likahare tse fapaneng tsa bophara

Sebelisa col-{breakpoint}-autolitlelase ho isa likholomong tsa boholo ho ipapisitsoe le bophara ba tlhaho ba litaba tsa tsona.

1 ho tse 3

Likahare tse fapaneng tsa bophara

3 ho tse 3

1 ho tse 3

Likahare tse fapaneng tsa bophara

3 ho tse 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>

E lekanang ka bophara ba mela e mengata

Etsa likholomo tse bophara bo lekanang tse nang le mela e mengata ka ho kenya .w-100moo u batlang hore litšiea li khaohe moleng o mocha. Etsa hore khefu e sebetse ka ho kopanya .w-100lisebelisoa tse ling tse arabelang .

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>

Lihlopha tse arabelang

Gridi ea Bootstrap e kenyelletsa mekhahlelo e mehlano ea litlelase tse boletsoeng esale pele bakeng sa ho aha meralo e rarahaneng e arabelang. Iketsetse boholo ba litšiea tsa hau ho lisebelisoa tse nyane, tse nyane, tse mahareng, tse kholo kapa tse kholo ho feta kamoo u bonang ho loketse.

Li-breakpoints tsohle

Bakeng sa marang-rang a ts'oanang ho tloha ho lisebelisoa tse nyane ho isa ho tse kholo, sebelisa .colle .col-*litlelase. Hlalosa sehlopha sa linomoro ha u hloka kholomo e boholo bo khethehileng; ho seng joalo, ikutloe u lokolohile ho khomarela .col.

kolo

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

E khomaretsoe ho ea holimo

U sebelisa sehlopha se le seng sa .col-sm-*litlelase, u ka theha sistimi ea grid e qalang e phuthetsoe pele e ba e rapameng le sebakeng se senyenyane ( sm).

kolo-sm-8

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

Kopanya le ho bapisa

Ha u batle hore litšiea tsa hau li kenelle ka har'a lihlopha tse ling tsa grid? Sebelisa motsoako oa lihlopha tse fapaneng bakeng sa mokhahlelo ka mong kamoo ho hlokahalang. Sheba mohlala o ka tlase bakeng sa mohopolo o betere oa hore na tsohle li sebetsa joang.

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

Ho tsamaisana

Sebelisa lisebelisoa tsa tekano ea flexbox ho hokahanya likholomo tse otlolohileng le tse tšekaletseng.

Tsepamiso e otlolohileng

E 'ngoe ea litšiea tse tharo

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

E 'ngoe ea litšiea tse tharo

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

Ho tsamaisana le maemo

E 'ngoe ea litšiea tse peli

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

Ha ho li-gutters

Li-gutters tse pakeng tsa litšiea lihlopheng tsa rona tse hlalositsoeng esale pele li ka tlosoa ka .no-gutters. Sena se tlosa negative margins ho tloha .rowle tse rapameng paddingho tloha likholomong tsohle tse haufi tsa bana.

Mona ke khoutu ea mohloli oa ho theha mefuta ena. Ela hloko hore ho fetisa kholomo ho fetisetsoa ho likholomo tsa bana ba pele feela 'me ho shebisitsoe ka khetho ea litšobotsi . Le hoja sena se hlahisa khetho e khethehileng haholoanyane, padding ea li-column e ntse e ka ntlafatsoa le ho feta ka lisebelisoa tsa sebaka .

Na u hloka moralo o mong le o mong? Lahla motsoali .containerkapa .container-fluid.

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

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

Ka ts'ebetso, mona ke kamoo e shebahalang kateng. Hlokomela hore o ka tsoela pele ho sebelisa sena ka litlelase tse ling tsohle tse boletsoeng esale pele (ho kenyeletsoa bophara ba kholomo, likarolo tse arabelang, li-odara, le tse ling).

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

Ho phuthela khola

Haeba likholomo tse fetang 12 li behiloe ka har'a mola o le mong, sehlopha ka seng sa likholomo tse eketsehileng, e le yuniti e le 'ngoe, se tla thatela moleng o mocha.

.col-9

.col-4
Ho tloha ha 9 + 4 = 13 > 12, div ena ea 4-column-wide e phuthoa moleng o mocha joalo ka yuniti e le 'ngoe e kopaneng.

.col-6 Likholomo tse
latelang li tsoela pele moleng o mocha.

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

Likhefutso tsa khola

Ho pshatla litšiea ho ea moleng o mocha ka har'a flexbox ho hloka ho qhekella hanyenyane: eketsa ntho le width: 100%kae kapa kae moo u batlang ho phuthela melapo ea hau moleng o mocha. Ka tloaelo sena se finyelloa ka li-multiple .rows, empa ha se mokhoa o mong le o mong oa ts'ebetsong o ka ikarabellang bakeng sa sena.

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

U ka boela ua sebelisa khefu ena libakeng tse ikhethileng ka lisebelisoa tsa rona tse arabelang .

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

Ho hlophisa bocha

Odara lihlopha

Sebelisa .order-litlelase ho laola tatellano ea pono ea litaba tsa hau. Litlelase tsena lia arabela, ka hona, u ka khona ho beha sebaka sa " orderbreakpoint" (mohlala, .order-1.order-md-2). E kenyelletsa tšehetso bakeng sa 1ho 12pholletsa le mekhahlelo eohle e mehlano ea grid.

Ea pele, empa e sa laoleheng

Ea bobeli, empa ea ho qetela

Ea boraro, empa ea pele

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

Ho boetse ho na le lihlopha tse arabelang .order-firstle .order-lasttse fetolang orderntho ka ho sebelisa order: -1le order: 13( order: $columns + 1), ka ho latellana. Litlelase tsena le tsona li ka tsoakoa le .order-*lihlopha tse baloang ka linomoro ha ho hlokahala.

Ea pele, empa ea ho qetela

Ea bobeli, empa e sa laolehe

Ea boraro, empa ea pele

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

Litšiea tsa offsetting

O ka hlakola likholomo tsa grid ka mekhoa e 'meli: .offset-litlelase tsa rona tse arabelang le lisebelisoa tsa rona tsa marang-rang . Lihlopha tsa li-grid li lekane ho bapisa likholomo ha li-margin li na le thuso bakeng sa meralo e potlakileng moo bophara ba offset bo fetohang.

Lihlopha tsa Offset

Tsamaisa likholomo ka ho le letona u sebelisa .offset-md-*lihlopha. Lihlopha tsena li eketsa karolo e ka ho le letšehali ea kholomo ka *likholomo. Ka mohlala, .offset-md-4e tsamaea .col-md-4ka holim'a likholomo tse 'nè.

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

Ntle le ho hlakola likholomo libakeng tse arabelang, ho ka 'na ha hlokahala hore u tsosolose li-offsets. Sheba sena ka liketso mohlaleng oa marang-rang .

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

Lisebelisoa tsa marang-rang

Ka ho fallela ho flexbox ho v4, u ka sebelisa lisebelisoa tsa marang-rang tse kang .mr-autoho qobella litšiea tsa bana ba motho ho tloha ho tse ling.

.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

Ho beha litaba tsa hau ka gridi ea kamehla, eketsa likholomo tse ncha .rowka .col-sm-*har'a .col-sm-*kholomo e teng. Mela e hlophiloeng e tlameha ho kenyelletsa sehlopha sa likholomo tse kopanyang ho fihla ho 12 kapa ka tlase ho moo (ha ho hlokahale hore u sebelise likholomo tse 12 tse teng).

Mohato oa 1: .col-sm-9

Mohato oa 2: .col-8 .col-sm-6

Mohato oa 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 metsoako

Ha u sebelisa lifaele tsa Sass tsa mohloli oa Bootstrap, u na le boikhethelo ba ho sebelisa mefuta-futa ea Sass le metsoako ho theha meralo ea maqephe a tloaelehileng, a semantic le a arabelang. Lihlopha tsa rona tsa marang-rang tse hlalositsoeng esale pele li sebelisa mefuta e tšoanang le metsoako ho fana ka lihlopha tse loketseng ho sebelisoa bakeng sa meralo e arabelang ka potlako.

Lintho tse fapaneng

Lintho tse feto-fetohang le limmapa li khetholla palo ea litšiea, bophara ba lithapo, le sebaka sa lipotso tsa mecha ea litaba moo ho ka qalang litšiea tse phaphametseng. Re sebelisa tsena ho hlahisa lihlopha tsa marang-rang tse hlalositsoeng ka holimo, hammoho le li-mixins tse tloaelehileng tse thathamisitsoeng ka tlase.

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

Metsoako

Li-mixins li sebelisoa hammoho le mefuta e fapaneng ea grid ho hlahisa CSS ea semantic bakeng sa likholomo tsa grid ka bomong.

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

Tšebeliso ea mohlala

U ka fetola mefuta e fapaneng ho ea ho litekanyetso tsa hau tsa tloaelo, kapa u sebelise li-mixins ka boleng ba tsona ba kamehla. Mohlala ke ona oa ho sebelisa li-setting tsa kamehla ho theha sebopeho sa likholomo tse peli se nang le lekhalo lipakeng.

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

Litaba tsa mantlha

Litaba tsa bobeli

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

Ho iketsetsa grid

U sebelisa mefuta e fapaneng ea li-grid tsa Sass le limmapa tsa rona, hoa khonahala ho etsa litlelase tsa grid tse boletsoeng esale pele. Fetola palo ea li-tiers, litekanyo tsa lipotso tsa mecha ea litaba, le bophara ba setshelo - ebe u kopanya hape.

Litšiea le li-gutters

Palo ea likholomo tsa grid e ka fetoloa ka mefuta ea Sass. $grid-columnse sebelisetsoa ho hlahisa bophara (ka liphesente) tsa kholomo e 'ngoe le e' ngoe ha e ntse $grid-gutter-widthe lumella bophara bo khethehileng ba breakpoint bo arotsoeng ka ho lekana ho pota padding-leftle padding-rightbakeng sa likotopo tsa kholomo.

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

Lihlopha tsa grid

Ho fetela ka nģ'ane ho litšiea ka botsona, u ka boela ua etsa palo ea lihlopha tsa grid. Haeba u ne u batla li-grid tse 'ne feela, u ka ntlafatsa $grid-breakpointsle $container-max-widthsho hong ho kang ena:

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

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

Ha u etsa liphetoho ho mefuta kapa limmapa tsa Sass, u tla hloka ho boloka liphetoho tsa hau le ho li bokella hape. Ho etsa joalo ho tla hlahisa sehlopha se secha sa litlelase tsa grid tse boletsoeng esale pele bakeng sa bophara ba likholomo, li-offsets le ho odara. Lisebelisoa tsa ponahalo tse arabelang le tsona li tla nchafatsoa ho sebelisa li-breakpoints tse tloaelehileng. Etsa bonnete ba hore o beha boleng ba grid ho px(eseng rem, em, kapa %).