Компьютерапия

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

HTML5 doctype

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

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

Первый мобильный фреймворк

Поскольку Bootstrap 3 запущен, Bootstrap стал первым мобильным. Это означает, что стили «мобильные впереди» можно найти по всей библиотеке, а не в отдельных файлах. Вам необходимо добавить метатег viewport в элемент 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-scaleable = no">

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

Отзывчивые изображения

Ранее в статье Bootstrap 3. Адаптивные изображения, различные типы меню, формы в меню. Часть 3 мы уже рассматривали отзывчивые или адаптивные изображения, давайте немного повторим основные тезисы.

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

<img src = "/images/slide1.png" class = "img-responsive" alt = "Responsive image">

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

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

• Основной глобальный дисплей. Устанавливает фоновый цвет: #fff; на элементе body.
• Типография. Использует атрибуты @font-family-base, @font-size-base и @ line-height-base как типографическую базу.
• Стиль ссылок. Устанавливает цвет глобальной ссылки через атрибут @link-color и применяет ссылки только на :hover.

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

Normalize

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 имеет медиа-запросы для контейнеров с шириной. Это помогает применять отзывчивость и в пределах того, что класс контейнера модифицирован соответственно для правильного рендеринга сетки.