Bugungi darsimizda, Bootstrapdan foydalangan holda qanday qilib osongina veb sahifani yaratishni o'rganasiz. Ammo, boshlashdan oldin, kod muharriringiz va HTML & CSS bo'yicha fundamental bilimga ega ekanligingizga ishonch hsoil qiling.
Unda boshladik!
Birinchi veb sahifamizni Bootstrap yordamida yaratish
Hozir, biz Bootstrap CSS va JS fayllarni shuningdek, Javascript: JQuery va Popper.js ni CDN kabi boshqa qaramliklarni qo'shib bitta asosiy Bootstrap shablon yaratamiz.
Biz Bootstrapni CDN(Content Delivery orqali loyihangizga qo'shishni tavsiya qilgan bo'lardik. Chunki CDN yuklanish vaqtini kamaytiradi, chunki ular fayllarni dunyo bo'ylab ko'pgina serverlarga joylashadi qachonki foydalanuvchi faylga so'rov yuborganda, unga o'zlariga eng yaqin bo'lgan servervdan xizmat ko'riladi. Namunalaramizda ham xatto CDN havolalarni ishlatmoqdamiz:
Keling, quyidagi qadamlarni ko'rib chiqamiz, Darsimiz oxirida, siz veb brauzeringizda sodda Boostrapda qilingan "Hello, world!" kabi yozuvga ega veb sahifalani yaratolasiz.
1-qadam: Asosiy HTML fayl yaratish
O'zingiz yoqtirgan kod muharririni oching va yangi HTML fayl yarating. Bo'sh oyna bilan boshlang va quyidagi kodni yozib basic.html sifatida saqlang.
Asosiy HTML fayl
Hello, world!
Hello, world!
[badi] teglari orasiga joylaymiz. Bizda ham huddi shu element paydo bo’ldi. Htmlhaqidagi darsimizniko’rgansiz deb umid qilaman. Chunki html, yoki css darslarniko’rmagan bo’lsangiz, hozir nima qilayotganimizni tushunishingiz qiyin bo’ladi.
E’tibor bering, ushbu teg oddiy, biz bilgan
tegi. Bu tegning alert va alertdanger [denja] sinflari bor. Ushbu sinf css xususiyatlari, esa biz avvalroq ulagan – bootstrap css faylida yozilgan. Ushbu tegini o’chirib tashlasak, alertimiz oddiy matn bo’ladi – qoladi.
Hatolik yuz berdi
Keling komponent matnini o’zgartiramiz.
Holy guacamole! You should check in on some of those fields below.
Alert sahifasini sal pastroq tushursaak yana boshqa variantlar ko’rish mumkin. Misol uchun ushbu variantni x [iks] tugmachasi orqali yopish mumkin
