Увод

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

Брз почетак

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

ЦСС

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

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

ЈС

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

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

Сноп

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Одвојен

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Компоненте

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

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

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

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

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

<!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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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

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

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

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

За једноставније одређивање величине у ЦСС-у, мењамо глобалну 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-4).
Програмери би требало да користе кључну реч bootstrapна пакетима који модификују или додају функционалност Боотстрапа приликом дистрибуције преко нпм -а или сличних механизама испоруке ради максималне видљивости.

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

ЦСП-ови и уграђени СВГ-ови

Неколико компоненти Боотстрап-а укључује уграђене СВГ-ове у наш ЦСС за доследно и лако стилизовање компоненти у свим претраживачима и уређајима. За организације са строжијим ЦСП конфигурацијама , документовали смо све инстанце наших уграђених СВГ-ова (сви се примењују преко background-image) тако да можете детаљније да прегледате своје опције.

Дугме за затварање (користи се у упозорењима и модалитетима)
Прилагођена поља за потврду и радио дугмад
Прекидачи образаца
Иконе за валидацију обрасца
Прилагођени изборни менији
Контроле вртешке
Дугмад за пребацивање на навигационој траци

На основу разговора у заједници , неке опције за решавање овога у вашој сопственој бази кода укључују замену УРЛ адреса локално хостованим средствима, уклањање слика и коришћење уграђених слика (није могуће у свим компонентама) и измену вашег ЦСП-а. Наша препорука је да пажљиво прегледате сопствене безбедносне политике и одлучите о најбољем путу напред, ако је потребно.