Започните са Боотстрапом
Боотстрап је моћан комплет алата за фронтенд пун функција. Направите било шта — од прототипа до производње — за неколико минута.
Брз почетак
Започните тако што ћете укључити Боотстрап-ов ЦСС и ЈаваСцрипт спреман за производњу преко ЦДН-а без потребе за било каквим корацима прављења. Погледајте то у пракси уз овај Боотстрап ЦодеПен демо .
-
Направите нову
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
на пакетима који модификују или додају функционалност Боотстрапа приликом дистрибуције преко нпм -а или сличних механизама испоруке ради максималне видљивости.
Такође можете да пратите @гетбоотстрап на Твитеру за најновије трачеве и сјајне музичке спотове.