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.

<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 sebaka se paddingotlolohileng (se 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.

Likholomo tsa moralo oa boiketsetso

Sebelisa litlelase tse khethehileng tsa likholomo bakeng sa ho etsa boholo bo bonolo ba likholomo ntle le sehlopha se nang le linomoro tse hlakileng 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.

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

E lekanang-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 ho ea moleng o mocha. Etsa hore khefu e sebetse ka ho kopanya .w-100le lisebelisoa tse ling tse arabelang .

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 mefuta ea khale ea sebatli, empa ha ea lokela ho hlokahala haeba libatli tseo u li batlang li sa oele mefuteng ea buggy.

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

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.

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

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

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-*lihlopha. Hlalosa sehlopha sa linomoro ha u hloka kholomo e boholo bo khethehileng; ho seng joalo, ikutloe u lokolohile ho khomarela .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>

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 ebe e ba e tšekaletseng sebakeng se senyenyane ( 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>

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.

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

Lithako

Li-Gutters li ka fetoloa ka mokhoa o ts'oanelang ka li-padding tse ikhethileng le litlelase tse mpe tsa tšebeliso ea marang-rang. Ho fetola li-gutters ka tatellano e fanoeng, kopanya ts'ebeliso e mpe ea marang-rang holim'a lisebelisoa .rowtse tšoanang tsa padding ho .cols. Ho ka 'na ha hlokahala hore motsoali .containerkapa .container-fluidmotsoali a lokisoe ho qoba ho phalla ho sa batleheng, a sebelisa lisebelisoa tse tšoanang hape.

Mohlala ke ona oa ho etsa grid ea Bootstrap sebakeng se seholo ( lg) le holimo. Re ekelitse .colpadding ka .px-lg-5, ra hanana le seo .mx-lg-n5ho motsoali .rowmme .containerra lokisa sephutheloana ka .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>

Litšiea tsa mela

Sebelisa .row-cols-*litlelase tse arabelang ho beha kapele palo ea likholomo tse fanang ka litaba tsa hau hantle le sebopeho. Le hoja litlelase tse tloaelehileng .col-*li sebetsa ho likholomo ka bomong (mohlala, .col-md-4), litlelase tsa mela e behiloe ho motsoali .rowjoalo ka tsela e khaoletsang.

Sebelisa litlelase tsena tsa mela ho theha meralo ea grid ea mantlha ka potlako kapa ho laola meralo ea likarete tsa hau.

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

U ka sebelisa motsoako o tsamaeang le Sass, 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);
  }
}

Ho tsamaisana

Sebelisa lisebelisoa tsa tekano ea flexbox ho hokahanya likholomo tse otlolohileng le tse tšekaletseng. Internet Explorer 10-11 ha e tšehetse tokiso e otlolohileng ea lintho tse feto-fetohang ha sesebelisoa sa flex se na le min-heightjoalo ka ha ho bonts'itsoe ka tlase. Sheba Flexbugs #3 bakeng sa lintlha tse ling.

Tsepamiso e otlolohileng

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

Ho tsamaisana le maemo

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

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

Ho phuthela khola

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

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

Likhefutso tsa khola

Ho pshatla litšiea ho ea moleng o mocha ka har'a flexbox ho hloka ts'ebetso e nyane: eketsa element ka width: 100%hohle moo u batlang ho phuthela likholomo tsa 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.

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

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

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

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.

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

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.

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

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

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

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 .

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

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.

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

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

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

Mefuta e fapaneng

Lintho tse feto-fetohang le limmapa li khetholla palo ea litšiea, bophara ba lithapo, le sebaka sa lipotso tsa mecha ea phatlalatso moo ho ka qalisoang 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);
  }
}

<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 sebelisoa ho hlahisa bophara (ka liphesente) tsa kholomo e 'ngoe le e' ngoe ha e ntse $grid-gutter-widthe beha bophara ba li-gutters 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 %).