in English

Вовед

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

JS

Многу од нашите компоненти бараат употреба на JavaScript за да функционираат. Поточно, тие бараат jQuery , Popper.js и нашите сопствени додатоци за JavaScript. Ја користиме тенката изработка на jQuery , но целосната верзија е исто така поддржана.

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

Пакет

Вклучете сè што ви треба во една скрипта со нашиот пакет. Нашиот bootstrap.bundle.jsи bootstrap.bundle.min.jsвклучува Попер , но не и jQuery . За повеќе информации за тоа што е вклучено во Bootstrap, погледнете го нашиот дел за содржини .

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Одделно

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

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

Компоненти

Ве интересира кои компоненти експлицитно бараат jQuery, нашиот JS и Popper.js? Кликнете на врската прикажи компоненти подолу. Ако не сте сигурни за структурата на страницата, продолжете да читате за пример за шаблон за страница.

Прикажи компоненти за кои е потребен 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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;
}

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

  • Follow @getbootstrap on Twitter.
  • Read and subscribe to The Official Bootstrap Blog.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Помош за имплементација може да се најде на Stack Overflow (означен bootstrap-4).
  • Програмерите треба да го користат клучниот збор bootstrapна пакетите кои ја менуваат или додаваат функционалноста на Bootstrap при дистрибуција преку npm или слични механизми за испорака за максимална откриеност.

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