Ujoj

Kiel ili funkcias

Ujoj estas la plej baza enpaĝiga elemento en Bootstrap kaj estas postulataj kiam oni uzas nian defaŭltan kradsistemon . Ujoj kutimas enhavi, kuseneton kaj (foje) centri la enhavon ene de ili. Dum ujoj povas esti nestitaj, plej multaj aranĝoj ne postulas nestitan ujon.

Bootstrap venas kun tri malsamaj ujoj:

• .container, kiu fiksas a max-widthĉe ĉiu respondema rompopunkto
• .container-fluid, kiu estas width: 100%ĉe ĉiuj rompopunktoj
• .container-{breakpoint}, kiu estas width: 100%ĝis la specifita rompopunkto

La malsupra tabelo ilustras kiel ĉiu ujo max-widthkomparas al la originalo .containerkaj .container-fluidtrans ĉiu rompopunkto.

Vidu ilin en ago kaj komparu ilin en nia Ekzemplo de Krado .

Defaŭlta ujo

Nia defaŭlta .containerklaso estas respondema, fikslarĝa ujo, kio signifas ĝiajn max-widthŝanĝojn ĉe ĉiu rompopunkto.

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

Respondema ujoj

Respondema ujoj permesas vin specifi klason kiu estas 100% larĝa ĝis la specifita rompopunkto estas atingita, post kio ni aplikas max-widths por ĉiu el la pli altaj rompopunktoj. Ekzemple, .container-smestas 100% larĝa por komenci ĝis la smrompopunkto estas atingita, kie ĝi skalos supren per md, lg, xl, kaj 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>

Fluaj ujoj

Uzu .container-fluidpor plenlarĝa ujo, ampleksanta la tutan larĝon de la vidfenestro.

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

Sass

Kiel montrite supre, Bootstrap generas serion de antaŭdifinitaj ujklasoj por helpi vin konstrui la aranĝojn, kiujn vi deziras. Vi povas personecigi ĉi tiujn antaŭdifinitajn ujajn klasojn modifante la Sass-mapon (trovitan en _variables.scss) kiu funkciigas ilin:

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

Krom agordi la Sass, vi ankaŭ povas krei viajn proprajn ujojn per nia Sass-miksaĵo.

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

Por pliaj informoj kaj ekzemploj pri kiel modifi niajn Sass-mapojn kaj variablojn, bonvolu raporti al la sekcio Sass de la Grid-dokumentado .