Пачніце з 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 , каб даведацца пра апошнія плёткі і дзіўныя музычныя відэа.