Урок 10. Фреймворк Bootstrap 4. Адаптивные изображения и видео в Bootstrap


Содержание материала:

Bootstrap 4 Images

Bootstrap 4 фигуры изображений

Закругленные углы

.rounded класс добавляет скругленные углы к изображению:

Пример

.rounded-circle класс формирует изображение в окружность:

Пример

Миниатюру

.img-thumbnail класс формирует изображение на миниатюру (обрамление):

Пример

Выравнивание изображений

Float изображение вправо с .float-right классом или влево с .float-left :

Пример

Центрированное изображение

Центрировать изображение, добавив служебные классы .mx-auto (Margin: Auto) и .d-block (Display: Block) к изображению:

Пример

Адаптивные образы

Изображения бывают всех размеров. Так что экраны. Адаптивные изображения автоматически корректируются в соответствии с размером экрана.

Создание адаптивных образов путем добавления .img-fluid класса к тегу. После этого изображение будет хорошо масштабироваться до родительского элемента.

.img-fluid класс применяется max-width: 100%; и height: auto; к изображению:

Изображения

Документация и примеры приведения изображений к отзывчивому поведению (так, чтобы их размер не выходил за рамки родительского элемента) и добавления к ним «легковесных» стилей – всё посредством классов.

Отзывчивые изображения

Изображения в Bootstrap делаются «отзывчивыми» с помощью .img-fluid . max-width: 100%; и height: auto; применяемых к изображению, которое т.о. масштабируется по родительскому элементу.

Изображения SVG и IE10

В IE10 SVG-изображения с классом .img-fluid выглядят диспропорционально. Для решения этой проблемы добавьте width: 100% \9; где необходимо. Это решение затрагивает и размеры изображений других форматов, поэтому Bootstrap не применяет его автоматически.

Мини-версии изображения

В дополнение к нашим утилитам бордер-радиуса вы можете использовать класс .img-thumbnail для придания изображению границы 1px.

Выравнивание изображений

Выравнивайте изображения вспомогательными классами выравнивания по стороне или классами выравнивания текста. Блочные изображения block можно центрировать использованием класса утилиты «марджина» the .mx-auto .

Картинка

Если вы используете элемент

для привязки множественных элементов к определенному , добавьте классы .img-* в , а не в

LiveStreet CMS

Интересные расширения из каталога

Вопросы

Прямой эфир

lifecom 7 ноября 2020, 13:25

Spark 6 ноября 2020, 11:39

Spark 5 ноября 2020, 18:37

bender670 3 ноября 2020, 11:48

Spark 3 ноября 2020, 10:51

sersar 28 октября 2020, 09:12

Spark 25 октября 2020, 09:03

Работа!

Блоги

  • Блог разработки LiveStreet137.33
  • Сайты на LiveStreet121.49
  • Вопросы83.57
  • Дополнительные модули и доработки для LiveStreet73.21
  • Техническая документация LiveStreet68.62
  • Tips & tricks60.64
  • Биржа заказов на разработку и поддержку за деньги56.28
  • Предложения и пожелания46.04
  • Шаблоны для LiveStreet38.75
  • Решения проблем28.89

Адаптивные видео в шаблонах с Bootstrap (Решено)

В Bootstrap-е есть замечательная возможность сделать встраиваемые видео адаптивными. Для этого нужно для iframe (или object) видео присвоить класс embed-responsive-item, а затем обернуть в блок с классом embed-responsive embed-responsive-16by9 (source).

Естественно, это будет работать только на bootstrap-based скинах. Благо, таковых много, в основном благодаря vOFFka , за что ему огромное спасибо!

Задумался, как реализовать это в Livestreet:
Все работает, если подкорректировать замену тега video, добавив указанную выше конструкцию в Text.class.php.

Однако подобные изменения коснутся любого скина. У нас же фича скин-специфичная.

Вопрос:
Как реализовать подобную обертку, чтобы она работала только для определенного скина? М.б. js?

Vavik 96

Интернет дайджест для вебмастеров и фотографов

Идеальные отзывчивые (responsive) изображения: HTML5

Bootstrap 4 находится в альфа – версии и имеет совершенно новый набор медиа – запросов и контрольных точек. Там где Bootstrap 3 имел их в пикселях, новый выпуск популярного фреймворка имеет точки останова в em.

Давайте использовать возможности этих новых медиа-запросов для создания изображений нужного размера , основываясь на модели устройства пользователя, на котором он просматривает наш сайт. Мы сохраним большую часть трафика для небольших устройств, и используем прекрасные большие изображения для настольных компьютеров.

Мы сделаем это с помощью HTML5 элемента

и его мощным тегом source и атрибутами media и srcset .

Вы готовы? Тогда начнём.

Bootstrap 4 медиазапросы

Для начала давайте посмотрим на абсолютно новые медиа – запросы и точек останова в Boostrap 4. Они приспособлены для соответствия новейшим устройств, включая iPhone 6с и iPhone 6с Plus:

Как вы видите, запросы используют em вместо пикселей, что-бы отличать устройства друг от друга, и разбить их на категории:

  • Смартфоны
  • Планшеты
  • Настольные компьютеры
  • Большие рабочие станции

Теперь запомните или запишите эти четыре EM размера , которые Bootstrap 4 использует изначально, так как это понадобится в конце этого руководства. И давайте перейдём к следующей части головоломки, которую мы вместе собираем.

HTML5 элемент

Элемент picture> является одним из многих интеллектуальных элементов в спецификации HTML5, и позволяет обслуживать различные изображения в зависимости от размера области просмотра браузера.

Подход гораздо удобнее , чем при использовании одного изображения и изменения его размеров в CSS. Изображение не подгоняется по размерам, а используются разные изображения для каждого размера окна просмотра.

Стандартный пример кода выглядит следующим образом:

Если вы новичок в использовании элемента picture , сперва может быть немного сложно для понимания. Поэтому давайте разберем всё с самого начала и проанализируем каждый элемент по отдельности.

Picture

Это тег , который сообщает браузеру, что мы собираемся использовать разные размеры изображения в зависимости от размеров экрана. Все , что вам нужно сделать , это расположить его вокруг тегов source и img . Как есть, никаких атрибутов не требуется.

Source

Нам нужен тег source для каждого размера экрана, который мы будем использовать. Каждый тег source будет содержать media и srcset атрибут.

Media

Здесь находится min-width нашего медиа – запроса. Я думаю, вы знакомы с “ media queries“ . Если нет, то читайте больше о медиа – запросах и адаптивном дизайне. min-width срабатывает в зависимости от размера окна просмотра для загрузки соответствующего изображения из нашего следующего атрибута, srcset .

srcset

Здесь расположен наш источник изображения. Мы будем использовать изображение, размер которого точно подходят для экрана, инициировавшего наш медиа – запрос. Для более продвинутых пользователей в примере кода выше – этот атрибут может иметь несколько источноков, разделенных запятыми. Каждый из них будет загружать различные изображения в зависимости от плотности пикселей устройства. Например iPhone 6с имеет 2x плотность пикселей, а iPhone 6s Plus имеет 3x.

Теперь мы знаем все , что нужно для использования элемента picture .

Собираем все вместе: адаптивные HTML5 изображения для Bootstrap 4

То , что мы теперь будем делать очень просто: мы будем использовать как пример элемент picture , который мы только что рассмотрели, и адаптировать его для использования Bootstrap 4 медиа запросов.

Нам понадобится 5 различных изображений. Пример: extralarge.jpeg, large.jpeg, medium.jpeg, small.jpeg и extrasmall.jpeg:

Готово. Теперь мы имеем подстраивающиеся изображения, идеально подходящие для каждого устройства. Мы экономим трафик, и наши пользователи будут видеть изображения в лучшем формате, адаптированные к их размеру экрана.

Примечание: Порядок тегов source имеет важное значение. Начните с самых больших размеров в сторону уменьшения, и убедитесь , что по умолчанию img тег содержит наименьшее изображение. В противном случае браузер будет игнорировать наши теги source и будет всегда загружать изображение , указанное в теге img .

Bootstrap 4 скоро будет доступен, в данный момент имеется альфа – версия.
Источник

Видеокурс «Фреймворк Bootstrap 4 + WordPress 5. Руководство по адаптивной верстке». (Андрей Кудлай — Webformyself)

Автор(ы): Андрей Кудлай

Уникальность курса состоит в том, что здесь вы найдете не только уроки по CSS-фреймворку Bootstrap 4, но и по CMS WordPress. Созданная в курсе верстка на Bootstrap устанавливается на CMS №1 в мире – WordPress. Таким образом, в одном месте показан весь процесс создания полноценного функционального динамического сайта с полного нуля.

Смотреть видео:

Фреймворк Bootstrap 4 + WordPress 5. Руководство по адаптивной верстке. (Андрей Кудлай — Webformyself)

  • Часть 1. Теория

ЦЕЛИ И ЗАДАЧИ ДАННОГО РАЗДЕЛА

В первой части курса вы найдете знакомство с теорией CSS-фреймворка Bootstrap 4. Вполне очевидно, что перед использованием инструмента на практике, необходимо изучить теорию работы с ним. Из уроков этой части курса вы узнаете о том, что такое CSS-фреймворки вообще и что такое Bootstrap в частности. Вы увидите варианты подключения Bootstrap к Вашему проекту и узнаете о том, что такое CDN и почему стоит использовать вариант подключения с CDN. Целых четыре урока отведено такой важной теме, как сетка Bootstrap. Именно благодаря сетке нам и интересны CSS-фреймворки в первую очередь. Также вы найдете несколько уроков по использованию популярных компонентов, которые Boostrap предлагает в большом количестве. И, конечно же, вы узнаете о вариантах кастомизации Bootstrap, т.е. изменение оформления под себя, под потребности имеющегося дизайна.

  • Урок 1. Введение

В первом уроке курса рассмотрены организационные моменты, структура и содержание курса. Из урока вы узнаете об основных источниках документации, о преимуществах Bootstrap и о том, что такое CSS фреймворк.

  • Урок 2. Подключение Bootstrap

Прежде чем использовать Bootstrap – его нужно подключить. И в данном уроке вы найдете различные варианты подключения фреймворка. Среди прочего Вы узнаете о том, что такое CDN и почему стоит обратить внимание на подключение ресурсов CDN.

  • Урок 3. Теория сетки Bootstrap

В данном уроке на простых примерах рассмотрена теория сетки Bootstrap. Фактически любой макет сайта, любую конкретную страницу можно представить в виде сетки. Поэтому, понимание принципов работы сетки Bootstrap, понимание теории сетки – важный момент в изучении фреймворка.

  • Уроки 4. Сетка Bootstrap. Часть 1

Следующие четыре урока будут отведены практическим вопросам работы с сеткой Bootstrap 4. Из предлагаемых уроков Вы узнаете об основных классах сетки, которые позволяют манипулировать блоками и по-разному показывать их в зависимости от ширины экрана. Вы увидите, как можно разделить страницу на нужное количество колонок и получить типовую разметку двух- или трехколоночного сайта. Вы узнаете о классах выравнивания и центрирования элементов, а также о классах изменения порядка блоков. Отдельное внимание уделяется вопросу вкладывания сетки внутрь колонок. Как уже отмечалось, сетка Bootstrap является ключевым элементом фреймворка, поэтому важно научиться применять ее на практике.

  • Уроки 5. Сетка Bootstrap. Часть 2

Следующие четыре урока будут отведены практическим вопросам работы с сеткой Bootstrap 4. Из предлагаемых уроков Вы узнаете об основных классах сетки, которые позволяют манипулировать блоками и по-разному показывать их в зависимости от ширины экрана. Вы увидите, как можно разделить страницу на нужное количество колонок и получить типовую разметку двух- или трехколоночного сайта. Вы узнаете о классах выравнивания и центрирования элементов, а также о классах изменения порядка блоков. Отдельное внимание уделяется вопросу вкладывания сетки внутрь колонок. Как уже отмечалось, сетка Bootstrap является ключевым элементом фреймворка, поэтому важно научиться применять ее на практике.

  • Уроки 6. Сетка Bootstrap. Часть 3

Следующие четыре урока будут отведены практическим вопросам работы с сеткой Bootstrap 4. Из предлагаемых уроков Вы узнаете об основных классах сетки, которые позволяют манипулировать блоками и по-разному показывать их в зависимости от ширины экрана. Вы увидите, как можно разделить страницу на нужное количество колонок и получить типовую разметку двух- или трехколоночного сайта. Вы узнаете о классах выравнивания и центрирования элементов, а также о классах изменения порядка блоков. Отдельное внимание уделяется вопросу вкладывания сетки внутрь колонок. Как уже отмечалось, сетка Bootstrap является ключевым элементом фреймворка, поэтому важно научиться применять ее на практике.

  • Уроки 7. Сетка Bootstrap. Часть 4
Топ-пост этого месяца:  Как очистить кэш OpenCart

Следующие четыре урока будут отведены практическим вопросам работы с сеткой Bootstrap 4. Из предлагаемых уроков Вы узнаете об основных классах сетки, которые позволяют манипулировать блоками и по-разному показывать их в зависимости от ширины экрана. Вы увидите, как можно разделить страницу на нужное количество колонок и получить типовую разметку двух- или трехколоночного сайта. Вы узнаете о классах выравнивания и центрирования элементов, а также о классах изменения порядка блоков. Отдельное внимание уделяется вопросу вкладывания сетки внутрь колонок. Как уже отмечалось, сетка Bootstrap является ключевым элементом фреймворка, поэтому важно научиться применять ее на практике.

  • Урок 8. Классы-помощники Bootstrap

Кроме своей знаменитой сетки, Bootstrap предлагает множество так называемых классов-помощников, позволяющих решать различные задачи. К таким классам можно отнести clearfix, который поможет сбросить обтекание элементов, классы цвета и вариантов отображения элементов, классы, позволяющие быстро добавить стандартные внутренние или внешние отступы, классы, управляющие тенью, границами, позиционированием элементов и т.д. Некоторые из предлагаемых классов рассмотрены в данном видео.

  • Урок 9. Элементы контента. Изображения и таблицы

Одними из ключевых элементов раздела Элементы контента в документации Bootstrap можно считать изображения и таблицы. И действительно, на практике с этими элементами верстки Вы сталкиваетесь достаточно часто. Bootstrap 4 предлагает набор классов для красивого оформления таблиц и изображений. Например, добавив к таблице всего-навсего один класс, Вы получите симпатичную таблицу, которая будет отлично выглядеть на странице сайта.

  • Урок 10. Компонент Alert

В этом видео показана работа с одним из первых компонентов Bootstrap – это компонент Alert. Данный компонент отлично подходит для показа различных системных сообщений на веб-странице.

  • Урок 11. Компонент Modal

Компонент Modal, рассмотренный в данном видео, поможет Вам быстро создавать красивые модальные окна. При этом Вам не нужно будет подключать сторонние плагины типа Lightbox или FancyBox. Достаточно лишь скопировать код предлагаемого компонента из документации Bootstrap и настроить его. Все остальное сделает фреймворк.

  • Урок 12. Кастомизация Bootstrap

Из последнего видео теоретической части курса Вы узнаете о возможностях кастомизации Bootstrap. Если Вы подключите фреймворк и будете использовать лишь его стили и классы, то в итоге получите хоть и красивое, но стандартное оформление, которое сделает Ваш сайт похожим на тысячи других сайтов, использующих Bootstrap. Из этого урока Вы узнаете, как можно избежать этого и сделать уникальное оформление, которое будет соответствовать уникальному дизайну макета.

  • Часть 2. Верстка шаблона сайта


ЦЕЛИ И ЗАДАЧИ ДАННОГО РАЗДЕЛА

Во второй части видеокурса вы перейдете от теории к практике работы с Bootstrap 4. И здесь вы увидите верстку шаблона компании по веб-дизайну. В качестве шаблона будет взят бесплатный макет PSD. Макет представляет собой лендинговую страницу, т.е. страницу, состоящую из нескольких секций, в каждой из которых выводятся свои данные. Здесь есть все типовые элементы, которые часто можно встретить на практике: шапка, занимающая весь первый экран сайта, адаптивное меню, галерея, вкладки, слайдер, видео. Полученная в итоге верстка будет, конечно же, адаптивной.

  • Урок 1. Анализ макета

Прежде чем приступать к верстке макета, необходимо с ним познакомиться и проанализировать: выделить основные используемые шрифты, размеры шрифтов, основные цвета, отступы и т.д. Это и будет сделано в видео. Также из видео Вы узнаете, как можно получить картинки из макета, чтобы их можно было использовать при верстке шаблона.

  • Урок 2. Browsersync

Из этого видео Вы узнаете, как можно немного ускорить процесс верстки и сделать этот процесс более удобным и приятным. Благодаря утилите Browsersync Вы сможете забыть о необходимости перезагружать браузер каждый раз после обновления кода, за Вас это сделает Browsersync. В видео показывается, как установить и запустить Browsersync.

  • Урок 3. Общие стили макета

Подготовительный процесс завершен в предыдущих двух уроках и можно приступать к непосредственной верстке шаблона. В видеоуроке будет показан процесс подключения Bootstrap к шаблону, а также написание общих стилей макета.

  • Урок 4. Разметка блока Header

Посмотрев данное видео, Вы сможете приступить к верстке первой секции макета – шапке будущего сайта. В видеоуроке показано написание разметки секции Header. Здесь будут реализованы такие элементы, как: логотип сайта, основное меню и блок с текстовой информацией. Для реализации блока меню и логотипа можно использовать компонент Navbar фреймворка Bootstrap.

  • Урок 5. Оформление блока Header

В предыдущем видео была показана разметка шапки сайта. Однако, мало набросать лишь HTML-код. Фреймворк не избавляет полностью от написания стилей, он лишь предоставляет типовое оформление. Если же необходимо получить уникальный дизайн и верстку, то необходимо писать собственные правила CSS. Но это будет совсем немного стилей, основу все же предоставляет Bootstrap. В этом видео показано оформление блока Header с помощью пользовательских стилей CSS.

  • Урок 6. Адаптивность блока Header

В этом видео будет показано использование медиа-запросов для реализации адаптивности шапки сайта. Хотя Bootstrap и предполагает из коробки адаптивный сайт, но все же некоторые из элементов сайта иногда придется дополнительно изменять при помощи медиа-запросов: например, сделать меньше шрифт заголовка на определенной ширине экрана, скрыть тот или иной элемент сайта, изменить вариант отображения элемента и т.д. Из видео Вы узнаете, как это можно сделать на примере адаптивности секции Header.

  • Урок 7. Разметка секции Watch

В этом видео показана разметка в коде HTML следующей секции лендинга – секции с часами. В уроке используются возможности сетки Bootstrap, а также компонент вкладок – Tabs, благодаря которому можно компактно разместить на небольшом пространстве страницы достаточно большой объем данных.

  • Урок 8. Оформление секции Watch

В этом видео Вы увидите написание стилей CSS для оформления секции с часами, верстка которой была показана в предыдущем видео.

  • Урок 9. Адаптивность секции Watch

Из данного видео Вы узнаете, как можно адаптировать компонент вкладок, чтобы он красиво выглядел на различных разрешениях экрана.

  • Урок 10. Разметка секции Progress

В данном видео будет показана разметка следующей секции сайта – секции Progress. Это одна из самых простых секций шаблона и из новых элементов здесь есть иконки, для вывода которых можно использовать иконочный шрифт Font Awesome.

  • Урок 11. Оформление секции Progress

В данном видео Вы увидите написание стилей для оформления секции Progress.

  • Урок 12. Верстка и оформление секции Let’s Grow

В этом видео Вы увидите верстку и оформление еще одной достаточно простой секции – Let’s Grow. Данная секция представляет из себя описание некоторой рубрики сайта с кнопкой перехода к ее статьям.

  • Урок 13. Верстка секции Design

В этом видео Вы найдете верстку очередной секции – Design. Данная секция интересна нам тем, что в ней представлены градиентные иконки и видео. При этом для запуска видео предполагается нестандартная кнопка. В принципе, вполне нормальным решением было бы просто вставить видео с YouTube. Но в уроке показан вариант работы с API YouTube и работа с элементами управления плеером.

  • Урок 14. Оформление секции Design

В этом видео реализуются стили оформления секции Design. В частности, из видео Вы узнаете, как можно наложить градиент на иконочный шрифт или текст.

  • Урок 15. Верстка секции Work

Верстку очередной секции Вы сможете увидеть в данном видео. Здесь также имеются вкладки, для которых можно использовать компонент Bootstrap. Кроме этого, в данной секции имеются галереи работ. Работы представлены в виде сетки, верстка которой и показана в уроке. Для показа больших изображений можно будет использовать плагин типа Lightbox.

  • Урок 16. Оформление секции Work

Данное видео показывает написание стилей оформления секции портфолио. Как обычно, много стилей писать не нужно, поскольку основные стили написаны уже во фреймворке Bootstrap.

  • Урок 17. Верстка секции Reviews

Очередная секция и очередное видео, в котором показана верстка секции Отзывы клиентов. На макете здесь предполагается один отзыв. Однако, на практике отзывы принято делать в виде слайдера (карусели). И здесь Вам не нужно искать сторонний плагин слайдера, поскольку Bootstrap предлагает компонент карусели. В уроке Вы увидите, как добавить карусель Бутстрапа в новую секцию.

  • Урок 18. Оформление секции Reviews

В данном уроке будут написаны стили для оформления секции с отзывами клиентов.

  • Урок 19. Адаптивность секции Reviews

В этом видео показано написание нескольких медиа-запросов для того, чтобы секция отзывов клиентов нормально адаптировалась к различным экранам. В частности, на небольших экранах фото клиента будет скрываться и будет виден только текст отзыва.

  • Урок 20. Верстка секции Form

Последняя секция макета, верстка которой показана в данном видео, — секция с формой. Bootstrap 4 предлагает различные варианты оформления форм, остается лишь выбрать наиболее подходящий и использовать его в верстке.

  • Урок 21. Оформление секции Form

В этом видео показано оформление секции с формой с помощью кастомных стилей CSS.

  • Урок 22. Верстка футера

Как и в случае с шапкой сайта, которая присутствует практически на каждом сайте, так и футер – он есть практически на любом макете. В этом видео показана верстка футера сайта.

  • Урок 23. Оформление футера

В данном видео будет показано оформление футера и его адаптирование под экраны различных устройств.

  • Урок 24. Кнопка вверх

Полезным элементом любого лендинга является кнопка вверх. Особенно актуальна она для смартфонов, поскольку позволяет быстро переместится с любой позиции страницы на верх сайта, к его шапке. Это избавляет пользователя от длительного листания страницы вверх. В этом видео показан вариант реализации такой кнопки на сайте.

  • Урок 25. Прелоадер для сайта

Интересным и полезным элементом на сайте может быть прелоадер. Вы не раз могли замечать картину, когда при загрузке сайта он может загружаться рывками и при загрузке скриптов или картинок контент будет перескакивать с одной позиции на другую. Визуально это смотрится не очень привлекательно. Чтобы сгладить этот негативный эффект, в частности, можно использовать прелоадер, который будет показываться до полной загрузки страницы, а затем плавно скрыт. В этом видео показана реализация такого прелоадера. В качестве самого прелоадера использован новый компонент последней версии Bootstrap – Spinner.

  • Урок 26. Верстка страницы статей

Макет PSD предполагает верстку лишь одной – главной страницы. Однако, зачастую требуется верстка не только главной страницы, но и как минимум одной внутренней страницы. В этом видео будет показана верстка страницы блога, где выводится лента статей. Для данной страницы, среди прочего, будет использован компонент Bootstrap Pagination для реализации постраничной навигации.

  • Урок 27. Оформление страницы статей

В этом видео будут написаны стили для оформления страницы блога с лентой статей.

  • Урок 28. Шаблон отдельной статьи

В этом видео показана верстка последнего шаблона сайта – это шаблон отдельной статьи. За основу данного шаблона можно взять страницу блога, сверстанную в предыдущих двух уроках.

  • Часть 3. Создание темы для WordPress

ЦЕЛИ И ЗАДАЧИ ДАННОГО РАЗДЕЛА

Еще лет 5 назад под версткой понималось прежде всего именно верстка шаблона. Дальше за дело уже брался программист, задачей которого была посадка шаблона на CMS. Сегодня реалии изменились и часто от верстальщика требуются навыки работы с популярными CMS и знание того, как посадить верстку на движок. Проще говоря, требуется умение создать работающий сайт. Последняя часть курса поможет восполнить этот пробел. Вы узнаете, как можно из шаблона, из верстки создать полноценную тему для WordPress, используя которую можно получить готовый работающий сайт.

  • Урок 1. Установка WordPress

В этом видео будет показана установка WordPress на локальный сервер Open Server. Из урока Вы узнаете, как установить WordPress, какой локальный сервер лучше использовать и т.д. По итогу урока будет получен стандартный сайт под управлением CMS WordPress для которого и будет создаваться новая тема.

  • Урок 2. Стартовая тема Underscores

Из этого урока Вы получите общее представление о структуре темы WordPress и о шаблонах, которые являются обязательными для любой темы. Также в уроке будет показано, как упростить процесс создания темы с помощью стартовой темы Underscores.

  • Урок 3. Перенос шаблона в структуру темы

В этом уроке Вы узнаете, как перенести верстку в структуру темы, чтобы при обращении к главной странице сайта Вы увидели ту же картину, что и при просмотре сверстанной страницы. В уроке показано, как подключить скрипты, стили и шрифты к создаваемой теме. Также Вы познакомитесь с понятием хуков в WordPress и с первыми функциями этой CMS.

  • Урок 4. Возможности плагина ACF

При разработке тем для WordPress так или иначе часто приходится обращаться к плагинам, которых для WordPress написано огромное количество. С помощью плагинов можно быстро решить какую-либо задачу и получить функционал, которого нет из коробки в WordPress. Одним из наиболее популярных плагинов при создании тем является плагин ACF – Advanced Custom Fields. Из этого видео Вы можете получить представление об этом плагине и о том, как его можно использовать.

  • Урок 5. Логотип сайта

Из этого видео Вы узнаете о том, как можно динамически управлять логотипом сайта: как добавить возможность управления в тему, как загрузить логотип и как вывести его в коде темы.

  • Урок 6. Меню в шапке
Топ-пост этого месяца:  Классный дизайн и верстка сайта с нуля. Часть I.

Одной из замечательных и удобных вещей в WordPress, среди прочего, является меню. WordPress позволяет регистрировать различные меню и выводить их в том или ином месте сайта. Управлять созданными меню в админке – очень просто и удобно. Администратор сайта может добавить в меню абсолютно любой материал: рубрику, страницу, статью или даже произвольную ссылку. Из видео Вы узнаете, как создать меню в WordPress.

  • Урок 7. Вывод произвольных полей шапки

В этом видео будет показана работа с плагином Advanced Custom Fields в коде. В частности, для текстовых данных шапки сайта будут созданы произвольные поля, значения которых будут получены и подставлены в соответствующие места шаблона.

  • Урок 8. Шаблоны Header и Footer

Практически на любом многостраничном сайте так или иначе присутствуют повторяющиеся части шаблона. Зачастую это шапка, подвал сайта и сайдбар. Из этого видео Вы узнаете, как вынести повторяющиеся части темы в специальные шаблоны и какие функции можно использовать для подключения этих шаблонов.

  • Урок 9. Получение контента секции Watch

В этом уроке объясняется работа с одной из ключевых функций WordPress – get_posts. Используя данную функцию можно получить из базы данных сайта нужные статьи. Большинство секций сайта – это информация той или иной рубрики: ее названием, описание и ее статьи. Поэтому функция get_posts будет весьма полезна для получения нужных данных. Нюансы работы данной функции разобраны в этом видео.

  • Урок 10. Вывод контента секции Watch

Из предлагаемого урока Вы узнаете, как можно вывести данные, полученные функцией get_posts. Для этого потребуются минимальные знания PHP. Используя конструкции циклов можно перебрать массив данных и вывести эти данные в нужном формате.

  • Урок 11. Реализация секции Progress

Данный урок посвящен реализации следующей секции, в которую будут выведены записи рубрики о достижениях компании. Поскольку для каждой секции фактически будет выполняться как минимум один дополнительный запрос к базе данных – логично, что это будет вызывать дополнительную нагрузку на сервер. Однако, в одном из следующих уроков будет показан вариант решения данной проблемы с помощью кэширования.

  • Урок 12. Реализация секции Lets

Из этого видео Вы узнаете, как в WordPress получить и вывести не только данные отдельной категории (наименование, описание, дополнительные произвольные поля), но и как получить ссылку на посты указанной рубрики.

  • Урок 13. Реализация секции Design

Одна из наиболее интересных секций как в плане верстки, так и в плане ее реализации в коде темы – это секция рубрики Design. Здесь выводится видеоплеер и, соответственно, для секции должно быть установлено какое-то видео, которое будет выводиться на сайт. Из данного урока Вы узнаете, как можно реализовать эту задачу.

  • Урок 14. Реализация секции галерей

Еще одной интересной секцией создаваемой темы является секция портфолио, в которой последние работы представлены в виде сетки изображений – галереи. В этом видео Вы увидите, как можно реализовать данную секцию и выводить галереи, не используя при этом дополнительных плагинов.

  • Урок 15. Произвольные типы записей

WordPress предлагает по умолчанию два основных типа записей: посты и страницы. Однако, для многих проектов их может быть недостаточно. Это не проблема, мы можем воспользоваться возможностью добавлять произвольные типы записей. Что это такое и как с ними работать – Вы и узнаете, посмотрев данное видео.

  • Урок 16. Секция Отзывы клиентов

Из данного урока Вы узнаете один из возможных вариантов реализации секции отзывов клиентов. Для этого будут использованы возможности произвольных типов записей, которые были рассмотрены в предыдущем видео.

  • Уроки 17. Плагин Contact Form 7. Часть 1

Этот урок будет посвящен работе с еще одним популярнейшим плагином – Contact Form 7. Данный плагин позволяет легко создавать формы для страниц сайта и с помощью него можно реализовать форму в последней секции макета. В этих двух уроках Вы увидите нюансы работы с плагином Contact Form 7.

  • Уроки 18. Плагин Contact Form 7. Часть 2


Этот урок будет посвящен работе с еще одним популярнейшим плагином – Contact Form 7. Данный плагин позволяет легко создавать формы для страниц сайта и с помощью него можно реализовать форму в последней секции макета. В этих двух уроках Вы увидите нюансы работы с плагином Contact Form 7.

  • Урок 19. Виджеты. Кэширование

Посмотрев это видео, Вы узнаете о такой полезной возможности WordPress, как использование виджетов. Виджеты часто используются для вывода некоторых блоков в повторяющихся частях сайта: сайдбаре или футере. Для футера темы также можно использовать виджеты. Из урока Вы узнаете, как это можно сделать. Также в уроке показана работа с одним из плагинов кэширования, который позволит снизить нагрузку на сервер и ускорить работу сайта.

  • Урок 20. Шаблон рубрик

Из данного видеоурока Вы узнаете, как можно создать шаблон рубрик в теме и как вывести список статей запрошенной рубрики. Также Вы увидите использование стандартного цикла WordPress в этом шаблоне.

  • Урок 21. Постраничная навигация

В этом видео показана работа с функцией постраничной навигации WordPress, а также будут написаны дополнительные стили оформления для полученной пагинации.

  • Урок 22. Шаблоны страниц и записей

В данном видео будут созданы еще несколько шаблонов темы, в частности, это шаблоны постоянных страниц и одиночных записей. За основу можно взять шаблон рубрик, внеся в новые шаблоны необходимые правки.

Адаптивная вёрстка Bootstrap

Что такое Бутстрап и как его использовать для веб-верстки?

Bootstrap представляет собой js и css-фреймворк с уже написанным кодом. Целью применения этого фреймворка является существенное упрощение процедуры веб-разработки. Bootstrap – это бесплатный инструмент, который позволяет редактировать исходный код в соответствии с задачами разработчика. Данное обстоятельство является одним из главных преимуществ Bootstrap.

Установка Bootstrap

Для подключения файлов фреймворка к html-файлу необходимо скачать нужный фреймворк на сайте getbootstrap.com и скопировать его содержимое в проект. После этого разработчик должен подключить те файлы, которые он планирует использовать. Наиболее востребованными файлами в bootstrap верстке считаются:

  • bootstrap.css/ bootstrap.min.css. Данные файлы являются несжатой и сжатой версией кода на CSS. К проекту, который уже работает, обычно подключается bootstrap.min.css. За счет использования сжатого файла обеспечивается улучшение скорости загрузки. Если разработчику нужно просмотреть код в файле, то ему стоит подключить bootstrap.css.
  • bootstrap.js/ bootstrap.min.js. Такие версии файла, но со скриптами.
  • Файлы glyphicons в папке Fonts. В этой папке содержится более 200 иконок шрифта.

Перечисленные файлы являются типичным набором фреймворка. Однако у разработчика есть гораздо больше возможностей. Он может изменять фреймворки под свои требования.

Русскоязычная документация

На сайте getbootstrap.com вся информация указана на английском языке. Из-за этого у некоторых русскоязычных разработчиков могут возникнуть проблемы с пониманием доступных возможностей фреймворка. Русскоязычную справку по Bootstrap можно найти в разделе Getting Started. В самом низу этого раздела будет указана ссылка на переводы, в том числе и на русский. Стоит заметить, что на данный момент еще не вся техническая документация переведена на русский язык (около 75%).

Сетка Бутстрапа

Основным элементом Бутстрапа считается адаптивная сетка. Именно она обуславливает ценность данного фреймворка. Сетка позволяет оперативно создавать адаптивные шаблоны. Что самое главное, разработчикам не потребуется знание и понимание медиа запросов. Верстка сайта Bootstrap берет на себя ответственность за реализацию адаптивности.

Особенности работы с сеткой

Для понимания того, как работать с адаптивной сеткой, необходимо представить ее в виде html-таблицы с рядами и ячейками. Существует два варианта сетки:

  • полностью резиновая;
  • с определенной максимальной шириной.

Во втором случае используется класс container, который позволяет присвоить общем блоку необходимую ширину в пикселях. Этот блок не будет увеличиваться больше заданной величины.

В сетке Бутстрап также используется container-fluid. Наличие этого класса свидетельствует о том, что сетка является резиновой и не имеет каких-либо ограничений по размеру. Следовательно, пользователи смогут увидеть сайт во всю ширину, вне зависимости от размера монитора.

В container принято размещать ряды сетки. Это означает, что в «контейнер» помещаются все блоки, стоящие в одной строке. Для примера работы «контейнера» можно взять стандартный шаблон сайта:

В этом случае есть 3 колонки – шапка, основной контент и левая колонка, а также футер. Следовательно, для создания подобного сайта будет использоваться такая разметка:

Bootstrap — CSS классы для изображений

Статья, в которой познакомимся с классами фреймворка Bootstrap 3 и 4 для оформления изображений.

Что такое адаптивное изображение?

Адаптивное изображение — это изображение, которое подстраивается под ширину элемента, в котором оно расположено.

Т.е. оно отвечает следующим условиям:

  • если ширина изображения меньше ширины элемента, в котором оно расположено, то размеры этого изображения не изменяются.
  • если ширина изображения больше ширины элемента, в котором оно расположено, то ширина изображения приравнивается к доступной ширине родительского элемента. При этом высота данного изображения уменьшается пропорционально относительно его ширины.

Как сделать изображение адаптивным

Придание изображению адаптивности осуществляется:

  • в Bootstrap 3 посредством добавления к тегу img класса .img-responsive ;
  • в Bootstrap 4 посредством добавления к тегу img класса .img-fluid .

Эти классы применяет к изображению CSS свойства max-width:100% и height:auto .

Если необходимо сделать адаптивными сразу все изображения, расположенные на странице или в некотором блоке, то для этого необходимо воспользоваться одним из нижепредставленных правил CSS:

Данное правило необходимо добавить в CSS файл, который должен быть подключен после файла bootstrap.css .

Как изменить форму изображения

В Bootstrap 3 и 4 можно с помощью соответствующих классов сделать изображение с закругленными углами (Bootstrap 3 — img-rounded , Bootstrap 4 — rounded ), заключить его в рамку ( img-thumbnail ) или придать ему форму круга (Bootstrap 3 — img-circle , Bootstrap 4 — rounded-circle ).

Как изменить расположение изображения

Изменить расположение изображения в Bootstrap 3 можно с помощью вспомогательных классов float ( .pull-left и .pull-right ), класса .center-block и классов для выравнивания текста ( .text-left , .text-center и .text-right ).

В Bootstrap 4 для выравния элементов используются следующие классы: float-left , float-right , mx-auto и классы для выравнивания текста ( .text-left , .text-center и .text-right ).

Например, для того чтобы расположить изображение по левому краю к нему необходимо добавить класс .pull-left :

Например, для того чтобы расположить изображение по правому краю к нему необходимо добавить класс .pull-right :

Например, для того чтобы выровнять изображение по центру к нему необходимо добавить класс .center-block или поместить его в контейнер div с классом .text-center :

Примеры оформления изображений

Рассмотрим несколько вариантов оформления изображений на сайте.

Вариант 1. Оформление изображения с помощью рамки, представляющей собой окно браузера в Mac OS (с тремя элементами управления слева).

Вариант 2. Рамка для изображения, имеющая вид окна браузера в ОС Windows (с тремя элементами управления справа).

Вариант 3. Изображение с рамкой и поясняющей надписью «скриншот».

Вариант 4. Изображение с белой рамкой и тенью.

Что то типо такого:

Смысл данной технологии (Client Hints) заключается в том, чтобы послать серверу в составе запросов для получения изображений дополнительную информацию (DPR, Width, Viewport-Width — т.е. плотность пикселей экрана, его ширину и ширину viewport). Добавляется Client Hints в браузер легко посредством вставки в раздел head следующего тега:
После этого браузер в заголовочную информацию запроса для каждой картинки будет включать эти данные. Но это действие пока делает только браузер Chrome.

Самое сложное — это сервер. Получив такой запрос на сервере, вы должны его как-то обработать. Иначе в Client Hints не будет смысла. Т.е. необходимо написать серверный скрипт, который например, будет искать подходящую картинку по этим параметрам, и отдавать её клиенту (браузеру). А если картинки с нужными параметрами нет, то, например, её генерировать из исходного файла.

Т.е. как-то так. Жертвуя одним (процессорным временем и дисковым пространством) — вы получаете взамен что-то другое, в данном случае более быструю загрузку изображений (т.к. они будут отдаваться сервером в более оптимальном разрешении).

Но можно получить и обратный эффект (более долгую отдачу страниц), например, если вы используете виртуальный хостинг и процессор «слабенький» (или нагружен сильно).

Урок 10. Фреймворк Bootstrap 4. Адаптивные изображения и видео в Bootstrap

Предлагаем вашему вниманию курс «Фреймворк Bootstrap 4». Как следует из названия, курс будет посвящен изучению одного из наиболее популярных CSS фреймворков – Bootstrap. На момент записи курса актуальна версия Bootstrap v.4.0.0-alpha.6, именно с этой версией мы и будем работать здесь.

Основной фишкой курса будет являться тот факт, что кроме изучения актуальной версии фреймворка, мы значительное внимание будем уделять также и предыдущей, третьей версии Bootstrap. В частности, при изучении сетки мы будем сравнивать обе версии Bootstrap, чтобы увидеть, насколько удобнее в работе Bootstrap 4.

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

  • варианты установки Bootstrap и какой из вариантов в каком случае выбрать;
  • основные отличия Bootstrap 3 от Bootstrap 4;
  • сетка Bootstrap 4 и ее отличия от сетки предыдущей версии;
  • новые классы сетки Bootstrap;
  • работа с компонентами;
  • варианты кастомизации Bootstrap;
  • и т.д…

Итак, жду вас в новой серии уроков, посвященных замечательному CSS фреймворку – Bootstrap 4.

Топ-пост этого месяца:  Как заработать на блоге — продажа ссылок с сайта в биржах Блогун, J2J, GoGetLinks, RotaPost

Урок 0. Курс по Фреймворк Bootstrap 4

Урок 1. Фреймворк Bootstrap 4. Что такое Bootstrap. Отличия Bootstrap 3 от Bootstrap 4

От автора: этим уроком мы открываем небольшой цикл по изучению CSS фреймворка Bootstrap. В уроке мы с вами ответим на вопрос – что такое Bootstrap, рассмотрим преимущества использования фреймворка по сравнению с нативной версткой, а также поговорим о некоторых отличиях Bootstrap 4 от Bootstrap 3.

В данном курсе, к слову, мы будем работать с последней на момент записи версией фреймворка Bootstrap 4.

Урок 2. Фреймворк Bootstrap 4. Установка Bootstrap 4. Варианты установки

От автора: в этом уроке мы установим фреймворк Bootstrap. При этом мы установим сразу две его версии: Bootstrap 3 и Bootstrap 4. Предыдущая версия фреймворка нам пригодится для сравнения старой и новой версии в процессе изучения сетки Bootstrap.

В уроке мы рассмотрим два варианта установки, а также проанализируем стартовый шаблон Bootstrap.

Урок 3. Фреймворк Bootstrap 4. Сетка Bootstrap 4. Часть 1

От автора: в этом уроке мы приступим к изучению ключевой возможности любого CSS фреймворка вообще и фреймворка Bootstrap 4 в частности – речь идет о сетке. Именно сетка Bootstrap позволяет нам создавать ровные и аккуратные макеты, которые уже изначально являются адаптивными и отлично смотрятся на любом устройстве, будь то десктоп, планшет или смартфон. В этом уроке мы рассмотрим теорию сеток CSS фреймворков.

Урок 4. Фреймворк Bootstrap 4. Сетка Bootstrap 4. Часть 2

От автора: в этом уроке мы продолжим изучение сетки Bootstrap 4 и работу с этим замечательным инструментом. В уроке мы рассмотрим опции сетки, понятие контрольных точек (breakpoints), а также рассмотрим ключевые классы сетки. Практически все они работают как в четвертой, так и в третьей версии фреймворка, поэтому урок будет полезен, если вы хотите изучить обе версии Bootstrap.

Урок 5. Фреймворк Bootstrap 4. Сетка Bootstrap. Часть 3. Колонки одной ширины

От автора: в этом уроке мы продолжим изучение сетки Bootstrap и работу с этим замечательным инструментом. В уроке мы познакомимся с новой возможностью в Bootstrap – создание колонок одинаковой ширины. Этой возможности порой недоставало в предыдущей версии Bootstrap.

Урок 6. Фреймворк Bootstrap 4. Сетка Bootstrap. Часть 4. Выравнивание

От автора: в этом уроке мы продолжим изучение сетки Bootstrap и работу с этим замечательным инструментом. В уроке мы познакомимся с новыми классами Bootstrap 4, благодаря которым мы легко можем выравнивать блоки относительно горизонтальной или вертикальной оси. Например, используя лишь два класса, мы сможем быстро решить задачу центрирования элемента как по горизонтали, так и по вертикали.

Урок 7. Фреймворк Bootstrap 4. Сетка Bootstrap. Часть 5. Порядок колонок

От автора: в этом уроке мы продолжим изучение сетки Bootstrap и работу с этим замечательным инструментом. В уроке мы познакомимся с классами Bootstrap 4, используя которые, мы сможем изменять порядок колонок. Например, классической задачей может быть изменение порядка сайдбара и контента на мобильной версии сайта.

Урок 8. Фреймворк Bootstrap 4. Сетка Bootstrap. Часть 6. Responsive utilities

От автора: в этом уроке мы продолжим изучение сетки Bootstrap и работу с этим замечательным инструментом. В уроке мы познакомимся с набором классов, которые позволяют скрывать или показывать элементы в зависимости от используемого брейкпойнта. Это очень полезная возможность, которую предлагает нам набор классов responsive utilities.

Урок 9. Фреймворк Bootstrap 4. Медиа объект Bootstrap

От автора: в этом уроке мы познакомимся с примерами использования компонента медиа объект (media object) в Bootstrap. Данный компонент представляет из себя небольшое изображение в левой части строки и некоторый текст в правой части. Соответственно, медиа объект хорошо подойдет для реализации таких вещей, как комментарии, например.

Урок 10. Фреймворк Bootstrap 4. Адаптивные изображения и видео в Bootstrap

От автора: В этом уроке мы узнаем, как реализовать адаптивность изображений и видео в Bootstrap 4. Благодаря всего нескольким классам мы с легкостью получим адаптивные изображения и видео в Bootstrap.

Урок 11. Фреймворк Bootstrap 4. Таблицы в Bootstrap

От автора: в этом уроке мы поработаем с таблицами в Bootstrap. По умолчанию таблицы без классов не оформлены и выглядят не очень презентабельно. Однако, стоит добавить таблице всего-навсего один класс table, как таблица преобразится и будет выглядеть достаточно интересно. Также Bootstrap предлагает ряд дополнительных классов, позволяющих оформлять и украшать таблицы. Кроме того, мы рассмотрим новый класс Bootstrap 4, который позволят реализовать симпатичную темную таблицу.

Урок 12. Фреймворк Bootstrap 4. Кнопки в Bootstrap

От автора: одним из часто используемых на сайте элементов являются кнопки. В Bootstrap 4 кнопки фактически остались теми же, что и в предыдущей версии, но появились и новые возможности. Получить симпатичную кнопку в Bootstrap очень просто – достаточно использовать ключевой класс btn и дополнительный класс для цветового оформления кнопки. При этом добавлять эти классы мы можем не только кнопкам, но и, к примеру, ссылкам. В результате ссылка ничем не будет отличаться от кнопки.

Урок 13. Фреймворк Bootstrap 4. Компонент карточки в Bootstrap

От автора: одним из новых компонентов Bootstrap 4 являются карточки. Это достаточно полезный компонент, который можно использовать для различных сайтов. Например, в интернет-магазине данный компонент можно использовать для карточки товара, который выводится в списке других товаров. В блоге данный компонент идеально подойдет для ленты постов. В этом уроке мы с вами рассмотрим различные варианты работы с компонентом карточка в Bootstrap.

Урок 14. Модальные окна Bootstrap

От автора: данный урок мы посвятим работе с компонентом модального окна в Bootstrap. Благодаря модальным окнам мы можем компактно разместить любые данные нашего сайта, спрятав их изначально и показывая в модальном окне при клике или же по какому-то событию. В уроке мы рассмотрим варианты вызова модального окна при клике и программно.

Урок 15. Кастомизация Bootstrap

От автора: в этом уроке мы рассмотрим два варианта кастомизации Bootstrap. Первый вариант заключается в создании файла темы, который фактически будет переопределять нужные правила Bootstrap. Например, изменение цвета кнопок, радиуса скругления и т.п. Второй способ заключается в изменении переменных исходников Bootstrap и компиляции нового css файла фреймворка из измененных исходников.

Уроки Bootstrap 4

Bootstrap 4 верстка сайта / #1 — Создание адаптивного веб сайта

Видеоурок

Bootstrap 4 это новая и на данный момент последняя версия технологии Бутстрап. Ранее на нашем сайте уже был курс по Bootstrap, в котором были рассмотрены основные классы и свойства этой технологии. Вы можете ознакомиться с этим курсом по этой ссылке .

В этом курсе вы ознакомитесь с полноценной версткой сайта с применением Bootstrap и написанием своих собственных стилей. Сайты, которые пишутся при помощи этой технологии получаются адаптивными, легкими и красивыми.

Bootstrap — библиотека вмещающая в себе набор стилей, классов и скриптов для создания сайтов. В библиотеке можно найти массу шаблонов, использование которых не составит особого труда.

При помощи библиотеки Bootstrap вы можете создавать всплывающие окна, подсказки при наведении, раскрывающиеся меню, табы, метки и многие другие полезные вещи всего за пару строк кода.

Советы по разработке адаптивного дизайна на Bootstrap

С релизом версии 3 , Bootstrap добавил к своей адаптивной базе еще и возможность создания проектов mobile first .

Какие элементы, включенные в CSS Bootstrap , помогают в этом? Давайте рассмотрим несколько вещей и получим некоторое представление о том, как они могут помочь нам в наших проектах.

Определение надлежащих медиа запросов

Bootstrap имеет четко определенные контрольные точки для различных видов устройств, указываемые с помощью медиа запросов CSS .

Ниже приведены основные категории, используемые для различных типов устройств:

  • Сверхмалые устройства ( например, мобильные телефоны ) определяются по умолчанию при разработке « mobile first » концепции Bootstrap . К ним относятся устройства, имеющие ширину экрана меньше, чем 768 пикселей;
  • Малые устройства ( например, планшеты ), определяются с помощью @media (min-width: 768px) and (max-width: 991px) < … >;
  • Средние устройства ( например, мониторы ) имеют ширину экрана меньше, чем 1200 пикселей, но больше, чем 991 пиксель, определяются с помощью @media (min-width: 992px) and (max-width: 1199px) < … >;
  • Большие устройства ( например, широкоформатные мониторы ) с шириной больше, чем 1200 пикселей, определяются с помощью @media (min-width: 1200px) < … >.

Этот вид классификации применяется большинством адаптивных фреймворков.

Подробное рассмотрение системы сеток

Если вы знакомы с системой сеток Bootstrap , вы, возможно, знаете, что для корректной настройки сетки требуется соответствующая HTML -структура. Давайте рассмотрим ее.

Давайте сначала рассмотрим HTML -структуру Bootstrap для установки двух столбцов:

Как показано выше, система сетки Bootstrap начинается с элемента контейнера. Контейнеры определяют, какое пространство должна использовать система сетки. Они могут быть двух типов: .container имеет разную ширину для различных типов устройств, в то время как .container-fluid занимает всю ширину экрана.

С помощью медиа запросов Bootstrap задает для .container разную ширину, в зависимости от размера устройства:

  • Сверхмалые устройства (меньше 768 пикселей): width: auto (или ширина не задается);
  • Малые устройства (больше или равно 768 пикселей): width: 750px ;
  • Средние устройства (больше или равно 992 пикселей): width: 970px ;
  • Более крупные устройства (больше или равно 1200 пикселей): width: 1170px .

Как видно из приведенного выше изображения, .container предотвращает соприкосновение контента внутри элемента с краями окна браузера, используя поле в 15 пикселей с каждой стороны. Это также гарантирует, размещение контейнера по центру с помощью использования значения auto для левого и правого отступов.

Строки являются еще одним важным элементом системы сетки Bootstrap . Прежде чем создавать столбцы, вы можете определить строку, используя класс .row . Вот фрагмент CSS -кода Bootstrap для класса .row :

Как видим, наша строка имеет отрицательное значение правого и левого полей -15 пикселей, чтобы края строки касались края элемента контейнера. Это действует как оболочка для столбцов, куда вы можете добавить до 12 столбцов:

Строка Bootstrap

Вы, возможно, заметили, что поля строки работают с точностью до наоборот с полями контейнера. Если мы внимательнее изучим столбцы, то сможем понять, для чего это необходимо.

Вот фрагмент CSS -кода Bootstrap для класса .col-xs-6 :

Как видите, к столбцам применяются левое и правое поля в 15 пикселей, в результате чего получается что-то похожее на приведенный ниже рисунок:

Благодаря отрицательным полям строк, столбцы касаются края строк и края контейнера. Но поля столбцов обеспечивают, чтобы контент отступал от края контейнера на те же 15 пикселей.

Контейнеры используются и для других целей, не только для системы сетки, чтобы обеспечить отступ контента от края окна браузера на 15 пикселей ( при использовании .container-fluid ). Строки имеют отрицательные поля, чтобы нивелировать влияние полей контейнера.

Если вы хотите создать собственный фреймворк, вы, возможно, захотите рассмотреть использование метода поля / отступы.

Определение правильной ширины столбцов

Bootstrap использует проценты ( % ) в качестве единицы для определения ширины столбцов, что помогает создавать адаптивные конструкции. Как было сказано выше, в нем существует 4 различных категории устройств для различных контрольных точек.

Каждая категория имеет свой собственный набор классов для столбцов разных размеров:

  • Сверхмалые устройства используют .col-xs-*;
  • Малые устройства используют .col-sm-*;
  • Средние устройства используют .col-md-*;
  • Большие устройства используют .col-lg-*.

Символ звездочки ( * ) заменяется на число. Например, .col-xs-6 6 раз создает столбец размера .col-xs-1; .col-xs-4 четыре раза создает столбец размера .col-xs-1 и так далее.

По умолчанию, для всех столбцов не задана ширина. Тем не менее, в медиа запросах Bootstrap задает значения ширины для каждого класса столбцов.

Вот фрагмент из CSS -кода Bootstrap для классов столбцов, где звездочками для краткости заменены размеры ( xs , sm , md и т.д.):

Давайте проанализируем этот код. Класс .col-lg-6 будет иметь ширину в 50% на больших устройствах, но для средних, малых и сверхмалых устройств, используется ширина по умолчанию width: auto . Это обеспечивает то, что столбцы преобразуются в общей структуре ( а не бок о бок ) на небольших устройствах.

Адаптивные таблицы

Таблицы, используемые для отображения данных, также адаптивны в Bootstrap .
Для использования стилей таблиц Bootstrap мы используем класс .table , которому соответствует следующий CSS -код:

Применяя ширину в 100%, Bootstrap обеспечивает заполнение таблицами всей ширины родительского элемента. Но есть одна проблема. Таблицы с несколькими столбцами сжимаются на небольших устройствах, и могут не читаться.
Чтобы исправить это, Bootstrap содержит другой класс .table-responsive . Вот его CSS -код:

Эти стили преобразуют столбцы таблицы в горизонтально прокручиваемые на небольших устройствах.

Адаптивные изображения

Большие изображения могут стать проблемой для небольших устройств. Bootstrap использует класс .img , что сделать любое изображение адаптивным:

Комбинация объявлений max-width: 100% и height: auto обеспечивает то, что изображения пропорционально уменьшаются на небольших устройствах, оставаясь в рамках ограничений родительского элемента на больших устройствах.

Заключение

Эти всего лишь несколько советов по адаптивному веб-дизайну, которые я взял из Bootstrap 3 . Если вы заметили еще что-то в его исходном коде, напишите об этом в комментариях.

Данная публикация представляет собой перевод статьи « Responsive Web Design Tips from Bootstrap’s CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

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