Bootstrap

Iskala qurish

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

CSS-ni tiklash, tipografiya va havolalar uchun global uslublar

HTML5 hujjat turini talab qiladi

Bootstrap HTML5 hujjat turidan foydalanishni talab qiluvchi HTML elementlari va CSS xususiyatlaridan foydalanadi. Uni loyihangizdagi har bir Bootstrapped sahifaning boshiga qo'shganingizga ishonch hosil qiling.

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

Tipografiya va havolalar

scaffolding.less faylida biz asosiy global displey, tipografiya va havola uslublarini o'rnatamiz . Xususan, biz:

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

Normalizatsiya orqali tiklash

Bootstrap 2 dan boshlab an'anaviy CSS-ni qayta o'rnatish Nikolas Gallager tomonidan ishlab chiqilgan Normalize.css loyihasining elementlaridan foydalanish uchun rivojlandi va HTML5 Boilerplate -ni ham quvvatlaydi .

Yangi tiklashni hali ham reset.less da topish mumkin , ammo qisqalik va aniqlik uchun ko'plab elementlar olib tashlangan.

Standart tarmoq tizimi 12 ta ustunli, sezgir burilishli

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 qurilmalar va ruxsatlar uchun to'rtta sezgir o'zgarishlarga ega: telefon, planshet portreti, planshet landshafti va kichik ish stollari va katta keng ekranli ish stollari.

  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

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.

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>

Suyuqlik panjara tizimi 12 ta sezgir, foizga asoslangan ustunlar

Suyuq ustunlar

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

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

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

Suyuqlik uyasi

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.

Suyuqlik 12
Suyuqlik 6
Suyuqlik 6 
  1. <div class = "qator-suyuqlik" > 
  2.   <div class = "span12" > 
  3.     Ustunning 1-darajasi
  4.     <div class = "qator-suyuqlik" > 
  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

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

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 tuzilishini, minimal va maksimal kengliklarni va chap tomondagi 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

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 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
Smartfonlar 480px va undan past Suyuq ustunlar, qat'iy kenglik yo'q
Smartfonlar planshetlar uchun 767px va undan past Suyuq ustunlar, qat'iy kenglik yo'q
Portret planshetlar 768px va undan yuqori 42px 20px
Standart 980px va undan yuqori 60px 20px
Katta displey 1200px va undan yuqori 70px 30px

Meta tegni talab qiladi

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

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

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

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

Responsive utility sinflari

Nima ular

Tezroq mobil qurilmalar uchun qulayroq ishlab chiqish uchun ushbu asosiy yordam sinflaridan qurilma orqali kontentni ko‘rsatish va yashirish uchun foydalaning.

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.

Masalan, siz <select>navigatsiya uchun elementni mobil maketlarda ko'rsatishingiz mumkin, lekin planshetlar yoki ish stollarida emas.

Yordam kurslari

Bu erda biz qo'llab-quvvatlaydigan sinflar jadvali va ularning ma'lum media so'rovlar tartibiga ta'siri (qurilma tomonidan belgilangan) ko'rsatilgan. Ularni ichida topish mumkin responsive.less.

Sinf Telefonlar480px va undan past Planshetlar767px va undan past Ish stollari768px va undan yuqori
.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

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