Скеле

Боотстрап је изграђен на мрежи са 12 колона која реагује. Такође смо укључили распореде фиксне и флуидне ширине засноване на том систему.

Подразумевана мрежа од 940 пиксела

Подразумевани систем мреже обезбеђен као део Боотстрап -а је мрежа са 12 колона ширине 940 пиксела .

Такође има четири варијације са одзивом за различите уређаје и резолуције: телефон, портрет таблета, пејзаж стола и мале радне површине и велике радне површине широког екрана.

<див цласс = "ров" > 
  <див цласс = "спан4" > ... </див> 
  <див цласс = "спан8" > ... </див> 
</див>

Као што је овде приказано, основни распоред се може креирати са две „колоне“, од којих свака обухвата низ од 12 основних колона које смо дефинисали као део нашег система мреже.

Оффсетинг колоне

4 офсет 4

3 офсет 3

8 офсет 4

<див цласс = "ров" > 
  <див цласс = "спан4" > ... </див> 
  <див цласс = "спан4 оффсет4" > ... </див> 
</див>

Угнеждене колоне

Са статичним (нефлуидним) системом мреже у Боотстрапу, угнежђење је лако. Да бисте угнездили свој садржај, само додајте нову .rowи скуп .span*колона унутар постојеће .span*колоне.

Пример

Ниво 1 колоне

Ниво 2

<див цласс = "ров" > 
  <див цласс = "спан12" > 
    Ниво 1 колоне
    <див цласс = "ров" > 
      <див цласс = "спан6" > Ниво 2 </див> 
      <див цласс = "спан6" > Ниво 2 </див> 
    </див>
  </див>
</див>

Прилагођавање мреже

Променљива	Задана вриједност	Опис
`@gridColumns`	12	Број колона
`@gridColumnWidth`	60пк	Ширина сваке колоне
`@gridGutterWidth`	20пк	Негативан размак између колона
`@siteWidth`	Израчунати збир свих стубова и олука	Броји број колона и олука за подешавање ширине `.container-fixed()`мешавине

Променљиве у МАЊЕ

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

Како прилагодити

Измена мреже значи промену три @grid*променљиве и поновно компајлирање Боотстрапа. Промените променљиве мреже у варијабли.лесс и користите један од четири документована начина за поновно компајлирање . Ако додајете још колона, обавезно додајте ЦСС за оне у грид.лесс.

Останите одговорни

Прилагођавање мреже функционише само на подразумеваном нивоу, мрежи од 940 пиксела. Да бисте задржали респонзивне аспекте Боотстрапа, такође ћете морати да прилагодите мреже у респонсиве.лесс.

Фиксни распоред

Подразумевани и једноставан 940 пиксела ширине, центриран изглед за скоро сваку веб локацију или страницу коју обезбеђује један <div class="container">.

<боди>
  <див цласс = "цонтаинер" > 
    ...
  </див>
</боди>

Флуид лаиоут

<div class="container-fluid">даје флексибилну структуру странице, минималну и максималну ширину и леву бочну траку. Одличан је за апликације и документе.

<див цласс = "цонтаинер-флуид" > 
  <див цласс = "ров-флуид" > 
    <див цласс = "спан2" > 
      <!--Садржај бочне траке-->
    </див>
    <див цласс = "спан10" > 
      <!--Садржај тела-->
    </див>
  </див>
</див>

Подржани уређаји

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

Етикета	Ширина распореда	Ширина колона	Ширина олука
Смартпхонес	480 пиксела и мање	Стубови флуида, без фиксних ширина
Портрет таблете	480 до 768 пиксела	Стубови флуида, без фиксних ширина
Пејзажне таблете	768 до 940 пиксела	44пк	20пк
Уобичајено	940 пиксела и више	60пк	20пк
Велики дисплеј	1210 пиксела и више	70пк	30пк

Шта раде

Медијски упити омогућавају прилагођени ЦСС на основу бројних услова—односа, ширине, типа приказа итд.—али се обично фокусирају на min-widthи max-width.

Измените ширину колоне у нашој мрежи
Сложите елементе уместо плутајућих где год је потребно
Промените величину наслова и текста да би били прикладнији за уређаје

Користећи медијске упите

Боотстрап не укључује аутоматски ове медијске упите, али њихово разумевање и додавање је веома лако и захтева минимално подешавање. Имате неколико опција за укључивање реактивних функција Боотстрап-а:

Користите компајлирану респонзивну верзију, боотстрап-респонсиве.цсс
Додајте @импорт "респонсиве.лесс" и поново компајлирајте Боотстрап
Модификујте и поново компајлирајте респонсиве.лесс као засебно

Зашто га једноставно не укључити? Истини за вољу, не мора све бити одговорно. Уместо да охрабрујемо програмере да уклоне ову функцију, сматрамо да је најбоље да је омогућимо.

  // Пејзажни телефони и доле
  @медиа ( макс . ширина : 480 пиксела ) { ... }     
 
  // Пејзажни телефон у портрет таблет
  @медиа ( макс . ширина : 768 пиксела ) { ... }     
 
  // Портрет таблета на пејзаж и радну површину
  @ медиа ( минимална ширина : 768пк ) и ( максимална ширина : 940пк ) { ... } _        
 
  // Велика радна површина
  @медиа ( мин - ширина : 1200пк ) { .. }