Въведение

Започнете с Bootstrap, най-популярната рамка в света за създаване на адаптивни, ориентирани към мобилните устройства сайтове, с jsDelivr и шаблонна начална страница.

На тази страница

Бърз старт

Искате бързо да добавите Bootstrap към вашия проект? Използвайте jsDelivr, безплатен CDN с отворен код. Използвате мениджър на пакети или трябва да изтеглите изходните файлове? Отидете на страницата за изтегляне .

CSS

Копирайте и поставете листа със стилове <link>във вашия <head>преди всички останали листове със стилове, за да заредите нашия CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Много от нашите компоненти изискват използването на JavaScript, за да функционират. По-конкретно, те изискват нашите собствени плъгини за JavaScript и Popper . Поставете един от следните <script>s близо до края на страниците си, точно преди затварящия </body>етикет, за да ги активирате.

Пакет

Включете всеки Bootstrap JavaScript плъгин и зависимост с един от нашите два пакета. И двете bootstrap.bundle.js, и bootstrap.bundle.min.jsвключват Popper за нашите подсказки и изскачащи съобщения. За повече информация относно това, което е включено в Bootstrap, моля, вижте нашия раздел със съдържание .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Отделно

Ако решите да използвате решението за отделни скриптове, първо трябва да е Popper (ако използвате подсказки или изскачащи подсказки), а след това нашите плъгини за JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Модули

Ако използвате <script type="module">, моля, вижте нашия раздел за използване на Bootstrap като модул .

Компоненти

Любопитно кои компоненти изрично изискват нашия JavaScript и Popper? Щракнете върху връзката за показване на компоненти по-долу. Ако изобщо не сте сигурни за общата структура на страницата, продължете да четете за примерен шаблон на страница.

Показване на компоненти, изискващи JavaScript

Сигнали за отхвърляне
Бутони за превключване на състояния и квадратчета за отметка/радио функционалност
Въртележка за всички поведения на слайдове, контроли и индикатори
Свиване за превключване на видимостта на съдържанието
Падащи менюта за показване и позициониране (също изисква Popper )
Модали за показване, позициониране и поведение при превъртане
Лента за навигация за разширяване на нашия плъгин за свиване за прилагане на отзивчиво поведение
Offcanvases за показване, позициониране и поведение при превъртане
Тостове за показване и разпускане
Подсказки и изскачащи елементи за показ��ане и позициониране (също изисква Popper )
Scrollspy за поведение при превъртане и актуализации на навигацията

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

Уверете се, че вашите страници са настроени с най-новите стандарти за дизайн и разработка. Това означава да използвате 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">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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">

Можете да видите пример за това в действие в началния шаблон .

Оразмеряване на кутията

За по-лесно оразмеряване в 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-5).
Разработчиците трябва да използват ключовата дума bootstrapв пакети, които променят или добавят към функционалността на Bootstrap, когато разпространяват чрез npm или подобни механизми за доставка за максимална откриваемост.

Можете също да следвате @getbootstrap в Twitter за най-новите клюки и страхотни музикални видеоклипове.