Вовед

Започнете со 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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

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

Пакет

Вклучете го секој приклучок за Bootstrap JavaScript и зависност со еден од нашите два пакети. И двете bootstrap.bundle.jsи bootstrap.bundle.min.jsвклучуваат Popper за нашите совети за алатки и popovers. За повеќе информации за тоа што е вклучено во Bootstrap, погледнете го нашиот дел за содржини .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Одделно

Ако одлучите да го користите решението за одделни скрипти, прво мора да дојде Попер (ако користите совети за алатки или поповер), а потоа нашите приклучоци за JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Модули

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

Компоненти

Ме интересира кои компоненти експлицитно ги бараат нашите 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">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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">

Можете да видите пример за ова во акција во шаблонот за стартер .

Големината на кутијата

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

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