in English

Увод

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

Брз почетак

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

ЦСС

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

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

ЈС

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

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

Сноп

Укључите све што вам је потребно у једну скрипту са нашим пакетом. Наш bootstrap.bundle.jsи bootstrap.bundle.min.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/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Одвојен

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

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

Компоненте

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

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

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

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

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

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

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

ХТМЛ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.freenode.netсерверу, у ##bootstrapканалу.
  • Помоћ за имплементацију се може наћи на Стацк Оверфлов (означено bootstrap-4).
  • Програмери би требало да користе кључну реч bootstrapна пакетима који модификују или додају функционалност Боотстрапа приликом дистрибуције преко нпм -а или сличних механизама испоруке ради максималне видљивости.

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