Swikhomela-ndhawu

Ndlela leyi ti tirhaka ha yona

Tikhontheyina i xiphemu xa xisekelo xa layout eka Bootstrap naswona swa laveka loko u tirhisa sisiteme ya hina ya gridi ya ntolovelo . Swibye swi tirhisiwa ku khoma, ku pad, na (minkarhi yin’wana) ku hlanganisa leswi nga endzeni ka swona. Hambi leswi swikhomela-ndhawu swi nga ha pfaleriwaka, swivumbeko swo tala a swi lavi xikhomela-ndhawu lexi pfanganisiweke.

Bootstrap yi ta na swibye swinharhu swo hambana:

• .container, leyi vekaka a max-widtheka ndhawu yin’wana ni yin’wana yo wisa leyi hlamulaka
• .container-{breakpoint}, ku nga ku width: 100%fikela eka ndhawu leyi boxiweke yo tshoveka
• .container-fluid, leyi nga width: 100%eka tindhawu hinkwato to tshoveka

Tafula leri nga laha hansi ri kombisa hilaha container yin’wana na yin’wana yi max-widthpimanisiwaka hakona na ya masungulo .containerna .container-fluidku tsemakanya breakpoint yin’wana na yin’wana.

Va vona va ri karhi va tirha u va pimanisa eka xikombiso xa hina xa Gridi .

Xikhomela-ndhawu xa xiviri

Tlilasi ya hina ya ntolovelo .containeri xikhomela-ndhawu lexi hlamulaka, xa ku anama loku nga cinciki, leswi vulaka ku max-widthcinca ka xona eka ndhawu yin’wana ni yin’wana yo tshoveka.

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

Swibye leswi hlamulaka

Swikhomela-ndhawu leswi hlamulaka swi ku pfumelela ku boxa tlilasi leyi nga anama hi 100% ku kondza ku fika ndhawu yo tshoveka leyi boxiweke, endzhaku ka sweswo hi tirhisa max-widths eka yin’wana ni yin’wana ya tindhawu to tshoveka ta le henhla. Xikombiso, .container-smyi anama hi 100% ku sungula ku kondza ku fika laha ku smtshovekaka kona, laha yi nga ta ringanisa hi 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>

Swibye swa mati

Tirhisa .container-fluideka xigwitsirisi xa ku anama loku heleleke, lexi hlanganisaka ku anama hinkwako ka xivono.

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

Sass

Hilaha swi kombisiweke hakona laha henhla, Bootstrap yi tumbuluxa nxaxamelo wa titlilasi ta swikhomela-ndhawu leti hlamuseriweke ka ha ri emahlweni ku ku pfuna ku aka swivumbeko leswi u swi navelaka. U nga ha cinca titlilasi leti ta swikhomela-ndhawu leti hlamuseriweke ka ha ri emahlweni hi ku cinca mepe wa Sass (lowu kumekaka eka _variables.scss) lowu ti nyikaka matimba:

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

Ku engetela eka ku endla leswaku Sass yi va leyi u yi lavaka, u nga ha tlhela u tiendlela swikhomela-ndhawu swa wena hi mixin ya hina ya Sass.

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

Ku kuma vuxokoxoko byo tala na swikombiso swa ndlela yo cinca mimepe ya hina ya Sass na swilo leswi cinca-cincaka, hi kombela u languta eka xiyenge xa ​​Sass xa matsalwa ya Gridi .