Киришүү

JsDelivr жана шаблондун башталгыч бети менен жооп берүүчү, мобилдик биринчи сайттарды куруу үчүн дүйнөдөгү эң популярдуу алкак болгон Bootstrap менен баштаңыз.

Бул бетте

Тез баштоо

Долбооруңузга Bootstrapти тез кошкуңуз келеби? jsDelivr, бекер ачык булак CDN колдонуңуз. Пакет менеджерин колдонуп жатасызбы же баштапкы файлдарды жүктөп алышыңыз керекпи? Жүктөлүп алынгандар барагына өтүңүз .

CSS

Биздин CSSти жүктөө үчүн стилдер жадыбалын башка бардык стилдер жадыбалдарына <link>көчүрүп чаптаңыз .<head>

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

JS

Көптөгөн компоненттерибиз иштеши үчүн JavaScript колдонууну талап кылат. Тактап айтканда, алар өзүбүздүн JavaScript плагиндерибизди жана Popper . Аларды иштетүү үчүн , төмөнкүлөрдүн бирин<script> баракчаларыңыздын аягына, жабуу </body>тегинин алдына коюңуз.

таңгак

Ар бир Bootstrap JavaScript плагинин жана биздин эки таңгактын бирине көз карандылыкты кошуңуз. Экөө тең bootstrap.bundle.jsжана биздин кеңештер жана поповерлер үчүн Поппердиbootstrap.bundle.min.js камтыйт . Bootstrap камтылган нерселер жөнүндө көбүрөөк маалымат алуу үчүн, биздин мазмун бөлүмүн караңыз.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Бөлөк

Эгер сиз өзүнчө скрипттерди чечүүнү чечсеңиз, Поппер биринчи келиши керек (эгерде сиз инструменттерди же поповерлерди колдонуп жатсаңыз), андан кийин биздин JavaScript плагиндерибиз.

<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>

Модульдер

Эгер колдонсоңуз <script type="module">, биздин Bootstrap модулун колдонуу бөлүмүн караңыз.

Компоненттер

Кызыгып жатасызбы, кайсы компоненттер биздин JavaScript менен Попперди талап кылат? Төмөнкү компоненттерди көрсөтүү шилтемесин басыңыз. Эгер сиз барактын жалпы структурасы жөнүндө такыр ишенбесеңиз, мисал бет шаблоны үчүн окууну улантыңыз.

JavaScript талап кылган компоненттерди көрсөтүү

Четтетүү үчүн эскертүүлөр
Которуу/күйгүзүү баскычтары жана кутучаны/радио функциялары
Бардык слайд жүрүм-турумдары, башкаруу элементтери жана көрсөткүчтөр үчүн карусель
Мазмундун көрүнүшүн өчүрүү/күйгүзүү үчүн жыйыштыруу
Көрсөтүү жана жайгаштыруу үчүн ачылуучу тизмелер (ошондой эле Popper талап кылынат )
Көрсөтүү, жайгаштыруу жана жылдыруу жүрүм-туруму үчүн модалдар
Жооптуу жүрүм-турумду ишке ашыруу үчүн Collapse плагинибизди кеңейтүү үчүн Navbar
Көрсөтүү жана четке кагуу үчүн тосттор
Көрсөтүү жана жайгаштыруу үчүн кеңештер жана поповерлер (ошондой эле Popper талап кылынат )
Жылдыруу жүрүм-туруму жана навигация жаңыртуулары үчүн Scrollspy

Стартер шаблоны

Барактарыңыз эң акыркы дизайн жана өнүктүрүү стандарттары менен орнотулганын унутпаңыз. Бул HTML5 документ түрүн колдонууну жана туура жооп берүүчү жүрүм-турум үчүн көрүү портунун мета тегин камтыйт дегенди билдирет. Баарын чогултуп, баракчаларыңыз төмөнкүдөй болушу керек:

<!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>

Кийинки кадамдар үчүн, сайтыңыздын мазмунун жана компоненттерин түзө баштоо үчүн Layout документтерине же расмий мисалдарыбызга баш багыңыз.

Маанилүү глобалдар

Bootstrap бир нече маанилүү глобалдык стилдерди жана орнотууларды колдонот, алар сиз аны колдонууда билишиңиз керек, алардын бардыгы дээрлик кайчылаш браузер стилдерин нормалдаштырууга багытталган. Келгиле, сууга түшөлү.

HTML5 документ түрү

Bootstrap HTML5 документ түрүн колдонууну талап кылат. Ансыз, сиз кээ бир укмуштуудай толук эмес стилди көрөсүз, бирок анын ичинде эч кандай ыкыктарды жаратпашы керек.

<!doctype html>
<html lang="en">
  ...
</html>

Жооптуу мета теги

Bootstrap адегенде мобилдик телефон аркылуу иштелип чыккан , бул стратегияда биз адегенде мобилдик түзмөктөр үчүн кодду оптималдаштырып, андан кийин CSS медиа сурамдарын колдонуу менен зарыл болгон компоненттердин масштабын кеңейтебиз. Бардык түзмөктөр үчүн туура рендеринг жана тийүү масштабын камсыз кылуу үчүн , <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Сиз мунун мисалын стартер шаблонунан көрө аласыз .

Коробканын өлчөмү

CSS'те жөнөкөй өлчөмдү аныктоо үчүн биз глобалдык маанини box-sizingдан которуштурабыз . Бул элементтин акыркы эсептелген туурасына таасирин тийгизбесин камсыздайт, бирок Google Карталар жана Google Custom Search Engine сыяктуу кээ бир үчүнчү тараптын программалары менен көйгөйлөрдү жаратышы мүмкүн.content-boxborder-boxpadding

Сейрек учурларда, сиз аны жокко чыгарышыңыз керек, төмөнкүдөй нерсени колдонуңуз:

.selector-for-some-widget {
  box-sizing: content-box;
}

Жогорудагы үзүндү менен уяланган элементтер, анын ичинде жана аркылуу түзүлгөн мазмун ::before- бардыгы ошол үчүн ::afterбелгиленген мураска ээ болушат .box-sizing.selector-for-some-widget

CSS Tricks дарегинен кутучанын модели жана өлчөмү жөнүндө көбүрөөк билиңиз .

Кайра жүктөө

Жакшыртылган кайчылаш браузер рендеринги үчүн биз Reboot функциясын браузерлер менен түзмөктөрдөгү карама-каршылыктарды оңдоо үчүн колдонобуз, ошол эле учурда жалпы HTML элементтерине бир аз көбүрөөк пикирди баштапкы абалга келтиребиз.

Коомчулук

Bootstrap'тин өнүгүшүнөн кабардар болуңуз жана бул пайдалуу ресурстар менен коомчулукка кайрылыңыз.

Оку жана The Official Bootstrap блогуна жазылыңыз .
IRCдеги башка жүктөөчүлөр менен баарлашыңыз. irc.libera.chatСерверде, каналда #bootstrap.
Ишке ашыруу боюнча жардамды Stack Overflow дарегинен тапса болот (белгиленген bootstrap-5).
Иштеп чыгуучулар ачкыч сөздү npm же ушуга окшош жеткирүү механизмдери bootstrapаркылуу бөлүштүрүүдө Bootstrap функциясын өзгөрткөн же кошумчалаган пакеттерде колдонушу керек.

Сиз ошондой эле акыркы ушактарды жана укмуштуудай музыкалык видеолорду көрүү үчүн Twitter'де @getbootstrap баракчасына жазылсаңыз болот.