Akpa

Otú ha si arụ ọrụ

Akpa bụ ihe nhazi nhazi kachasị dị na Bootstrap ma achọrọ ya mgbe anyị na-eji sistemụ grid anyị . A na-eji akpa na-ebu, pad, na (mgbe ụfọdụ) etiti ọdịnaya dị n'ime ha. Ọ bụ ezie na enwere ike ịgbanye arịa , ọtụtụ nhazi anaghị achọ akpa akwụrụ.

Bootstrap na-abịa na akpa atọ dị iche iche:

• .container, nke na-edobe a max-widthn'ebe nkwụsịtụ ọ bụla na-anabata
• .container-{breakpoint}, nke bụ width: 100%ruo mgbe a kapịrị ọnụ nkwụsịtụ
• .container-fluid, nke bụ width: 100%n'oge nkwụsịtụ niile

Tebụlụ dị n'okpuru na-egosi otú akpa nke ọ bụla si max-widthatụnyere nke mbụ .containeryana .container-fluidgafee ebe nkwụsịtụ ọ bụla.

Hụ ha ka ha na-eme ma tulee ha na ihe atụ Grid anyị .

Akpa mbụ

Klas nke ndabara .containerbụ ihe na-anabata, nke nwere ogologo obosara, nke pụtara max-widthmgbanwe ya na ebe nkwụsịtụ ọ bụla.

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

Akpa na-anabata

Ngwongwo na-anabata ihe na-enye gị ohere ịkọwa klas nke dị 100% n'obosara ruo mgbe a ga-erute ebe nkwụsịtụ akọwapụtara, mgbe nke a gasịrị, anyị na-etinye max-widths maka nke ọ bụla n'ime ebe nkwụsịtụ dị elu. Dịka ọmụmaatụ, .container-smobosara 100% ịmalite ruo mgbe a smga-erute ebe nkwụsịtụ, ebe ọ ga-eji md, lg, xl, na 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>

Akpa mmiri mmiri

Jiri .container-fluidmaka akpa obosara zuru oke, na-agbasa obosara nke ebe nlele.

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

Sass

Dịka egosiri n'elu, Bootstrap na-ewepụta usoro klaasị akpa agbapụtagoro iji nyere gị aka iwulite nhazi nke ịchọrọ. Ị nwere ike hazie klas akpa ndị a eburu ụzọ kọwaa site n'ịgbanwe maapụ Sass (dị na _variables.scss) nke na-enye ha ike:

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

Na mgbakwunye na ịhazi Sass, ị nwekwara ike ịmepụta arịa nke gị na Sass mixin anyị.

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

Maka ozi ndị ọzọ na ihe atụ maka otu esi agbanwe maapụ Sass na mgbanwe, biko rụtụ aka na ngalaba Sass nke akwụkwọ Grid .