Шаблоны са йтов для 1С-Битрикс, готовые решения, разработка сайтов
Профессиональное составление строительных смет
+7 (495) 646 02 52 8 (800) 100 67 79
ежедневно с 9:00 до 18:00

Типографика

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)

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Faucibus porta lacus fringilla vel
  6. Aenean sit amet erat nunc
  7. Eget porttitor lorem
  8. Consectetur adipiscing elit
  9. Integer molestie lorem at massa
  10. Facilisis in pretium nisl aliquet
  11. Faucibus porta lacus fringilla vel
  12. 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>&lt;section&gt;</code> обернутой в тег code.

Basic Block

<p>Sample text here...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>