Ntim

Lawv ua haujlwm li cas

Cov thawv ntim khoom yog cov txheej txheem yooj yim tshaj plaws hauv Bootstrap thiab yuav tsum tau siv thaum siv peb lub default grid system . Cov thawv ntim tau siv los ntim, ncoo, thiab (qee zaum) nruab nrab cov ntsiab lus hauv lawv. Thaum cov thawv tuaj yeem ua zes, feem ntau layouts tsis xav tau lub thawv nested.

Bootstrap los nrog peb lub thawv sib txawv:

• .container, uas teev ib qho max-widthntawm txhua qhov kev cuam tshuam
• .container-{breakpoint}, uas yog width: 100%kom txog rau thaum lub sij hawm breakpoint
• .container-fluid, uas yog width: 100%nyob rau hauv tag nrho cov breakpoints

Cov lus hauv qab no qhia txog yuav ua li cas txhua lub thawv max-widthsib piv rau qhov qub .containerthiab .container-fluidhla txhua qhov chaw tawg.

Saib lawv hauv kev nqis tes ua thiab muab piv rau hauv peb daim phiaj piv txwv .

Default thawv

Peb cov .containerchav kawm ua ntej yog lub thawv teb, qhov dav-ntev, txhais tau tias nws cov max-widthkev hloov pauv ntawm txhua qhov chaw tawg.

<div class="container">
  <!-- Content here -->
</div>

Responsive ntim

Cov thawv teb tau tso cai rau koj los qhia cov chav kawm uas yog 100% dav kom txog thaum lub sijhawm tawg tau teev tseg, tom qab ntawd peb thov max-widths rau txhua qhov siab dua. Piv txwv li, .container-smyog 100% dav pib kom txog rau thaum lub smbreakpoint mus txog, qhov twg nws yuav scale nrog md, lg, xl, thiab xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Cov thawv ntim dej

Siv .container-fluidrau lub thawv dav dav, hla tag nrho qhov dav ntawm qhov chaw saib.

<div class="container-fluid">
  ...
</div>

Sass

Raws li qhia saum toj no, Bootstrap tsim cov chav kawm ntawv teev tseg ua ntej los pab koj tsim cov layouts uas koj xav tau. Koj tuaj yeem hloov kho cov chav kawm uas tau teev tseg ua ntej los ntawm kev hloov kho Sass daim ntawv qhia (pom hauv _variables.scss) uas ua rau lawv:

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

Ntxiv rau kev hloov kho Sass, koj tuaj yeem tsim koj tus kheej ntim nrog peb Sass mixin.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Yog xav paub ntxiv thiab piv txwv txog kev hloov kho peb Sass maps thiab variables, thov mus saib ntawm Sass seem ntawm daim phiaj ntaub ntawv .