Gutters
ئۆستەڭلەر سىزنىڭ ئىستونلىرىڭىز ئارىسىدىكى تاختا بولۇپ ، Bootstrap تورى سىستېمىسىدىكى ئىنكاسچان بوشلۇق ۋە مەزمۇنلارنى توغرىلاشقا ئىشلىتىلىدۇ.
ئۇلار قانداق ئىشلەيدۇ
-
ئۆستەڭ بولسا توغرىسىغا ھاسىل قىلىنغان ستون مەزمۇنى ئوتتۇرىسىدىكى پەرق
padding
. بىز ھەر بىر ئىستونغا تەڭشەيمىزpadding-right
ۋەpadding-left
سەلبىيmargin
ئىشلىتىپ ھەر بىر قۇرنىڭ بېشى ۋە ئاخىرىدا مەزمۇننى توغرىلايمىز. -
1.5rem
ئۆستەڭ (24px
) كەڭلىكتە باشلىنىدۇ . بۇ بىزنىڭ تورىمىزنى تاختا ۋە گىرۋەكلىك بوشلۇق بىلەن ماسلاشتۇرىدۇ . -
ئۆستەڭلەرنى ئىنكاسچانلىق بىلەن تەڭشىگىلى بولىدۇ. بۆسۈش ئېغىزىغا خاس ئۆستەڭ سىنىپىدىن پايدىلىنىپ ، گورىزونتال ئۆستەڭ ، تىك ئۆستەڭ ۋە بارلىق ئۆستەڭلەرنى ئۆزگەرتىڭ.
گورىزونتال ئۆستەڭ
.gx-*
دەرسلەرنى گورىزونتال ئۆستەڭنىڭ كەڭلىكىنى كونترول قىلىشقا ئىشلىتىشكە بولىدۇ. ماس كېلىدىغان تاختا ئىشلىتىش ئارقىلىق ، كېرەكسىز ئېقىپ كېتىشنىڭ ئالدىنى ئېلىش ئۈچۈن چوڭراق ئۆستەڭلەرمۇ ئىشلىتىلسە ، ئاتا-ئانىلار ياكى ئاتا-ئانىلار تەڭشىلىشى مۇمكىن .container
. .container-fluid
مەسىلەن ، تۆۋەندىكى مىسالدا بىز padding نى كۆپەيتتۇق .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
.row
باشقا بىر ھەل قىلىش چارىسى بولسا ، .overflow-hidden
سىنىپقا ئورالما قوشۇش :
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
ۋېرتىكال ئۆستەڭ
.gy-*
دەرسلەرنى تىك ئۈچەينىڭ كەڭلىكىنى كونترول قىلىشقا ئىشلىتىشكە بولىدۇ. گورىزونتال ئۆستەڭگە ئوخشاش ، تىك ئۆستەڭلەر .row
بىر بەتنىڭ ئاخىرىدا ئاستىدىن ئېقىپ كېتىشنى كەلتۈرۈپ چىقىرىدۇ. ئەگەر بۇ خىل ئەھۋال كۆرۈلسە ، سىنىپ .row
بىلەن ئورالما قوشىسىز:.overflow-hidden
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
گورىزونتال ۋە تىك ئۆستەڭ
.g-*
.overflow-hidden
دەرسلەرنى گورىزونتال ئۆستەڭنىڭ كەڭلىكىنى كونترول قىلىشقا ئىشلىتىشكە بولىدۇ ، تۆۋەندىكى مىسال ئۈچۈن بىز كىچىكرەك ئۆستەڭ كەڭلىكىنى ئىشلىتىمىز ، شۇڭا ئورالما سىنىپىنى قوشۇشنىڭ ھاجىتى يوق .
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
قۇر تۈۋرۈك ئۆستەڭ
قۇر تۈۋرۈكىگە غول دەرسلەرنىمۇ قوشقىلى بولىدۇ . تۆۋەندىكى مىسالدا بىز ئىنكاسچان قۇر ئىستون ۋە ئىنكاسچان ئۆستەڭ دەرسلىرىنى ئىشلىتىمىز.
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
ئۆستەڭ يوق
بىزنىڭ ئالدىن بېكىتىلگەن تور دەرسلىكىمىزدىكى تۈۋرۈكلەر ئارىسىدىكى ئۆستەڭلەرنى ئېلىۋەتكىلى بولىدۇ .g-0
. بۇ بارلىق بىۋاسىتە بالىلار ئىستونلىرىدىكى مەنپىي margin
s .row
ۋە گورىزونتالنى چىقىرىپ تاشلايدۇ.padding
قىرغاقتىن لايىھىلەش كېرەكمۇ؟ ئاتا-ئانىسىنى تاشلاڭ .container
ياكى .container-fluid
.
ئەمەلىيەتتە ، ئۇ قانداق كۆرۈنىدۇ. شۇنىڭغا دىققەت قىلىڭكى ، سىز باشقا ئالدىن بېكىتىلگەن تور سىنىپلىرى بىلەن داۋاملىق ئىشلىتەلەيسىز (ستون كەڭلىكى ، ئىنكاس دەرىجىسى ، رەت تەرتىپى ۋە باشقىلارنى ئۆز ئىچىگە ئالىدۇ).
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
ئۆستەڭنى ئۆزگەرتىڭ
دەرسلەر $gutters
Sass خەرىتىسىدىن ۋارىسلىق قىلىنغان $spacers
Sass خەرىتىسىدىن ياسالغان.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);