Боотстрап

Скеле

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

Подразумевани систем мреже од 12 колона са брзим окретом

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

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

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


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

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

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

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

Пример

Угнежђени редови би требало да садрже скуп колона који се збрајају са бројем колона његовог надређеног. На пример, две угнежђене .span3колоне треба да буду смештене унутар .span6.

Ниво 1 колоне
Ниво 2
Ниво 2 
  1. <див цласс = "ров" > 
  2.   <див цласс = "спан12" > 
  3.     Ниво 1 колоне
  4.     <див цласс = "ров" > 
  5.       <див цласс = "спан6" > Ниво 2 </див> 
  6.       <див цласс = "спан6" > Ниво 2 </див> 
  7.     </див>
  8.   </див>
  9. </див>

Флуид грид систем 12 брзих, постотних колона

Колоне за течност

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Проценти, не пиксели

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

Флуид ровс

Учините било који ред течним једноставним променом .rowу .row-fluid. Стубови остају потпуно исти, што га чини веома једноставним за пребацивање између фиксног и флуидног распореда.

Означавање

  1. <див цласс = "ров-флуид" > 
  2.   <див цласс = "спан4" > ... </див> 
  3.   <див цласс = "спан8" > ... </див> 
  4. </див>

Флуидно гнежђење

Угнежђење са флуидним мрежама је мало другачије: број угнежђених колона не мора да одговара родитељу. Уместо тога, ваше колоне се ресетују на сваком нивоу јер сваки ред заузима 100% надређене колоне.

Течност 12
Течност 6
Течност 6 
  1. <див цласс = "ров-флуид" > 
  2.   <див цласс = "спан12" > 
  3.     Ниво 1 колоне
  4.     <див цласс = "ров-флуид" > 
  5.       <див цласс = "спан6" > Ниво 2 </див> 
  6.       <див цласс = "спан6" > Ниво 2 </див> 
  7.     </див>
  8.   </див>
  9. </див>

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

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

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

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

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

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

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

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

Изгледи Основни шаблони за креирање веб страница

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

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

  1. <боди>
  2.   <див цласс = "цонтаинер" > 
  3.     ...
  4.   </див>
  5. </боди>

Флуид лаиоут

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

  1. <див цласс = "цонтаинер-флуид" > 
  2.   <див цласс = "ров-флуид" > 
  3.     <див цласс = "спан2" > 
  4.       <!--Садржај бочне траке-->
  5.     </див>
  6.     <див цласс = "спан10" > 
  7.       <!--Садржај тела-->
  8.     </див>
  9.   </див>
  10. </див>

Респонзивни дизајн. Медијски упити за различите уређаје и резолуције

Респонсиве девицес

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

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

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

Захтева мета ознаку

Да бисте осигурали да уређаји правилно приказују странице које реагују, укључите мета ознаку области приказа.

  1. <мета наме = "виевпорт" цонтент = "видтх=девице-видтх, инитиал-сцале=1.0" >

Шта раде

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

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

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

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

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

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

  1.   // Пејзажни телефони и доле
  2.   @ медиа ( максимална ширина : 480пк ) { ... }     
  3.  
  4.   // Пејзажни телефон у портрет таблет
  5.   @медиа ( макс . ширина : 768 пиксела ) { ... }     
  6.  
  7.   // Портрет таблета на пејзаж и радну површину
  8.   @ медиа ( минимална ширина : 768пк ) и ( максимална ширина : 980пк ) { ... } _        
  9.  
  10.   // Велика радна површина
  11.   @медиа ( мин - ширина : 1200пк ) { .. }