Bootstrap

Скелиња

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

Глобални стилови за ресетирање на CSS, типографија и врски

Потребен е HTML5 doctype

Bootstrap користи HTML елементи и CSS својства кои бараат употреба на HTML5 doctype. Не заборавајте да го вклучите на почетокот на секоја страница со Bootstrapped во вашиот проект.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Типографија и врски

Во рамките на датотеката scaffolding.less , поставуваме основни стилови на глобален приказ, типографија и врски. Поточно, ние:

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

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

Почнувајќи од Bootstrap 2, традиционалното ресетирање на CSS еволуираше за да користи елементи од Normalize.css , проект на Николас Галагер кој исто така го напојува HTML5 Boilerplate .

Новото ресетирање сè уште може да се најде во reset.less , но со многу елементи отстранети заради краткост и точност.

Стандарден мрежен систем 12 колони со одговорен пресврт

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

Стандардниот мрежен систем обезбеден како дел од Bootstrap е мрежа со 12 колони широка 940 пиксели .

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

  1. <div class = „ред“ > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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


Поместување на колони

4
4 поместување 4
3 поместување 3
3 поместување 3
8 поместување 4 
  1. <div class = „ред“ > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Вгнездени колони

Со статичниот (не-течен) мрежен систем во Bootstrap, вгнездувањето е лесно. За да ја вгнездите вашата содржина, само додадете нова .rowи множество .span*колони во постоечка .span*колона.

Пример

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

Ниво 1 од колоната
Ниво 2
Ниво 2 
  1. <div class = „ред“ > 
  2.   <div class = "span12" > 
  3.     Ниво 1 од колоната
  4.     <div class = „ред“ > 
  5.       <div class = "span6" > Ниво 2 </div> 
  6.       <div class = "span6" > Ниво 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Систем на флуидна мрежа 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. <div class = „ред-флуид“ > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Гнездење со течност

Вгнездувањето со флуидни решетки е малку поинакво: бројот на вгнездени колони не треба да одговара на родителот. Наместо тоа, вашите колони се ресетираат на секое ниво бидејќи секој ред зафаќа 100% од матичната колона.

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

Приспособување на мрежата

Променлива Стандардна вредност Опис
@gridColumns 12 Број на колони
@gridColumnWidth 60 пиксели Ширина на секоја колона
@gridGutterWidth 20 пиксели Негативен простор помеѓу колоните

Променливи во LESS

Вградени во Bootstrap се неколку променливи за прилагодување на стандардниот мрежен систем од 940 пиксели, документирани погоре. Сите променливи за мрежата се складираат во променливи.помалку.

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

Измената на мрежата значи промена на трите @grid*променливи и прекомпајлирање на Bootstrap. Променете ги променливите на мрежата во променливите.less и користете еден од четирите документирани начини за повторно компајлирање . Ако додавате повеќе колони, задолжително додадете CSS за оние во grid.less.

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

Приспособувањето на мрежата работи само на стандардното ниво, мрежата од 940 пиксели. За да ги одржите одговорните аспекти на Bootstrap, исто така ќе треба да ги приспособите мрежите во responsive.less.

Распоред Основни шаблони за креирање веб-страници

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

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

  1. <тело>
  2.   <div class = „контејнер“ > 
  3.     ...
  4.   </div>
  5. </body>

Распоред на течност

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

  1. <div class = „контејнер-флуид“ > 
  2.   <div class = „ред-флуид“ > 
  3.     <div class = "span2" > 
  4.       <!--Содржина на страничната лента-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Содржина на телото-->
  8.     </div>
  9.   </div>
  10. </div>

Одговорен дизајн Прашања за медиуми за различни уреди и резолуции

Респонзивни уреди

Она што го прават

Пребарувањата за медиумите дозволуваат прилагодено CSS врз основа на голем број услови - сооднос, ширина, тип на приказ итн. - но обично се фокусира околу min-widthи max-width.

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

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

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

Bootstrap поддржува неколку медиумски барања во една датотека за да ви помогне да ги направите вашите проекти посоодветни на различни уреди и резолуции на екранот. Еве што е вклучено:

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

Потребна е мета-ознака

За да се осигурате дека уредите правилно прикажуваат одговорни страници, вклучете ја мета-ознаката на приказот.

  1. <meta name = "viewport" content = "width=device-width, почетна скала=1.0" >

Користење на медиумски прашања

Bootstrap не ги вклучува автоматски овие медиумски барања, но нивното разбирање и додавање е многу лесно и бара минимално поставување. Имате неколку опции за вклучување на одговорните карактеристики на Bootstrap:

  1. Користете ја компајлираната одговорна верзија, bootstrap-responsive.css
  2. Додајте @import „responsive.less“ и прекомпајлирај го Bootstrap
  3. Изменете и прекомпајлирајте responsive.less како посебна датотека

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

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

Одговорни комунални класи

Што се тие

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

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

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

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

Класи за поддршка

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

Класа Телефони480 пиксели и подолу Таблети767 пиксели и подолу Десктоп компјутери768 пиксели и погоре
.visible-phone Видливи
.visible-tablet Видливи
.visible-desktop Видливи
.hidden-phone Видливи Видливи
.hidden-tablet Видливи Видливи
.hidden-desktop Видливи Видливи

Тест случај

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

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

Зелените ознаки за проверка покажуваат дека класата е видлива во вашата тековна порта за гледање.

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

Скриен на...

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

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