Panjara tizimi 1-qism

Bootstrap panjara tizimi veb-saytlarning maketini yaratishda tez va qulaylikni beradi. Bootstrap 4-ning so'nggi versiyasi yangi 12ta ustunli mobile-first moslashuvchan panjara tizimini taqdim etadi.

Bootstrap 4, uyali telefonlar, planshetlar, noutbuklar va ish stollari va shaxsiy lompyuter kabi turli xil qurilmalar uchun panjara tartibini tezda tuzib chiqish uchun oldindan belgilangan panjara sinflarini o'z ichiga oladi. Masalan, siz portret rejimidagi juda kichik qurilmalarga(mobil telefonlar) panjara ustunlarini yaratish uchun .col- * sinflaridan foydalanishingiz mumkin. Siz shunga o'xshab .col-sm- * sinflaridan foydalanib, kichik ekranli qurilmalar uchun panjara ustunlarini yaratishingiz mumkin, masalan, landshaft rejimida uyali telefon, .col-md-* dan peyzaj rejimidagi o'rta ekranli qurilmalar uchun foydalanishingiz mumkin, masalan - planshetlar. .col-lg- * sinflari ish stoli kompyuterlar kabi katta qurilmalar uchun, .col-xl-* sinflar juda katta ish stolli ekranlari uchun foydalanishimiz mumkin.

Quyidagi jadval yangi panjara tizimining asosiy xususiyatlar ma'lumotlarini o'z ichiga oladi:

Yuqoridagi jadvaldagi muhim narsa, har qanday .col-sm-* sinfni elementga qo'llash faqatgina kichik qurilmalardagi stillarga emas, balki 540px ga teng yoki undan katta enlikdaki o'rtacha va juda katta qurilmalarga ta'sir ham qiladi. Ya'ni, agar .col-md-*, .col-lg-* yoki .col-xl-* sinfi mavjud bo'lmasa. Shunga o'xshab .col-md-* sinfi ham faqat o'rtacha ekranli qurilmalarga emas, balki katta va juda katta ekranli qurilmalarga, agar .col-lg-* yoki ,.col-xl-* mavjud bo'lmasa ta'sir qiladi.

Endi savol tug'iladi, qanday qilib 12ta moslashuvchan panjara tizimidan foydalanib qator va ustunlarni yaratish mumkin degan. Javob juda oddiy, birinchi konteyner ya'ni qator va ustunlarni o'z ichiga oluvchi o'rama qavat vazifasini bajaruvchi .container sinfidan foydalanamiz. .container sinfidan keyin .row sinfidan foydalanib, konteyner ichiga qatorlarni yaratamiz, va keyin har qanday qatorni ichiga .col-*.col-sm-*.col-md-*.col-lg-* va .col-xl-* sinflardan foydalanib ustunlar yaratamiz. Bu ustunlar o'zimizning ma'lumotlarimizni joylaydigan faol kontent maydon hisoblanadi.

Ikkita ustun maketini yaratish

Quyidagi namunada sizga qanday qilib, o'rta, katta va juda katta qurilmalar uchun ikkita ustun maketini yaratishni ko'rsatamiz. Biroq, mobil telefonlarda(ekran eni 768 px dan quyi), ustunlar avtomatik gorizontal holatga keladi.

Yodda tuting: Panjara maketida, kontent ustunlar ichida joylashishi kerak va faqat ustunlar qatorlarning shoshilinch bolasi(children) bo'lishi mumkin. Qatorlar .container(fixed-width - sobit enlik) yoki .container-fluid(full-width - to'liq enlik) ichida aniq padding va tekislash uchun ichida joylanishi kerak.