Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS4 bilan ishlashni boshlash

ULASHISH

Bootstrap nima?

  • Bootstrap — veb-ishlab chiqishni tezroq va osonroq qilish uchun mo‘ljallangan bepul front-end freymvork
  • Bootstrap tipografiya, formalar, tugmalar, jadvallar, navigatsiya, modal oynalar, rasm karusellari va boshqa ko‘plab elementlar uchun HTML va CSS asosidagi dizayn shablonlarini, shuningdek ixtiyoriy JavaScript plaginlarini o‘z ichiga oladi
  • Bootstrap, shuningdek, moslashuvchan dizaynlarni oson yaratish imkonini beradi

Moslashuvchan veb-dizayn nima?

Moslashuvchan veb-dizayn — kichik telefonlardan tortib katta kompyuter ekranlarigacha barcha qurilmalarda chiroyli ko‘rinishi uchun o‘zini avtomatik ravishda moslashtiradigan veb-saytlar yaratishdir.

Bootstrap 4 misoli

<div class="jumbotron text-center">   <h1>My First Bootstrap Page</h1>   <p>Resize this responsive page to see the effect!</p> </div> <div class="container">   <div class="row">     <div class="col-sm-4">       <h3>Column 1</h3>       <p>Lorem ipsum dolor..</p>     </div>     <div class="col-sm-4">       <h3>Column 2</h3>       <p>Lorem ipsum dolor..</p>     </div>     <div class="col-sm-4">       <h3>Column 3</h3>       <p>Lorem ipsum dolor..</p>     </div>   </div> </div>
O‘zingiz sinab ko‘ring »

Bootstrap versiyalari

Ushbu darslik 2018-yilda Bootstrap 3’ning yangilangan versiyasi sifatida chiqarilgan Bootstrap 4’ga asoslangan: unda yangi komponentlar, tezroq ishlaydigan stillar jadvallari (stylesheet), yuqoriroq moslashuvchanlik va boshqa yangiliklar mavjud.

Bootstrap 5 (2021-yilda chiqarilgan) — Bootstrap’ning eng yangi versiyasi; u barcha asosiy brauzerlar va platformalarning eng so‘nggi barqaror versiyalarini qo‘llab-quvvatlaydi. Biroq Internet Explorer 11 va undan oldingi versiyalar qo‘llab-quvvatlanmaydi.

Bootstrap 5’ning Bootstrap 3 va 4 dan asosiy farqi shundaki, Bootstrap 5 jQuery o‘rniga JavaScript’ga o‘tgan.

Eslatma: Bootstrap 3 va Bootstrap 4 hanuz jamoa tomonidan jiddiy xatolarni tuzatish va hujjatlarni yangilash doirasida qo‘llab-quvvatlanadi, shuning uchun ulardan foydalanishda davom etish mutlaqo xavfsiz. Biroq ularga yangi imkoniyatlar QO‘SHILMAYDI.

Nega Bootstrap’dan foydalanish kerak?

Bootstrap’ning afzalliklari:

  • Foydalanish oson: HTML va CSS bo‘yicha boshlang‘ich bilimga ega har qanday odam Bootstrap’dan foydalanishni boshlashi mumkin
  • Moslashuvchanlik imkoniyatlari: Bootstrap’ning moslashuvchan CSS’i telefonlar, planshetlar va kompyuterlarga moslashadi
  • Mobile-first yondashuvi: Bootstrap’da mobile-first (avvalo mobil qurilmalar uchun) stillar freymvork yadrosining bir qismidir
  • Brauzerlarga moslik: Bootstrap 4 barcha zamonaviy brauzerlar (Chrome, Firefox, Internet Explorer 10+, Edge, Safari va Opera) bilan mos ishlaydi

Bootstrap 4’ni qayerdan olish mumkin?

O‘z veb-saytingizda Bootstrap 4’dan foydalanishni boshlashning ikki yo‘li bor.

Siz quyidagilardan birini tanlashingiz mumkin:

  • Bootstrap 4’ni CDN orqali ulash
  • Bootstrap 4’ni getbootstrap.com saytidan yuklab olish

Bootstrap 4 CDN

Agar Bootstrap 4’ni o‘zingiz yuklab olib, o‘z serveringizda joylashtirishni istamasangiz, uni CDN (Content Delivery Network — kontent yetkazib berish tarmog‘i) orqali ulashingiz mumkin.

jsDelivr Bootstrap’ning CSS va JavaScript fayllari uchun CDN xizmatini taqdim etadi. Bundan tashqari, jQuery’ni ham ulashingiz kerak:

jsDelivr:

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script> <!-- Popper JS --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 4 CDN’idan foydalanishning bir afzalligi:
Ko‘plab foydalanuvchilar boshqa saytlarga kirganlarida Bootstrap 4’ni jsDelivr’dan allaqachon yuklab olgan bo‘ladi. Natijada ular sizning saytingizga kirganda u keshdan yuklanadi va bu yuklanish vaqtini qisqartiradi. Shuningdek, aksariyat CDN’lar foydalanuvchi fayl so‘raganda u foydalanuvchiga eng yaqin serverdan yetkazib berilishini ta’minlaydi, bu ham yuklanishni tezlashtiradi.

jQuery va Popper nima uchun kerak?
Bootstrap 4 JavaScript komponentlari (masalan, modal oynalar, tooltiplar, popoverlar va h.k.) uchun jQuery va Popper.js’dan foydalanadi. Biroq agar siz Bootstrap’ning faqat CSS qismidan foydalansangiz, ular sizga kerak emas.

  • Yopiladigan ogohlantirishlar (alerts)
  • Holatlarni almashtirish uchun tugmalar va checkbox/radio tugmalar
  • Slaydlar, boshqaruv tugmalari va indikatorlar uchun karusel
  • Kontentni ochib-yopish uchun collapse (yig‘iladigan blok)
  • Ochiluvchi menyular (aniq joylashtirish uchun Popper.js ham talab qilinadi)
  • Modal oynalar (ochish va yopish)
  • Navigatsiya paneli (yig‘iladigan menyular uchun)
  • Tooltip va popoverlar (aniq joylashtirish uchun Popper.js ham talab qilinadi)
  • Aylantirish (scroll) xatti-harakati va navigatsiyani yangilash uchun Scrollspy

Bootstrap 4’ni yuklab olish

Agar Bootstrap 4’ni o‘zingiz yuklab olib, o‘z serveringizda joylashtirmoqchi bo‘lsangiz, https://getbootstrap.com/ saytiga o‘ting va u yerdagi ko‘rsatmalarga amal qiling.

Bootstrap 4 yordamida birinchi veb-sahifani yaratish

1. HTML5 doctype’ini qo‘shing

Bootstrap 4 HTML5 doctype’ini talab qiladigan HTML elementlari va CSS xususiyatlaridan foydalanadi.

Har doim sahifa boshiga HTML5 doctype’ini lang atributi va to‘g‘ri belgilar to‘plami (character set) bilan birga qo‘shing:

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8">   </head> </html>

2. Bootstrap 4 — mobile-first freymvork

Bootstrap 4 mobil qurilmalarga moslashuvchan bo‘lishi uchun ishlab chiqilgan. Mobile-first stillar freymvork yadrosining bir qismidir.

To‘g‘ri render qilinishi va sensorli ekranda masshtablash (touch zooming) to‘g‘ri ishlashi uchun <head> elementi ichiga quyidagi <meta> tegini qo‘shing:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width qismi sahifa kengligini qurilma ekranining kengligiga moslaydi (bu qurilmaga qarab turlicha bo‘ladi).

initial-scale=1 qismi sahifa brauzer tomonidan ilk bor yuklanganda boshlang‘ich masshtab darajasini belgilaydi.

3. Konteynerlar

Bootstrap 4, shuningdek, sayt kontentini o‘rab turuvchi element (konteyner)ni talab qiladi.

Tanlash uchun ikkita konteyner klassi mavjud:

  1. .container klassi moslashuvchan, qat’iy kenglikdagi konteynerni taqdim etadi
  2. .container-fluid klassi viewport’ning butun kengligini egallaydigan to‘liq kenglikdagi konteynerni taqdim etadi
.container
.container-fluid

Ikkita oddiy Bootstrap 4 sahifasi

Quyidagi misolda oddiy Bootstrap 4 sahifasining kodi ko‘rsatilgan (moslashuvchan, qat’iy kenglikdagi konteyner bilan):

Konteyner misoli

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap 4 Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">   <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container">   <h1>My First Bootstrap Page</h1>   <p>This is some text.</p> </div> </body> </html>
O‘zingiz sinab ko‘ring »

Quyidagi misolda oddiy Bootstrap 4 sahifasining kodi ko‘rsatilgan (to‘liq kenglikdagi konteyner bilan):

Fluid konteyner misoli

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap 4 Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">   <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid">   <h1>My First Bootstrap Page</h1>   <p>This is some text.</p> </div> </body> </html>
O‘zingiz sinab ko‘ring »

Bilasizmi?

W3.CSS — Bootstrap’ga ajoyib muqobil.

W3.CSS hajmi kichikroq, tezroq ishlaydi va undan foydalanish osonroq.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish