Daim phiaj system

Siv peb lub zog mobile-thawj flexbox kab sib chaws los tsim cov layouts ntawm tag nrho cov duab thiab qhov ntau thiab tsawg ua tsaug rau kaum ob kem system, tsib lub ntsiab lus teb tiers, Sass variables thiab mixins, thiab kaum ob chav kawm ua ntej.

Nws ua haujlwm li cas

Bootstrap's grid system siv cov thawv ntim, kab, thiab txhua kab los tsim thiab kho cov ntsiab lus. Nws tau tsim nrog flexbox thiab muaj kev ua haujlwm siab. Hauv qab no yog ib qho piv txwv thiab qhov tob saib seb cov kab sib chaws tuaj ua ke li cas.

Tshiab los yog tsis paub nrog flexbox? Nyeem qhov CSS Tricks flexbox phau ntawv qhia rau keeb kwm yav dhau, cov ntsiab lus, cov lus qhia, thiab cov lej snippets.

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

Cov piv txwv saum toj no tsim peb kab vaj huam sib luag ntawm cov khoom me me, nruab nrab, loj, thiab cov khoom siv loj ntxiv uas siv peb cov chav kawm ntawv teev tseg ua ntej. Cov kab ntawv no yog nyob nruab nrab ntawm nplooj ntawv nrog niam txiv .container.

Ua txhaum nws, ntawm no yog qhov nws ua haujlwm:

• Ntim muab ib txoj hauv kev rau nruab nrab thiab kab rov tav pad koj qhov chaw cov ntsiab lus. Siv .containerrau lub teb pixel dav lossis .container-fluidrau width: 100%thoob plaws txhua qhov chaw saib thiab qhov ntau thiab tsawg.
• Kab yog wrappers rau kab. Txhua kem muaj kab rov tav padding(hu ua gutter) rau tswj qhov chaw nruab nrab ntawm lawv. Qhov no paddingyog ces counteracted ntawm kab nrog tsis zoo margins. Ua li no, tag nrho cov ntsiab lus hauv koj cov kab ntawv yog visually dlhos sab laug.
• Nyob rau hauv ib daim phiaj layout, cov ntsiab lus yuav tsum muab tso rau hauv txhua kab thiab tsuas yog kab yuav yog cov me nyuam tam sim ntawm kab.
• Ua tsaug rau flexbox, daim phiaj kab uas tsis muaj qhov tshwj xeeb widthyuav cia li layout raws li cov kab sib npaug. Piv txwv li, plaub lub sij hawm ntawm .col-smtxhua tus yuav tau txais 25% dav ntawm qhov me me thiab nce. Saib cov kab ke auto-layout rau cov piv txwv ntxiv.
• Cov chav kawm kab qhia cov kab uas koj xav siv tawm ntawm qhov ua tau 12 ib kab. Yog li, yog tias koj xav tau peb kab sib npaug-dav thoob plaws, koj tuaj yeem siv .col-4.
• Kem widths tau teeb tsa hauv feem pua, yog li lawv ib txwm muaj dej thiab qhov loj me ntawm lawv cov niam txiv keeb kwm.
• Cov kab muaj kab rov tav paddinglos tsim cov gutters ntawm cov kab ke, txawm li cas los xij, koj tuaj yeem tshem tawm marginntawm kab thiab paddinglos ntawm kab nrog .no-guttersrau ntawm .row.
• Txhawm rau ua kom cov kab sib txuas lus, muaj tsib daim phiaj tawg, ib qho rau txhua qhov kev cuam tshuam : tag nrho cov breakpoints (ntxiv me), me, nruab nrab, loj, thiab loj ntxiv.
• Grid breakpoints yog raws li qhov tsawg kawg nkaus qhov dav tshaj tawm cov lus nug, txhais tau tias lawv siv rau qhov ntawd ib qho kev tawg thiab tag nrho cov saum toj no (xws li, .col-sm-4siv rau cov khoom me me, nruab nrab, loj, thiab cov khoom loj ntxiv, tab sis tsis yog thawj qhov xskev tawg).
• Koj tuaj yeem siv cov chav kawm ntawv uas tau hais tseg ua ntej (xws li .col-4) lossis Sass mixins rau ntau qhov cim cim.

Paub txog cov kev txwv thiab kab nyob ib ncig ntawm flexbox , zoo li qhov tsis muaj peev xwm siv qee cov ntsiab lus HTML li flex ntim .

Grid xaiv

Thaum Bootstrap siv ems lossis rems rau kev txhais ntau qhov ntau thiab tsawg, pxs yog siv rau cov phiaj xwm tawg thiab cov thawv dav. Qhov no yog vim qhov dav ntawm qhov chaw saib yog nyob rau hauv pixels thiab tsis hloov nrog font loj .

Saib seb yam ntawm Bootstrap grid system ua haujlwm li cas hla ntau yam khoom siv nrog lub rooj ua ke.

Auto-layout kab

Siv cov chav kawm tshwj xeeb ntawm cov kab ke tshwj xeeb kom yooj yim kem qhov loj me yam tsis muaj cov lej qhia meej xws li .col-sm-6.

Sib npaug-dav

Piv txwv li, ntawm no yog ob daim phiaj layouts uas siv rau txhua lub cuab yeej thiab qhov chaw saib, los ntawm xsmus rau xl. Ntxiv ib chav tsev-tsawg chav kawm rau txhua qhov breakpoint koj xav tau thiab txhua kab yuav yog tib qhov dav.

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

Sib npaug-dav ntau kab

Tsim cov kab sib npaug-dav uas hla ntau kab los ntawm kev ntxig ib .w-100qhov chaw koj xav kom cov kab tawg mus rau kab tshiab. Ua kom tawg teb los ntawm kev sib xyaw .w-100nrog qee cov khoom siv hluav taws xob teb .

Muaj Safari flexbox kab laum uas tiv thaiv qhov no los ntawm kev ua haujlwm yam tsis muaj kev qhia meej flex-basislossis border. Muaj cov kev daws teeb meem rau cov laus browser versions, tab sis lawv yuav tsum tsis txhob tsim nyog yog tias koj lub hom phiaj browsers tsis poob rau hauv buggy versions.

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

Teem ib kab dav dav

Nws pib-layout rau flexbox daim phiaj kab kuj txhais tau hais tias koj tuaj yeem teeb tsa qhov dav ntawm ib kem thiab muaj cov nus muag kab tau hloov pauv nyob ib puag ncig nws. Koj tuaj yeem siv cov chav kawm ntawv teev tseg ua ntej (raws li qhia hauv qab no), daim phiaj sib xyaw, lossis qhov dav hauv kab. Nco ntsoov tias lwm cov kab yuav hloov loj txawm tias qhov dav ntawm kab nruab nrab.

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

Cov ntsiab lus dav sib txawv

Siv col-{breakpoint}-autocov chav kawm kom loj kab raws li qhov dav dav ntawm lawv cov ntsiab lus.

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

Cov chav kawm teb

Bootstrap daim phiaj suav nrog tsib qib ntawm cov chav kawm ua ntej rau kev tsim cov txheej txheem ua haujlwm. Customize qhov loj ntawm koj cov kab ntawv ntxiv me me, me, nruab nrab, loj, lossis cov khoom loj ntxiv txawm li cas los xij koj pom haum.

Tag nrho cov breakpoints

Rau daim phiaj uas zoo ib yam los ntawm qhov tsawg tshaj plaws ntawm cov khoom siv mus rau qhov loj tshaj plaws, siv cov .colthiab .col-*cov chav kawm. Qhia kom muaj tus lej lej thaum koj xav tau ib kab tshwj xeeb; txwv tsis pub, xav tias dawb los lo rau .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>

Stacked rau kab rov tav

Siv ib txheej ntawm .col-sm-*cov chav kawm, koj tuaj yeem tsim cov kab sib chaws yooj yim uas pib tawm hauv pawg thiab ua kab rov tav ntawm qhov chaw me me ( 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>

Sib tov thiab sib tov

Tsis xav kom koj cov kab ke yooj yim nyob rau hauv ib co kab sib chaws? Siv cov chav kawm sib txawv rau txhua qib raws li xav tau. Saib cov piv txwv hauv qab no kom paub ntau ntxiv txog qhov nws ua haujlwm li cas.

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

Gutters

Gutters tuaj yeem hloov kho los ntawm kev sib cais tshwj xeeb padding thiab cov chav kawm tsis zoo ntawm cov khoom siv hluav taws xob. Txhawm rau hloov cov gutters nyob rau hauv ib kab, ua ke ib qho kev siv tsis zoo ntawm cov khoom siv hluav taws xob .rowthiab sib txuam padding utilities ntawm .cols. Tus niam txiv .containerlos yog .container-fluidniam txiv kuj yuav tsum tau hloov kho ib yam nkaus kom tsis txhob muaj qhov tsis xav tau, siv dua cov khoom siv padding.

Nov yog ib qho piv txwv ntawm kev kho cov kab sib chaws Bootstrap ntawm qhov loj ( lg) breakpoint thiab saum toj no. Peb tau nce lub .colpadding nrog .px-lg-5, counteracted nrog .mx-lg-n5rau ntawm niam txiv .rowthiab ces kho lub .containerwrapper nrog .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>

Kab kab

Siv cov .row-cols-*chav kawm teb kom sai sai rau cov kab ntawv uas zoo tshaj plaws rau koj cov ntsiab lus thiab kev teeb tsa. Txawm li cas los xij, cov chav kawm ib txwm .col-*siv rau cov kab ke ib leeg (xws li, .col-md-4), cov chav kawm kab ke raug teeb tsa rau ntawm niam txiv .rowua qhov luv.

Siv cov kab ke kab ke no kom sai sai tsim cov kab sib chaws yooj yim lossis tswj koj daim npav layouts.

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

Koj tuaj yeem siv Sass mixin nrog 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);
  }
}

Kev sib tw

Siv flexbox alignment utilities rau vertically thiab horizontally dlhos kab. Internet Explorer 10-11 tsis txhawb nqa ntsug ntawm cov khoom flex thaum lub thawv flex muaj min-heightraws li qhia hauv qab no. Saib Flexbugs #3 kom paub meej ntxiv.

Vertical alignment

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

Kab rov tav alignment

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

Tsis muaj gutters

Cov gutters ntawm txhua kab hauv peb cov chav kawm ntawv teev tseg ua ntej tuaj yeem raug tshem tawm nrog .no-gutters. Qhov no tshem tawm qhov tsis zoo marginntawm .rowthiab kab rov tav paddinglos ntawm txhua kab me nyuam tam sim ntawd.

Nov yog qhov chaws los tsim cov qauv no. Nco ntsoov tias kem overrides yog scoped rau tsuas yog thawj cov me nyuam kab thiab yog tsom los ntawm tus cwj pwm selector . Thaum qhov no tsim ib qho kev xaiv tshwj xeeb, kem padding tseem tuaj yeem hloov kho ntxiv nrog cov khoom siv sib nrug .

Xav tau ib tug ntug-rau-ntug tsim? Tso niam txiv .containerlos .container-fluid.

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

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

Hauv kev xyaum, ntawm no yog qhov nws zoo li. Nco ntsoov koj tuaj yeem txuas ntxiv siv qhov no nrog rau tag nrho lwm cov chav kawm ntawv teev tseg ua ntej (xws li kab dav dav, cov qib teb, rov txiav txim dua, thiab ntau dua).

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

Kem wrapping

Yog tias ntau tshaj 12 kab tau muab tso rau hauv ib kab, txhua pawg ntawm cov kab ntxiv yuav, raws li ib chav tsev, qhwv rau ib kab tshiab.

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

Kem so

Kev tawg kab mus rau kab tshiab hauv flexbox yuav tsum muaj lub hack me me: ntxiv cov khoom nrog width: 100%txhua qhov chaw koj xav qhwv koj cov kab rau kab tshiab. Feem ntau qhov no ua tiav nrog ntau yam .rows, tab sis tsis yog txhua txoj kev siv yuav suav rau qhov no.

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

Koj tseem tuaj yeem siv qhov kev so no ntawm cov ntsiab lus tshwj xeeb nrog peb cov khoom siv hluav taws xob ua haujlwm .

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

Reordering

Txiav cov chav kawm

Siv .order-cov chav kawm los tswj qhov kev txiav txim pom ntawm koj cov ntsiab lus. Cov chav kawm no yog teb, yog li koj tuaj yeem teeb tsa orderlos ntawm kev tawg (xws li, .order-1.order-md-2). Xws li kev txhawb nqa rau 1thoob 12plaws txhua tsib kab sib chaws.

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

Kuj tseem muaj cov lus teb .order-firstthiab .order-lastcov chav kawm uas hloov cov orderntsiab lus los ntawm kev thov order: -1thiab order: 13( order: $columns + 1), feem. Cov chav kawm no tseem tuaj yeem sib xyaw nrog cov .order-*chav kawm lej raws li xav tau.

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

Offsetting kab

Koj tuaj yeem offset kab kab hauv ob txoj hauv kev: peb .offset-cov chav kawm kab sib txuas lus thiab peb cov khoom siv hluav taws xob . Cov chav kawm kab sib chaws yog qhov loj me kom phim cov kab thaum cov npoo muaj txiaj ntsig zoo dua rau cov txheej txheem nrawm uas qhov dav ntawm qhov offset sib txawv.

Cov chav kawm offset

Txav cov kab mus rau sab xis siv .offset-md-*cov chav kawm. Cov chav kawm no nce sab laug ntawm ib kab los ntawm *kab. Piv txwv li, .offset-md-4txav .col-md-4dhau plaub kab.

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

Ntxiv nrog rau kev tshem tawm kab ntawm cov ntsiab lus teb, koj yuav tsum tau rov pib dua offsets. Saib qhov no hauv kev nqis tes ua hauv daim phiaj piv txwv .

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

Cov khoom siv dav dav

Nrog rau kev txav mus rau flexbox hauv v4, koj tuaj yeem siv cov khoom siv paj nruag zoo .mr-autoli yuam cov kwv tij sib nrug deb ntawm ib leeg.

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

Zes

Txhawm rau zes koj cov ntsiab lus nrog daim phiaj xwm txheej, ntxiv ib qho tshiab .rowthiab cov .col-sm-*kab hauv kab uas twb muaj lawm .col-sm-*. Nested kab yuav tsum muaj cov kab ke uas ntxiv txog 12 lossis tsawg dua (nws tsis tas yuav tsum tau siv tag nrho 12 kab muaj).

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

Sib tov

Thaum siv Bootstrap qhov chaw Sass cov ntaub ntawv, koj muaj kev xaiv siv Sass variables thiab mixins los tsim kev cai, semantic, thiab teb layouts nplooj ntawv. Peb cov chav kawm ntawv teev tseg ua ntej siv tib qhov sib txawv thiab cov mixins los muab cov chav kawm npaj txhij-rau-siv rau cov lus teb ceev ceev.

Hloov pauv

Qhov sib txawv thiab daim duab qhia kev txiav txim seb tus naj npawb ntawm kab, qhov dav ntawm lub qhov dej, thiab cov lus nug hauv xov xwm uas yuav pib cov kab ke. Peb siv cov no los tsim cov chav kawm ntawv teev tseg ua ntej sau tseg saum toj no, nrog rau cov kev cai mixins teev hauv qab no.

$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

Mixins tau siv ua ke nrog cov kab sib chaws sib txawv los tsim cov CSS semantic rau ib tus kab sib chaws.

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

Piv txwv kev siv

Koj tuaj yeem hloov kho qhov hloov pauv rau koj tus kheej cov txiaj ntsig kev cai, lossis tsuas yog siv cov mixins nrog lawv cov nqi qub. Ntawm no yog ib qho piv txwv ntawm kev siv lub neej ntawd teeb tsa los tsim ob kab layout nrog qhov sib txawv ntawm.

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

Customizing daim phiaj

Siv peb cov kab sib txuas ua ke Sass sib txawv thiab cov duab qhia chaw, nws muaj peev xwm ua kom haum rau cov chav kawm ntawv teev tseg ua ntej. Hloov tus naj npawb ntawm cov tiers, cov lus nug xov xwm qhov ntev, thiab lub thawv dav-ces rov ua dua.

Kum thiab gutters

Tus naj npawb ntawm kab sib chaws tuaj yeem hloov kho ntawm Sass variables. $grid-columnsyog siv los tsim qhov dav (hauv feem pua) ntawm txhua tus kab ke thaum $grid-gutter-widthteeb tsa qhov dav rau kab gutters.

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

Daim phiaj tiers

Tsiv dhau ntawm kab ntawv lawv tus kheej, koj tuaj yeem hloov kho tus lej ntawm kab sib chaws. Yog tias koj xav tau plaub kab sib chaws xwb, koj yuav hloov kho $grid-breakpointsthiab $container-max-widthsrau qee yam zoo li no:

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

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

Thaum ua ib qho kev hloov pauv rau Sass variables lossis maps, koj yuav tsum tau txuag koj cov kev hloov pauv thiab rov ua dua. Ua li no yuav tso tawm cov txheej txheem tshiab ntawm cov chav kawm ntawv predefined rau kab dav dav, offsets, thiab kev txiav txim. Cov khoom siv pom kev pom tau zoo kuj yuav raug hloov kho kom siv cov kev cai breakpoints. Nco ntsoov teem daim phiaj qhov tseem ceeb hauv px(tsis yog rem, em, lossis %).