Типографика
H1 Заголовок
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг.
H2 Заголовок
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг.
H3 Заголовок
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг.
H4 Заголовок
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг.
H5 Заголовок
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг.
H6 Заголовок
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг
<h1>H1 Заголовок</h1>
<h2>H2 Заголовок</h2>
<h3>H3 Заголовок</h3>
<h4>H4 Заголовок</h4>
<h5>H5 Заголовок</h5>
<h6>H6 Заголовок</h6>Цитата
Иногда ты должен побежать, чтобы увидеть, кто побежит за тобой. Иногда ты должен говорить мягче, чтобы увидеть, кто на самом деле прислушивается к тебе. Иногда ты должен сделать шаг назад, чтобы увидеть, кто ещё стоит на твоей стороне. Иногда ты должен делать неправильные решения, чтобы посмотреть, кто с тобой, когда всё рушится. Иногда ты должен отпустить кого любишь, просто чтобы посмотреть, любят ли тебя так, чтобы вернуться! Автор цитаты Источник цитаты
<blockquote>
Иногда ты должен побежать, чтобы увидеть, кто побежит за тобой. Иногда ты должен говорить мягче, чтобы увидеть, кто на самом деле прислушивается к тебе. Иногда ты должен сделать шаг назад, чтобы увидеть, кто ещё стоит на твоей стороне. Иногда ты должен делать неправильные решения, чтобы посмотреть, кто с тобой, когда всё рушится. Иногда ты должен отпустить кого любишь, просто чтобы посмотреть, любят ли тебя так, чтобы вернуться!
<small>Автор цитаты
<cite title="Источник цитаты">Источник цитаты</cite>
</small>
</blockquote>Параграф
Обычный текстовый блок именуемый параграфом, который будет отделяться от другого блока отступом.
<p>Обычный текстовый блок именуемый параграфом, который будет отделяться от другого блока отступом.</p>Вот так выглядит подсказка, а так выглядит ссылка. Далее посмотрим на жирный шрифт и ещё раз. Теперь напишем наклонный шрифт, или с помощью другого тега тоже наклонный шрифт
Вот так выглядит <a data-toggle="tooltip" data-placement="top" href="#" title="Подсказка">подсказка</a>, а так выглядит <a href="#">ссылка</a>. Далее посмотрим на <strong>жирный</strong> шрифт и <b>ещё раз</b>. Теперь напишем <em>наклонный шрифт</em>, или с помощью другого тега <i>тоже наклонный шрифт</i>Заключив строку в этот тег, мы сделаем высоту шрифта меньше базовой высоты.
<small>Заключив строку в этот тег, мы сделаем высоту шрифта меньше базовой высоты.</small>С помощью специальных классов можно разукрасить шрифт цветами.
С помощью специальных классов можно разукрасить шрифт цветами.
С помощью специальных классов можно разукрасить шрифт цветами.
С помощью специальных классов можно разукрасить шрифт цветами.
С помощью специальных классов можно разукрасить шрифт цветами.
С помощью специальных классов можно разукрасить шрифт цветами.
<p class="text-muted">С помощью специальных классов можно разукрасить шрифт цветами.</p>
<p class="text-primary">С помощью специальных классов можно разукрасить шрифт цветами.</p>
<p class="text-success">С помощью специальных классов можно разукрасить шрифт цветами.</p>
<p class="text-info">С помощью специальных классов можно разукрасить шрифт цветами.</p>
<p class="text-warning">С помощью специальных классов можно разукрасить шрифт цветами.</p>
<p class="text-danger">С помощью специальных классов можно разукрасить шрифт цветами.</p>Списки
Неупорядоченный список (unordered)
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>Неупорядоченный список (не стилизованный)
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>Описание (теги dl, dt, dd)
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>Упорядоченный список (ordered)
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
</ol>Иконки
- Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis. Phasellus in risus quis lectus iaculis vulputate id quis nisl.
- Phasellus in risus quis lectus iaculis vulputate id quis nisl.
- Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis.
- Phasellus in risus quis lectus iaculis vulputate id quis nisl.
- ...more icons
<ul class="list icons list-unstyled">
<li><i class="fa fa-check"></i> Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis. Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
<li><i class="fa fa-cloud-download"></i> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
<li><i class="fa fa-envelope-o"></i> Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis. </li>
<li><i class="fa fa-film"></i> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
<li><a href="/features/icons/">...more icons</a></li>
</ul>Inline
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul>
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>Code
Inline
Пример, <section> обернутой в тег code.
Пример, <code><section></code> обернутой в тег code.Basic Block
<p>Sample text here...</p>
<pre><p>Sample text here...</p></pre>