in English

Увод

Започните са Боотстрап-ом, најпопуларнијим светским оквиром за прављење сајтова који су прилагођени мобилним уређајима, са јсДеливр-ом и почетном страном са шаблоном.

На овој страници

Брз почетак

Желите да брзо додате Боотстрап свом пројекту? Користите јсДеливр, бесплатни ЦДН отвореног кода. Користите менаџер пакета или морате да преузмете изворне датотеке? Идите на страницу за преузимање .

ЦСС

Копирајте и налепите стилове <link>у свој <head>пре свих осталих стилова да бисте учитали наш ЦСС.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

ЈС

Многе наше компоненте захтевају коришћење ЈаваСцрипт-а да би функционисале. Конкретно, захтевају наше сопствене ЈаваСцрипт додатке и Поппер . Поставите један од следећих <script>с при крају својих страница, непосредно испред завршне </body>ознаке, да бисте их омогућили.

Сноп

Укључите сваки Боотстрап ЈаваСцрипт додатак и зависност у један од наша два пакета. И једно bootstrap.bundle.jsи друго bootstrap.bundle.min.jsукључује Поппер за наше описе алата и искачуће информације. За више информација о томе шта је укључено у Боотстрап, погледајте наш одељак са садржајем .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Одвојен

Ако одлучите да користите засебно решење за скрипте, Поппер мора бити први (ако користите описе алата или искачуће поруке), а затим и наши ЈаваСцрипт додаци.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Модули

Ако користите <script type="module">, погледајте наш одељак о коришћењу Боотстрапа као модула .

Компоненте

Занима вас које компоненте изричито захтевају наш ЈаваСцрипт и Поппер? Кликните на везу за приказ компоненти испод. Ако уопште нисте сигурни у општу структуру странице, наставите да читате за пример шаблона странице.

Прикажи компоненте које захтевају ЈаваСцрипт

Упозорења за одбацивање
Дугмад за промену стања и функцију за потврду/радио
Вртешка за сва понашања слајдова, контроле и индикаторе
Скупите да бисте променили видљивост садржаја
Падајући мени за приказивање и позиционирање (такође захтева Попер )
Модали за приказивање, позиционирање и понашање померања
Навбар за проширење нашег додатка Цоллапсе за имплементацију одзивног понашања
Ванплатна за приказивање, позиционирање и понашање померања
Здравице за приказивање и одбацивање
Објашњења и искачући елементи за приказивање и позиционирање (такође захтева Поппер )
Сцроллспи за понашање померања и ажурирања навигације

Почетни шаблон

Обавезно поставите своје странице у складу са најновијим стандардима дизајна и развоја. То значи да користите ХТМЛ5 тип документа и укључите мета ознаку области приказа за правилно реаговање. Ставите све заједно и ваше странице би требало да изгледају овако:

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

За следеће кораке, посетите документе о распореду или наше званичне примере да бисте почели да постављате садржај и компоненте вашег сајта.

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

Боотстрап користи прегршт важних глобалних стилова и подешавања којих ћете морати да будете свесни када га користите, а сви су скоро искључиво усмерени на нормализацију стилова више претраживача. Хајде да заронимо.

ХТМЛ5 тип документа

Боотстрап захтева употребу ХТМЛ5 доцтипе. Без тога, видећете неки фанки некомплетан стил, али његово укључивање не би требало да изазове значајне проблеме.

<!doctype html>
<html lang="en">
  ...
</html>

Прилагодљива мета ознака

Боотстрап је прво развијен за мобилне уређаје , стратегија у којој прво оптимизујемо код за мобилне уређаје, а затим по потреби повећавамо компоненте користећи ЦСС медијске упите. Да бисте осигурали правилно приказивање и зумирање додиром за све уређаје, додајте мета ознаку оквира приказа који одговара вашем <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

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

Величина кутије

За једноставније одређивање величине у ЦСС-у, мењамо глобалну box-sizingвредност са content-boxна border-box. Ово осигурава paddingда не утиче на коначну израчунату ширину елемента, али може да изазове проблеме са неким софтвером треће стране као што су Гоогле мапе и Гоогле прилагођени претраживач.

У ретким приликама када морате да га замените, користите нешто попут следећег:

.selector-for-some-widget {
  box-sizing: content-box;
}

Са горњим исечком, угнежђени елементи — укључујући генерисани садржај преко ::beforeи — ::afterсви ће наследити наведени box-sizingза то .selector-for-some-widget.

Сазнајте више о моделу кутије и величини на ЦСС Трицкс .

Рестарт

За побољшано приказивање у више прегледача, користимо Ребоот да исправимо недоследности у свим прегледачима и уређајима, док пружамо мало више упорна ресетовања уобичајених ХТМЛ елемената.

Заједница

Будите у току са развојем Боотстрапа и обратите се заједници помоћу ових корисних ресурса.

Прочитајте и претплатите се на званични Боотстрап блог .
Разговарајте са колегама Боотстрапперима у ИРЦ-у. На irc.libera.chatсерверу, у #bootstrapканалу.
Помоћ за имплементацију се може наћи на Стацк Оверфлов (означено bootstrap-5).
Програмери би требало да користе кључну реч bootstrapна пакетима који модификују или додају функционалност Боотстрапа приликом дистрибуције преко нпм -а или сличних механизама испоруке ради максималне видљивости.

Такође можете пратити @гетбоотстрап на Твитеру за најновије трачеве и сјајне музичке спотове.