Начальная загрузка

строительные леса

Bootstrap построен на адаптивных 12-колоночных сетках, макетах и ​​компонентах.

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

Требуется тип документа HTML5

Bootstrap использует определенные элементы HTML и свойства CSS, которые требуют использования типа документа HTML5. Включите его в начале всех ваших проектов.

  1. <!ДОКТИП HTML>
  2. <html язык = "ru" > 
  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 столбцов , что делает контейнер шириной 940 пикселей без включенных адаптивных функций . С добавлением отзывчивого файла 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 класс = "строка" > 
  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 класс = "строка" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Вложенные столбцы

Чтобы вложить содержимое в сетку по умолчанию, добавьте новый .rowи набор .span*столбцов в существующий .span*столбец. Вложенные строки должны включать набор столбцов, которые в сумме равны количеству столбцов его родителя.

Столбец уровня 1
Уровень 2
Уровень 2 
  1. <div класс = "строка" > 
  2.   <div класс = "span9" > 
  3.     Столбец уровня 1
  4.     <div класс = "строка" > 
  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 класс = "жидкость строки" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Компенсация жидкости

Работает так же, как смещение системы с фиксированной сеткой: добавьте .offset*к любому столбцу, чтобы сместить это количество столбцов.

4
4 смещение 4
3 смещение 3
3 смещение 3
6 смещение 6 
  1. <div класс = "жидкость строки" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Жидкое вложение

Гибкие сетки используют вложенность по-разному: каждый уровень вложенности столбцов должен составлять до 12 столбцов. Это связано с тем, что в гибкой сетке для установки ширины используются проценты, а не пиксели.

Жидкость 12
Жидкость 6
Жидкость 6
Жидкость 6
Жидкость 6 
  1. <div класс = "жидкость строки" > 
  2.   <div класс = "span12" > 
  3.     Жидкость 12
  4.     <div класс = "жидкость строки" > 
  5.       <div класс = "span6" > 
  6.         Жидкость 6
  7.         <div класс = "жидкость строки" > 
  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 класс = "контейнер" > 
  3.     ...
  4.   </div>
  5. </тело>

Плавный макет

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

  1. <div class = "контейнер-жидкость" > 
  2.   <div класс = "жидкость строки" > 
  3.     <div класс = "span2" > 
  4.       <!--Содержимое боковой панели-->
  5.     </div>
  6.     <div класс = "span10" > 
  7.       <!--Содержимое тела-->
  8.     </div>
  9.   </div>
  10. </div>

Отзывчивый дизайн

Включение адаптивных функций

Включите адаптивный CSS в своем проекте, включив соответствующий метатег и дополнительную таблицу стилей в <head>свой документ. Если вы скомпилировали Bootstrap со страницы настройки, вам нужно только включить метатег.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "таблица стилей" >

Берегись!В настоящее время Bootstrap не включает адаптивные функции по умолчанию, так как не все должно быть адаптивным. Вместо того, чтобы побуждать разработчиков удалять эту функцию, мы считаем, что лучше включать ее по мере необходимости.

Об адаптивном Bootstrap

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

Медиа-запросы позволяют создавать пользовательские CSS на основе ряда условий — соотношений, ширины, типа отображения и т. д. — но обычно фокусируются вокруг min-widthи max-width.

  • Измените ширину столбца в нашей сетке.
  • Элементы стека вместо плавающих, где это необходимо
  • Измените размер заголовков и текста, чтобы они больше подходили для устройств

Используйте медиа-запросы ответственно и только в качестве начала для вашей мобильной аудитории. Для более крупных проектов рассмотрите выделенные базы кода, а не слои медиа-запросов.

Поддерживаемые устройства

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

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

Отзывчивые служебные классы

Для более быстрой разработки с учетом мобильных устройств используйте эти служебные классы для отображения и скрытия контента по устройствам. Ниже приведена таблица доступных классов и их влияние на данный макет медиазапроса (отмечено устройством). Их можно найти в responsive.less.

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

Когда использовать

Используйте на ограниченной основе и избегайте создания совершенно разных версий одного и того же сайта. Вместо этого используйте их, чтобы дополнить презентацию каждого устройства. Адаптивные утилиты не должны использоваться с таблицами и как таковые не поддерживаются.

Тестовый пример адаптивных утилит

Измените размер вашего браузера или загрузите его на разных устройствах, чтобы протестировать вышеуказанные классы.

Видно на...

Зеленые галочки означают, что класс виден в вашем текущем окне просмотра.

  • Телефон✔ Телефон
  • планшет✔ Планшет
  • Рабочий стол✔ Рабочий стол

Спрятан на...

Здесь зеленые галочки указывают, что класс скрыт в вашем текущем окне просмотра.

  • Телефон✔ Телефон
  • планшет✔ Планшет
  • Рабочий стол✔ Рабочий стол