Daim phiaj system

Piv txwv

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 cov lus piav qhia tob txog seb qhov kab sib chaws sib koom ua ke li cas.

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Cov piv txwv saum toj no tsim peb kab sib npaug-dav thoob plaws txhua yam khoom siv thiab cov chaw saib 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.

Nws ua haujlwm li cas

Ua txhaum nws, ntawm no yog li cas cov kab sib chaws los ua ke:

• Peb daim phiaj txhawb rau 6 lub teb cov ntsiab lus . Cov ntsiab lus tawg yog raws li min-widthcov lus nug hauv xov xwm, txhais tau tias lawv cuam tshuam qhov kev tawg thiab tag nrho cov saum toj no (piv txwv li, .col-sm-4siv rau sm, md, lg, xl, thiab xxl). Qhov no txhais tau hais tias koj tuaj yeem tswj lub thawv thiab kab ntawv qhov loj me thiab tus cwj pwm los ntawm txhua qhov chaw tawg.

• Ntim nruab nrab thiab kab rov tav pad koj cov ntsiab lus. Siv .containerrau lub teb pixel dav, .container-fluidrau width: 100%thoob plaws txhua qhov chaw saib thiab cov khoom siv, lossis lub thawv teb (xws li, .container-md) rau kev sib xyaw ntawm cov kua dej thiab pixel dav.

• 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 tom qab ntawd counteracted ntawm cov kab nrog cov npoo tsis zoo kom ntseeg tau tias cov ntsiab lus hauv koj cov kab yog visually dlhos sab laug. Cov kab kuj tseem txhawb cov chav kawm hloov kho kom sib npaug siv cov kab ke thiab cov chav kawm gutter los hloov qhov sib nrug ntawm koj cov ntsiab lus.

• Cov kab yog qhov hloov tau zoo kawg. Muaj 12 tus qauv kab ntawv muaj nyob rau ib kab, tso cai rau koj los tsim cov kev sib txawv ntawm cov ntsiab lus uas hla txhua kab. Cov chav kawm kab qhia tus naj npawb ntawm cov qauv kab rau ncua (piv txwv li, col-4spans plaub). widths tau teeb tsa hauv feem pua ​​​​yog li koj ib txwm muaj qhov sib npaug sib npaug.

• Gutters kuj teb thiab customizable. Cov chav kawm Gutter muaj nyob thoob plaws txhua qhov chaw tawg, nrog rau txhua qhov ntau thiab tsawg raws li peb cov npoo thiab qhov sib nrug ntawm qhov sib txawv . Hloov cov gutters kab rov tav nrog .gx-*cov chav kawm, ntsug gutters nrog .gy-*, los yog tag nrho cov gutters nrog .g-*cov chav kawm. .g-0kuj muaj los tshem tawm gutters.

• Sass variables, maps, thiab mixins zog rau daim phiaj. Yog tias koj tsis xav siv cov chav kawm ntawv teev tseg ua ntej hauv Bootstrap, koj tuaj yeem siv peb daim phiaj qhov chaw Sass los tsim koj tus kheej nrog ntau semantic markup. Peb kuj suav nrog qee qhov kev cai CSS kom haus cov Sass hloov pauv kom yooj yim dua rau koj.

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

Bootstrap's kab sib chaws tuaj yeem hloov kho thoob plaws rau tag nrho rau lub sijhawm tawg, thiab txhua qhov kev sib cais uas koj hloov kho. Lub rau lub default grid tiers yog raws li nram no:

• Ntxiv me me (xs)
• Me me (sm)
• Nruab nrab (md)
• Loj (lg)
• Loj loj (xl)
• Ntxiv loj (xxl)

Raws li tau sau tseg saum toj no, txhua tus ntawm cov breakpoints no muaj lawv lub thawv, tshwj xeeb hauv chav kawm ua ntej, thiab hloov kho. Ntawm no yog yuav ua li cas cov kab sib chaws hloov pauv ntawm cov breakpoints no:

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

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

Kab kab

Siv cov .row-cols-*chav kawm teb kom sai sai rau cov kab ke 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 niam txiv .rowraws li lub neej ntawd rau txhua kab. Nrog .row-cols-autokoj tuaj yeem muab cov kab lawv qhov dav dav.

Siv cov kab ke kab ke no kom sai tsim cov kab sib chaws yooj yim lossis tswj koj daim npav layouts thiab override thaum xav tau ntawm kab ke.

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

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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);
  }
}

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

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: 1.5rem;

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

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

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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 {
  @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>

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: 1.5rem !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 %).