Bootstrap freymvork texnologiyasi. Bazaviy shablonlarni sozlash. Komponentlar

Bootstrap freymvork texnologiyasi. Bazaviy shablonlarni sozlash. Komponentlar .

Multimedia texnologiyalari kafedrasi
MUHAMMAD AL-XORAZMIY NOMIDAGI
TOSHKENT AXBOROT TEXNOLOGIYALARI UNIVERSITETI
https://t.me/UniversalstudyTUIT

Reja:

• Bootstrapga kirish
• Bootstrap nima?
• Responsive (Moslashuvchan) veb-dizayn nima?
• Bootstrapni nima uchun ishlatishimiz kerak?
• Bootstrap 4 ni CDN orqali ulash.
• Bootstrap 4 ni yuklab olish.
• Bootstrap 4 yordamida birinchi veb sahifani yaratish.

Bootstrapga kirish

Bootstrap ilk “mobile first” framework hisoblanib, unda birinchi e’tibor tayyorlangan sahifalar mobil qurilmalarda qanday ko’rinishiga qaratiladi. O’zining moslashuvchangili sabab Bootstrapda tayyorlangan sahifalar barcha hajmdagi ekranlarda bir xil chiroyli ko’rinadi. Bootstrap haqiqatdan ham front end ustalarining ishini bir necha o’n barobarga osonlashtirdi. Bir necha yil avval HTML va CSS kodlarni to’liq qo’lda yozib sayt tayyorlayotgan kishilar Bootstrapning qanchalik qulay tizim ekanligini bir necha bor ishlatib ko’rgandanoq bilib olishlari mumkin.

Bootstrap nima?

• Bootstrap veb-saytni tez va oson yaratish uchun bepul frameworkdir.
• Bootstrap HTML va CSS-ga asoslangan tipografiya, formalar, tugmalar, jadvallar, navigatsiya, modallar, rasm karusellari va boshqa ko'p narsalar uchun, shuningdek ixtiyoriy JavaScript plaginlarini o'z ichiga oladi.
• Bootstrap sizga osongina sezgir dizaynni yaratish qobiliyatini beradi

Responsive (Moslashuvchan) veb-dizayn nima?
Responsive (Moslashuvchan) veb dizayn - bu kichik telefonlardan tortib katta ish stollariga qadar o'zlarini barcha qurilmalarda yaxshi ko'rinishga sozlaydigan veb-saytlardir.

Bootstrapni nima uchun ishlatishimiz kerak?

Bootstrapning afzalliklari:
Foydalanish oson: HTML va CSS haqida oddiy ma'lumotga ega bo'lgan har kim Bootstrap-dan foydalanishni boshlashi mumkin
Xususiyatlari: Bootstrapning sezgir CSS kodi telefonlar, planshetlar va ish stollariga moslashadi
Brauzer bilan mosligi: Bootstrap 4 barcha zamonaviy brauzerlarga mos keladi (Chrome, Firefox, Internet Explorer 10+, Edge, Safari va Opera).

Bootstrap 4-ni qayerdan olish kerak?

• O'z veb-saytingizda Bootstrap 4-dan foydalanishni boshlashning ikkita usuli mavjud.
• CDN dan Bootstrap 4 ni qo'shish
• Bootstrap 4 ni saytdan dan yuklab olish

Birinchi usul : Bootstrap 4 ni CDN orqali ulash

• Agar siz Bootstrap 4-ni o'zingiz yuklab olishni xohlamasangiz, uni CDN dan (tarkib etkazib berish tarmog'idan) olishingiz mumkin.
• MaxCDN Bootstrapning CSS va JavaScript kodlarini CDN orqali qo'llab-quvvatlaydi. JQueryni ham o'z ichiga olishi kerak. Buning uchun qyuidagi shartlarni bajaring : 

;

Ikkinchi usul : Bootstrap 4 ni yuklab olish

Agar siz Bootstrap 4-ni o'zingiz yuklab olishni va o'tkazishni xohlasangiz, https://getbootstrap.com/ saytiga o'ting va u yerdagi ko'rsatmalarga rioya qiling.

Bootstrap 4 yordamida birinchi veb sahifangizni yarating

• 1. HTML5 doctype qo'shing
• Bootstrap 4 HTML elementlari va CSS xususiyatlaridan foydalanadi, bu esa HTML5 hujjat turini talab qiladi.
• Har doim HTML5 doctype sahifaning boshida va lang atributi va to'g'ri belgilar to'plamini qo'shing:

2. Bootstrap 4 mobil qurilmalar uchun moslashuvchan hisoblanadi

Bootstrap 4 yordamida birinchi veb sahifangizni yarating

2. Bootstrap 4 mobil qurilmalar uchun moslashuvchan hisoblanadi

Bootstrap 4 mobil qurilmalarga sezgir bo'lishga mo'ljallangan. Mobil-birinchi uslublar asosiy doiraning bir qismidir.

Tegishli tasvirlash va sensorli kattalashtirish uchun elementga quyidagi teg qo'shing :

Izoh uchun : 

• Ushbu width=device-width qism sahifaning kengligini qurilmaning ekran kengligiga qarab o'rnatadi (bu qurilmaga qarab o'zgaradi).
• Bo'lim initial-scale=1birinchi marta brauzer tomonidan yuklanganda, qism dastlabki kattalashtirish darajasini belgilaydi.