Source

Въведение

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

Бърз старт

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

CSS

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

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

JS

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

Използваме тънката версия на jQuery , но се поддържа и пълната версия.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

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

Показване на компоненти, изискващи JavaScript
  • Сигнали за отхвърляне
  • Бутони за превключване на състояния и квадратчета за отметка/радио функционалност
  • Въртележка за всички поведения на слайдове, контроли и индикатори
  • Свиване за превключване на видимостта на съдържанието
  • Падащи менюта за показване и позициониране (също изисква Popper.js )
  • Модали за показване, позициониране и поведение при превъртане
  • Лента за навигация за разширяване на нашия плъгин за свиване за прилагане на отзивчиво поведение
  • Подсказки и изскачащи елементи за показване и позициониране (също изисква Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 и се свържете с общността с тези полезни ресурси.

  • Следвайте @getbootstrap в Twitter .
  • Прочетете и се абонирайте за официалния блог на Bootstrap .
  • Разговаряйте с други Bootstrappers в IRC. На irc.freenode.netсървъра, в ##bootstrapканала.
  • Помощ за внедряване може да бъде намерена в Stack Overflow (маркирано bootstrap-4).
  • Разработчиците трябва да използват ключовата дума bootstrapв пакети, които променят или добавят към функционалността на Bootstrap, когато разпространяват чрез npm или подобни механизми за доставка за максимална откриваемост.

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