Bootstrap - Обзор CSS

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

Тип документа HTML5

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

<!DOCTYPE html>
<html>
   ....
</html>

Сначала мобильные

С момента запуска Bootstrap 3 Bootstrap в первую очередь стал мобильным. Это означает, что стили «сначала мобильные» можно найти во всей библиотеке, а не в отдельных файлах. Вам нужно добавитьviewport meta tag к <head> элемент, чтобы обеспечить правильный рендеринг и сенсорное масштабирование на мобильных устройствах.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Свойство width контролирует ширину устройства. Установка ширины устройства гарантирует, что он будет правильно отображаться на различных устройствах (мобильных, настольных компьютерах, планшетах ...).
initial-scale = 1.0 гарантирует, что при загрузке ваша веб-страница будет отображаться в масштабе 1: 1, а масштабирование не будет применяться сразу после установки.

Добавить user-scalable = no к contentатрибут, чтобы отключить возможности масштабирования на мобильных устройствах, как показано ниже. Благодаря этому изменению пользователи могут только прокручивать, но не увеличивать масштаб, и в результате ваш сайт будет больше похож на собственное приложение.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Обычно используется параметр maximum-scale = 1.0 вместе с user-scaleable = no . Как уже упоминалось вышеuser-scalable = no может дать пользователям опыт, больше похожий на собственное приложение, поэтому Bootstrap не рекомендует использовать этот атрибут.

Адаптивные изображения

Bootstrap 3 позволяет сделать изображения адаптивными, добавив класс .img-responsive к <img>тег. Этот класс применяетсяmax-width: 100%; и height: auto; к изображению, чтобы оно хорошо масштабировалось до родительского элемента.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Типография и ссылки

Bootstrap устанавливает базовый глобальный стиль отображения (фон), типографику и ссылки -

Basic Global display- Устанавливает цвет фона: #fff; в элементе <body> .
Typography- Использует атрибуты @ font-family-base , @ font-size-base и @ line-height-base в качестве типографской основы.
Link styles- Устанавливает глобальный цвет ссылки через атрибут @ link-color и применяет подчеркивание ссылки только к : hover .

Если вы собираетесь использовать код LESS, вы можете найти все это в scaffolding.less .

Нормализовать

Bootstrap использует Normalize для обеспечения согласованности между браузерами.

Normalize.css - это современная альтернатива сбросу CSS с поддержкой HTML5. Это небольшой файл CSS, который обеспечивает лучшую кроссбраузерность в стилях HTML-элементов по умолчанию.

Контейнеры

Использовать класс .container , чтобы обернуть содержимое страницы и легко центрировать содержимое, как показано ниже.

<div class = "container">
   ...
</div>

Взгляните на .containerкласс в файле bootstrap.css -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

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

Взгляните на файл bootstrap.css -

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

Здесь вы можете видеть, что в CSS есть медиа-запросы для контейнеров с width. Это помогает применять отзывчивость, и внутри них класс контейнера изменяется соответствующим образом, чтобы правильно отображать сетку.