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