• Foydalanish oson
  • Mobile-First Development
  • Brauzerlar o‘rtasidagi izchil muvofiqlik
  • Moslashtirilgan mavzular va uslublar
  • Vaqt va xarajat samaradorligi
  • CDN havolalari orqali Bootstrapni qoshing
  • Amaliy mashg‘ulot bo‘yicha topshiriqlar.
  • Bootstrap freymvorkni ulash, bazaviy shablonlarni sozlash




    Download 20,23 Kb.
    Sana24.05.2024
    Hajmi20,23 Kb.
    #252720
    Bog'liq
    10.mavzu


    BOOTSTRAP FREYMVORKNI ULASH, BAZAVIY SHABLONLARNI SOZLASH.
    Ishning maqsadi va mazmuni: Bootstrap freymvorkni ulash, bazaviy shablonlarni sozlashni o’rganish. Bootstrap 3, Bootstrap 4 va Bootstrap 5 ni o’rganish va farqlarini bilib olish.
    Nazariy ma’lumotlar: Bootstrap nima? Bootstrap - bu tezroq va osonroq web-ishlab chiqish uchun bepul front-end ramka Bootstrap 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 web-dizayn nima? Responsiv web-dizayn kichik telefonlardan tortib katta ish stollarigacha bo'lgan barcha qurilmalarda avtomatik tarzda yaxshi ko'rinishga moslashadigan web-saytlarni yaratishdir.
    Nima uchun Bootstrap dan foydalanish kerak? Bootstrap-ning afzalliklari:

    • Foydalanish oson: HTML va CSS-ni oddiy bilgan har bir kishi Bootstrap-dan foydalanishni boshlashi mumkin

    • Javob beruvchi xususiyatlar: Bootstrap-ning sezgir CSS telefonlar, planshetlar va ish stollariga moslashadi

    • Mobil-birinchi yondashuv: Bootstrap 3-da mobil-birinchi uslublar asosiy tizimning bir qismidir.

    • Brauzer mosligi: Bootstrap barcha zamonaviy brauzerlar (Chrome, Firefox, Internet Explorer, Edge, Safari va Opera) bilan mos keladi.

    Bootstrap ilovalari.

    • Responsive web-dizayn: Bootstrap ishlab chiquvchilarga doimiy va optimal foydalanuvchi tajribasini ta'minlab, turli ekran o'lchamlari va qurilmalariga muammosiz moslashadigan web-saytlarni yaratish imkonini beradi.

    • Mobile-First Development: Bootstrapning mobil-birinchi yondashuvi web-saytlar mobil qurilmalar uchun mo'ljallangan va optimallashtirilgan bo'lib, smartfon va planshetlardan ko'proq foydalanishni ta'minlaydi.

    • Samarali prototiplash: Oldindan ishlab chiqilgan komponentlar va shablonlarning keng to'plami bilan Bootstrap tezkor prototiplashni osonlashtiradi, bu esa ishlab chiquvchilarga web-saytlarning funktsional maketlari va foydalanuvchi interfeyslarini tezda yaratishga imkon beradi.

    • Brauzerlar o‘rtasidagi izchil muvofiqlik: Bootstrapning standartlashtirilgan CSS va JavaScript kod bazasi turli web-brauzerlarda izchil renderlash va funksionallikni ta’minlaydi, bu esa brauzerga xos muammolarni bartaraf etishda ishlab chiquvchilarning vaqt va kuchini tejaydi.

    • Moslashtirilgan mavzular va uslublar: Bootstrap sozlanishi mumkin boʻlgan mavzular va uslublarning keng assortimentini taklif etadi, bu esa ishlab chiquvchilarga oʻzlarining brend yoki loyiha talablariga mos keladigan vizual jozibali va noyob dizaynlarni yaratishga imkon beradi.

    • Vaqt va xarajat samaradorligi: Bootstrap quvvatidan foydalangan holda, ishlab chiquvchilar front-end ishlab chiqishda sezilarli vaqt va kuchni tejashlari mumkin, bu esa loyihani tezroq yetkazib berish va xarajatlarni tejash imkonini beradi.

    Bootstrap-ni web-saytga kiritishning ikki yo'li mavjud. CDN havolalari orqali Bootstrapni qo'shing:






    Bootstrapni getbootstrap.com dan yuklab oling va undan foydalaning:
    www.getbootstrap.com saytiga o‘ting va Ishga tushirish tugmasini bosing. Bootstrap-ni yuklab olish tugmasini bosing. A.zip fayli yuklab olinadi. Zip faylini chiqarib oling va papkasiga o'ting. Unda CSS va JS nomli ikkita papka mavjud.



    Bootstrapni bosqichma-bosqich o'rganing:

    • Kirish va o'rnatish

    • Grid tizimi

    • Tugmalar, glifikonlar, jadvallar

    • Vertikal shakllar, gorizontal shakllar, inline shakllar

    • Ochiladiganlar va javob beruvchi yorliqlar

    • Progress bar va Jumbotron

    • Ogohlantirishlar, Sahifalar va Peyjer

    • Belgilar, teglar, sahifa sarlavhalari

    • Maslahat

    Amaliy mashg‘ulot bo‘yicha topshiriqlar.

    • Bootstrapni ulash usullaridan foydalanib web saytizmiga bog’lash.

    • Bootstrap 3, Bootstrap 4 va Bootstrap 5 ni farqlarini o’rganish.

    • Bootstrap web saytimizda qo’llash.

    Download 20,23 Kb.




    Download 20,23 Kb.

    Bosh sahifa
    Aloqalar

        Bosh sahifa



    Bootstrap freymvorkni ulash, bazaviy shablonlarni sozlash

    Download 20,23 Kb.