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

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

Bootstrap построен на адаптивной сетке из 12 столбцов. Мы также включили макеты с фиксированной и гибкой шириной на основе этой системы.

Глобальные стили для сброса CSS, типографики и ссылок

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

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

  1. <!ДОКТИП HTML>
  2. <html язык = "ru" > 
  3.   ...
  4. </html>

Типография и ссылки

В файле scaffolding.less мы устанавливаем базовые глобальные стили отображения, типографики и ссылок. В частности, мы:

  • Удалить поля на теле
  • Установите background-color: white;наbody
  • Используйте атрибуты @baseFontFamily, @baseFontSizeи @baseLineHeightв качестве нашей типографской основы
  • Установите глобальный цвет ссылки через @linkColorи применяйте подчеркивание ссылки только на:hover

Сброс через нормализацию

Начиная с Bootstrap 2, традиционный сброс CSS эволюционировал, чтобы использовать элементы из Normalize.css , проекта Николаса Галлахера , который также поддерживает HTML5 Boilerplate .

Новый сброс все еще можно найти в reset.less , но многие элементы удалены для краткости и точности.

Система сетки по умолчанию 12 столбцов с гибким поворотом

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

Система сетки по умолчанию, предоставляемая как часть Bootstrap, представляет собой сетку шириной 940 пикселей с 12 столбцами .

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

  1. <div класс = "строка" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Как показано здесь, базовый макет может быть создан с двумя «столбцами», каждый из которых охватывает несколько из 12 основных столбцов, которые мы определили как часть нашей системы сетки.


Смещение столбцов

4
4 смещение 4
3 смещение 3
3 смещение 3
8 смещение 4 
  1. <div класс = "строка" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

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

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

Пример

Вложенные строки должны включать набор столбцов, которые в сумме равны количеству столбцов его родителя. Например, два вложенных .span3столбца должны быть размещены в файле .span6.

Уровень 1 столбца
Уровень 2
Уровень 2 
  1. <div класс = "строка" > 
  2.   <div класс = "span12" > 
  3.     Уровень 1 столбца
  4.     <div класс = "строка" > 
  5.       <div class = "span6" > Уровень 2 </div> 
  6.       <div class = "span6" > Уровень 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Гибкая система сетки 12 адаптивных столбцов с процентным соотношением

Колонки с жидкостью

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

Проценты, а не пиксели

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

Жидкие ряды

Сделайте любую строку плавной, просто изменив .rowее на .row-fluid. Столбцы остаются прежними, что упрощает переключение между фиксированным и плавным макетами.

Разметка

  1. <div класс = "жидкость строки" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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

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

Жидкость 12
Жидкость 6
Жидкость 6 
  1. <div класс = "жидкость строки" > 
  2.   <div класс = "span12" > 
  3.     Уровень 1 столбца
  4.     <div класс = "жидкость строки" > 
  5.       <div class = "span6" > Уровень 2 </div> 
  6.       <div class = "span6" > Уровень 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Настройка сетки

Переменная Значение по умолчанию Описание
@gridColumns 12 Число столбцов
@gridColumnWidth 60 пикселей Ширина каждой колонки
@gridGutterWidth 20 пикселей Негативное пространство между столбцами
@siteWidth Вычисленная сумма всех столбцов и желобов Подсчитывает количество столбцов и желобов для установки ширины .container-fixed()миксина

Переменные в LESS

В Bootstrap встроено несколько переменных для настройки системы сетки по умолчанию 940px, описанной выше. Все переменные сетки хранятся в файле variable.less.

Как настроить

Изменение сетки означает изменение трех @grid*переменных и перекомпиляцию Bootstrap. Измените переменные сетки в variable.less и используйте один из четырех задокументированных способов перекомпиляции . Если вы добавляете больше столбцов, обязательно добавьте CSS для столбцов в grid.less.

Оставаясь отзывчивым

Настройка сетки работает только на уровне по умолчанию, сетке 940 пикселей. Чтобы сохранить отзывчивые аспекты Bootstrap, вам также придется настроить сетки в responsive.less.

Макеты Основные шаблоны для создания веб-страниц

Фиксированная раскладка

Стандартный и простой центрированный макет шириной 940 пикселей практически для любого веб-сайта или страницы, предоставляемый одним файлом <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 на основе ряда условий — соотношений, ширины, типа отображения и т. д. — но обычно фокусируются вокруг min-widthи max-width.

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

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

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

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

Этикетка Ширина макета Ширина колонки Ширина желоба
Смартфоны 480px и ниже Гибкие столбцы, без фиксированной ширины
Смартфоны в планшеты 767px и ниже Гибкие столбцы, без фиксированной ширины
Портретные планшеты 768px и выше 42px 20 пикселей
По умолчанию 980px и выше 60 пикселей 20 пикселей
Большой дисплей 1200px и выше 70 пикселей 30 пикселей

Требуется метатег

Чтобы обеспечить правильное отображение адаптивных страниц на устройствах, включите метатег области просмотра.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Использование медиа-запросов

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

  1. Используйте скомпилированную адаптивную версию bootstrap-responsive.css.
  2. Добавьте @import "responsive.less" и перекомпилируйте Bootstrap
  3. Измените и перекомпилируйте responsive.less как отдельный файл.

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

  1.   // Телефоны в горизонтальном положении и вниз
  2.   @media ( максимальная ширина : 480 пикселей ) { ... }     
  3.  
  4.   // Телефон с альбомной ориентацией на планшет с портретной ориентацией
  5.   @media ( максимальная ширина : 768 пикселей ) { ... }     
  6.  
  7.   // Планшет с вертикальной ориентации на альбомную и рабочий стол
  8.   @media ( минимальная ширина : 768 пикселей ) и ( максимальная ширина : 980 пикселей ) { ... }        
  9.  
  10.   // Большой рабочий стол
  11.   @media ( минимальная ширина : 1200 пикселей ) { .. }

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

Кто они такие

Для более быстрой разработки с учетом мобильных устройств используйте эти основные служебные классы для отображения и скрытия содержимого на устройствах.

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

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

Например, вы можете отображать <select>элемент для навигации в мобильных макетах, но не на планшетах или компьютерах.

Классы поддержки

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

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

Прецедент

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

Видно на...

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

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

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