Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS 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 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 tarixi

Bootstrap Twitter kompaniyasida Mark Otto va Jacob Thornton tomonidan ishlab chiqilgan va 2011-yil avgust oyida GitHub’da ochiq kodli mahsulot sifatida chiqarilgan.

2014-yil iyun oyida Bootstrap GitHub’dagi 1-raqamli loyiha edi!

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 3’da mobile-first (avvalo mobil qurilmalar uchun) stillar freymvork yadrosining bir qismidir
  • Brauzerlarga moslik: Bootstrap barcha zamonaviy brauzerlar (Chrome, Firefox, Internet Explorer, Edge, Safari va Opera) bilan mos ishlaydi

Bootstrap versiyalari

Ushbu darslik 2013-yilda chiqarilgan Bootstrap 3’ga asoslangan. Biroq biz yangiroq versiyalarni ham o‘rganamiz: Bootstrap 4 (2018-yilda chiqarilgan) va Bootstrap 5 (2021-yilda chiqarilgan).

Bootstrap 5 — Bootstrap’ning eng yangi versiyasi bo‘lib, unda yangi komponentlar, tezroq ishlaydigan stillar jadvallari (stylesheets), yanada kuchliroq moslashuvchanlik va boshqa yangiliklar mavjud. 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 foydalanishni davom ettirish mutlaqo xavfsiz. Biroq ularga yangi imkoniyatlar QO‘SHILMAYDI.

Bootstrap’ni qayerdan olish mumkin?

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

Siz quyidagilardan birini tanlashingiz mumkin:

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

Bootstrap’ni yuklab olish

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

Bootstrap CDN

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

MaxCDN Bootstrap’ning CSS va JavaScript fayllari uchun CDN xizmatini taqdim etadi. Shuningdek, jQuery’ni ham ulashingiz shart:

MaxCDN:

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Bootstrap CDN’idan foydalanishning bir afzalligi:
Ko‘plab foydalanuvchilar boshqa saytlarga kirganlarida Bootstrap’ni MaxCDN’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
Bootstrap JavaScript plaginlari (masalan, modal oynalar, tooltiplar va h.k.) uchun jQuery’dan foydalanadi. Biroq agar siz Bootstrap’ning faqat CSS qismidan foydalansangiz, jQuery sizga kerak emas.

Bootstrap yordamida birinchi veb-sahifani yarating

1. HTML5 doctype’ini qo‘shing

Bootstrap 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 3 — mobile-first freymvork

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

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

Misol

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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 sahifasining kodi ko‘rsatilgan (to‘liq kenglikdagi konteyner bilan):

Misol

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.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