кодесурса
«Twitter

Twitter Bootstrap 3 CSS Обзор

script1adsense2code
script1adsense3code

Задача

В этом уроке мы обсудили основные моменты 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 программирования


script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code