U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
Check
in English

Konteenarada

Koonteennadu waa dhisme aasaasi ah oo Bootstrap ah oo ka kooban, suuf, oo ku toosiya waxa ku jira qalab la bixiyay ama goob daawasho.

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-{breakpoint}, kaas oo ah width: 100%ilaa inta la cayimay goynta
  • .container-fluid, kaas oo width: 100%ah dhammaan meelaha jaban

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 .

Aad u yar
<576px
Yar
≥576px
Dhexdhexaad
≥768px
Weyn
≥992px
X-Large
≥1200px
XX-Large
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

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 fasalka 100% ballac ah ilaa laga gaaro barta goynta ee la cayimay, 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 smgoynta laga gaarayo, 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 adoo 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 .