Bootstrap

Скелиња

Bootstrap е изграден на респонзивни мрежи, распореди и компоненти со 12 колони.

Глобални поставки

Потребен е HTML5 doctype

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

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

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

Bootstrap поставува основни глобални стилови на приказ, типографија и врски. Поточно, ние:

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

Овие стилови може да се најдат во рамките на дрвени скелиња.помалку .

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

Со Bootstrap 2, стариот блок за ресетирање е отфрлен во корист на Normalize.css , проект на Николас Галагер и Џонатан Нил кој исто така го напојува HTML5 Boilerplate . Иако користиме голем дел од Normalize во рамките на нашиот reset.less , отстранивме некои елементи специјално за Bootstrap.

Стандарден мрежен систем

Пример за жива мрежа

Стандардниот систем за решетка на Bootstrap користи 12 колони , со што се создава контејнер со ширина од 940 пиксели без овозможени функции кои реагираат. Со додадена одговорна CSS-датотека, мрежата се прилагодува да биде 724 пиксели и 1170 пиксели во ширина во зависност од вашиот поглед. Под приказите од 767 пиксели, колоните стануваат течни и се натрупуваат вертикално.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Основна мрежа HTML

За едноставен распоред на две колони, креирајте a .rowи додадете соодветен број на .span*колони. Бидејќи ова е мрежа со 12 колони, секоја .span*опфаќа број од тие 12 колони и секогаш треба да собира до 12 за секој ред (или бројот на колони во родителот).

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

Со оглед на овој пример, имаме .span4и .span8, со што се добиваат вкупно 12 колони и комплетен ред.

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

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

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

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

За да ја вгнездите вашата содржина со стандардната мрежа, додадете нова .rowи множество .span*колони во постоечка .span*колона. Вгнездените редови треба да вклучуваат збир на колони што се собираат на бројот на колони на неговиот родител.

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

Систем на флуидна мрежа

Пример за решетка со жива течност

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

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

Основна HTML мрежа на течност

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

  1. <div class = „ред-флуид“ > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Поместување на течноста

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

4
4 поместување 4
3 поместување 3
3 поместување 3
6 поместување 6 
  1. <div class = „ред-флуид“ > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

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

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

Течност 12
Течност 6
Течност 6
Течност 6
Течност 6 
  1. <div class = „ред-флуид“ > 
  2.   <div class = "span12" > 
  3.     Течност 12
  4.     <div class = „ред-флуид“ > 
  5.       <div class = "span6" > 
  6.         Течност 6
  7.         <div class = „ред-флуид“ > 
  8.           <div class = "span6" > Флуид 6 </div> 
  9.           <div class = "span6" > Флуид 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Флуид 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Распоредови

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

Обезбедува заеднички распоред со фиксна ширина (и опционално одговорен) со само <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 во вашиот проект со вклучување на соодветна мета-ознака и дополнителен лист со стилови во <head>вашиот документ. Ако сте го составиле Bootstrap од страницата Прилагоди, потребно е само да ја вклучите мета-ознаката.

  1. <meta name = "viewport" content = "width=device-width, почетна скала=1.0" >  
  2. <врска href = "assets/css/bootstrap-responsive.css" rel = "лист на стилови" >

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

За одговорниот Bootstrap

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

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

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

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

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

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

Етикета Ширина на распоред Ширина на колоната Ширина на олукот
Голем дисплеј 1200 пиксели и повеќе 70 пиксели 30 пиксели
Стандардно 980 пиксели и повеќе 60 пиксели 20 пиксели
Таблети за портрети 768 пиксели и погоре 42 пиксели 20 пиксели
Телефони до таблети 767 пиксели и подолу Течни столбови, без фиксни ширини
Телефони 480 пиксели и подолу Течни столбови, без фиксни ширини 
  1. /* Голема работна површина */
  2. @media ( мин . ширина : 1200 пиксели ) { ... }     
  3.  
  4. /* Портрет таблет на пејзаж и работна површина */
  5. @media ( мин . ширина : 768 пиксели ) и ( макс . ширина : 979 пиксели ) { ... }        
  6.  
  7. /* Пејзажен телефон до таблет со портрет */
  8. @media ( макс - широчина : 767 пиксели ) { ... }     
  9.  
  10. /* Пејзажни телефони и надолу */
  11. @media ( макс - широчина : 480 пиксели ) { ... }

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

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

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

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

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

Случај за тестирање на одговорни комунални услуги

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

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

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

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

Скриен на...

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

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