Source

Увод

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

Брз почетак

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

ЦСС

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

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

ЈС

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

Користимо јКуери слим буилд , али је подржана и пуна верзија.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

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

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

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

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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на пакетима који модификују или додају функционалност Боотстрапа приликом дистрибуције преко нпм -а или сличних механизама испоруке ради максималне видљивости.

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