Цель
В этом руководстве мы обсудили основные моменты CSS Twitter Bootstrap 3. Это руководство поможет вам понять несколько ключевых аспектов работы Bootstrap 3.
HTML 5 Doctype
Twitter Bootstrap 3 использует несколько элементов HTML5 и свойств CSS. И для того, чтобы они работали правильно, вам необходимо использовать HTML5 Doctype.
...
Если вы не используете HTML5 Doctype, в начале вашей веб-страницы, созданной с помощью Twitter Bootstrap, вы можете столкнуться с несоответствиями в некоторых браузерах. Может даже возникнуть несоответствие в определенной ситуации, и, конечно же, ваш код не будет проверен на соответствие стандартам W3c.
Сначала мобильные
Возможно, это самое значительное изменение, произошедшее с Twitter Bootstrap 3. В предыдущей версии Bootstrap (до 2.x) вы должны были включить другой CSS вместе с основным CSS, чтобы ваш проект стал отзывчивым. Уже нет. CSS по умолчанию для Bootstrap 3 сам по себе содержит адаптивные функции.
Bootstrap 3 создается таким образом, что дизайн сначала нацелен на мобильные устройства, а затем на их настольные аналоги. Это действительно очень своевременный переход, поскольку все больше и больше пользователей используют мобильные устройства.
Чтобы сделать ваш сайт, разработанный с помощью Bootstrap, адаптивным, добавьте в заголовок своей веб-страницы следующее.
Свойство
width управляет шириной устройства. Поскольку предполагается, что ваш веб-сайт будет просматриваться с устройств с разным разрешением экрана, установка значения device-width обеспечит его правильную визуализацию на различных устройствах.
initial-scale = 1.0 гарантирует, что при загрузке ваша веб-страница будет отображаться в масштабе 1: 1, и масштабирование не будет применяться сразу после установки.
Вы можете добавить user-scalable = no вместе с этим, чтобы убедиться, что пользователи вообще не смогут масштабировать. Обычно maximum-scale = 1.0 используется вместе с user-scalable = no. Но помните, что это запретит вашим пользователям прокрутку, чтобы они могли прокручивать. Это может сделать их более похожими на собственное приложение, но дважды подумайте, прежде чем применять его в своем проекте.
Адаптивные изображения
Bootstrap 3 имеет класс img-responsive , чтобы сделать изображения адаптивными. Давайте посмотрим, какие свойства css содержит этот класс.
.img-responsive {display: inline-block; высота: авто; max-width: 100%;}
В нем указано, что связанное изображение будет отображаться как inline-block . Когда вы устанавливаете inline-block для отображения свойства элемента, элемент отображается встроенным по отношению к окружающему его содержимому. Но в этом случае мы можем установить ширину и высоту, в отличие от встроенных.
Установка height: auto оставляет решение о выборе высоты для связанного элемента за браузером.
Установка max-width до 100% переопределяет любую ширину, указанную в свойстве width. Это играет очень важную роль в обеспечении отзывчивости ваших изображений.
Глобальное отображение, типографика и ссылки
Bootstrap 3 использует body {margin: 0;} для удаления полей с тела.
Посмотрите на следующее, которое установлено для тела
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; размер шрифта: 14 пикселей; высота строки: 1.428571429; цвет: # 333333; background-color: #ffffff;}
Первое правило устанавливает стиль шрифта по умолчанию для основного текста на «Helvetica Neue», Helvetica, Arial, sans-serif
Второе правило устанавливает размер шрифта текста по умолчанию на 14 пикселей.
Третье правило устанавливает высоту строки по умолчанию на 1,428571429.
Цвет текста по умолчанию установлен на # 333333 с четвертым правилом.
А цвет фона тела по умолчанию установлен на белый с последним правилом.
Для стиля ссылок по умолчанию он имеет следующие
a: hover, a: focus {color: # 2a6496; украшение текста: подчеркивание;} a: focus {контур: тонкие точки # 333; контур: 5 пикселей авто-webkit-focus-ring-color; outline-offset: -2px;}
Итак, для наведения и фокуса (ссылок) цвет установлен на # 2a6496. Будет отображено подчеркивание.
В дополнение к этому, для фокуса будет тонкий пунктирный контур с цветовым кодом # 333. Существует также другое правило для контура, которое устанавливает ширину контура 5 пикселей. У него есть расширение браузера -webkit-focus-ring-color для браузеров на основе webkit. Смещение контура установлено на -2 пикселя.
Если вы собираетесь использовать меньше, вы можете найти все это в scaffolding.less
Избавьтесь кросс-браузерных несоответствий
Bootstrap 3, как и его предки, использовал Normalize для обеспечения кросс-браузерной согласованности.
Контейнер
container класс Bootstrap 3 используется для обертывания содержимого. Давайте посмотрим на этот класс
.container {margin-right: auto; margin-left: auto;}
Как показано выше, установка полей для правой и левой стороны контейнера оставлена на усмотрение браузера.
.container: до, .container: после {display: table; content: "";}
Это создает псевдоэлементы. Установка для display значения table создает анонимную ячейку таблицы и новый контекст форматирования блока. Псевдоэлемент : before предотвращает обрушение верхнего поля, а псевдоэлемент : after очищает плавающие элементы.
Вокруг указанного элемента создается пространство, если атрибут content editable присутствует в HTML из-за некоторой ошибки Opera. Это исправлено с помощью content: «» .
. container: after {clear: both;}
Он создает псевдоэлемент и проверяет, что весь контейнер содержит все плавающие элементы внутри него.
Bootstrap 3 CSS имеет медиа-запросы для применения отзывчивости, и в них класс контейнера модифицируется соответствующим образом, чтобы правильно отображать сетку.
Вопросы? Предложения? Хвастаться? Присоединяйтесь к обсуждению ниже. Чтобы узнать о предстоящих уроках, подпишитесь на наш канал.
