CSS Freymvorklari va ular bilan ishlash
CSS Freymvorklari (ramkalari) - bu veb-interfeyslar va veb-saytlarni yaratishning o'rtacha va umumiy vazifalarini osonlashtirish uchun mo'ljallangan uslublar va dizayn ramkalari to'plami. Ushbu ramkalar veb-ishlab chiquvchilarga qayta-qayta kod yozishga hojat qolmaganda yordam beradi.
Quyida eng mashhur CSS ramkalar keltirilgan:
1.Bootstrap: Eng mashhur veb-ramkalardan biri va keng qo'llaniladi. Yorliqlar va ko'p funktsiyali komponentlar bilan bootstrap super, modulli va o'zgartiriladigan dizayn va interfeysni tez va oson yaratishni ta'minlaydi.
2.Tailwind CSS: Bu ramka eng noyob va muhim CSS ramkalaridan biridir. Ushbu ramka sizga har xil yo'llar bilan o'zgartirishlar kiritish imkonini beradi. Barcha kerakli usullardan foydalangan holda, Tailwind dizaynni ma'lum bir tarzda ko'rsatish uchun ishlatilishi mumkin.
3.Materialize CSS: Google Material Design Guide asosida, Materialize CSS zamonaviy dizaynni osonlashtiradigan xususiyatlarga ega. Ushbu ramka animatsiyalar, ranglar va komponentlardan iborat foydalanish uchun qulay kutubxonadir.
4.Foundation: Foundation qisqa vaqt ichida veb-saytlarni yaratish uchun mo'ljallangan ramkadir. U barcha turdagi qurilmalar bilan ishlaydigan qulay va ko'p funktsiyali komponentlarga ega.
Ramkalar bilan ishlash sizga dizayn va interfeysni tez va oson yaratish, kodni qayta yozishdan tejash va muhim uslublarni qo'llash imkonini beradi. Ushbu ramkalar o'rtasida tanlov qilishda, loyihangizning mahsuloti va dizaynini qanday olishingizni tushunishingiz muhimdir.
Men CSS Fremvorklaridan Bootstrapni tanladim va uning 5-versiyasini hozirda o’rganmoqdaman.
Bootstrap 5
Bootstrap 5 - Bootstrap-ning eng yangi versiyasi bo'lib, u sezgir, birinchi mobil veb-saytlarni yaratish uchun eng mashhur HTML, CSS va JavaScript asosidir.
Bootstrap 5 - Bootstrapning eng yangi versiyasi; yangi komponentlar, tezroq uslublar jadvali va ko'proq sezgirlik bilan.
Bootstrap 5 barcha asosiy brauzerlar va platformalarning so'nggi, barqaror versiyalarini qo'llab-quvvatlaydi. Biroq, Internet Explorer 11 va undan past versiyalari qo'llab-quvvatlanmaydi.
Bootstrap 5 va Bootstrap 3 & 4 o'rtasidagi asosiy farq shundaki, Bootstrap 5 jQuery o'rniga JavaScript-ga o'tgan.
Bootstrap 3 va Bootstrap 4 hali ham jiddiy xatolarni tuzatish va hujjatlarni o'zgartirish uchun jamoa tomonidan qo'llab-quvvatlanadi va ulardan foydalanishni davom ettirish mutlaqo xavfsizdir. Biroq, ularga yangi xususiyatlar qo'shilmaydi.
Bootstrap nima?
Bootstrap - bu tezroq va osonroq veb-ishlab chiqish uchun bepul front-end ramka
Bootstrap matbaa, shakllar, tugmalar, jadvallar, navigatsiya, modallar, tasvir karusellari va boshqa ko'plab, shuningdek, ixtiyoriy JavaScript plaginlari uchun HTML va CSS-ga asoslangan dizayn shablonlarini o'z ichiga oladi.
Bootstrap ham sizga sezgir dizaynlarni osongina yaratish imkoniyatini beradi.
Responsive veb-dizayn nima?
Responsiv veb-dizayn kichik telefonlardan tortib katta ish stollarigacha bo'lgan barcha qurilmalarda avtomatik tarzda yaxshi ko'rinishga moslashadigan veb-saytlarni yaratishdir.
Bootstrap qanday ulanadi.
Bootstrapni ulashning eng oson usuli bu ning ichiga ushbu bootstrapning linkini ulashdir.
Bootstrap 5 konteynerlari:
Oldingi bobdan bilib oldingizki, Bootstrap sayt mazmunini oʻrash uchun oʻz ichiga olgan elementni talab qiladi.
Konteynerlar ularning ichidagi tarkibni to'ldirish uchun ishlatiladi va ikkita konteyner klassi mavjud:
.container sinfi sezgir kenglikdagi konteynerni ta'minlaydi
.container-fluid sinfi ko'rish oynasining butun kengligini qamrab oluvchi to'liq kenglikdagi konteynerni ta'minlaydi.
Bootstrap 5 Grid tizimi
Bootstrap grid tizimi flexbox bilan qurilgan va sahifa bo'ylab 12 tagacha ustunga ruxsat beradi.
Bootstrap 5 da "ranglar orqali ma'no" berish uchun ishlatilishi mumkin bo'lgan ba'zi kontekstli sinflar mavjud.
text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body
Flexbox
Bootstrap 3 va Bootstrap 4 va 5 o'rtasidagi eng katta farq shundaki, Bootstrap 5 endi tartibni boshqarish uchun floats o'rniga flexbox-dan foydalanadi.
Flexible Box Layout moduli float yoki joylashishni aniqlashdan foydalanmasdan moslashuvchan moslashuvchan tartib tuzilishini loyihalashni osonlashtiradi.
Gorizontal yo'nalish
Egiluvchan elementlarni gorizontal ravishda (yonma-yon) ko'rsatish uchun .flex-row dan foydalaning. Namuna.
Flex item 1
Flex item 2
Flex item 3
Natija:
Moslashuvchan elementlarning hizalanishini o'zgartirish uchun .justify-content-* sinflaridan foydalaning. Yaroqli sinflar boshlang'ich (standart), tugatish, markaz, orasida yoki atrofida:
Flex item 1
Flex item 2
Flex item 3
To'ldirish / Teng kenglik
Egiluvchan elementlarni teng kengliklarga majburlash uchun .flex-fill dan foydalaning.
Qolgan joyni egallash uchun moslashuvchan elementda .flex-grow-1 dan foydalaning. Quyidagi misolda birinchi ikkita moslashuvchan element kerakli joyni egallaydi, oxirgi element esa mavjud bo'sh joyning qolgan qismini egallaydi.
Quyidagi Templateni qilishda men Bootstrap dan foydalandim va uning navbar menyu qismini hosil qilishda flext texnologiyasidan foydalandim.
|
