Въведение

Започнете с 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 )
Модали за показване, позициониране и поведение при превъртане
Лента за навигация за разширяване на нашия плъгин за свиване за прилагане на отзивчиво поведение
Scrollspy за поведение при превъртане и актуализации на навигацията
Подсказки и изскачащи елементи за показване и позициониране (също изисква Popper )

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

Уверете се, че вашите страници са настроени с най-новите стандарти за дизайн и разработка. Това означава да използвате HTML5 doctype и да включите мета таг за прозорец за правилно реагиращо поведение. Съберете всичко заедно и вашите страници трябва да изглеждат така:

<!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. Без него ще видите някакъв фънки непълен стайлинг, но включването му не би трябвало да причини значителни проблеми.

<!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. Нашата препоръка е внимателно да прегледате собствените си политики за сигурност и да вземете решение за най-добрия път напред, ако е необходимо.