Гаттерлар
Гуттерлар - сезнең баганалар арасындагы паддер, Bootstrap челтәр системасында җаваплы урын һәм эчтәлекне тигезләү өчен кулланыла.
Алар ничек эшлиләр
-
Чокырлар - горизонталь рәвештә ясалган багана эчтәлеге арасындагы аермалар
padding
. Без һәр баганага куябыз, һәм тискәре кулланабыз,padding-right
аны рәтнең башында һәм ахырында эчтәлекне тигезләү өчен.padding-left
margin
-
Чокырлар
1.5rem
(24px
) киңлектә башлана. Бу безгә челтәребезне паддер һәм маржа спакерлары масштабына туры китерергә мөмкинлек бирә. -
Чокырларны җаваплы итеп көйләргә мөмкин. Горизонталь чокырларны, вертикаль чокырларны һәм барлык чокырларны үзгәртү өчен, ноктага хас чистарту классларын кулланыгыз.
Горизонталь чокырлар
.gx-*
класслар горизонталь чокыр киңлекләрен контрольдә тоту өчен кулланылырга мөмкин. Әгәр .container
дә .container-fluid
зуррак чокырлар да кирәксез ташып китмәс өчен кулланылса, көйләнергә кирәк булырга мөмкин, туры килгән паддер ярдәмендә. Мисал өчен, түбәндәге мисалда без паддерны арттырдык .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
балаларны .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,
);