Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Awọn apoti

Awọn apoti jẹ bulọọki ile ipilẹ ti Bootstrap ti o ni, paadi, ati ṣe deede akoonu rẹ laarin ẹrọ ti a fun tabi wiwo wiwo.

Bawo ni wọn ṣe n ṣiṣẹ

Awọn apoti jẹ ẹya ipilẹ akọkọ julọ ni Bootstrap ati pe a nilo nigba lilo eto akoj aiyipada wa . Awọn apoti ni a lo lati ni, paadi, ati (nigbakugba) aarin akoonu laarin wọn. Lakoko ti awọn apoti le jẹ itẹ-ẹiyẹ, ọpọlọpọ awọn ipalemo ko nilo eiyan itẹ-ẹiyẹ kan.

Bootstrap wa pẹlu awọn apoti oriṣiriṣi mẹta:

  • .container, eyi ti o ṣeto a max-widthni kọọkan idahun breakpoint
  • .container-{breakpoint}, ti o jẹ width: 100%titi ti pàtó kan breakpoint
  • .container-fluid, eyi ti o jẹ width: 100%ni gbogbo breakpoints

Awọn tabili ni isalẹ sapejuwe bi kọọkan eiyan ká max-widthafiwe si awọn atilẹba .containerati ki o .container-fluidkọja kọọkan breakpoint.

Wo wọn ni iṣe ki o ṣe afiwe wọn ninu apẹẹrẹ Grid wa .

Afikun kekere
<576px
Kekere
≥576px
Alabọde
≥768px
Tobi
≥992px
X-tobi
≥1200px
XX-tobi
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

Eiyan aiyipada

Kilasi aiyipada .containerwa jẹ idahun, eiyan iwọn ti o wa titi, afipamo awọn max-widthiyipada rẹ ni aaye fifọ kọọkan.

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

Awọn apoti idahun

Awọn apoti idahun gba ọ laaye lati pato kilasi kan ti o jẹ 100% fife titi ti aaye isinmi ti a sọ pato ti de, lẹhin eyi a lo max-widths fun ọkọọkan awọn aaye fifọ giga. Fun apẹẹrẹ, .container-smni 100% fife lati bẹrẹ titi aaye smfifọ yoo ti de, nibiti yoo ti ṣe iwọn pẹlu md, lg, xl, ati 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>

Awọn apoti omi

Lo .container-fluidfun eiyan iwọn ni kikun, ti o yika gbogbo iwọn ti oju wiwo naa.

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

Sass

Gẹgẹbi a ti han loke, Bootstrap ṣe ipilẹṣẹ lẹsẹsẹ ti awọn kilasi eiyan ti a ti sọ tẹlẹ lati ṣe iranlọwọ fun ọ lati kọ awọn ipilẹ ti o fẹ. O le ṣe akanṣe awọn kilasi eiyan ti a ti sọ tẹlẹ nipa iyipada maapu Sass (ti o wa ninu _variables.scss) ti o fun wọn ni agbara:

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

Ni afikun si isọdi Sass, o tun le ṣẹda awọn apoti tirẹ pẹlu apopọ Sass wa.

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

Fun alaye diẹ sii ati awọn apẹẹrẹ lori bii o ṣe le yipada awọn maapu Sass wa ati awọn oniyipada, jọwọ tọka si apakan Sass ti iwe Grid .