Bootstrap bilan ishlashni boshlang

Bootstrap - bu kuchli, xususiyatlarga ega frontend asboblar to'plami. Bir necha daqiqada prototipdan tortib ishlab chiqarishgacha bo'lgan hamma narsani yarating.

Ushbu sahifada

Tez boshlash

Bootstrap-ning ishlab chiqarishga tayyor CSS va JavaScript-ni CDN orqali hech qanday qurish bosqichiga ehtiyoj sezmasdan ishga tushirishdan boshlang. Buni Bootstrap CodePen demosi bilan amalda ko'ring .

index.htmlLoyihangiz ildizida yangi fayl yarating . Mobil qurilmalarda to'g'ri javob<meta name="viewport"> berish uchun tegni ham qo'shing .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Bootstrap-ning CSS va JS-ni qo'shing. Yopishdan oldin CSS uchun tegni va <link>JavaScript to'plami uchun tegni (shu jumladan, ochiladigan menyular, poppers va asboblar maslahatlarini joylashtirish uchun Popper) joylashtiring . CDN havolalarimiz haqida ko'proq bilib oling .<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Siz Popper va bizning JS-ni alohida qo'shishingiz mumkin. Agar siz ochiladigan oynalar, popoverlar yoki maslahatlardan foydalanishni rejalashtirmasangiz, Popperni qo'shmasdan bir necha kilobaytni tejang.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Salom Dunyo! Bootstrapped sahifangizni ko'rish uchun sahifani tanlagan brauzeringizda oching. Endi siz o'z maketingizni yaratish, o'nlab komponentlarni qo'shish va rasmiy misollarimizdan foydalanib, Bootstrap bilan qurishni boshlashingiz mumkin .

CDN havolalari

Malumot sifatida, bu erda bizning asosiy CDN havolalarimiz.

Tavsif	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Shuningdek, siz CDN dan Mundarija sahifasida keltirilgan qo'shimcha tuzilmalarimizni olish uchun ham foydalanishingiz mumkin .

Keyingi qadamlar

Bootstrap ishlatadigan ba'zi muhim global muhit sozlamalari haqida bir oz ko'proq o'qing .
Bootstrap-ga nimalar kiritilganligi haqida bizning tarkib bo'limida va quyida JavaScript-ni talab qiladigan komponentlar ro'yxatini o'qing.
Bir oz ko'proq kuch kerakmi? Paket menejeri orqali manba fayllarni qo'shish orqali Bootstrap bilan yaratishni ko'rib chiqing .
Bootstrap-dan modul sifatida foydalanmoqchimisiz <script type="module">? Iltimos, Bootstrap-dan modul sifatida foydalanish bo'limiga qarang.

JS komponentlari

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-harakatlarni amalga oshirish uchun Collapse va Offcanvas plaginlarimizni kengaytirish uchun Navbar
Kontent panellarini almashtirish uchun Tab plaginiga ega Navs
Ko'rsatish, joylashishni aniqlash va aylantirish uchun mo'ljallangan Offcanvases
O'tkazish harakati va navigatsiya yangilanishlari uchun Scrollspy
Ko'rsatish va o'chirish uchun tostlar
Ko'rsatish va joylashtirish uchun maslahatlar va popoverlar (shuningdek, Popper ham talab qilinadi )

Muhim globallar

Bootstrap bir nechta muhim global uslublar va sozlamalardan foydalanadi, 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, ba'zi qiziqarli va to'liq bo'lmagan uslublarni ko'rasiz.

<!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 tezkor ishga tushirishda 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 .
GitHub muhokamalarimizni so'rang va o'rganing .
IRCdagi boshqa yuklovchilar bilan suhbatlashing. irc.libera.chatServerda, kanalda #bootstrap.
Amalga oshirish bo'yicha yordamni Stack Overflow (belgilangan bootstrap-5) 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 .