Bootstrap

Iskala qurish

Bootstrap sezgir 12 ustunli to'rlar, tartiblar va komponentlar asosida qurilgan.

Global sozlamalar

HTML5 hujjat turini talab qiladi

Bootstrap HTML5 hujjat turidan foydalanishni talab qiluvchi ba'zi HTML elementlari va CSS xususiyatlaridan foydalanadi. Uni barcha loyihalaringizning boshida qo'shing.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Tipografiya va havolalar

Bootstrap asosiy global displey, tipografiya va havola uslublarini o'rnatadi. Xususan, biz:

  • marginTanaga olib tashlang
  • background-color: white;ustiga o'rnatingbody
  • @baseFontFamily, @baseFontSize, va @baseLineHeightatributlaridan tipografik asosimiz sifatida foydalaning
  • U orqali global havola rangini o'rnating @linkColorva havolaning tagiga chizishni faqat ustiga qo'llang:hover

Bu uslublarni iskala ichida topish mumkin.less .

Normalizatsiya orqali tiklash

Bootstrap 2 bilan eski reset bloki Normalize.css foydasiga tashlandi, Nikolas Gallager va Jonatan Neal loyihasi HTML5 Boilerplate ni ham quvvatlantiradi . Biz reset.less ichida Normalize-dan ko'p foydalansak ham, ba'zi elementlarni maxsus Bootstrap uchun olib tashladik.

Standart tarmoq tizimi

Jonli tarmoq misoli

Standart Bootstrap grid tizimi 12 ta ustundan foydalanadi, bu esa sezgir funksiyalar yoqilmagan 940px keng konteynerni yaratadi . Qo'shilgan sezgir CSS fayli bilan panjara sizning ko'rinishingizga qarab 724px va 1170px kengligiga moslashadi. 767px koʻrish oynalaridan pastda ustunlar suyuqlikka aylanadi va vertikal holda joylashadi.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Asosiy HTML panjara

Oddiy ikki ustunli tartib uchun a yarating .rowva tegishli sonli .span*ustunlarni qo'shing. Bu 12 ustunli to'r bo'lgani uchun har .span*biri o'sha 12 ta ustunning bir qatorini qamrab oladi va har bir satr uchun (yoki ota-onadagi ustunlar soni) har doim 12 tagacha qo'shilishi kerak.

  1. <div class = "satr" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Ushbu misolni hisobga olsak, bizda .span4va .span8, jami 12 ta ustun va to'liq satr hosil qiladi.

O'chirish ustunlari

.offset*Sinflar yordamida ustunlarni o'ngga o'tkazing. Har bir sinf ustunning chap chetini butun ustunga oshiradi. Masalan, to'rtta ustun ustida .offset4harakatlanadi ..span4

4
3 ofset 2
3 ofset 1
3 ofset 2
6 ofset 3 
  1. <div class = "satr" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 ofset2" > ... </div> 
  4. </div>

Ustunlarni joylashtirish

Kontentingizni standart tarmoqqa joylashtirish uchun mavjud ustunga yangi .rowva ustunlar toʻplamini qoʻshing . Ichki qatorlar uning asosiy ustunlari soniga teng bo'lgan ustunlar to'plamini o'z ichiga olishi kerak..span*.span*

1-darajali ustun
2-daraja
2-daraja 
  1. <div class = "satr" > 
  2.   <div class = "span9" > 
  3.     1-darajali ustun
  4.     <div class = "satr" > 
  5.       <div class = "span6" > 2-darajali </div> 
  6.       <div class = "span3" > 2-darajali </div> 
  7.     </div>
  8.   </div>
  9. </div>

Suyuqlik tarmog'i tizimi

Jonli suyuqlik tarmog'iga misol

Suyuq grid tizimi ustun kengligi uchun piksel o'rniga foizlardan foydalanadi. U asosiy ekran o'lchamlari va qurilmalari uchun to'g'ri proportsiyani ta'minlovchi statsionar tarmoq tizimimiz bilan bir xil javob berish qobiliyatiga ega.

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

Asosiy suyuqlik panjara HTML

.rowga o'zgartirib, istalgan qatorni "suyuqlik" qiling .row-fluid. Ustun sinflari bir xil bo'lib qoladi, bu esa qattiq va suyuq panjaralar o'rtasida aylanishni osonlashtiradi.

  1. <div class = "qator-suyuqlik" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Suyuqlikni o'zgartirish

Ruxsat etilgan tarmoq tizimini ofsetlash bilan bir xil ishlaydi: .offset*shuncha ko'p ustunlar bilan ofset qilish uchun istalgan ustunga qo'shing.

4
4 ofset 4
3 ofset 3
3 ofset 3
6 ofset 6 
  1. <div class = "qator-suyuqlik" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 ofset2" > ... </div> 
  4. </div>

Suyuqlik uyasi

Suyuqlik panjaralari o'rnatishdan boshqacha foydalanadi: har bir ichki o'rnatilgan ustunlar darajasi 12 tagacha ustun qo'shilishi kerak. Buning sababi shundaki, suyuqlik panjarasi kengliklarni belgilash uchun piksel emas, balki foizlardan foydalanadi.

Suyuqlik 12
Suyuqlik 6
Suyuqlik 6
Suyuqlik 6
Suyuqlik 6 
  1. <div class = "qator-suyuqlik" > 
  2.   <div class = "span12" > 
  3.     Suyuqlik 12
  4.     <div class = "qator-suyuqlik" > 
  5.       <div class = "span6" > 
  6.         Suyuqlik 6
  7.         <div class = "qator-suyuqlik" > 
  8.           <div class = "span6" > Suyuqlik 6 </div> 
  9.           <div class = "span6" > Suyuqlik 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Suyuqlik 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Tartiblar

Ruxsat etilgan tartib

Umumiy belgilangan kenglikdagi (va ixtiyoriy ravishda javob beradigan) tartibni faqat <div class="container">talab qilinadi.

  1. <tana>
  2.   <div class = "konteyner" > 
  3.     ...
  4.   </div>
  5. </body>

Suyuqlikning joylashuvi

<div class="container-fluid">Ilovalar va hujjatlar uchun juda mos boʻlgan ikki ustunli sahifa yarating .

  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>

Javob beruvchi dizayn

Javob beruvchi xususiyatlarni yoqish

Hujjatingizga tegishli meta teg va qo'shimcha uslublar jadvalini kiritish orqali loyihangizda sezgir CSS-ni yoqing <head>. Agar siz Bootstrap-ni moslashtirish sahifasidan tuzgan bo'lsangiz, faqat meta tegni kiritishingiz kerak.

  1. <meta nomi = "ko'rish maydoni" tarkibi = "kenglik = qurilma kengligi, boshlang'ich o'lchov = 1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "uslublar jadvali" >

Oldindan qisqa ma'lumot berish!Bootstrap hozirda sukut bo'yicha javob beruvchi xususiyatlarni o'z ichiga olmaydi, chunki hamma narsa sezgir bo'lishi shart emas. Ishlab chiquvchilarni ushbu xususiyatni o'chirishga undash o'rniga, kerak bo'lganda uni faollashtirish yaxshiroq deb hisoblaymiz.

Javob beruvchi Bootstrap haqida

Javob beruvchi qurilmalar

Media so'rovlari bir qator shartlarga (nisbatlar, kengliklar, displey turi va boshqalar) 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 hajmini o'zgartiring

Media so'rovlaridan mas'uliyat bilan va faqat mobil auditoriyangiz uchun boshlang'ich sifatida foydalaning. Kattaroq loyihalar uchun media so'rovlar qatlamlarini emas, balki maxsus kod bazalarini ko'rib chiqing.

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:

Yorliq Chizma kengligi Ustun kengligi Oluk kengligi
Katta displey 1200px va undan yuqori 70px 30px
Standart 980px va undan yuqori 60px 20px
Portret planshetlar 768px va undan yuqori 42px 20px
Telefonlar planshetlar uchun 767px va undan past Suyuq ustunlar, qat'iy kenglik yo'q
Telefonlar 480px va undan past Suyuq ustunlar, qat'iy kenglik yo'q 
  1. /* Katta ish stoli */
  2. @media ( min - kengligi : 1200px ) { ... }     
  3.  
  4. /* Portret planshetdan landshaft va ish stoli */
  5. @media ( minimal kenglik : 768px ) va ( maksimal kenglik : 979px ) { ... } _ _        
  6.  
  7. /* Landshaft telefondan portret planshetga */
  8. @media ( maksimal kenglik : 767px ) { ... } _     
  9.  
  10. /* Landshaft telefonlar va pastga */
  11. @media ( maksimal kenglik : 480px ) { ... } _

Responsive utility sinflari

Tezroq mobil qurilmalar uchun qulayroq ishlab chiqish uchun ushbu yordam sinflaridan tarkibni qurilma bo‘yicha ko‘rsatish va yashirish uchun foydalaning. Quyida mavjud sinflar jadvali va ularning ma'lum media so'rovlar tartibiga ta'siri (qurilma tomonidan belgilangan). Ularni ichida topish mumkin responsive.less.

Sinf Telefonlar767px va undan past Planshetlar979px dan 768px gacha Ish stollariStandart
.visible-phone Ko'rinadigan
.visible-tablet Ko'rinadigan
.visible-desktop Ko'rinadigan
.hidden-phone Ko'rinadigan Ko'rinadigan
.hidden-tablet Ko'rinadigan Ko'rinadigan
.hidden-desktop Ko'rinadigan Ko'rinadigan

Qachon foydalanish kerak

Cheklangan asosda foydalaning va bir xil saytning butunlay boshqa versiyalarini yaratishdan saqlaning. Buning o'rniga, har bir qurilma taqdimotini to'ldirish uchun ulardan foydalaning. Javob beruvchi yordam dasturlari jadvallar bilan ishlatilmasligi kerak, shuning uchun ular qo'llab-quvvatlanmaydi.

Responsive utilities test ishi

Yuqoridagi sinflarni sinab ko'rish uchun brauzeringiz hajmini o'zgartiring yoki turli qurilmalarga yuklang.

Bu yerda koʻrinadi...

Yashil tasdiq belgilari sizning joriy ko'rish oynangizda sinf ko'rinishini bildiradi.

  • Telefon✔ Telefon
  • Planshet✔ Planshet
  • Ish stoli✔ Ish stoli

Yashirin...

Bu erda yashil tasdiq belgilari sinf joriy ko'rish oynangizda yashiringanligini ko'rsatadi.

  • Telefon✔ Telefon
  • Planshet✔ Planshet
  • Ish stoli✔ Ish stoli