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

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

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

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

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

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

Ови стилови се могу наћи у оквиру скела.мање .

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

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

Пример мреже уживо

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

Основна мрежа ХТМЛ

За једноставан распоред у две колоне, креирајте а .rowи додајте одговарајући број .span*колона. Пошто је ово мрежа од 12 колона, свака .span*обухвата одређени број од тих 12 колона и увек треба да сабира до 12 за сваки ред (или број колона у надређеном).

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

С обзиром на овај пример, имамо .span4и .span8, чинећи укупно 12 колона и цео ред.

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

Померите колоне удесно користећи .offset*класе. Свака класа повећава леву маргину колоне за целу колону. На пример, .offset4креће се .span4преко четири колоне.

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

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

Да бисте свој садржај угнездили са подразумеваном мрежом, додајте нову .rowи скуп .span*колона унутар постојеће .span*колоне. Угнежђени редови треба да обухватају скуп колона који се збрајају са бројем колона његовог родитеља.

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

Пример мреже течности уживо

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

Основна флуидна мрежа ХТМЛ

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

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

Флуид оффсетинг

Функционише на исти начин као и фиксно померање система мреже: додајте .offset*било којој колони да бисте померили за толико колона.

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

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

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

<див цласс = "ров-флуид" > 
  <див цласс = "спан12" > 
    Течност 12
    <див цласс = "ров-флуид" > 
      <див цласс = "спан6" > 
        Течност 6
        <див цласс = "ров-флуид" > 
          <див цласс = "спан6" > Флуид 6 </див> 
          <див цласс = "спан6" > Флуид 6 </див> 
        </див>
      </див>
      <див цласс = "спан6" > Флуид 6 </див> 
    </див>
  </див>
</див>

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

Пружа заједнички распоред фиксне ширине (и опционо прилагодљив) са само <div class="container">потребним.

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

Флуид лаиоут

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

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

Омогућавање реактивних функција

Укључите прилагодљиви ЦСС у свом пројекту тако што ћете укључити одговарајућу мета ознаку и додатну листу стилова унутар <head>вашег документа. Ако сте саставили Боотстрап са странице Прилагоди, потребно је да укључите само мета ознаку.

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

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

О прилагодљивом Боотстрапу

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

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

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

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

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

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

Респонсиве утилити цлассес

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

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

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

Тестни случај респонзивних услужних програма

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

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

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

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

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

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

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