. Дальнейшее использование тега
по причинам, отмеченным в предыдущем разделе, также нежелательно.
Поскольку уж мы начали разбираться в коде своих блогов на Вордпресс — нам не обойти вопрос html форматирования. Конечно, это целая наука. Но мы постараемся разобраться с основами: понять, какие теги используются для форматирования текста — отдельных постов, страниц. Тогда нам удастся вносить в эту структуру осмысленные изменения.
Блочная верстка Вордпресс
Для начала обсудим общий принцип формирования html-кода для Вордпресс. Он носит название «блочная верстка». И, как нетрудно догадаться, это значит, что шаблон состоит из неких блоков. Мы уже видели это на примере шаблона страницы или одной записи ().
Но и если вы откроете код любой статьи блога (например, в режиме html-редактора) — то увидите те же блоки, расположенные один над другим. Вообще, такая верстка является настолько естественной, что многие авторы даже не задумываются, что это именно определенный принцип, а не сложившееся само собой положение вещей.
На самом деле, далеко не все так очевидно. Вот, например, верстка таблицы (можете подробно прочитать о таблицах в отдельной статье):
| Левая ячейка |
Правая ячейка |
Мы видим, что отдельные элементы (ячейки) прописаны одна над другой. А располагаться они будут на одной линии. Вот результат такой простой записи:
| Левая ячейка
| Правая ячейка
|
Обратите внимание, что, если в таблице нет никаких границ — то содержимое ее ячеек выглядит, как обычная запись. Представьте, что мы можем (а мы можем!) задать любую конфигурацию для ячеек, добавить туда не только текст, но и картинки… А теперь попытайтесь представить, каким навороченным будет код такой страницы!
Именно такой принцип верстки применяли раньше (например, для сайтов narod) и иногда применяют до сих пор! Он называется «табличная верстка». Так что, естественность блочной верстки — это удачная находка разработчиков, а не случайность.
Элементы блочной верстки
Но как формируются блоки в блочной верстке? Как браузер отличает, что один элемент закончился и начался следующий? Как он определяет, что у этого элемента такие свойства и стили, а у другого — другие? — Это главные вопросы, которые приводят нас от теории к практике.
Итак, блоки — это фрагменты контента, которые заключены в блочные теги или блочные элементы (контейнеры). Вообще-то, их немало, но мы сегодня познакомимся с самыми важными и часто встречающимися — тегами div, p, h.
У всех блочных элементов есть общие правила форматирования:
- Ширина
такого элемента будет равна ширине родителя. То есть, например, ширина текста поста будет равна всей ширине колонки;
- Высота
определяется количеством контента. То есть, абзац будет выше, если в нем больше текста;
- Новый блок начинается с новой строки
.
Контейнер div
Это базовый тег для любого шаблона Вордпресс. Посмотрите коды своей темы — там будут вызовы функций php:
И некие фрагменты, заключенные в теги — собственно, контейнер:
...
Причем в такой контейнер могут заключаться и php-функции, и другие теги (например, активные ссылки, ограниченные тегами а, заголовки h и т.д.)
Зачем же вообще нужен такой контейнер? — Чтобы присвоить ему отдельный стиль, который будет прописан отдельно (в таблице стилей). Так можно написать довольно лаконичный код, состоящий из отдельных блоков для которых будет назначено название или id стиля. Но сам CSS-код оформления будет подгружаться из другого файла. Свойства стиля дописываются так:
...
или так
...
Посмотрите на код любого из разделов шаблона вашего блога и сразу увидите, о чем я говорю. Для тренировки, попробуйте вычленить отдельные блоки и понять, за отображение каких элементов страницы они отвечают. А потом найдите в таблице стилей название или id стилей, которые относятся к разным блокам.
Контейнер p
Эти теги мы преимущественно встретим в форматировании отдельной записи — стоит только открыть html редактор статьи. Потому, что этот тег содержит в себе контент одного абзаца текста. Как правило, к нему применяют стилевое свойство text-align, которое устанавливает выравшивание:
- text-align: left; — выравнивание по левому краю;
- text-align: right; — выравнивание по правому краю;
- text-align: justify; — выравнивание по ширине;
Полная запись выглядит, например, так:
Все другие стилевые свойства для этого тега заданы в таблице стилей. Там прописаны и шрифты, и их размеры, и цвет текста (ведь он может быть не только черным!)
Контейнер h
Это известный тег, в который заключаются заголовки — h1, h2, h3 и так далее. Стили для каждого типа заголовков уже прописаны в теме блога. Они участвуют и в верстке страниц шаблона, и в форматировании отдельных постов.
Об использовании заголовков разного уровня в тексте уже говорено-переговорено сеошниками всех мастей. Но мы можем применить этот тег и в шаблоне Вордпресс. Например, добавить девиз своего блога на главную страницу — под шапкой, над перечнем постов. Например, так:
Мой блог - самый лучший!
А в следующий раз мы рассмотрим строчные элементы, без которых верстка и форматирование блога, также, невозможны.
Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
В этой статье познакомимся с основными элементами сетки Bootstrap, а также разберём несколько примеров, в которых рассмотрим, как применять эти элементы сетки для разработки макета сайта.
Элементы сетки фреймворков Bootstrap 3 и 4
Основными элементами сетки Bootstrap 3 и 4 являются:
- обёрточные контейнеры
- элементы с классом container или.container-fluid ;
- ряды
- элемент с классом row ;
- адаптивные блоки
- элементы, с одним или несколькими классами col .
Обёрточный контейнер
- это первый элемент, с которого начинается создание макета страницы или некоторой его самостоятельной части. Его основное назначение - это установить ширину разрабатываемого макета
. В Bootstrap 3 и 4 обёрточные контейнеры бывают 2 типов
. Первый (container) предназначен для создания адаптивно-фиксированного
макета, а второй (container-fluid) - для адаптивно-резинового (адаптивно-гибкого)
макета.
Адаптивно-фиксированный макет
характеризуется тем, что он имеет условно постоянную ширину, которая на одних диазонах viewport браузера имеет одно значение, а на дугих - другое.
Например
, в Bootstrap 3 определено 4 диапазона (контрольные точки): xs (по умолчанию), sm (ширина viewport больше 768px), md (ширина viewport больше 992px), lg (ширина viewport больше 1200px).
Обёрточный контейнер
(container) устанавливает макету:
- на дипазоне xs ширину, равную ширине viewport браузера;
- на дипазоне sm , ширину равную 750px;
- на дипазоне md , ширину равную 970px;
- на дипазоне lg , ширину равную 1170px.
Ширина же адаптивно-резинового макета
не имеет фиксированного значения, она всегда равна ширине vieport браузера.
Обёрточный контейнер
кроме установления ширины макету ещё выравнивает его по центру страницы и задаёт внутренние поля (padding) слева и справа по 15px.
Ряд
- это тоже контейнер, но для адаптивных блоков сетки Bootstrap.
В Bootstrap 3 его основная роль - это создать отрицательные отступы (margin) слева и справа
по 15px.
В Boostrap 4
он не только задаёт отрицательные отступы, но и выполняет ещё функцию flex-контейнера
. Т.е. если данный элемент не установить, то адаптивные блоки вообще не будут иметь свойственного им поведения.
Принцип использования элемента "ряд" очень прост, он всегда должен выступать родителем для адаптивных блоков
. Т.е. если какой-то элемент (обёрточный контейнер или адаптивный блок) необходимо разметить с помощью адаптивных блоков
, то перед тем как их создать сначала установите ряд
, а уже в нём эти блоки.
Адаптивный блок
- это элемент, который имеют адаптивную ширину. Т.е. его ширина на одном диапазоне viewport может иметь одно значение, а на другом - другое.
Установка поведения адаптивного блока осуществляется с помощью одного или нескольких классов col .
Синтаксис класса col:
Col-{breakpoint}-{number_columns}
{breakpoint} - это контрольная точка
, которая определяет минимальную ширину viewport, начиная с которой этот класс будет действовать.
В Bootstrap 3
для использования доступно по умолчанию четыре контрольные точки (xs , sm , md и lg), а в Bootstrap 4
- пять контрольных точек (без обозначения, sm , md , lg и xl). Контрольные точки приведены в порядке возрастания ширины viewport, начиная с которой они начинают действовать.
{number_columns} - это ширина адаптивного блока
, которую он будет иметь, начиная с этой контрольной точки
. Указывается ширина адаптивного блока с помощью колонок Bootstrap
(целого числа) по умолчанию от 1 до 12. Данное число определяет, какую часть ширины он будет иметь относительно содержащего его блока
(элемента «ряд»). Минимальная ширина адаптивного блока - это 1/12 (8.3%), а максимальная - 12/12 (100%).
Например
, адаптивный блок с классом col-xs-6 col-sm-4 col-md-3 col-lg-2 будет (Bootstrap 3):
- на устройстве xs иметь ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд»;
- на устройстве sm иметь ширину, равную 4 колонкам Bootstrap, т.е. 33.33% (4/12*100%) относительно ширины элемента «ряд»;
- на устройстве md иметь ширину, равную 3 колонкам Bootstrap, т.е. 25% (3/12*100%) относительно ширины элемента «ряд»;
- на устройстве lg иметь ширину, равную 2 колонкам Bootstrap, т.е. 16.67% (2/12*100%) относительно ширины элемента «ряд».
Если же какую-то контрольную точку не указать
, то действие этого класса распространится и на следующие контрольные точки
. Это связано с тем, что в CSS Bootstrap медиа запросы построены с использованием минимальной ширины.
Например
, адаптивный блок с классом col-xs-8 col-md-6 будет (Bootstrap 3):
- на контрольной точке xs и sm иметь ширину, равную 8 колонкам Bootstrap, т.е. 66.7% (8/12*100%) относительно ширины элемента «ряд»;
- на устройстве md и lg ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд».
По умолчанию адаптивные блоки имеют ширину, равную 12 колонок Bootstrap, т.е. 100%. Если у вас какой-то блок, начиная с xs должен иметь это значение, то его можно не указывать.
Например
, адаптивный блок с классом col-md-6 col-lg-9 будет (Bootstrap 3):
- на контрольной точке xs и sm иметь ширину, равную 12 колонок Bootstrap, т.е. 100% (12/12*100%) относительно ширины элемента «ряд»;
- на устройстве md иметь ширину, равную 6 колонкам Bootstrap, т.е. 50% (6/12*100%) относительно ширины элемента «ряд»;
- на устройстве lg иметь ширину, равную 9 колонкам Bootstrap, т.е. 75% (9/12*100%) относительно ширины элемента «ряд».
Адаптивные блоки в Bootstrap располагаются линиями. В одну линию может поместиться адаптивные блоки с суммарным количеством колонок Bootstrap по умолчанию не больше 12
. Блоки, которые не помещаются в первую линию, переносятся на следующую линию и т.д.
В Bootstrap 3
при создании макета имеется один очень важный момент, который связан с тем, что адаптивные блоки не всегда переносятся на следующую линию
. Это поведение адаптивных блоков объясняется тем, что они в этой версии фреймворка являются плавающими
(float:left).
Например
, в этой разметке третий адаптивный блок располагается не на второй линии, а прилипает к первому адаптивному блоку:
Чтобы это исправить необходимо перед адаптивным блоком, который должен начинаться с новой линии добавить пустой элемент div с классом clearfix .
Основные правила создания макета с помощью элементов сетки Bootstrap
Основные этапы создания макета веб-страницы:
- создать основные секции (например: header , main , footer);
- создать внутри каждой секции обёрточный контейнер;
- поместить внутрь каждого обёрточного контейнера, разметку которых необходимо произвести с помощью адаптивных блоков, элемент «ряд»;
- создать внутри каждого ряда необходимую структуру с помощью адаптивных блоков;
- поместить внутрь необходимых адаптивных блоков, разметку которых необходимо произвести с помощью адаптивных блоков, элемент «ряд»;
- выполнить пункт 5;
- выполнять пункты 6 и 7 до тех пор, пока не будет достигнута необходимая структура создаваемого макета.
В качестве примера создадим нижеприведённый макет на Bootstrap 3 и 4.
Верстка вышеприведённого макета на Bootstrap 3:
Верстка вышепредставленного макета на Bootstrap 4:
