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

Bootstrap - Обзор CSS

Категория: Bootstrap 3
Просмотров: 1365

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




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok