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*колона. Вложените редове трябва да включват набор от колони, които се равняват на броя на колоните на своя родител.

Пример

Тук две вложени .span4колони са поставени в .span8.

Ниво 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>

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

Влагането с плавни мрежи е малко по-различно: броят на вложените колони не трябва да съвпада с броя на колоните на родителя. Вместо това всяко ниво на вложени колони се нулира, тъй като всеки ред заема 100% от родителската колона.

Течност 12
Течност 6
Течност 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Ниво 1 на колоната
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Ниво 2 </div> 
  6.       <div class = "span6" > Ниво 2 </div> 
  7.     </div>
  8.   </div>
  9. </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 поддържа няколко медийни заявки в един файл, за да ви помогне да направите вашите проекти по-подходящи за различни устройства и разделителни способности на екрана. Ето какво е включено:

Етикет Ширина на оформлението Ширина на колоната Ширина на улука
телефони 480px и по-долу Течни колони, без фиксирани ширини
Телефони към таблети 767px и по-долу Течни колони, без фиксирани ширини
Таблетки за портрети 768px и повече 42px 20px
Default 980px and up 60px 20px
Large display 1200px and up 70px 30px 
  1. /* Landscape phones and down */
  2. @media (max-width: 480px) { ... }
  3.  
  4. /* Landscape phone to portrait tablet */
  5. @media (max-width: 767px) { ... }
  6.  
  7. /* Portrait tablet to landscape and desktop */
  8. @media (min-width: 768px) and (max-width: 979px) { ... }
  9.  
  10. /* Large desktop */
  11. @media (min-width: 1200px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Responsive utilities test case

Resize your browser or load on different devices to test the above classes.

Visible on...

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

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

Скрит на...

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

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