Пачніце з Bootstrap

Bootstrap - гэта магутны інтэрфейсны інструментар з мноствам функцый. Стварыце што заўгодна — ад прататыпа да вытворчасці — за лічаныя хвіліны.

На гэтай старонцы

Хуткі старт

Пачніце з уключэння гатовага да вытворчасці CSS і JavaScript Bootstrap праз CDN без неабходнасці выканання якіх-небудзь этапаў зборкі. Паглядзіце гэта на практыцы з гэтай дэманстрацыяй Bootstrap CodePen .

Стварыце новы index.htmlфайл у корані вашага праекта. Уключыце таксама <meta name="viewport">тэг для правільнага рэагавання на мабільных прыладах.

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

Уключыце CSS і JS Bootstrap. Змесціце <link>тэг <head>для нашага CSS і <script>тэг для нашага пакета JavaScript (уключаючы Popper для размяшчэння выпадаючых спісаў, поппераў і падказак) перад зачыняючым </body>. Даведайцеся больш пра нашы спасылкі CDN .

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

Вы таксама можаце ўключыць Popper і наш JS асобна. Калі вы не плануеце выкарыстоўваць выпадаючыя спісы, усплывальныя меню або ўсплывальныя падказкі, зэканомце некалькі кілабайтаў, не ўключаючы Popper.

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

Прывітанне Сусвет! Адкрыйце старонку ў абраным вамі браўзеры, каб убачыць сваю старонку Bootstrapped. Цяпер вы можаце пачаць будаваць з дапамогай Bootstrap, стварыўшы свой уласны макет , дадаўшы дзесяткі кампанентаў і выкарыстоўваючы нашы афіцыйныя прыклады .

CDN спасылкі

У якасці даведкі, вось нашы асноўныя спасылкі CDN.

Апісанне	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`

Вы таксама можаце выкарыстоўваць CDN для атрымання любой з нашых дадатковых зборак, пералічаных на старонцы "Змест" .

Наступныя крокі

Прачытайце крыху больш пра некаторыя важныя глабальныя налады асяроддзя , якія выкарыстоўвае Bootstrap.
Чытайце пра тое, што ўваходзіць у Bootstrap, у нашым раздзеле змесціва і пра спіс кампанентаў, якія патрабуюць JavaScript, ніжэй.
Трэба крыху больш энергіі? Разгледзьце магчымасць стварэння з дапамогай Bootstrap, уключыўшы зыходныя файлы праз менеджэр пакетаў .
Хочаце выкарыстоўваць Bootstrap як модуль з <script type="module">? Калі ласка, звярніцеся да раздзела аб выкарыстанні Bootstrap як модуля .

Кампаненты JS

Цікава, якія кампаненты відавочна патрабуюць нашых JavaScript і Popper? Пстрыкніце спасылку паказаць кампаненты ніжэй. Калі вы наогул сумняваецеся ў агульнай структуры старонкі, працягвайце чытаць, каб атрымаць прыклад шаблону старонкі.

Паказаць кампаненты, якія патрабуюць JavaScript

Абвесткі аб звальненні
Кнопкі для пераключэння станаў і функцыі сцяжка/радыё
Карусель для ўсіх рэжымаў слайдаў, элементаў кіравання і індыкатараў
Згарнуць для пераключэння бачнасці змесціва
Выпадальныя меню для адлюстравання і размяшчэння (таксама патрабуецца Popper )
Модалы для адлюстравання, размяшчэння і паводзін пракруткі
Панэль навігацыі для пашырэння нашых плагінаў Collapse і Offcanvas для рэалізацыі адаптыўных паводзін
Навіны з убудовай Tab для пераключэння панэляў змесціва
Offcanvases для адлюстравання, размяшчэння і паводзін пракруткі
Scrollspy для абнаўлення паводзін пракруткі і навігацыі
Тосты для паказу і зняцця
Падказкі і ўсплывальныя вобразы для адлюстравання і размяшчэння (таксама патрабуецца Popper )

Важныя глабальныя

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значэнне з content-boxна border-box. Гэта гарантуе padding, што не паўплывае на канчатковую вылічаную шырыню элемента, але можа выклікаць праблемы з некаторым праграмным забеспячэннем іншых вытворцаў, такім як Google Maps і Google Custom Search Engine.

У рэдкіх выпадках вам трэба перавызначыць яго, выкарыстоўвайце нешта накшталт наступнага:

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

З прыведзеным вышэй фрагментам усе ўкладзеныя элементы — у тым ліку згенераваны кантэнт праз ::beforeі ::after— будуць успадкоўваць указаны box-sizingдля гэтага .selector-for-some-widget.

Даведайцеся больш пра мадэль скрынкі і памеры на CSS Tricks .

Перазагрузка

Для паляпшэння візуалізацыі ў розных браўзерах мы выкарыстоўваем Reboot , каб выправіць неадпаведнасці ў браўзерах і прыладах, забяспечваючы пры гэтым крыху больш пераканаўчыя скіды агульных элементаў HTML.

Супольнасць

Будзьце ў курсе распрацоўкі Bootstrap і звяртайцеся да супольнасці з дапамогай гэтых карысных рэсурсаў.

Чытайце і падпісвайцеся на афіцыйны блог Bootstrap .
Спытайце і вывучайце нашы абмеркаванні на GitHub .
Размаўляйце з іншымі Bootstrappers у IRC. На irc.libera.chatсерверы, у #bootstrapканале.
Даведку па рэалізацыі можна знайсці на Stack Overflow (пазначана bootstrap-5).
Распрацоўшчыкі павінны выкарыстоўваць ключавое слова bootstrapў пакетах, якія змяняюць або дапаўняюць функцыянальнасць Bootstrap пры распаўсюджванні праз npm або падобныя механізмы дастаўкі для максімальнай даступнасці.

Вы таксама можаце сачыць за @getbootstrap у Twitter , каб даведацца пра апошнія плёткі і дзіўныя музычныя відэа.