Bootstrap-ning bir qismi sifatida taqdim etilgan standart tarmoq tizimi kengligi 940px, 12-ustunli tarmoqdir .

Shuningdek, u turli xil qurilmalar va ruxsatlar uchun to'rtta sezgir variantga ega: telefon, planshet portreti, stol manzarasi va kichik ish stoli va katta keng ekranli ish stoli.

<div class = "satr" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Bu erda ko'rsatilganidek, asosiy tartib ikkita "ustun" bilan yaratilishi mumkin, ularning har biri biz panjara tizimimizning bir qismi sifatida belgilagan 12 ta asosiy ustunlar sonini qamrab oladi.

Bootstrap-dagi statik (suyuq bo'lmagan) tarmoq tizimi bilan joylashtirish oson. Kontentingizni joylashtirish uchun mavjud ustunga yangi .rowva ustunlar toʻplamini qoʻshing ..span*.span*

Misol

Ichki qatorlar uning asosiy ustunlari soniga teng bo'lgan ustunlar to'plamini o'z ichiga olishi kerak. Misol uchun, ikkita ichki .span3ustunlar ichida joylashtirilishi kerak .span6.

<div class = "satr" > 
  <div class = "span12" > 
    Ustunning 1-darajasi
    <div class = "satr" > 
      <div class = "span6" > 2-darajali </div> 
      <div class = "span6" > 2-darajali </div> 
    </div>
  </div>
</div>

Piksel emas, foizlar

Suyuq grid tizimi o'zgarmas piksellar o'rniga ustunlar kengligi uchun foizlardan foydalanadi. Shuningdek, u bizning statsionar tarmoq tizimimiz kabi bir xil sezgir o'zgarishlarga ega bo'lib, asosiy ekran o'lchamlari va qurilmalar uchun mos nisbatlarni ta'minlaydi.

Suyuqlik qatorlari

.rowga o'zgartirish orqali har qanday qator suyuqlik hosil qiling .row-fluid. Ustunlar bir xil bo'lib qoladi, bu esa qattiq va suyuq sxemalar o'rtasida o'tishni juda oson qiladi.

Belgilash

<div class = "qator-suyuqlik" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Suyuq panjaralar bilan joylashtirish biroz boshqacha: ichki o'rnatilgan ustunlar soni ota-onaga mos kelishi shart emas. Buning o'rniga, ustunlaringiz har bir darajada tiklanadi, chunki har bir satr asosiy ustunning 100% ni egallaydi.

<div class = "qator-suyuqlik" > 
  <div class = "span12" > 
    Ustunning 1-darajasi
    <div class = "qator-suyuqlik" > 
      <div class = "span6" > 2-darajali </div> 
      <div class = "span6" > 2-darajali </div> 
    </div>
  </div>
</div>

LESSdagi oʻzgaruvchilar

Bootstrap-da yuqorida hujjatlashtirilgan standart 940px panjara tizimini sozlash uchun bir nechta o'zgaruvchilar mavjud. To'r uchun barcha o'zgaruvchilar o'zgaruvchilarda saqlanadi.kam.

Qanday sozlash kerak

To'rni o'zgartirish uchta @grid*o'zgaruvchini o'zgartirish va Bootstrap-ni qayta kompilyatsiya qilishni anglatadi. Variables.less-dagi grid o'zgaruvchilarni o'zgartiring va qayta kompilyatsiya qilish uchun hujjatlashtirilgan to'rtta usuldan birini ishlating . Agar siz koʻproq ustunlar qoʻshayotgan boʻlsangiz, grid.less-dagilar uchun CSS-ni qoʻshganingizga ishonch hosil qiling.

Javobgar qolish

To'rni moslashtirish faqat standart darajada, ya'ni 940px panjarada ishlaydi. Bootstrap-ning sezgir jihatlarini saqlab qolish uchun siz responsive.less-da tarmoqlarni ham sozlashingiz kerak bo'ladi.

Ruxsat etilgan tartib

Yagona tomonidan taqdim etilgan deyarli har qanday veb-sayt yoki sahifa uchun standart va oddiy 940px kenglikdagi, markazlashtirilgan tartib <div class="container">.

<tana>
  <div class = "konteyner" > 
    ...
  </div>
</body>

Suyuqlikning joylashuvi

<div class="container-fluid">moslashuvchan sahifa tuzilishi, minimal va maksimal kengliklarni va chap yon panelni beradi. Bu ilovalar va hujjatlar uchun juda yaxshi.

<div class = "konteyner-suyuqlik" > 
  <div class = "qator-suyuqlik" > 
    <div class = "span2" > 
      <!--Yon panel tarkibi-->
    </div>
    <div class = "span10" > 
      <!--Tana tarkibi-->
    </div>
  </div>
</div>

Qo'llab-quvvatlanadigan qurilmalar

Bootstrap loyihalaringizni turli qurilmalar va ekran oʻlchamlariga moslashtirishga yordam berish uchun bitta faylda bir nechta media soʻrovlarini qoʻllab-quvvatlaydi. Mana nimalar kiritilgan:

Meta tegni talab qiladi

Qurilmalar javob beruvchi sahifalarni to'g'ri ko'rsatishini ta'minlash uchun viewport meta tegini qo'shing.

<meta nomi = "ko'rish maydoni" mazmuni = "kenglik = qurilma kengligi, boshlang'ich o'lchov = 1.0" >  

Ular nima qilishadi

Media so'rovlari bir qator shartlar - nisbatlar, kengliklar, displey turi va boshqalarga asoslangan maxsus CSS-ga ruxsat beradi, lekin odatda min-widthva atrofida fokuslanadi max-width.

• To'rimizdagi ustunning kengligini o'zgartiring
• Zarur bo'lganda float o'rniga elementlarni yig'ing
• Qurilmalar uchun mosroq bo‘lishi uchun sarlavhalar va matn o‘lchamini o‘zgartiring

Bootstrap avtomatik ravishda ushbu media so'rovlarini o'z ichiga olmaydi, lekin ularni tushunish va qo'shish juda oson va minimal sozlashni talab qiladi. Bootstrap-ning sezgir xususiyatlarini kiritish uchun sizda bir nechta variant mavjud:

1. Kompilyatsiya qilingan javob beruvchi versiyadan foydalaning, bootstrap-responsive.css
2. @import "responsive.less" qo'shing va Bootstrap-ni qayta kompilyatsiya qiling
3. Responsive.less ni alohida fayl sifatida o'zgartiring va qayta kompilyatsiya qiling

Nega shunchaki qo'shmaslik kerak? Rostini aytsam, hamma narsa sezgir bo'lishi shart emas. Ishlab chiquvchilarni ushbu xususiyatni o'chirishga undash o'rniga, biz uni yoqishni yaxshiroq deb bilamiz.

  // Landshaft telefonlar va pastga
  @media ( maksimal kenglik : 480px ) { ... } _     
 
  // Landshaft telefondan portret planshetga
  @media ( maksimal kenglik : 768px ) { ... } _     
 
  // Planshetni landshaft va ish stoliga portret
  @media (min-width: 768px) and (max-width: 980px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { .. }