Sistimi ea grid

Mohlala

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 tlaase mona ke mohlala le tlhaloso e tebileng ea hore na tsamaiso ea marang-rang e kopana joang.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Mohlala o ka holimo o theha likholomo tse tharo tse bophara bo lekanang ho lisebelisoa tsohle le li-ports tsa pono ho sebelisa litlelase tsa rona tse boletsoeng esale pele. Likholomo tseo li bohareng ba leqephe la motsoali .container.

Kamoo e sebetsang kateng

Ho e senya, mona ke kamoo tsamaiso ea grid e kopanang kateng:

• Gridi ea rona e ts'ehetsa libaka tse tšeletseng tse arabelang . Li-breakpoints li ipapisitse le min-widthlipotso tsa mecha ea litaba, ho bolelang hore li ama sebaka seo le bohle ba kaholimo ho eona (mohlala, .col-sm-4e sebetsa ho sm, md, lg, xl, le xxl). Sena se bolela hore o ka laola boholo ba setshelo le kholomo le boitšoaro ka ntlha e 'ngoe le e 'ngoe.

• Bohareng ba lijana 'me u pete litaba tsa hau ka ho otloloha. Sebelisa .containerbakeng sa bophara ba pixel bo arabelang, .container-fluidbakeng sa width: 100%libaka tsohle tsa pono le lisebelisoa, kapa sejana se arabelang (mohlala, .container-md) bakeng sa motsoako oa bophara ba mokelikeli le pixel.

• 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. Sena paddingse tla hanyetsoa meleng e nang le maqheka a mabe ho netefatsa hore litaba tse kholomong tsa hau li hlophisitsoe ka pono ho theosa le leqeleng. Mela e boetse e ts'ehetsa litlelase tsa mofetoleli ho sebelisa ka mokhoa o ts'oanang litlelase tsa boholo ba likholomo le li-gutter ho fetola sebaka sa litaba tsa hau.

• Likholomo li tenyetseha ka mokhoa o makatsang. Ho na le litšiea tse 12 tsa litempele tse fumanehang moleng o mong le o mong, tse u lumellang hore u thehe metsoako e fapaneng ea likarolo tse pharallang palo efe kapa efe ea likholomo. Lihlopha tsa kholomo li bontša palo ea litšiea tsa lithempleite tse lokelang ho pharalla (mohlala, col-4li-spans four). widths li behiloe ka liphesente kahoo u lula u na le boholo bo lekanang.

• Li-Gutters le tsona lia arabela ebile lia khoneha. Litlelase tsa Gutter li fumaneha libakeng tsohle tsa phomolo, ka boholo bo lekanang le sebaka sa rona sa marang-rang le sebaka sa marang-rang . Fetola li-gutter tse tšekaletseng ka .gx-*lihlopha, li-gutter tse emeng tse nang le .gy-*, kapa li-gutters kaofela tse nang le .g-*lihlopha. .g-0e boetse e fumaneha ho tlosa li-gutters.

• Mefuta e fapaneng ea Sass, limmapa, le metsoako e matlafatsa marang-rang. Haeba u sa batle ho sebelisa litlelase tsa grid tse boletsoeng esale pele ho Bootstrap, u ka sebelisa mohloli oa grid ea rona Sass ho iketsetsa ea hau e nang le semantic markup. Re boetse re kenyelletsa lisebelisoa tse ling tsa CSS ho sebelisa mefuta ena ea Sass bakeng sa maemo a bonolo le ho feta bakeng sa hau.

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

Sistimi ea grid ea Bootstrap e ka ikamahanya le maemo ohle a ts'eletseng a kamehla, le libaka life kapa life tseo u li khethang. Likarolo tse tšeletseng tsa grid ea kamehla ke tse latelang:

• E nyane haholo (xs)
• Nyenyane (sm)
• Mahareng (md)
• E kholo (lg)
• E kholo haholo (xl)
• E kholo haholo (xxl)

Joalo ka ha ho boletsoe kaholimo, e 'ngoe le e' ngoe ea likheo tsena e na le setshelo sa eona, sehlohlolo sa sehlopha se ikhethileng, le li-modifiers. Mona ke kamoo grid e fetohang libakeng tsena tsa phomolo:

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 xxl. 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 text-center">
  <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>

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 text-center">
  <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 text-center">
  <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 tšeletseng ea litlelase tse boletsoeng esale pele bakeng sa ho aha meralo e arabelang e rarahaneng. 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 text-center">
  <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 text-center">
  <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 text-center">
  <!-- 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>

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. Ka .row-cols-autouena u ka fa litšiea bophara ba tsona ba tlhaho.

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 text-center">
  <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 text-center">
  <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 text-center">
  <div class="row row-cols-auto">
    <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 text-center">
  <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 text-center">
  <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 text-center">
  <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);
  }
}

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 text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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

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 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: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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-row-columnse sebelisetsoa ho beha palo e kholo ea likholomo tsa .row-cols-*, nomoro efe kapa efe e fetang moeli ona ha e natsoe.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !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 %).