Source

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-dagi odamlar tomonidan bepul taqdim etilgan jsDelivr-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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Ko'pgina komponentlarimiz ishlashi uchun JavaScript-dan foydalanish kerak. Xususan, ular jQuery , Popper.js va bizning JavaScript plaginlarimizni talab qiladi. Quyidagi <script>s-ni sahifalaringiz oxiriga, </body>ularni yoqish uchun yopilish yorlig‘i oldiga qo‘ying. Avval jQuery, keyin Popper.js, keyin esa JavaScript plaginlarimiz kelishi kerak.

Biz jQuery-ning nozik tuzilishidan foydalanamiz , ammo to'liq versiyasi ham qo'llab-quvvatlanadi.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Qiziq, qaysi komponentlar aniq jQuery, JS va Popper.js-ni talab qiladi? Quyidagi komponentlarni ko'rsatish havolasini bosing. Agar siz sahifaning umumiy tuzilishiga ishonchingiz komil bo'lmasa, sahifa shablonini o'qishni davom eting.

Bizning bootstrap.bundle.jsva Poppernibootstrap.bundle.min.js o'z ichiga oladi , lekin jQuery emas . Bootstrap-ga kiritilgan narsalar haqida ko'proq ma'lumot olish uchun bizning tarkib bo'limimizga qarang.

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.js 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 joylashtirish uchun maslahatlar va popoverlar (shuningdek, Popper.js 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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, shu jumladan ::beforeva orqali yaratilgan kontent 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.

  • Twitter-da @getbootstrap-ni kuzatib boring .
  • Rasmiy yuklash blogini o'qing va obuna bo'ling .
  • IRCdagi boshqa yuklovchilar bilan suhbatlashing. irc.freenode.netServerda, 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 .