Div class row fluid

Bootstrap построен на динамической 12-колонной сетке с фиксированной, либо плавающей шириной.

  • Основные стили
  • Сетка дизайна по умолчанию
  • Плавающая или резиновая сетка макета
  • Шаблоны
  • Динамический дизайн

Необходим HTML5 doctype

Bootstrap использует HTML-элементы и CSS-свойства для которых необходимо использовать HTML5 doctype. Убедитесь в использовании HTML5 doctype на каждой за’Bootstrap’енной странице Вашего проекта.

Оформление и ссылки

Bootstrap выставляет основные и глобальные значения для шрифтов, ссылок и бекграунда. В частности, мы:

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

Данные стили вы можете найти в файле scaffolding.less.

Сбрасывание браузерных дефолтов через Normalize

В Bootstrap 2 мы применили ставший обыденным сброс браузерных дефолтов с помощью Normalize.css, проект от Nicolas Gallagher и Jonathan Neal так же мы включили все плюсы от HTML5 Boilerplate. Сброс дефолтных стилей находится в reset.less, мы многое изменили для большей совместимости.

Живой пример сетки

По умолчанию сетка состоит из 12 columns, с установленной шириной в 940px без использования динамических (респонсив) запросов. При использовании динамических CSS-запросов, сетка и элементы адаптируются под экраны шириной в 724px и 1170px в зависимости от вьюпорта (viewport). Вьюпорты менее 767px, делают сетку резиновой, а расположение элементов вертикальным.

Основа HTML-сетки

Для создания простой двух-колонной странички,- создайте элемент с классом .row и добавьте соответствующий номер для задания размера колонки от 1 до 12, например .span* где * значение от 1 до 12. Так как это 12 колонная сетка, число "spanning" или span(x)’ов должно равняться 12 основным колонкам, которые определенны как часть основной сетки. И сумма span(x)’ов не должна превышать номер родительской span-колонки.

В этом примере: .span4 и .span8 в сумме составляют 12 колон и выглядят как законченный ряд..

Отключение колонок

Отключить колонку сохраняя за ней место можно с помощью класса .offset* . Каждый такой класс увеличивает левый margin от колонки имитируя отключение или отсутствие колонны. На пример: .offset4 сдвигает .span4 на 4 колонны.

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

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

Живой пример резиновых колонок

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

HTML-Основа для плавающей сетки шаблона

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

Отключение колонн в плавающей сетке

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

Вложение колонн в плавающую сетку

Вложение в плавающую сетку немного отличается: номер и сумма span(x)’ов может не совпадать с размером родительской колонки, так как вложенные колонны на каждом уровне вложения занимают 100% родительской колонки.

Фиксированный шаблон

Основной и простой макет с шириной в 940px, отцентрованное расположение элементов для простого сайта с основным родительским

Плавающий (резиновый) шаблон

Как использовать?

Для активации responsive-дизайна добавьте CSS-файл и meta-тег в вашей страницы. Если вы компилировали Bootstrap со страницы Изменить и скачать, Вам необходимо включить только meta-тег.

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

Подробнее о динамическом дизайне

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

  • Изменяется ширина колонок в сетке шаблона
  • Заменяются плавающие элементы на фиксированные при необходимости
  • Изменяется размер заголовков и основного шрифта на разных устройствах

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

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

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

Категория Ширина шаблона Ширина колонок Отступ колонок
Большие дисплеи 1200px и больше 70px 30px
По умолчанию 980px и больше 60px 20px
Портретные планшеты 768px и больше 42px 20px
Планшеты 767px и меньше Плавающие колонки без фиксированной ширины
Смартфоны 480px и меньше Плавающие колонки без фиксированной ширины

Поддерживаемые классы

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

Класс Телефоны 767px и меньше Планшеты от 979px до 768px Десктопы По умолчанию
.visible-phone Видено Скрыто Скрыто
.visible-tablet Скрыто Видено Скрыто
.visible-desktop Скрыто Скрыто Видено
.hidden-phone Скрыто Видено Видено
.hidden-tablet Видено Скрыто Видено
.hidden-desktop Видено Видено Скрыто

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

Использование данного функционала позволяет не создавать разные версии одного и того же сайта под разные устройства. Вместо этого можно управлять показом и скрытием контента в зависимости от устройства.

Тестирование

Измените размер окна или откройте данную страницу на мобильном устройстве для тестирование вышеуказанных классов в действии.

Виден на.

Зеленая отметка означает что блок виден в текущем окне шаблона.

  • Phone ✔ Телефон
  • Tablet ✔ Планшет
  • Desktop ✔ Монитор

Скрыт на.

Здесь зеленая отметка блока означает что он скрыт в текущем окне шаблона.

  • Phone ✔ Телефон
  • Tablet ✔ Планшет
  • Desktop ✔ Монитор

Разработано и построено со всей любовью к миру @mdo и @fat .

Код распространяется по лицензии Apache License v2.0, документация по лицензии CC BY 3.0.

Иконки нарисованы и предоставлены Glyphicons Free по лицензии CC BY 3.0.

Свои предложения присылайте на почту info@bootstrap-4.ru

Bootstrap построен на динамической 12-колонной сетке, шаблонах и компонентах.

  • Основные стили
  • Сетка
  • Плавающая сетка
  • Макеты
  • Адаптивный дизайн

Требуется HTML5 doctype

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

Оформление и ссылки

Основные компоненты Bootstrap включают в себя элементы отображения, оформления и стили ссылок. В частности, мы:

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

Эти стили вы можете найти в scaffolding.less.

Сброс настроек посредством Normalize

В Bootstrap 2 мы применили старый сброс браузерных дефолтов с помощью Normalize.css, проект от Николаса Галлагера который также включает в себя HTML5 Boilerplate. Так как мы часто используем Normalize в нашем reset.less, мы удалили некоторые элементы специально для Bootstrap.

Демонстрация

Основная сетка макета состоит из 12 колонок, обеспечивая ширину контейнеров в 940px без активных динамических особенностей. При добавлении динамического файла CSS сетка может растягиваться в ширину от 724px до 1170px, в зависимости от вашего монитора. На дисплеях, ширина которых менее 767px, колонки становятся плавающими и выстраиваются вертикально.

Основная сетка HTML

Для простого макета в две колонки создайте класс .row и добавьте соответствующее число колонок .span* . Так как это сетка в 12 колонок, каждый диапазон из двух .span* насчитывает 12 колонок и всякий раз будет добавлять 12 колонок в каждую строку (или то количество колонок, которое задано в родительском элементе).

В данном примере у нас имеются .span4 и .span8 , созданные и 12 колонок и одной сплошной строки.

Перемещение колонок

Подвиньте колонки вправо, используя классы .offset* . Каждый класс увеличивает левый отступ колонки на размер ее самой. Например, .offset4 перемещает .span4 на четыре колонки.

Верстка колонок

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

Демонстрация

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

Основная плавающая сетка HTML

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

Плавающее перемещение

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

Плавающая верстка

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

Фиксированная разметка

Основной фиксированный по ширине макет (опционально динамический) с единственным требованием —

Плавающая разметка

Создайте плавающую страницу с двумя колонками с помощью

Включение адаптивных возможностей

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

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

Об адаптивных особенностях Bootstrap

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

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

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

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

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

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

Дополнительные адаптивные классы

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

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

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

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

Тестирование адаптивных классов

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

Виден на…

Зеленые отметки обозначают, что класс виден на данном дисплее.

  • Телефон ? Телефон
  • Планшет ? Планшет
  • Десктоп ? Десктоп

Скрыт на…

В этом случае зеленые отметки обозначают, что класс не отображается на данном дисплее.

  • Телефон ? Телефон
  • Планшет ? Планшет
  • Десктоп ? Десктоп

Помогите,пожалуйста, разобраться какой класс row или row-fluid нужно указывать в container при верстки responsive шаблона на bootstrap 2.3.2 Для примера смотрел несколько шаблонов в некоторых используется row, а в некоторых row-fluid при этом container в обоих случаях без fluid (как и должно быть,так как интересует НЕ резиновый, а responsive) bootstrap-responsive.css подключен всегда.

Что правильно для responsive row или row-fliud?


[an error occurred while processing the directive]
Карта сайта