كونتېينېر

كونتېينېرلار Bootstrap نىڭ ئاساسىي قۇرۇلۇش توپى بولۇپ ، ئۇ مەلۇم ئۈسكۈنى ياكى كۆرۈنۈش ئېغىزى ئىچىدىكى مەزمۇنلىرىڭىزنى ئۆز ئىچىگە ئالىدۇ.

بۇ بەتتە

ئۇلار قانداق ئىشلەيدۇ

كونتېينېرلار Bootstrap دىكى ئەڭ ئاساسلىق ئورۇنلاشتۇرۇش ئېلېمېنتى بولۇپ ، سۈكۈتتىكى تور سىستېمىمىزنى ئىشلەتكەندە تەلەپ قىلىنىدۇ . كونتېينېرلار ئىچىدىكى مەزمۇنلارنى ئۆز ئىچىگە ئېلىش ، چاپلاش ۋە (بەزىدە) مەركەز قىلىشقا ئىشلىتىلىدۇ. قاچىلارنى ئۇۋا قىلىشقا بولسىمۇ ، كۆپىنچە ئورۇنلاشتۇرۇشلار ئۇۋا قاچىلانغان قاچا تەلەپ قىلمايدۇ.

Bootstrap غا ئۈچ خىل ئوخشىمىغان قاچا قاچىلانغان:

.container، max-widthھەر بىر ئىنكاس قايتۇرۇش نۇقتىسىنى بەلگىلەيدۇ
.container-{breakpoint}بۇ width: 100%بەلگىلەنگەن نۇقتىغا قەدەر
.container-fluid، بۇ width: 100%بارلىق بۆسۈش نۇقتىلىرىدا

تۆۋەندىكى جەدۋەلدە ھەر بىر قاچىنىڭ max-widthئەسلى .containerۋە .container-fluidھەر بىر بۆسۈش نۇقتىسىدا قانداق سېلىشتۇرۇلغانلىقى كۆرسىتىلدى.

ئۇلارنى ھەرىكەتتە كۆرۈڭ ۋە بىزنىڭ Grid مىسالىمىزدا سېلىشتۇرۇڭ .

	قوشۇمچە كىچىك <576px	كىچىك ≥576px	ئوتتۇراھال 68768px	چوڭ ≥992px	X-Large 001200px	XX-Large 001400px
`.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%

كۆڭۈلدىكى قاچا

سۈكۈتتىكى .containerسىنىپىمىز ئىنكاسچان ، مۇقىم كەڭلىكتىكى قاچا ، ئۇنىڭ max-widthھەر بىر بۆسۈش ئېغىزىدىكى ئۆزگىرىشىدىن دېرەك بېرىدۇ.

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

مەسئۇلىيەتچان قاچىلار

مەسئۇلىيەتچان قاچىلار سىزنى بەلگىلەنگەن بۆسۈش ھاسىل قىلغۇچە% 100 كەڭلىكتىكى دەرسنى بەلگىلىيەلەيسىز ، ئۇنىڭدىن كېيىن بىز max-widthھەر بىر يۇقىرى نۇقتىغا s ئىلتىماس قىلىمىز. مەسىلەن ، بۆسۈش نۇقتىسىغا .container-smيەتمىگۈچە باشلاش% 100 كەڭلىكتە ، ئۇنىڭ بىلەن ، ۋە .smmdlgxlxxl

<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>

سۇيۇق قاچىلار

پۈتۈن كەڭلىكتىكى قاچىغا ئىشلىتىڭ .container-fluid، كۆرۈش ئېغىزىنىڭ پۈتۈن كەڭلىكىنى ئۆز ئىچىگە ئالىدۇ.

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

Sass

يۇقىرىدا كۆرسىتىلگەندەك ، Bootstrap سىز ئارزۇ قىلغان ئورۇنلاشتۇرۇشلارنى قۇرۇشقا ياردەم بېرىش ئۈچۈن ئالدىن بېكىتىلگەن قاچا دەرسلىرىنى ھاسىل قىلىدۇ. سىز ئالدىن بېكىتىلگەن قاچا سىنىپلىرىنى _variables.scssئۇلارغا ھوقۇق بېرىدىغان Sass خەرىتىسىنى ئۆزگەرتىش ئارقىلىق تەڭشىيەلەيسىز:

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

Sass نى خاسلاشتۇرۇشتىن باشقا ، سىز يەنە 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();
}

بىزنىڭ Sass خەرىتىسى ۋە ئۆزگەرگۈچى مىقدارنى قانداق ئۆزگەرتىش توغرىسىدىكى تېخىمۇ كۆپ ئۇچۇر ۋە مىساللار ئۈچۈن ، Grid ھۆججىتىنىڭ Sass بۆلىكىنى كۆرۈڭ .