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

Тези стилове могат да бъдат намерени в scaffolding.less .

Нулирайте чрез нормализиране

С Bootstrap 2 старият блок за нулиране е премахнат в полза на Normalize.css , проект на Николас Галахър и Джонатан Нийл , който също захранва HTML5 Boilerplate . Въпреки че използваме голяма част от Normalize в нашия reset.less , премахнахме някои елементи специално за Bootstrap.

Мрежова система по подразбиране

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

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

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

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

За просто оформление с две колони създайте .rowи добавете подходящия брой .span*колони. Тъй като това е решетка с 12 колони, всяка .span*обхваща определен брой от тези 12 колони и винаги трябва да добавя до 12 за всеки ред (или броя на колоните в родителския).

  1. <div class = "row" > 
  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 = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Вложени колони

За да вложите съдържанието си в мрежата по подразбиране, добавете нова .rowи набор от .span*колони в съществуваща .span*колона. Вложените редове трябва да включват набор от колони, които се равняват на броя на колоните на своя родител.

Колона от ниво 1
Ниво 2
Ниво 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     Колона от ниво 1
  4.     <div class = "row" > 
  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 = "row-fluid" > 
  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 = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Течно гнездене

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

Течност 12
Течност 6
Течност 6
Течност 6
Течност 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Течност 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Течност 6
  7.         <div class = "row-fluid" > 
  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 = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Съдържание на страничната лента-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Съдържание на тялото-->
  8.     </div>
  9.   </div>
  10. </div>

Адаптивен дизайн

Активиране на отзивчиви функции

Включете адаптивния CSS във вашия проект, като включите правилния мета таг и допълнителен лист със стилове в рамките <head>на вашия документ. Ако сте компилирали Bootstrap от страницата Customize, трябва да включите само мета тага.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Горе главата!Bootstrap не включва отзивчиви функции по подразбиране в момента, тъй като не всичко трябва да реагира. Вместо да насърчаваме разработчиците да премахнат тази функция, смятаме, че е най-добре да я активираме, ако е необходимо.

Относно отзивчивия Bootstrap

Отзивчиви устройства

Медийните заявки позволяват персонализиран CSS въз основа на редица условия - съотношения, ширини, тип на дисплея и т.н. - но обикновено се фокусира около min-widthи max-width.

  • Променете ширината на колоната в нашата мрежа
  • Подреждайте елементи вместо плаващи, където е необходимо
  • Преоразмерете заглавията и текста, за да бъдат по-подходящи за устройства

Използвайте медийните заявки отговорно и само като начало на вашите мобилни аудитории. За по-големи проекти помислете за специални кодови бази, а не за слоеве от медийни заявки.

Поддържани устройства

Bootstrap поддържа няколко медийни заявки в един файл, за да ви помогне да направите вашите проекти по-подходящи за различни устройства и разделителни способности на екрана. Ето какво е включено:

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

Отзивчиви полезни класове

За по-бързо разработка, удобна за мобилни устройства, използвайте тези помощни класове за показване и скриване на съдържание по устройство. По-долу е дадена таблица с наличните класове и техния ефект върху дадено оформление на медийна заявка (обозначено по устройство). Те могат да бъдат намерени в responsive.less.

Клас телефони767px и по-долу Таблетки979px до 768px Настолни компютриПо подразбиране
.visible-phone Видими
.visible-tablet Видими
.visible-desktop Видими
.hidden-phone Видими Видими
.hidden-tablet Видими Видими
.hidden-desktop Видими Видими

Кога да използвате

Използвайте ограничено и избягвайте да създавате напълно различни версии на един и същи сайт. Вместо това ги използвайте, за да допълните представянето на всяко устройство. Отзивчивите помощни програми не трябва да се използват с таблици и като такива не се поддържат.

Тестов случай на отзивчиви помощни програми

Преоразмерете браузъра си или заредете на различни устройства, за да тествате горните класове.

Вижда се на...

Зелените отметки показват, че класът е видим в текущия ви прозорец.

  • Телефон✔ Телефон
  • Таблет✔ Таблет
  • работен плот✔ Работен плот

Скрит на...

Тук зелените отметки показват, че класът е скрит в текущия ви прозорец.

  • Телефон✔ Телефон
  • Таблет✔ Таблет
  • работен плот✔ Работен плот