Bootstrap

Iskala qurish

Bootstrap sezgir 12 ustunli tarmoqqa qurilgan. Shuningdek, biz ushbu tizimga asoslangan qattiq va suyuqlik kengligidagi sxemalarni ham kiritdik.

To'r tizimi 12 ta ustunli, sezgir burilishli

Birlamchi 940px panjara

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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.

  1. <div class = "satr" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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.


O'chirish ustunlari

4
4 ofset 4
3 ofset 3
3 ofset 3
8 ofset 4 
  1. <div class = "satr" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 ofset4" > ... </div> 
  4. </div>

Uyali ustunlar

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

Ustunning 1-darajasi
2-daraja
2-daraja 
  1. <div class = "satr" > 
  2.   <div class = "span12" > 
  3.     Ustunning 1-darajasi
  4.     <div class = "satr" > 
  5.       <div class = "span6" > 2-darajali </div> 
  6.       <div class = "span6" > 2-darajali </div> 
  7.     </div>
  8.   </div>
  9. </div>

Gridni moslashtirish

O'zgaruvchan Standart qiymat Tavsif
@gridColumns 12 Ustunlar soni
@gridColumnWidth 60px Har bir ustunning kengligi
@gridGutterWidth 20px Ustunlar orasidagi salbiy bo'shliq
@siteWidth Barcha ustunlar va oluklarning hisoblangan yig'indisi .container-fixed()Aralashmaning kengligini belgilash uchun ustunlar va oluklar sonini hisoblaydi

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ʻshmoqchi 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.

Layouts Veb-sahifalarni yaratish uchun asosiy andozalar

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

  1. <tana>
  2.   <div class = "konteyner" > 
  3.     ...
  4.   </div>
  5. </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.

  1. <div class = "konteyner-suyuqlik" > 
  2.   <div class = "qator-suyuqlik" > 
  3.     <div class = "span2" > 
  4.       <!--Yon panel tarkibi-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Tana tarkibi-->
  8.     </div>
  9.   </div>
  10. </div>

Har xil qurilmalar va ruxsatlar uchun javob beruvchi dizayn media so'rovlari

Javob beruvchi qurilmalar

Qo'llab-quvvatlanadigan qurilmalar

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

Yorliq Chizma kengligi Ustun kengligi Oluk kengligi
Smartfonlar 480px va undan past Suyuq ustunlar, qat'iy kenglik yo'q
Portret planshetlar 480px dan 768px gacha Suyuq ustunlar, qat'iy kenglik yo'q
Landshaft planshetlar 768px dan 940px gacha 44px 20px
Standart 940px va undan yuqori 60px 20px
Katta displey 1210px va undan yuqori 70px 30px

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

Media so'rovlaridan foydalanish

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

  1.   // Landshaft telefonlar va pastga
  2.   @media ( maksimal kenglik : 480px ) { ... } _     
  3.  
  4.   // Landshaft telefondan portret planshetga
  5.   @media ( maksimal kenglik : 768px ) { ... } _     
  6.  
  7.   // Planshetni landshaft va ish stoliga portret
  8.   @media ( minimal kenglik : 768px ) va ( maksimal kenglik : 940px ) { ... } _ _        
  9.  
  10.   // Katta ish stoli
  11.   @media ( min . kengligi : 1200px ) { .. }