Скеле

Изисква HTML5 doctype

Bootstrap използва определени HTML елементи и CSS свойства, които изискват използването на HTML5 doctype. Включете го в началото на всички ваши проекти.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</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 пиксела колоните стават плавни и се подреждат вертикално.

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

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

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

В този пример имаме .span4и .span8, което прави общо 12 колони и цял ред.

Изместване на колони

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

3 отместване 2

3 отместване 1

3 отместване 2

6 отместване 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

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

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

Колона от ниво 1

Ниво 2

<div class = "row" > 
  <div class = "span9" > 
    Колона от ниво 1
    <div class = "row" > 
      <div class = "span6" > Ниво 2 </div> 
      <div class = "span3" > Ниво 2 </div> 
    </div>
  </div>
</div>

Пример за жива флуидна мрежа

Системата с течна мрежа използва проценти вместо пиксели за ширини на колони. Той има същите възможности за реагиране като нашата система с фиксирана мрежа, осигурявайки правилни пропорции за ключови разделителни способности на екрана и устройства.

Основен флуиден грид HTML

Направете всеки ред "течен", като промените .rowна .row-fluid. Класовете на колоните остават абсолютно същите, което улеснява превключването между фиксирани и течни мрежи.

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Компенсиране на течности

Работи по същия начин като изместването на системата с фиксирана решетка: добавете .offset*към всяка колона, за да изместите с толкова много колони.

4 отместване 4

3 отместване 3

6 отместване 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

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

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

Течност 12

Течност 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Течност 12
    <div class = "row-fluid" > 
      <div class = "span6" > Течност 6 </div> 
      <div class = "span6" > Течност 6 </div> 
    </div>
  </div>
</div>

Фиксирано оформление

Осигурява общо оформление с фиксирана ширина (и по избор адаптивно) само със <div class="container">задължителни.

<тяло>
  <div class = "контейнер" > 
    ...
  </div>
</body>

Плавно оформление

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

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Съдържание на страничната лента-->
    </div>
    <div class = "span10" > 
      <!--Съдържание на тялото-->
    </div>
  </div>
</div>

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

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

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<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 и по-долу	Течни колони, без фиксирани ширини

/* Голям работен плот */
@media ( мин - ширина : 1200px ) { ... }     
 
/* Портретен таблет към пейзажен и работен плот */
@media ( мин . ширина : 768px ) и ( макс . ширина : 979px ) { ... }        
 
/* Хоризонтален телефон към портретен таблет */
@media ( максимална ширина : 767px ) { ... } _     
 
/* Хоризонтални телефони и надолу */
@media ( максимална ширина : 480px ) { ... } _

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

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	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

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 should not be used with tables, and as such are not supported.

Responsive utilities test case

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

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

Phone✔ Телефон
Tablet✔ Таблет
Desktop✔ Desktop

Hidden on...

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

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

Глобални настройки