Започнете с 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. Без него ще видите някакъв фънки и незавършен стил.

<!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 за най-новите клюки и страхотни музикални видеоклипове.