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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Ko'pgina komponentlarimiz ishlashi uchun JavaScript-dan foydalanish kerak. Xususan, ular jQuery , Popper va o'zimizning JavaScript plaginlarini talab qiladi. Biz jQuery-ning nozik tuzilishidan foydalanamiz , ammo to'liq versiyasi ham qo'llab-quvvatlanadi.

Quyidagilardan birini<script></body> faollashtirish uchun sahifalaringiz oxiriga, yopilish yorlig‘i oldiga qo‘ying . Avval jQuery, keyin Popper, keyin esa JavaScript plaginlarimiz kelishi kerak.

To'plam

Har bir Bootstrap JavaScript plaginini ikkita to'plamimizdan biriga qo'shing. Ikkala bootstrap.bundle.jsva bizning maslahatlar va popoverlar uchun Poppernibootstrap.bundle.min.js o'z ichiga oladi , lekin jQuery emas . Avval jQuery-ni, keyin esa Bootstrap JavaScript-ni qo'shing. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponentlar

Qiziq, qaysi komponentlar aniq jQuery, JavaScript va Popperni talab qiladi? Quyidagi komponentlarni ko'rsatish havolasini bosing. Agar sahifa tuzilishi haqida 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
O'tkazish harakati va navigatsiya yangilanishlari uchun Scrollspy
Ko'rsatish va joylashtirish uchun maslahatlar va popoverlar (shuningdek, Popper ham talab qilinadi )

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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Bu umumiy sahifa talablari uchun kerak bo'lgan yagona narsa. 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, shrink-to-fit=no">

Buning misolini ishga tushirish shablonida ko'rishingiz mumkin .

Quti o'lchami

CSS-da aniqroq o'lchamlarni aniqlash uchun biz global box-sizingqiymatni dan content-boxga almashtiramiz border-box. Bu paddingelementning yakuniy hisoblangan kengligiga ta'sir qilmasligini ta'minlaydi, lekin u Google Xaritalar va Google Custom Search Engine kabi ba'zi uchinchi tomon dasturlarida 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 ::beforeva orqali yaratilgan kontentlar ham buning uchun ::afterbelgilanganlarni 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.chatServerda, kanalda #bootstrap.
Amalga oshirish bo'yicha yordamni Stack Overflow (belgilangan bootstrap-4) da topish mumkin.
Ishlab chiquvchilar npm yoki shunga o'xshash etkazib berish mexanizmlari orqali tarqatishda maksimal aniqlanish uchun bootstrapBootstrap funksiyasini o'zgartiradigan yoki qo'shadigan paketlarda kalit so'zdan foydalanishlari kerak .

Shuningdek , eng soʻnggi gʻiybat va ajoyib musiqiy videolar uchun Twitter’da @getbootstrap-ni kuzatib borishingiz mumkin .

CSP va o'rnatilgan SVG

Bir nechta Bootstrap komponentlari CSS-ga o'rnatilgan SVG-larni o'z ichiga oladi, bu komponentlarni brauzer va qurilmalarda izchil va osonlik bilan uslublash uchun. Qattiqroq CSP konfiguratsiyalariga ega tashkilotlar uchun biz oʻrnatilgan SVG’larimizning barcha nusxalarini hujjatlashtirdik (ularning barchasi orqali qoʻllaniladi background-image), shuning uchun siz oʻz imkoniyatlarini batafsil koʻrib chiqishingiz mumkin.

Yopish tugmasi (ogohlantirishlar va modallarda ishlatiladi)
Maxsus belgilash katakchalari va radio tugmalari
Shakl kalitlari
Shaklni tekshirish piktogrammalari
Maxsus tanlash menyulari
Karusel boshqaruvlari
Navbarni almashtirish tugmalari

Hamjamiyat suhbatiga asoslanib, buni o'zingizning kod bazangizda hal qilishning ba'zi variantlari URL manzillarini mahalliy joylashtirilgan aktivlar bilan almashtirish, rasmlarni o'chirish va ichki tasvirlardan foydalanish (barcha komponentlarda mumkin emas) va CSP-ni o'zgartirishni o'z ichiga oladi. Bizning tavsiyamiz oʻz xavfsizlik siyosatingizni sinchkovlik bilan koʻrib chiqish va agar kerak boʻlsa, oldinga eng yaxshi yoʻlni tanlashdir.