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 . Duýgur, kesgitli giňlikdäki konteýnerden ( max-widthher nokatda üýtgemelerini aňladýar) ýa-da suwuklyk giňligini ( 100%hemişe giňdigini aňladýar) saýlaň.

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.

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

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

<div class="container-fluid">
  ...
</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 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:

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

// Example usage:
@include media-breakpoint-up(sm) {
  .some-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) { ... }

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