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вклучува Попер , но не и jQuery . За повеќе информации за тоа што е вклучено во Bootstrap, погледнете го нашиот дел за содржини .

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

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

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