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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример

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

<див цласс = "ров" > 
  <див цласс = "спан12" > 
    Ниво 1 колоне
    <див цласс = "ров" > 
      <див цласс = "спан6" > Ниво 2 </див> 
      <див цласс = "спан6" > Ниво 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.

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

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

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

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

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

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

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

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

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

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

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

Шта су они

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

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

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

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

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

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

Тест цасе

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

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

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

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

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