Вовед

Започнете со 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> блиску до крајот на вашите страници, веднаш пред ознаката за затворање </body>, за да ги овозможите. Прво мора да дојде jQuery, потоа Popper, а потоа нашите приклучоци за JavaScript.

Пакет

Вклучете го секој приклучок за Bootstrap JavaScript со еден од нашите два пакети. И двете bootstrap.bundle.jsи bootstrap.bundle.min.jsвклучуваат Popper за нашите совети за алатки и поповери, но не и jQuery . Прво вклучете jQuery, а потоа пакет JavaScript за Bootstrap. За повеќе информации за тоа што е вклучено во 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>

Одделно

Ако одлучите да го користите решението за одделни скрипти, прво мора да дојде Попер (ако користите совети за алатки или поповер), а потоа нашите приклучоци за 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

Известувања за отпуштање
Копчиња за менување состојби и поле за избор/функционалност на радио
Рингишпил за сите однесувања, контроли и индикатори на слајдот
Собери за менување на видливоста на содржината
Паѓања за прикажување и позиционирање (исто така бара Попер )
Модали за прикажување, позиционирање и однесување на лизгање
Navbar за проширување на нашиот приклучок Collapse за да се имплементира одговорно однесување
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-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 doctype

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 .

Рестартирај

За подобрено прикажување меѓу прелистувачите, ние користиме Рестартирање за да ги исправиме недоследностите меѓу прелистувачите и уредите, а истовремено обезбедуваме малку повеќе мислечки ресетирање на вообичаените HTML елементи.

Заедница

Останете во тек со развојот на Bootstrap и допрете до заедницата со овие корисни ресурси.

Прочитајте и претплатете се на Официјалниот блог за подигање .
Разговарајте со колегите Bootstrappers во IRC. На irc.libera.chatсерверот, во #bootstrapканалот.
Помош за имплементација може да се најде на Stack Overflow (означен bootstrap-4).
Програмерите треба да го користат клучниот збор bootstrapна пакетите кои ја менуваат или додаваат функционалноста на Bootstrap при дистрибуција преку npm или слични механизми за испорака за максимална откриеност.

Можете исто така да го следите @getbootstrap на Твитер за најновите озборувања и прекрасни музички видеа.

CSP и вградени SVG

Неколку компоненти на Bootstrap вклучуваат вградени SVG во нашиот CSS за да ги стилизирате компонентите постојано и лесно низ прелистувачите и уредите. За организации со построги CSP конфигурации , ги документиравме сите примери на нашите вградени SVG (сите се применуваат преку background-image) за да можете потемелно да ги прегледате вашите опции.

Копче за затворање (се користи во предупредувања и модали)
Прилагодени полиња за избор и радио копчиња
Прекинувачи за форма
Икони за валидација на формулари
Прилагодено изберете менија
Контроли на рингишпил
Копчиња за префрлување на лентата за навигација

Врз основа на разговорот во заедницата , некои опции за решавање на ова во вашата сопствена база на кодови вклучуваат замена на URL-адресите со локално хостирани средства, отстранување на сликите и користење на вградени слики (не е можно во сите компоненти) и менување на вашиот CSP. Нашата препорака е внимателно да ги прегледате вашите сопствени безбедносни политики и да одлучите за најдобриот пат напред, доколку е потребно.