У блозі є вбудовані налаштування змісту статті.

Як формується зміст

Щоб на сторінці ми побачили зміст, нам необхідно створити кілька заголовків у контенті. Мінімум 3 підзаголовки. Сюди включаються теги <h2>, <h3>, <h4>. 

Де виводиться зміст

Це можна налаштувати. За замовчуванням воно виводиться перед першим підзаголовком, як у цій статті. Але ви можете поставити інший висновок — одразу на початку статті, перед текстом.

Чи можна його вимкнути

Так, звичайно. 

Зміст деревоподібний

І знову так, деревоподібне. Ви просто вказуєте теги <h2>, <h3>, <h4> . Чим більше число в заголовку — тим більше вкладений пункт виходить.

Точно деревоподібні?

Точно! Це ще один заголовок третього рівня, який відображатиметься як дочірній.

Заголовок h4

Вбудовані налаштування змісту статті дуже зручно.

Налаштування заголовків

Використовуйте наявні загальні класи для відтворення маленького вторинного тексту-підзаголовка 

Заголовок відображення З вицвілим вторинним текстом

Заголовок дисплея

Традиційні заголовки створені для «роботи» «у глибині» сторінки. Якщо вам необхідно виділити заголовок, використовуйте  «заголовок дисплея» - більшого розміру, трохи вигадливіший.

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Лід

Створіть виділення, що відрізняється від інших пунктів додаванням класу .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Цитати

Для цитат з іншого джерела у вашій статті.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.   

<blockquote class="blockquote">
    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Найменування джерела

Додайте <figcaption class="blockquote-footer"> для ідентифікації джерела. Оберніть ім'я джерела в <cite>.

A well-known quote, contained in a blockquote element.

<blockquote class="blockquote">
    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <figcaption class="blockquote-footer">Хтось відомий у<cite title="Вихідний заголовок">Source Title</cite></footer>
</blockquote>

Фігури

Документація та приклади для відображення пов'язаних зображень та тексту за допомогою компонента figure.

Коли вам знадобиться відобразити частину контенту – такого як зображення з певним супровідним написом – використовуйте <figure>.

Використовуйте класи .figure , .figure-img и .figure-caption для зміни деяких базових стилів на елементи HTML5 <figure> и <figcaption>. Зображення в figure’s не мають точного розміру, тому переконайтеся, що додали в <img> клас .img-fluid для додання <img> адаптивності.

<figure class="figure">
    <img src="..." class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>

Таблиці

Ось так таблиці, що базуються на класі .table, виглядають у базовій розмітці таблиць.

#	Name	Surname	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">Name</th>
			<th scope="col">Surname</th>
			<th scope="col">Username</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>Larry</td>
			<td>the Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody>
</table>

Зображення

У текстовому редакторі для зображень додано кілька класів для їх оформлення. Якщо зображенню додати клас image-zoom, то на кліку на нього, відкриється модальне вікно зі збільшеною версією цього зображення.

Класи image-slider і image-gallery формують карусель із завантажених один за одним зображень. Головна різниця між ними в тому, що image-gallery формує карусель з трьох слайдів, в image-slider з одного.