Bootstrap bilan ishlash

Bootstrap bilan ishlashni boshlash

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Asosiy HTML fayl</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

Har doim viewport <meta> tegini <head> qismi ichiga mobil qurilmalarda vebsaytni kattalashtirish va mobil qurilmalarga moslashni ta'minlash uchun yoziladi.

2-qadam: HTML faylni Bootstrap shablonga aylantirish

Yuqorida ishlatgan HTML faylni Bootstrap shablonga aylantirish uchun, shunchaki Bootstrap CSS va JS fayllarni shuningdek, talab qilingan JQuery va Popper.js ni ularning CDN havolalari orqali qo'shing.Javascript fayllarini sahifangizni pastki qismiga qo'shishingiz , aniqrog'i </body> tegini yopiluvchisidan oldin qo'shish veb sahifangizni ishlash faoliyatini yaxshilaydi., quyidagidek:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap</title>
    <!-- Bootstrap CSS file -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <h1>Hello, world!</h1>
    <!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Barchasini o'rnatdik! Bootstrap-ning CSS va JS fayllarini va talab qilingan JQuery va Popper.js ni qo'shib bo'lganimizdan keyin, har qanday sayt yoki ilovani Bootstrap freymvorki yordamida yasashimiz mumkin.

integrity va crossorigin atributlari CDN havolalarga Subresource Integrity(SRI, o'zbekcha Resurslar yaxlitligi)ni amalga oshirish uchn qo'shilgan. Bu saytingizga bo'ladigan hujum xavfini kamaytirish uchun ishlatiladi.

3-qadam: Saqlash va natijani ko'rish

Endilikda biz ishchi stolimizga "bootstrap-template.html" faylni saqlaymiz. Veb brauzerda faylni ochish uchun, unga yo'naltiring, keyin ustiga o'ng tugmani bosing va yoqtirgan brauzeringizni tanlang. Muqobil ravishda, siz brauzerni ochib faylni brauzerga qo'yish orqali ham ko'rolasiz.