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

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

<!ДОЦТИПЕ хтмл>
<хтмл ланг = "ен" > 
  ...
</хтмл>

Типографија и везе

Унутар датотеке сцаффолдинг.лесс постављамо основни глобални приказ, типографију и стилове линкова. Конкретно, ми:

• Уклоните маргине на телу
• Поставите background-color: white;наbody
• Користите атрибуте @baseFontFamily, @baseFontSizeи @baseLineHeightкао нашу типографску основу
• Подесите глобалну боју везе преко @linkColorи примените подвучене везе само на:hover

Ресетујте преко Нормализе

Од Боотстрапа 2, традиционално ресетовање ЦСС-а је еволуирало да користи елементе из Нормализе.цсс , пројекта Николаса Галагера који такође покреће ХТМЛ5 Боилерплате .

Ново ресетовање се и даље може наћи у ресет.лесс , али са многим елементима уклоњеним ради краткоће и прецизности.

Подразумевани систем мреже обезбеђен у Боотстрап-у користи 12 колона које се приказују на ширинама од 724пк, 940пк (подразумевано без укљученог ЦСС-а) и 1170пк. Испод оквира за приказ од 767 пиксела, колоне постају флуидне и слажу се вертикално.

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

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

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

Пример

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

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

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

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

Флуид ровс

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

Означавање

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

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

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

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

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

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

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

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

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

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

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

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

Флуид лаиоут

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

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

Шта раде

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

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

Користите медијске упите одговорно и само као почетак за своју мобилну публику. За веће пројекте, размотрите наменске базе кода, а не слојеве медијских упита.

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

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

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

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

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

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

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

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

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

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

Шта су они

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

Када користити

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

На пример, можете да прикажете <select>елемент за навигацију на изгледима за мобилне уређаје, али не и на таблетима или стоним рачунарима.

Часови подршке

Овде је приказана табела класа које подржавамо и њихов ефекат на дати изглед медијског упита (означен према уређају). Могу се наћи у responsive.less.

Класа	Телефони480 пиксела и мање	Таблете767 пиксела и мање	Стони рачунари768 пиксела и више
.visible-phone	Видљиво	Сакривен	Сакривен
.visible-tablet	Сакривен	Видљиво	Сакривен
.visible-desktop	Сакривен	Сакривен	Видљиво
.hidden-phone	Сакривен	Видљиво	Видљиво
.hidden-tablet	Видљиво	Сакривен	Видљиво
.hidden-desktop	Видљиво	Видљиво	Сакривен

Тест цасе

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

Видљиво на...

Зелене ознаке за потврду означавају да је класа видљива у вашем тренутном прозору за приказ.

• Телефон✔ Телефон
• Таблет✔ Таблет
• Десктоп✔ Десктоп

Скривен на...

Овде, зелене ознаке за потврду означавају да је класа скривена у вашем тренутном прозору за приказ.

• Телефон✔ Телефон
• Таблет✔ Таблет
• Десктоп✔ Десктоп