Konteenarada

Sida ay u shaqeeyaan

Konteenarada ayaa ah sheyga ugu aasaasiga ah ee qaabaynta ee Bootstrap waxaana loo baahan yahay marka la isticmaalayo nidaamkayaga khadka caadiga ah . Weelasha waxaa loo isticmaalaa in lagu daro, suuf, iyo (mararka qaarkood) xuddun u ah waxa ku jira. Iyadoo weelasha buul la dhigi karo, badi qaabaynta uma baahna weel buul leh.

Bootstrap waxay la socotaa saddex weel oo kala duwan:

• .container, kaas oo dejinaya meel max-widthkasta oo jawaab celin ah
• .container-fluid, taas oo width: 100%ah dhammaan meelaha jaban
• .container-{breakpoint}, kaas oo ah width: 100%ilaa inta la cayimay goynta

Jadwalka hoose wuxuu muujinayaa sida weel kastaa u max-widthbarbar dhigo kan asalka ah .containeriyo .container-fluidmeel kasta oo jaban.

Ficil ku arag iyaga oo ku barbar dhig tusaalahayaga Grid .

Weelka caadiga ah

Fasalkayaga caadiga .containerah waa jawaab celin, weel ballaadhkiisu go'an yahay, taasoo la macno ah max-widthisbeddelkiisa meel kasta oo nasashada.

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

Weelasha ka jawaaba

Weelasha jawaab celinta waxay kuu oggolaanayaan inaad qeexdo fasal 100% ballac ah ilaa barta goynta la gaarey, ka dib waxaan codsaneynaa max-widths mid kasta oo ka mid ah meelaha sare ee sare. Tusaale ahaan, .container-smwaa 100% ballaaran in la bilaabo ilaa barta smjabinta la gaaro, halkaas oo ay ku kordhin doonto md, lg, xl, iyo 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>

Weelasha dareeraha ah

U isticmaal .container-fluidweel ballac buuxa ah, oo ku dhereraya ballaca goobta daawashada oo dhan.

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

Sass

Sida kor ku cad, Bootstrap waxay soo saartaa taxane taxane ah oo weel horay loo sii qeexay si ay kaaga caawiso inaad dhisto qaab-dhismeedka aad rabto. Waxaad habayn kartaa fasalada weelka ee horay loo sii qeexay adiga oo wax ka beddelaya khariidadda Sass (laga helay _variables.scss) ee awood u siinaya:

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

Marka lagu daro habaynta Sass-ka, waxa kale oo aad samayn kartaa weel adiga kuu gaar ah oo ay ku jirto isku-dhafka Sass-kayaga.

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

Macluumaad dheeraad ah iyo tusaaleyaal ku saabsan sida loo beddelo khariidadaha Sass iyo doorsoomayaashayada, fadlan tixraac qaybta Sass ee dukumeentiga Grid .