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

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

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, использует 12 столбцов с шириной 724 пикселей, 940 пикселей (по умолчанию без включенного отзывчивого CSS) и 1170 пикселей. Ниже окна просмотра 767 пикселей столбцы становятся плавными и складываются вертикально.

  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 класс = "span6" > 
  3.     Столбец уровня 1
  4.     <div класс = "строка" > 
  5.       <div class = "span3" > Уровень 2 </div> 
  6.       <div class = "span3" > Уровень 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 пикселей Негативное пространство между столбцами

Переменные в 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 ( максимальная ширина : 767 пикселей ) { ... }     
  6.  
  7.   /* Планшет с портретной ориентацией на альбомную и рабочий стол */
  8.   @media ( минимальная ширина : 768 пикселей ) и ( максимальная ширина : 979 пикселей ) { ... }        
  9.  
  10.   /* Большой рабочий стол */
  11.   @media ( минимальная ширина : 1200 пикселей ) { ... }

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

Кто они такие

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

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

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

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

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

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

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

Прецедент

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

Видно на...

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

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

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

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

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