Уводзіны
Пачніце з Bootstrap, самага папулярнага ў свеце фрэймворка для стварэння адаптыўных мабільных сайтаў з дапамогай jsDelivr і шаблона стартавай старонкі.
Хуткі старт
Хочаце хутка дадаць Bootstrap у свой праект? Выкарыстоўвайце jsDelivr, бясплатны CDN з адкрытым зыходным кодам. Выкарыстоўваеце мэнэджар пакетаў ці вам трэба спампаваць зыходныя файлы? Перайдзіце на старонку загрузак .
CSS
Скапіруйце і ўстаўце табліцу стыляў <link>
у сваю <head>
перад усімі іншымі табліцамі стыляў, каб загрузіць наш CSS.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
JS
Для працы многіх нашых кампанентаў патрабуецца выкарыстанне JavaScript. У прыватнасці, яны патрабуюць jQuery , Popper.js і нашы ўласныя плагіны JavaScript. Мы выкарыстоўваем тонкую зборку jQuery , але поўная версія таксама падтрымліваецца.
Размясціце адно з наступных <script>
s у канцы вашых старонак, непасрэдна перад зачыняючым </body>
тэгам, каб уключыць іх. Першым павінен быць jQuery, затым Popper.js, а затым нашы плагіны JavaScript.
Пачак
Уключыце ўсё неабходнае ў адзін сцэнар з нашым пакетам. Наш bootstrap.bundle.js
і bootstrap.bundle.min.js
ўключае Popper , але не jQuery . Для атрымання дадатковай інфармацыі аб тым, што ўключана ў Bootstrap, глядзіце раздзел змесціва .
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
Раздзяліць
Калі вы вырашыце выкарыстоўваць асобнае рашэнне сцэнарыяў, Popper.js павінен быць першым, а потым нашы плагіны JavaScript.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
Кампаненты
Цікава, якія кампаненты відавочна патрабуюць jQuery, наш JS і Popper.js? Пстрыкніце спасылку паказаць кампаненты ніжэй. Калі вы не ўпэўненыя ў структуры старонкі, працягвайце чытаць, каб атрымаць прыклад шаблону старонкі.
Паказаць кампаненты, якія патрабуюць JavaScript
- Абвесткі аб звальненні
- Кнопкі для пераключэння станаў і функцыі сцяжка/радыё
- Карусель для ўсіх рэжымаў слайдаў, элементаў кіравання і індыкатараў
- Згарнуць для пераключэння бачнасці змесціва
- Выпадальныя меню для адлюстравання і размяшчэння (таксама патрабуецца Popper.js )
- Модалы для адлюстравання, размяшчэння і паводзін пракруткі
- Панэль навігацыі для пашырэння нашага плагіна Collapse для рэалізацыі адаптыўных паводзін
- Тосты для паказу і зняцця
- Падказкі і ўсплывальныя вобразы для адлюстравання і размяшчэння (таксама патрабуецца Popper.js )
- Scrollspy для абнаўлення паводзін пракруткі і навігацыі
Стартавы шаблон
Не забудзьцеся наладзіць вашыя старонкі ў адпаведнасці з найноўшымі стандартамі дызайну і распрацоўкі. Гэта азначае выкарыстанне дакумента HTML5 і ўключэнне метатэга viewport для належнага рэагавання. Збярыце ўсё разам, і вашы старонкі павінны выглядаць так:
<!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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
</body>
</html>
Гэта ўсё, што вам трэба для агульных патрабаванняў да старонкі. Наведайце дакументацыю па макету або нашы афіцыйныя прыклады , каб пачаць планаваць змесціва і кампаненты вашага сайта.
Важныя глабальныя
Bootstrap выкарыстоўвае некалькі важных глабальных стыляў і налад, пра якія вам трэба будзе ведаць пры яго выкарыстанні, усе яны амаль выключна накіраваны на нармалізацыю крос-браўзерных стыляў. Давайце акунемся.
Тып дакумента HTML5
Bootstrap патрабуе выкарыстання дакумента HTML5. Без яго вы ўбачыце незвычайную няскончанасць стылю, але ўключэнне яго не павінна выклікаць істотных праблем.
<!doctype html>
<html lang="en">
...
</html>
Адаптыўны метатэг
Bootstrap распрацаваны ў першую чаргу для мабільных прылад, гэта стратэгія, пры якой мы спачатку аптымізуем код для мабільных прылад, а потым павялічваем кампаненты па меры неабходнасці з дапамогай медыя-запытаў CSS. Каб забяспечыць належны рэндэрынг і сэнсарнае маштабаванне для ўсіх прылад, дадайце метатэг адаптыўнага прагляду ў свой <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Вы можаце ўбачыць прыклад гэтага ў дзеянні ў пачатковым шаблоне .
Памер скрынкі
Для больш простага памеру ў 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 і звяртайцеся да супольнасці з дапамогай гэтых карысных рэсурсаў.
- Сачыце за @getbootstrap у Twitter .
- Чытайце і падпісвайцеся на афіцыйны блог Bootstrap .
- Размаўляйце з іншымі Bootstrappers у IRC. На
irc.freenode.net
серверы, у##bootstrap
канале. - Даведку па рэалізацыі можна знайсці на Stack Overflow (пазначана
bootstrap-4
). - Распрацоўшчыкі павінны выкарыстоўваць ключавое слова
bootstrap
ў пакетах, якія змяняюць або дапаўняюць функцыянальнасць Bootstrap пры распаўсюджванні праз npm або падобныя механізмы дастаўкі для максімальнай даступнасці.
Вы таксама можаце сачыць за @getbootstrap у Twitter , каб даведацца пра апошнія плёткі і дзіўныя музычныя відэа.