Bootstrap — Обзор CSS
(1 оценок, среднее: 5,00 из 5)
Загрузка...
В этой главе дается обзор ключевых элементов инфраструктуры Bootstrap, включая подход Bootstrap к лучшей, быстрой веб-разработки.
HTML5 DOCTYPE
Bootstrap использует некоторые HTML элементы и свойства CSS, которые требуют использования DOCTYPE HTML5. Следовательно, включает фрагмент кода ниже для HTML5 DOCTYPE в начале всех проектов с использованием Bootstrap.
<!DOCTYPE html> <html> .... </html>
Мобильный
Поскольку Bootstrap 3 был запущен, Bootstrap стал мобильным. Это означает, что «мобильные» стили могут быть найдены по всей библиотеке в отдельных файлах. Вы должны добавить элемент viewport meta tag в <head>, чтобы обеспечить надлежащее оказание и использовать масштабирование на мобильных устройствах.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
- Свойство width управляет шириной устройства. Установка в device-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 используется вместе с user-scalable = no. Не как уже упоминалось выше, user-scalable = no может предоставить пользователям опыт более, как родное приложение, поэтому Bootstrap не рекомендует использовать этот атрибут.
Адаптивные изображения
Bootstrap 3 позволяет сделать изображение отзывчивым, добавив класс .img-responsive к тегу <img>. К изображению применяется max-width: 100%; и height: auto; , так что масштаб применяется к родительскому элементу.
<img src = "..." class = "img-responsive" alt = "Responsive image">
Типография и ссылки
Bootstrap устанавливает базовый глобальный дисплей (background), типографику и стили ссылок:
- Основной глобальный дисплей — Устанавливает цвет фона: #FFF; на элемент <body>.
- Типография — Использует атрибуты @font-family-base, @font-size-base, и @line-height-base как типографская база.
- Стили ссылок — Устанавливают глобальный цвет ссылок через атрибут @link-color и применить ссылку только подчеркиваемую на : hover.
Если вы собираетесь использовать код LESS, вы можете найти все это в scaffolding.less.
Нормирование
Bootstrap использует нормализацию к установлению последовательности браузера.
Normalize.css это современный, HTML5 готовый альтернатива CSS resets. Это небольшой 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. Это помогает для применения отзывчивости и в тех случаях, когда класс контейнера изменяется соответствующим образом, чтобы сделать системную сетку должным образом.
Спасибо!
Теперь редакторы в курсе.