Umumiy koʻrinish

Bootstrap loyihangizni joylashtirish uchun komponentlar va variantlar, jumladan konteynerlarni o'rash, kuchli tarmoq tizimi, moslashuvchan media ob'ekti va sezgir yordamchi dasturlar sinflari.

Konteynerlar

Konteynerlar Bootstrap'dagi eng asosiy tartib elementi bo'lib , standart tarmoq tizimimizdan foydalanganda talab qilinadi . Konteynerlar ulardagi tarkibni o'z ichiga olish, to'ldirish va (ba'zan) markazlashtirish uchun ishlatiladi. Konteynerlar ichkariga joylashtirilishi mumkin bo'lsa-da , ko'pchilik tartiblar ichki idishni talab qilmaydi.

Bootstrap uch xil konteyner bilan birga keladi:

• .container, bu max-widthhar bir sezgir to'xtash nuqtasida a ni o'rnatadi
• .container-fluid, bu width: 100%barcha to'xtash nuqtalarida
• .container-{breakpoint}, bu width: 100%belgilangan to'xtash nuqtasiga qadar

Quyidagi jadvalda har bir konteynerning asl va har bir to'xtash nuqtasi bo'ylab qanday max-widthtaqqoslanishi ko'rsatilgan ..container.container-fluid

Ularni amalda ko'ring va ularni Grid misolimizda solishtiring .

Hammasi bir joyda

Bizning standart .containersinfimiz sezgir, belgilangan kenglikdagi konteyner bo'lib, uning max-widthhar bir to'xtash nuqtasida o'zgarishini anglatadi.

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

Suyuqlik

.container-fluidKo'rish oynasining butun kengligini qamrab olgan to'liq kenglikdagi konteyner uchun foydalaning .

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

Javobgar

Bootstrap v4.4 da sezgir konteynerlar yangi. Ular belgilangan to'xtash nuqtasiga yetguncha 100% kenglikdagi sinfni belgilashga imkon beradi, shundan so'ng biz max-widthyuqoriroq to'xtash nuqtalarining har biri uchun s ni qo'llaymiz. Masalan, to'xtash nuqtasiga yetguncha .container-smboshlash uchun 100% keng bo'lib , u , va bilan o'zgaradi .smmdlgxl

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

Javob beruvchi uzilish nuqtalari

Bootstrap birinchi navbatda mobil bo'lish uchun ishlab chiqilganligi sababli, biz maketlarimiz va interfeyslarimiz uchun oqilona to'xtash nuqtalarini yaratish uchun bir nechta media so'rovlaridan foydalanamiz. Ushbu to'xtash nuqtalari asosan ko'rish maydonining minimal kengligiga asoslanadi va bizga ko'rish oynasi o'zgarganda elementlarni kattalashtirishga imkon beradi.

Bootstrap, birinchi navbatda, bizning Sass manba fayllarimizdagi tartib, tarmoq tizimi va komponentlar uchun quyidagi media so'rovlar diapazonlaridan yoki to'xtash nuqtalaridan foydalanadi.

// 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) { ... }

Biz CSS manbasini Sassda yozganimiz sababli, barcha media so'rovlarimiz Sass mikslari orqali mavjud:

// 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;
  }
}

Biz vaqti-vaqti bilan boshqa yo'nalishda (belgilangan ekran o'lchami yoki undan kichikroq ) media so'rovlaridan foydalanamiz:

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

Yana bir bor, ushbu media so'rovlari Sass miksinlari orqali ham mavjud:

@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;
  }
}

Bundan tashqari, minimal va maksimal to'xtash nuqtasi kengliklaridan foydalangan holda ekran o'lchamlarining bitta segmentiga mo'ljallangan media so'rovlari va miksinlar mavjud.

// 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) { ... }

Ushbu media so'rovlari Sass mikslari orqali ham mavjud:

@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) { ... }

Xuddi shunday, media so'rovlari bir nechta to'xtash nuqtasi kengligini qamrab olishi mumkin:

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

Bir xil ekran o'lchami diapazoniga mo'ljallangan Sass aralashmasi:

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

Z-indeks

Bir nechta Bootstrap komponentlari z-indextarkibni tartibga solish uchun uchinchi o'qni taqdim etish orqali tartibni boshqarishga yordam beradigan CSS xususiyatidan foydalanadi. Biz Bootstrap-da navigatsiya, maslahatlar va popoverlar, modallar va boshqalarni to'g'ri joylashtirish uchun mo'ljallangan standart z-indeks shkalasidan foydalanamiz.

Bu yuqori qiymatlar ixtiyoriy sondan boshlanadi, mojarolarning oldini olish uchun etarlicha yuqori va o'ziga xosdir. Bizga qatlamli komponentlar bo'ylab standart to'plam kerak - maslahatlar, popoverlar, navbarlar, ochiladigan menyular, modallar - shuning uchun biz xatti-harakatlarda mos keladigan bo'lishimiz mumkin. 100+ yoki + dan foydalana olmasligimiz uchun hech qanday sabab yo'q 500.

Biz ushbu individual qadriyatlarni moslashtirishni rag'batlantirmaymiz; birini o'zgartirsangiz, barchasini o'zgartirishingiz kerak bo'ladi.

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

Komponentlar ichidagi bir-biriga o'xshash chegaralarni (masalan, kiritish guruhlaridagi tugmalar va kirishlar) boshqarish uchun biz , ning past bir raqamli z-indexqiymatlaridan foydalanamiz va sukut bo'yicha, kursor va faol holatlar uchun 1. Hover/focus/active rejimida biz ma'lum bir elementni birodar elementlar ustidagi chegarasini ko'rsatish uchun yuqori qiymatga ega bo'lamiz.23z-index