Kirish
JsDelivr va shablonning boshlang'ich sahifasi bilan sezgir, mobil qurilmalar uchun birinchi saytlarni yaratish uchun dunyodagi eng mashhur ramka bo'lgan Bootstrap bilan boshlang.
Tez boshlash
Loyihangizga tezda Bootstrap qo'shmoqchimisiz? JsDelivr, bepul ochiq manba CDN dan foydalaning. Paket menejeridan foydalanasizmi yoki manba fayllarni yuklab olishingiz kerakmi? Yuklab olish sahifasiga o'ting .
CSS
CSS-ni yuklash uchun uslublar jadvalini boshqa barcha <link>
uslublar jadvallariga nusxa ko'chiring .<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
JS
Ko'pgina komponentlarimiz ishlashi uchun JavaScript-dan foydalanish kerak. Xususan, ular bizning JavaScript plaginlari va Popper ni talab qiladi . Quyidagilardan birini<script>
</body>
faollashtirish uchun sahifalaringiz oxiriga, yopilish yorlig‘i oldiga qo‘ying .
To'plam
Har bir Bootstrap JavaScript plaginini va bog'liqlikni ikkita to'plamimizdan biriga qo'shing. Ikkala bootstrap.bundle.js
va bizning maslahatlarimiz va popoverlarimiz uchun Poppernibootstrap.bundle.min.js
o'z ichiga oladi . Bootstrap-ga kiritilgan narsalar haqida ko'proq ma'lumot olish uchun bizning tarkib bo'limimizga qarang.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
Alohida
Agar siz alohida skriptlar yechimidan foydalanishga qaror qilsangiz, birinchi navbatda Popper (agar siz maslahatlar yoki popoverlardan foydalanayotgan bo'lsangiz), so'ngra bizning JavaScript plaginlarimiz kelishi kerak.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
Modullar
dan foydalansangiz , Bootstrap-dan modul sifatida foydalanish<script type="module">
bo'limiga qarang .
Komponentlar
Qiziq, qaysi komponentlar bizning JavaScript va Popperimizni aniq talab qiladi? Quyidagi komponentlarni ko'rsatish havolasini bosing. Agar siz sahifaning umumiy tuzilishiga ishonchingiz komil bo'lmasa, sahifa shablonini o'qishni davom eting.
JavaScript-ni talab qiluvchi komponentlarni ko'rsatish
- O'chirish uchun ogohlantirishlar
- Holatlar va belgilash katakchasi/radio funksiyalarini almashtirish tugmalari
- Barcha slayd xatti-harakatlari, boshqaruv elementlari va ko'rsatkichlari uchun karusel
- Kontentning koʻrinishini almashtirish uchun yigʻish
- Ko'rsatish va joylashtirish uchun ochiladigan menyular (shuningdek, Popper ham talab qilinadi )
- Ko'rsatish, joylashishni aniqlash va aylantirish uchun modalar
- Javob beruvchi xatti-harakatni amalga oshirish uchun Collapse plaginimizni kengaytirish uchun Navbar
- Ko'rsatish va o'chirish uchun tostlar
- Ko'rsatish va joylashtirish uchun maslahatlar va popoverlar (shuningdek, Popper ham talab qilinadi )
- O'tkazish harakati va navigatsiya yangilanishlari uchun Scrollspy
Boshlovchi shablon
Sahifalaringizni eng so'nggi dizayn va ishlab chiqish standartlari bilan o'rnatganingizga ishonch hosil qiling. Bu HTML5 hujjat turidan foydalanishni va to'g'ri sezgir xatti-harakatlar uchun viewport meta-tegini qo'shishni anglatadi. Hammasini bir joyga qo'ying va sizning sahifalaringiz quyidagicha ko'rinishi kerak:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Keyingi qadamlar uchun , saytingiz mazmuni va komponentlarini joylashtirishni boshlash uchun Layout docs yoki rasmiy misollarimizga tashrif buyuring.
Muhim globallar
Bootstrap bir nechta muhim global uslublar va sozlamalardan foydalanadi, ulardan foydalanishda siz bilishingiz kerak bo'ladi, ularning barchasi deyarli faqat o'zaro faoliyat brauzer uslublarini normallashtirishga qaratilgan. Keling, suvga sho'ng'iymiz.
HTML5 hujjat turi
Bootstrap HTML5 hujjat turidan foydalanishni talab qiladi. Busiz, siz ba'zi qo'rqinchli to'liq bo'lmagan uslublarni ko'rasiz, lekin u hech qanday jiddiy hiqichoqlarga olib kelmasligi kerak.
<!doctype html>
<html lang="en">
...
</html>
Javob beruvchi meta teg
Bootstrap avval mobil qurilmalar uchun ishlab chiqilgan bo'lib, bu strategiyada biz avval mobil qurilmalar uchun kodni optimallashtiramiz, so'ngra CSS media so'rovlari yordamida kerak bo'lganda komponentlarni kengaytiramiz. Barcha qurilmalar uchun to'g'ri renderlash va teginish kattalashtirishni ta'minlash uchun <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Buning misolini ishga tushirish shablonida ko'rishingiz mumkin .
Quti o'lchami
CSS-da aniqroq o'lchamlarni aniqlash uchun biz global box-sizing
qiymatni dan content-box
ga almashtiramiz border-box
. Bu padding
elementning yakuniy hisoblangan kengligiga ta'sir qilmasligini ta'minlaydi, lekin u Google Xaritalar va Google Custom Search Engine kabi ba'zi uchinchi tomon dasturlari bilan bog'liq muammolarga olib kelishi mumkin.
Kamdan kam hollarda siz uni bekor qilishingiz kerak bo'lsa, quyidagi kabi foydalaning:
.selector-for-some-widget {
box-sizing: content-box;
}
Yuqoridagi parcha bilan ichki o'rnatilgan elementlar, jumladan ::before
va orqali yaratilgan kontentlar ham buning uchun ::after
belgilanganlarni meros qilib oladi .box-sizing
.selector-for-some-widget
CSS Tricks-da quti modeli va o'lchamlari haqida ko'proq bilib oling .
Qayta ishga tushirish
Brauzerlar o‘rtasida ko‘rsatilishini yaxshilash uchun biz brauzerlar va qurilmalardagi nomuvofiqliklarni tuzatish uchun Reboot -dan foydalanamiz va umumiy HTML elementlariga biroz ko‘proq fikr-mulohazalarni qaytaramiz.
Jamiyat
Bootstrap-ning rivojlanishidan xabardor bo'ling va ushbu foydali resurslar bilan hamjamiyat bilan bog'laning.
- Rasmiy yuklash blogini o'qing va obuna bo'ling .
- IRCdagi boshqa yuklovchilar bilan suhbatlashing.
irc.libera.chat
Serverda, kanalda#bootstrap
. - Implementation help may be found at Stack Overflow (tagged
bootstrap-5
). - Developers should use the keyword
bootstrap
on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.
You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.