Gysgaça syn

“Bootstrap” proýektiňizi düzmek üçin komponentler we opsiýalar, gaplaýyş gaplary, güýçli gözenek ulgamy, çeýe media obýekti we täsirli peýdaly synplar.

Konteýnerler

Konteýnerler “Bootstrap” -yň iň esasy düzüliş elementidir we deslapky gözenek ulgamymyzy ulananymyzda talap edilýär . Konteýnerler içindäki mazmuny saklamak, gaplamak we (käwagt) merkezleşdirmek üçin ulanylýar. Konteýnerler höwürtge döredip bilýän bolsa-da, düzülişleriň köpüsinde höwürtgelenen gap gerek däl.

“Bootstrap” üç dürli gap bilen gelýär:

• .container, max-widthher bir jogap nokadyny kesgitleýär
• .container-fluidähli width: 100%nokatlarynda
• .container-{breakpoint}görkezilen width: 100%arakesmä çenli

Aşakdaky tablisada her bir konteýneriň asyl we her kesiş nokady max-widthbilen deňeşdirilişi görkezilýär..container.container-fluid

Hereketde görüň we Grid mysalymyzda deňeşdiriň .

Hemmeler

Biziň başlangyç synpymyz , her nokatda üýtgemelerini .containeraňladýan, kesgitli giňlikdäki konteýner .max-width

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

Suwuklyk

.container-fluidGörkezişiň ähli giňligini öz içine alýan doly ini konteýner üçin ulanyň .

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

Jogapkärçilikli

Jogaply gaplar Bootstrap v4.4-de täze. Görkezilen aralyk nokadyna ýetýänçä 100% giňlikdäki synpy kesgitlemäge mümkinçilik berýär, şondan soň max-widthhas ýokary nokatlaryň hersine ýüz tutýarys. Mysal üçin, aralyk nokadyna .container-smýetýänçä başlamak üçin 100% giňdir , smnirede ulaljakdygyny we .mdlgxl

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

Jogap beriji nokatlar

“Bootstrap” ilki ykjam bolmak üçin işlenip düzülenligi sebäpli , ýerleşişlerimiz we interfeýslerimiz üçin manyly nokatlar döretmek üçin az sanly media talaplaryny ulanýarys. Bu bölekler, esasan, iň az görnüş giňligine esaslanýar we görnüşiň üýtgemegi bilen elementleri giňeltmäge mümkinçilik berýär.

“Bootstrap”, esasan, ýerleşişimiz, gözenek ulgamymyz we komponentlerimiz üçin Sass faýllarymyzda aşakdaky media talaplarynyň diapazonlaryny ýa-da bölek nokatlaryny ulanýar.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Çeşmämiziň CSS-ni Sass-da ýazýandygymyz sebäpli, ähli media soraglarymyz Sass garyndylary arkaly elýeterlidir:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Wagtal-wagtal başga tarapa gidýän media talaplaryny ulanýarys (berlen ekranyň ululygy ýa-da kiçi ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Mediaene-de bir gezek bu media soraglary Sass garyndylary arkaly elýeterlidir:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Şeýle hem iň az we iň ýokary aralyk giňliklerini ulanyp, ekran ululyklarynyň bir segmentini nyşana almak üçin media soraglary we garyndylar bar.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bu media soraglary Sass garyndylary arkaly hem elýeterlidir:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Edil şonuň ýaly-da, metbugat soraglary köp nokat giňligini öz içine alyp biler:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Şol bir ekranyň ululygyny nyşana almak üçin Sass garyndysy:

@include media-breakpoint-between(md, xl) { ... }

Z-indeks

Birnäçe “Bootstrap” komponentleri z-index, mazmuny tertiplemek üçin üçünji oky üpjün edip, ýerleşişe gözegçilik etmäge kömek edýän CSS häsiýetini ulanýar. Bootstrap-da deslapky z-indeks şkalasyny ulanýarys, bu dogry nawigasiýa, gurallar we popovers, modal we ş.m.

Bu has ýokary gymmatlyklar, gapma-garşylyklardan gaça durmak üçin ýeterlik derejede ýokary we kesgitli bir san bilen başlaýar. Özümizi alyp barşymyzda ýerlikli bolup biler ýaly, gatlakly komponentlerimiz boýunça gurallar, gurallar, gämi duralgalary, aşak gaçmalar, modallar üçin bularyň standart toplumy gerek. 100+ +a -da + ulanyp bilmedigimiziň sebäbi ýok 500.

Bu aýratyn gymmatlyklary özleşdirmegi maslahat bermeýäris; birini çalyşsaň, hemmesini üýtgetmeli bolarsyň.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

z-indexKomponentleriň içindäki bir-birine gabat gelýän serhetleri dolandyrmak üçin (mysal üçin, düwmeler we giriş toparlaryndaky girişler), pes sanly bahalary ulanýarys 1, 2we 3adaty ýagdaýda, işjeň we işjeň ýagdaýlarda. Aýlawda / fokusda / işjeňlikde, z-indexdogan elementleriniň üstünden serhedini görkezmek üçin has ýokary baha bilen belli bir elementi öňe çykarýarys.