Уводзіны

Пачніце з 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Для працы многіх нашых кампанентаў патрабуецца выкарыстанне JavaScript. У прыватнасці, яны патрабуюць jQuery , Popper і нашы ўласныя плагіны JavaScript. Мы выкарыстоўваем тонкую зборку jQuery , але поўная версія таксама падтрымліваецца.

Размясціце адно з наступных <script>s у канцы вашых старонак, непасрэдна перад зачыняючым </body>тэгам, каб уключыць іх. Першым павінен быць jQuery, затым Popper, а затым нашы плагіны JavaScript.

Пачак

Уключыце кожны плагін Bootstrap JavaScript у адзін з нашых двух пакетаў. Абодва bootstrap.bundle.jsі bootstrap.bundle.min.jsўключаюць Popper для нашых усплываючых падказак і ўсплывальных паведамленняў, але не jQuery . Спачатку ўключыце jQuery, потым пакет Bootstrap JavaScript. Для атрымання дадатковай інфармацыі аб тым, што ўключана ў Bootstrap, глядзіце раздзел змесціва .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Раздзяліць

Калі вы вырашыце выкарыстоўваць асобнае рашэнне сцэнарыяў, Popper павінен быць першым (калі вы выкарыстоўваеце ўсплывальныя падказкі або ўсплывальныя падказкі), а затым нашы плагіны JavaScript.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Кампаненты

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

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

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

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

Не забудзьцеся наладзіць вашыя старонкі ў адпаведнасці з найноўшымі стандартамі дызайну і распрацоўкі. Гэта азначае выкарыстанне дакумента 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 і звяртайцеся да супольнасці з дапамогай гэтых карысных рэсурсаў.

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

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

CSP і ўбудаваныя SVG

Некалькі кампанентаў Bootstrap ўключаюць у сябе ўбудаваныя SVG у наш CSS для паслядоўнага і лёгкага стылізавання кампанентаў у розных браўзерах і прыладах. Для арганізацый з больш строгімі канфігурацыямі CSP мы задакументавалі ўсе асобнікі нашых убудаваных SVG (усе з якіх прымяняюцца праз background-image), каб вы маглі больш дэталёва праглядзець свае варыянты.

Кнопка закрыцця (выкарыстоўваецца ў абвестках і мадальных паведамленнях)
Карыстальніцкія сцяжкі і радыёкнопкі
Пераключальнікі формы
Значкі праверкі формы
Карыстальніцкія меню выбару
Элементы кіравання каруселлю
Кнопкі пераключэння панэлі навігацыі

Зыходзячы з размоў у супольнасці , некаторыя варыянты вырашэння гэтай праблемы ў вашай ўласнай кодавай базе ўключаюць у сябе замену URL-адрасоў лакальна размешчанымі актывамі, выдаленне малюнкаў і выкарыстанне ўбудаваных малюнкаў (немагчыма ва ўсіх кампанентах), а таксама змяненне вашага CSP. Наша рэкамендацыя заключаецца ў тым, каб уважліва вывучыць вашу ўласную палітыку бяспекі і пры неабходнасці прыняць рашэнне аб найлепшым шляху далей.