Кто себе друзей не ищет, самому себе тот враг (Ш. Руставели).

Bootstrap – Обзор CSS

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
15 мая 2017
Bootstrap - Обзор CSS
В этой главе дается обзор ключевых элементов инфраструктуры 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. Это помогает для применения отзывчивости и в тех случаях, когда класс контейнера изменяется соответствующим образом, чтобы сделать системную сетку должным образом.

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 97

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close