Bootstrap komponentlariga kirish

Bootstrap komponentlari

Bootstrap komponentlariga kirish

Dastlab Twitter Blueprint deb nomlangan bu Twitter-da Mark Otto va Jeykob Thronton tomonidan ishlab chiqilgan. Bootstrap - bu veb-sahifalarga sezgirlikni beruvchi bepul CSS ramkasi. Ta'sirchanlik deganda, bu turli xil DOM elementlari veb-sahifaning nafisligini buzmasdan ekran o'lchamining o'zgarishi bilan mos ravishda o'lchamlarini o'zgartirishini anglatadi, chunki bu an'anaviy ravishda piksel yoki foiz o'lchami CSS usullari bilan sodir bo'ladi.
Bu "birinchi mobil CSS ramkasi" deb ham ataladi, chunki u qatorlar va ustunlarni belgilash orqali CSS Grid tartibiga ega bo'lish uchun mo'ljallangan. Ushbu ramkada CSS sinflari bilan birga JavaScript komponentlari ham mavjud. Ushbu ramkadan foydalanish uchun jQuery va Bootstrap uchun JavaScript Frameworkni boshqa Bootstrap CSS fayllari bilan majburiy ravishda bog'lashingiz kerak. Ushbu CSS fayllari CDN (Content Delivery Network) shaklida ham, yuklab olish uchun ham mavjud.

Turli yuklash komponentlari

Bootstrap yaxshi foydalanuvchi tajribasini va veb-sahifada foydalanuvchilarning o'zaro ta'sirini ta'minlash uchun qayta ishlatilishi mumkin bo'lgan o'nlab komponentlar bilan to'ldirilgan, masalan, navigatsiya paneli, qalqib chiquvchi oynalar, ochiladigan menyular, piktogrammalar, tugmalar, oldindan ishlab chiqilgan shakllar, shuningdek, turli DOM elementlari uchun o'lcham variantlari .

1. Glifonlar

Bu Bootstrap-da mavjud bo'lgan shrift formatidagi piktogrammalar. Ularning soni 200 ga yaqin. Ushbu glifiklarni https://glyphicons.com saytida topish mumkin.
Uni qanday ishlatish kerak?
Kattalashtirish, tahrirlash, ogohlantirish, fayl, o'chirish va h.k. kabi deyarli barcha amallarni bildiruvchi glifikonlar mavjud va ular alohida sinfda aniqlanadi. Shunday qilib, siz asosiy sinfni va individual sinfni, ideal ravishda span elementida ishlatishingiz va ushbu glifiklardan foydalanishingiz kerak.
Sintaksis:

2. Ochiladigan menyular

Bu havolalar ro'yxatini o'zgartirishga asoslangan menyulardir. Ular JS plagini tomonidan yanada dinamikroq qilingan va ularni http://getbootstrap/javascript/#dropdowns sahifasida topish mumkin.
Uni qanday ishlatish kerak?
Siz .dropdown sinfidan foydalanishingiz kerak, chunki element klassi ostida roʻyxat elemeBosh sahifantlari boʻlgan sinf .dropdown-menyu mavjud.
Sintaksis:

3. Tugmalar guruhlari

Ushbu Bootstrap komponenti yordamida siz tugmalar to'plamini bir-biriga ulashgan ketma-ketlikda guruhlashingiz mumkin.
Uni qanday ishlatish kerak?
.btn-group klassi bilan bo'linish elementlarini aniqlang va bu elementlarni .btn klassi bilan tugma bilan joylashtiring.

Correct

Wrong

4. Ochiladigan tugmalar

Ushbu komponent ochiladigan menyuni ishga tushirish uchun tugma elementini ishlatish uchun ishlatiladi.
Sintaksis: 

5. Kirish guruhlari

Bu shakl-nazorat sinfini kengaytiradi va kiritish elementining kiritish maydonining har ikki tomoniga matn yoki tugmalarni qo'shadi. Ushbu kiritish guruhlarini ishlatish uchun siz .input-group sinfidan .input-group-addon sinfiga ega bo'lishingiz kerak.
Sintaksis: 

@

6. Navbar

Ushbu komponentlar veb-saytingiz uchun navigatsiya sarlavhalari sifatida xizmat qiladi. Ular kichikroq ekran o'lchamli qurilmalarda o'zgaruvchan gamburger menyusi bilan vertikal ravishda kengaytirilishi uchun siqiladi va ekran kengligi oshgani sayin gorizontal holga keladi.
Sintaksis: