Започнете со 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 за позиционирање на паѓачките мени, poppers и совети за алатки) пред затворањето </body>. Дознајте повеќе за нашите ЦДН врски .

<!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 одделно. Ако не планирате да користите спуштања, поповери или совети за алатки, заштедете неколку килобајти со тоа што не го вклучите Попер.

<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 со креирање на сопствен распоред , додавање на десетици компоненти и користење на нашите официјални примери .

ЦДН врски

Како референца, тука се нашите примарни ЦДН врски.

Опис	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

Известувања за отпуштање
Копчиња за менување состојби и поле за избор/функционалност на радио
Рингишпил за сите однесувања, контроли и индикатори на слајдот
Собери за менување на видливоста на содржината
Паѓања за прикажување и позиционирање (исто така бара Попер )
Модали за прикажување, позиционирање и однесување на лизгање
Navbar за проширување на нашите приклучоци Collapse и Offcanvas за да се имплементираат одзивни однесувања
Навивам со додатокот Tab за префрлување на окно за содржина
Надворешни платна за прикажување, позиционирање и однесување со лизгање
Scrollspy за однесување на лизгање и ажурирања за навигација
Наздрави за прикажување и отфрлање
Совети за алатки и поповери за прикажување и позиционирање (исто така бара Попер )

Важни глобални

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 и допрете до заедницата со овие корисни ресурси.

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

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