Започните са Боотстрапом

Боотстрап је моћан комплет алата за фронтенд пун функција. Направите било шта — од прототипа до производње — за неколико минута.

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

Брз почетак

Започните тако што ћете укључити Боотстрап-ов ЦСС и ЈаваСцрипт спреман за производњу преко ЦДН-а без потребе за било каквим корацима прављења. Погледајте то у пракси уз овај Боотстрап ЦодеПен демо .

Направите нову 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>

Укључите Боотстрап-ове ЦСС и ЈС. Поставите <link>ознаку у <head>за наш ЦСС и <script>ознаку за наш ЈаваСцрипт пакет (укључујући Поппер за позиционирање падајућих менија, икона и описа алата) пре затварања </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>

Такође можете посебно укључити Поппер и наш ЈС. Ако не планирате да користите падајуће меније, искачуће приказе или описе алата, уштедите неколико килобајта тако што ћете не укључити Попера.

<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>

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

ЦДН везе

Као референца, ево наших примарних ЦДН веза.

Опис	УРЛ
ЦСС	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
ЈС	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Такође можете да користите ЦДН да преузмете било коју од наших додатних верзија наведених на страници Садржај .

Следећи кораци

Прочитајте нешто више о неким важним глобалним поставкама окружења које Боотстрап користи.
Прочитајте шта је укључено у Боотстрап у нашем одељку садржаја и на листи компоненти које захтевају ЈаваСцрипт у наставку.
Треба вам мало више снаге? Размислите о изградњи помоћу Боотстрапа укључивањем изворних датотека преко менаџера пакета .
Желите да користите Боотстрап као модул са <script type="module">? Погледајте наш одељак о коришћењу Боотстрапа као модула .

ЈС компоненте

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

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

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

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

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

ХТМЛ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на пакетима који модификују или додају функционалност Боотстрапа приликом дистрибуције преко нпм -а или сличних механизама испоруке ради максималне видљивости.

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