Yondashuv

Ishni boshlash sahifalarida loyiha va u nimani taklif qilish bo'yicha tanishuv ekskursiyasi taqdim etilgan bo'lsa-da, ushbu hujjat biz Bootstrap -da nima uchun qilayotganimizni ko'rsatadi. Boshqalar bizdan oʻrganishi, biz bilan oʻz hissasini qoʻshishi va yaxshilashimizga yordam berishi uchun internetda qurish falsafamizni tushuntiradi.

To'g'ri kelmaydigan narsani ko'rdingizmi yoki yaxshiroq qilish mumkinmi? Muammoni oching - biz uni siz bilan muhokama qilishni xohlaymiz.

Xulosa

Biz bularning har biriga batafsil to'xtalib o'tamiz, lekin yuqori darajada, bu bizning yondashuvimizni boshqaradi.

• Komponentlar sezgir va birinchi navbatda mobil bo'lishi kerak
• Komponentlar asosiy sinf bilan tuzilishi va modifikator sinflari orqali kengaytirilishi kerak
• Komponent davlatlar umumiy z-indeks shkalasiga bo'ysunishi kerak
• Iloji bo'lsa, JavaScript orqali HTML va CSS ilovasini afzal ko'ring
• Iloji bo'lsa, maxsus uslublar ustida yordamchi dasturlardan foydalaning
• Iloji bo'lsa, qat'iy HTML talablarini qo'ymang (bolalar tanlovchilari)

Javobgar

Bootstrap-ning sezgir uslublari sezgir bo'lishi uchun qurilgan, bu yondashuv ko'pincha mobile-first deb nomlanadi . Biz bu atamani hujjatlarimizda ishlatamiz va bunga asosan rozimiz, lekin baʼzida u juda keng boʻlishi mumkin. Bootstrap -da har bir komponent to'liq javob bermasligi kerak bo'lsa-da , bu sezgir yondashuv sizni ko'rish oynasi kattalashganda uslublar qo'shishga undash orqali CSS-ning bekor qilinishini kamaytirishga qaratilgan.

Bootstrap-da buni bizning media so'rovlarimizda aniq ko'rasiz. Ko'pgina hollarda, biz min-widthma'lum bir to'xtash nuqtasida qo'llanila boshlagan va yuqori to'xtash nuqtalari orqali o'tadigan so'rovlardan foydalanamiz. Masalan, a dan cheksizgacha .d-noneamal qiladi min-width: 0. Boshqa tomondan, a .d-md-noneo'rta to'xtash nuqtasidan va yuqoridan qo'llaniladi.

Ba'zida biz max-widthkomponentning o'ziga xos murakkabligi talab qilganda foydalanamiz. Ba'zida bu bekor qilishlar bizning komponentlarimizdan asosiy funksiyalarni qayta yozishdan ko'ra amalga oshirish va qo'llab-quvvatlash uchun funktsional va aqliy jihatdan aniqroq bo'ladi. Biz bu yondashuvni cheklashga intilamiz, lekin vaqti-vaqti bilan undan foydalanamiz.

Sinflar

Brauzerlararo normalizatsiya uslublar jadvali bo'lgan "Reboot" dan tashqari, barcha uslublarimiz sinflardan selektor sifatida foydalanishga qaratilgan. Bu uslublarni osonlik bilan bekor qilish uchun juda xos bo'lgan tur selektorlari (masalan, input[type="text"]) va begona ota-sinflardan (masalan, ) yiroqlashishni anglatadi..parent .child

Shunday qilib, komponentlar umumiy, bekor qilinmaydigan mulk-qiymat juftliklarini o'z ichiga olgan asosiy sinf bilan tuzilishi kerak. Masalan, .btnva .btn-primary. Biz , va .btnkabi barcha umumiy uslublar uchun foydalanamiz . Keyin rang, fon rangi, chegara rangi va boshqalarni qo'shish uchun modifikatorlardan foydalanamiz .displaypaddingborder-width.btn-primary

Modifikator sinflari faqat bir nechta variantda o'zgartiriladigan bir nechta xususiyat yoki qiymatlar mavjud bo'lganda ishlatilishi kerak. Modifikatorlar har doim ham zarur emas, shuning uchun kod satrlarini saqlayotganingizga ishonch hosil qiling va ularni yaratishda keraksiz bekor qilishlarning oldini oling. Modifikatorlarning yaxshi namunalari bizning mavzu rang sinflarimiz va o'lcham variantlarimizdir.

z-indeks shkalasi

Bootstrap-da ikkita z-indexshkala mavjud - komponent ichidagi elementlar va qoplama komponentlari.

Komponent elementlari

• Bootstrap-dagi ba'zi komponentlar xususiyatni o'zgartirmasdan ikki tomonlama chegaralarni oldini olish uchun bir-birining ustiga chiqadigan elementlar bilan qurilgan border. Masalan, tugma guruhlari, kiritish guruhlari va sahifalash.
• Ushbu komponentlar orqali standart z-indexshkalasi mavjud .03
• 0sukut bo'yicha (boshlang'ich), 1is :hover, 2is :active/ .active, va 3is :focus.
• Ushbu yondashuv bizning eng yuqori foydalanuvchi ustuvorligi haqidagi taxminlarimizga mos keladi. Agar element diqqat markazida bo'lsa, u ko'rishda va foydalanuvchining diqqatida. Faol elementlar ikkinchi eng yuqori, chunki ular holatni ko'rsatadi. Hover uchinchi o'rinda turadi, chunki u foydalanuvchi niyatini bildiradi, lekin deyarli hamma narsani sichqonchaga o'tkazish mumkin.

Overlay komponentlari

Bootstrap qandaydir qoplama vazifasini bajaradigan bir nechta komponentlarni o'z ichiga oladi. Bunga eng yuqori tartibida z-indexochiladigan menyular, qattiq va yopishqoq navbarlar, modallar, asboblar maslahatlari va popoverlar kiradi. z-indexBu komponentlar da boshlanadigan o'z shkalasiga ega 1000. Bu boshlang‘ich raqam o‘zboshimchalik bilan tanlangan va uslublarimiz va loyihangizning shaxsiy uslublari o‘rtasida kichik bufer bo‘lib xizmat qiladi.

Har bir qoplama komponenti o'z z-indexqiymatini bir oz oshiradi, shunda umumiy UI tamoyillari foydalanuvchi diqqatini yo'naltirgan yoki ko'tarilgan elementlarni har doim ko'rinishda qolishiga imkon beradi. Misol uchun, modal hujjatni blokirovka qilishdir (masalan, siz modal harakatidan boshqa hech qanday harakatni amalga oshira olmaysiz), shuning uchun biz buni navbarlarimizning ustiga qo'yamiz.

Bu haqda bizning z-indextartib sahifamizda ko'proq bilib oling .

JS orqali HTML va CSS

Iloji bo'lsa, biz HTML va CSS-ni JavaScript orqali yozishni afzal ko'ramiz. Umuman olganda, HTML va CSS yanada samarali va har xil tajriba darajasidagi ko'proq odamlar uchun ochiqdir. HTML va CSS ham brauzeringizda JavaScript-ga qaraganda tezroq ishlaydi va sizning brauzeringiz odatda siz uchun juda ko'p funksiyalarni taqdim etadi.

dataBu tamoyil atributlardan foydalanadigan birinchi darajali JavaScript API hisoblanadi . JavaScript plaginlarimizdan foydalanish uchun deyarli har qanday JavaScript yozishingiz shart emas; Buning o'rniga HTML yozing. Bu haqida ko'proq JavaScript-ni ko'rib chiqish sahifamizda o'qing .

Va nihoyat, bizning uslublarimiz umumiy veb-elementlarning asosiy xatti-harakatlariga asoslanadi. Iloji bo'lsa, biz brauzer taqdim etgan narsadan foydalanishni afzal ko'ramiz. Misol uchun, siz .btndeyarli har qanday elementga sinf qo'yishingiz mumkin, lekin aksariyat elementlar semantik qiymat yoki brauzer funksiyasini ta'minlamaydi. Buning o'rniga biz <button>s va <a>s dan foydalanamiz.

Xuddi shu narsa murakkabroq komponentlar uchun ham amal qiladi. Kiritilgan holatga asoslanib, ota-ona elementga sinflar qo‘shish uchun o‘z shaklni tekshirish plaginini yozishimiz mumkin bo‘lsa-da , bu bizga qizil degan matnni uslublash imkonini beradi, biz har bir brauzer bizga taqdim etadigan :valid/ :invalidpseudo-elementlardan foydalanishni afzal ko‘ramiz.

Utilitalar

Utility sinflari - ilgari Bootstrap 3-da yordamchilar - CSS shishishi va sahifaning yomon ishlashiga qarshi kurashda kuchli ittifoqchi. Foydali sinf odatda sinf sifatida ifodalangan yagona, o'zgarmas xususiyat-qiymat juftligidir (masalan, ni .d-blockifodalaydi display: block;). Ularning asosiy jozibadorligi HTML yozishda foydalanish tezligi va siz yozishingiz kerak bo'lgan maxsus CSS miqdorini cheklashdir.

Maxsus CSS-ga kelsak, yordamchi dasturlar eng ko'p takrorlanadigan xususiyat-qiymat juftliklarini bitta sinflarga qisqartirish orqali fayl hajmini oshirishga qarshi kurashishga yordam beradi. Bu sizning loyihalaringizda miqyosda dramatik ta'sir ko'rsatishi mumkin.

Moslashuvchan HTML

Har doim ham imkoni bo'lmasa-da, biz komponentlar uchun HTML talablarimizda haddan tashqari dogmatik bo'lishdan qochishga harakat qilamiz. Shunday qilib, biz CSS selektorlarimizda yagona sinflarga e'tibor qaratamiz va darhol bolalar selektorlaridan qochishga harakat qilamiz ( >). Bu sizga amalga oshirishda ko'proq moslashuvchanlikni beradi va bizning CSS-ni sodda va kamroq aniq saqlashga yordam beradi.

Kod konventsiyalari

Kod qo'llanmasi (Bootstrap hamkori @mdo'dan) HTML va CSS-ni Bootstrap orqali qanday yozishimizni ko'rsatadi. U umumiy formatlash, umumiy ma'noda standart sozlamalar, xususiyat va atribut buyurtmalari va boshqalar uchun ko'rsatmalarni belgilaydi.

Biz Stylelint -dan Sass/CSS-da ushbu standartlarni va boshqalarni qo'llash uchun foydalanamiz. Bizning maxsus Stylelint konfiguratsiyasi ochiq manba va boshqalar foydalanishi va kengaytirishi mumkin.

Biz standart va semantik HTMLni qo'llash, shuningdek, keng tarqalgan xatolarni aniqlash uchun vnu-jar dan foydalanamiz.