Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

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.

Ushbu sahifada

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.jsva 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-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 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 ::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.
  • 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.