Nā pahu pahu

Pehea lākou e hana ai

ʻO nā pahu ka mea hoʻonohonoho maʻamau ma Bootstrap a koi ʻia i ka wā e hoʻohana ai i kā mākou ʻōnaehana grid default . Hoʻohana ʻia nā pahu e hoʻopaʻa, pad, a (i kekahi manawa) e hoʻokomo i ka ʻike i loko o lākou. ʻOiai hiki ke hoʻopaʻa ʻia nā ipu, ʻaʻole pono ka hapa nui o nā hoʻolālā i kahi ipu pūnana.

Hele mai ʻo Bootstrap me ʻekolu pahu like ʻole:

• .container, ka mea e hoʻonoho i kahi max-widthma kēlā me kēia haʻihaʻi pane
• .container-fluid, aia width: 100%ma nā wahi haʻihaʻi a pau
• .container-{breakpoint}, ʻo ia width: 100%a hiki i ka haki i ʻōlelo ʻia

Hōʻike ka papa ma lalo i ke ʻano o ka hoʻohālikelike ʻana o kēlā me kēia pahu max-widthme ka mea kumu .containera .container-fluidma kēlā me kēia wahi haʻihaʻi.

E ʻike iā lākou i ka hana a hoʻohālikelike iā lākou i kā mākou Grid hiʻohiʻona .

pahu paʻamau

ʻO kā mākou papa paʻamau .containerhe pahu pane, paʻa-ākea, ʻo ia hoʻi kona mau max-widthloli i kēlā me kēia breakpoint.

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

Nā pahu pane

Hāʻawi nā pahu pane iā ʻoe e kuhikuhi i kahi papa i 100% ākea a hiki i ka breakpoint i ʻōlelo ʻia, a laila e noi mākou i max-widths no kēlā me kēia o nā breakpoints kiʻekiʻe. No ka laʻana, .container-smhe 100% ka laulā e hoʻomaka ai a hiki i ka smhaʻihaʻi, kahi e piʻi ai me md, lg, xl, a me 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>

ʻO nā pahu wai

E hoʻohana .container-fluidno ka ipu laula piha, me ka laula holoʻokoʻa o ke awa ʻike.

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

Sass

E like me ka mea i hōʻike ʻia ma luna nei, hoʻopuka ʻo Bootstrap i kahi ʻano o nā papa ipu i koho mua ʻia e kōkua iā ʻoe e kūkulu i nā hoʻolālā āu e makemake ai. Hiki iā ʻoe ke hoʻopilikino i kēia mau papa ipu i hoʻonohonoho mua ʻia ma ka hoʻololi ʻana i ka palapala ʻāina Sass (ʻike ʻia ma _variables.scss) e mana iā lākou:

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

Ma kahi o ka hoʻopilikino ʻana i ka Sass, hiki iā ʻoe ke hana i kāu mau ipu ponoʻī me kā mākou 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();
}

No ka ʻike hou aku a me nā laʻana e pili ana i ka hoʻololi ʻana i kā mākou mau palapala Sass a me nā mea hoʻololi, e ʻoluʻolu e nānā i ka ʻāpana Sass o ka palapala Grid .