ИТ Блог. Создание сайтов с применением Bootstrap
(1 оценок, среднее: 5,00 из 5)
Загрузка...
В этой главе дается обзор ключевых элементов инфраструктуры Bootstrap, включая подход Bootstrap к лучшей, быстрой веб-разработки.
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">
Добавление 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), типографику и стили ссылок:
Если вы собираетесь использовать код 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. Это помогает для применения отзывчивости и в тех случаях, когда класс контейнера изменяется соответствующим образом, чтобы сделать системную сетку должным образом.
