Учебники

Bootstrap — обзор CSS

Октябрь 26, 2018

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

HTML5 doctype

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

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

Mobile First

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

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

  • Свойство width контролирует ширину устройства. Установка его на ширину устройства обеспечит правильную визуализацию на разных устройствах (мобильные телефоны, настольные компьютеры, планшеты …).

  • initial-scale = 1.0 гарантирует, что при загрузке ваша веб-страница будет отображаться в масштабе 1: 1, и масштабирование не будет применяться из коробки.

Свойство width контролирует ширину устройства. Установка его на ширину устройства обеспечит правильную визуализацию на разных устройствах (мобильные телефоны, настольные компьютеры, планшеты …).

initial-scale = 1.0 гарантирует, что при загрузке ваша веб-страница будет отображаться в масштабе 1: 1, и масштабирование не будет применяться из коробки.

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

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

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

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

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

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

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

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

  • Basic Global display — Устанавливает цвет фона: #fff; на элементе <body> .

  • Типографика — использует атрибуты @ font-family-base , @ font-size-base и @ line-height-base в качестве типографской базы.

  • Стили ссылок — Устанавливает глобальный цвет ссылки с помощью атрибута @ link-color и применяет подчеркивание ссылки только к : hover .

Basic Global display — Устанавливает цвет фона: #fff; на элементе <body> .

Типографика — использует атрибуты @ font-family-base , @ font-size-base и @ line-height-base в качестве типографской базы.

Стили ссылок — Устанавливает глобальный цвет ссылки с помощью атрибута @ link-color и применяет подчеркивание ссылки только к : hover .

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

нормировать

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

Normalize.css — это современная, готовая к HTML5 альтернатива сбросам CSS. Это небольшой 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 имеет медиа-запросы для контейнеров с шириной . Это помогает применять отзывчивость, и внутри них класс контейнера изменяется соответствующим образом для правильной визуализации системы координат.

52
Share: