Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS5 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 5 misoli

<div class="container-fluid p-5 bg-primary text-white text-center">   <h1>My First Bootstrap Page</h1>   <p>Resize this responsive page to see the effect!</p> </div> <div class="container mt-5">   <div class="row">     <div class="col-sm-4">       <h3>Column 1</h3>       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>     </div>     <div class="col-sm-4">       <h3>Column 2</h3>       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>     </div>     <div class="col-sm-4">       <h3>Column 3</h3>       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>     </div>   </div> </div>
O‘zingiz sinab ko‘ring »

Bootstrap versiyalari

Bootstrap 5 (2021-yilda chiqarilgan) — Bootstrap’ning (2013-yilda chiqarilgan) eng yangi versiyasi: unda yangi komponentlar, tezroq ishlaydigan stillar fayli va yanada kengroq moslashuvchanlik bor.

Bootstrap 5 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 sof (vanilla) 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 5 barcha zamonaviy brauzerlar (Chrome, Firefox, Edge, Safari va Opera) bilan mos ishlaydi. E’tibor bering: agar sizga IE11 va undan oldingi versiyalarni qo‘llab-quvvatlash kerak bo‘lsa, BS4 yoki BS3 dan foydalanishingiz shart.

Bootstrap 5’ni qayerdan olish mumkin?

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

Siz quyidagilardan birini tanlashingiz mumkin:

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

Bootstrap 5 CDN

Agar Bootstrap 5’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:

MaxCDN:

<!-- Latest compiled and minified CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5 CDN’idan foydalanishning bir afzalligi:
Ko‘plab foydalanuvchilar boshqa saytlarga kirganlarida Bootstrap 5’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.

JavaScript?
Bootstrap 5 turli komponentlar (masalan, modal oynalar, tooltiplar, popoverlar va h.k.) uchun JavaScript’dan foydalanadi. Biroq agar siz Bootstrap’ning faqat CSS qismidan foydalansangiz, ular sizga kerak emas.

Bootstrap 5’ni yuklab olish

Agar Bootstrap 5’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 5 yordamida birinchi veb-sahifangizni yarating

1. HTML5 doctype’ini qo‘shing

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

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

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

2. Bootstrap 5 — mobile-first freymvork

Bootstrap 5 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 5, 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 5 sahifasi

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

Konteyner misoli

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container">   <h1>My First Bootstrap Page</h1>   <p>This part is inside a .container class.</p>   <p>The .container class provides a responsive fixed width container.</p> </div> </body> </html>
O‘zingiz sinab ko‘ring »

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

Fluid konteyner misoli

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid">   <h1>My First Bootstrap Page</h1>   <p>This part is inside a .container-fluid class.</p>   <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p> </div> </body> </html>
O‘zingiz sinab ko‘ring »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish