Awọn apoti

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 .

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 .