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