Подключить Bootstrap 4 можно с помощью CDN (при этом скачивать Bootstrap в проект не нужно):
<!DOCTYPE html> <html lang="ru"> <head> <!-- Кодировка веб-страницы --> <meta charset="utf-8"> <!-- Настройка viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Подключаем Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <body> <!-- Подключаем jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Подключаем плагин Popper --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <!-- Подключаем Bootstrap JS --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html>
Позиционирование элементов
<div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <p>.............</p> </div> <div class="col-md-4"> <h2>Get more libraries</h2> <p>.............</p> </div> <div class="col-md-4"> <h2>Web Hosting</h2> <p>.............</p> </div> </div>
Все типы классов:
col-xs-*: для устройств с шириной экрана меньше 768 пикселей
col-sm-*: для устройств с шириной экрана от 768 пикселей и выше
col-md-*: для устройств с шириной экрана от 992 пикселя и выше
col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше
<div class="col-xs-12 col-md-4">
Отступы
Специальные классы col-md(sm|lg)-offset-*
позволяют задать смещение относительно левого блока или начала строки в условных единицах.
Например, у нас есть такая строка:
<div class="row"> <div class="col-md-4"> <h2>Левый блок</h2> <p>................</p> </div> <div class="col-md-4 col-md-offset-4"> <h2>Правый блок</h2> <p>................</p> </div> </div>
Порядок столбцов
С помощью классов col-md(sm|lg)-push-*
и col-md(sm|lg)-pull-*
мы можем переопределить порядок блоков в строке.
Например, класс col-md-push-4
сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4
сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать следующим образом:
<div class="row"> <div class="col-md-4"> <h2>Левый блок</h2> <p>................</p> </div> <div class="col-md-4 col-md-push-4"> <h2>Правый блок</h2> <p>................</p> </div> </div>
И у нас был бы тот же эффект. Но мы можем также полностью переупорядочить порядок следования блоков:
<div class="row"> <div class="col-md-4 col-md-push-8"> <h2>Левый блок</h2> <p>................</p> </div> <div class="col-md-4 col-md-pull-4"> <h2>Правый блок</h2> <p>................</p> </div> </div>
Скрытие элементов в Bootstrap
Применим это на практике
<div class="col-lg-6 col-sm-7">
<img src="img/animals.jpg" alt="" class="hidden-xs">
</div>
Медиа-запросы
Синтаксис
Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.
Тип | Описание |
---|---|
all | Все типы. Это значение используется по умолчанию. |
braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
embossed | Принтеры, использующие для печати систему Брайля. |
handheld | Смартфоны и аналогичные им аппараты. |
Принтеры и другие печатающие устройства. | |
projection | Проекторы. |
screen | Экран монитора. |
speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
tv | Телевизоры. |
Логические операторы, применяемые в медиа-запросах
and
Логическое И. Указывается для объединения нескольких условий.
Пример. Стиль для всех цветных устройств
@media all and (color) { ... }
not
Логическое НЕ. Указывается для отрицания условия.
Пример. Стиль для всех устройств кроме смартфонов
@media all and (not handheld) { ... }
Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение
@media not all and (color) { ... }
следует понимать как
@media not (all and (color)) { ... }
а не
@media (not all) and (color) { ... }
only
Применяется для старых браузеров, которые не поддерживают медиа-запросы.
Пример. Стиль для новых браузеров
@media only all and (not handheld) { ... }
В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.
Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.
@media all and (orientation: landscape), all and (min-width: 480px) { ... }
Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.
Медиа-функции
Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.
Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число
Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).
color (min-color, max-color)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.
Скрыть блок на мобильных устройствах с указанным viewport - HTML, CSS
@media screen and (max-width: 600px) { #chto_ne_pozavivat { visibility: hidden; display: none; } }
Запрещает блокам, которые расположены после него, обтекать его.
<div class="clearfix"></div>
Создание и продвижение сайтов. SEO-оптимизация. Уникальный дизайн сайта. Установка CMS. Администрирование готовых проектов. Практичные, удобные, продающие и функциональные сайты для бизнеса. Web-дизайн. Услуги по продвижению сайта в поисковых системах Яндекс, Google и др. Настройка рекламных кампаний в Яндекс.Директе и Google.