Типографика


157 0


Типографика

Содержание

    В блоге есть встроенные настройки содержания статьи.

    Как формируется содержание

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

    Где выводится содержание

    Это можно настроить. По умолчанию, оно выводится перед первым подзаголовком, как в этой статье. Но вы можете задать другой вывод — сразу в начале статьи, перед текстом.

    Можно ли его отключить

    Да, конечно. 

    Содержание древовидное

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

    Точно древовидные?

    Точно-точно! Это еще один заголовок третьего уровня, который будет отображаться как дочерний.

    Заголовок h4

    Встроенные настройки содержания статьи это очень удобно.

    Настройка заголовков

    Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка 

    Заголовок отображения С выцветшим вторичным текстом

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

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

    Display 1

    Display 2

    Display 3

    Display 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>

    Наименование источника

    Добавьте <footer class="blockquote-footer"> для идентификации источника. Оберните имя источника в <cite>.

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

    Кто-то знаменитый в Source Title
    <blockquote class="blockquote">
      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer 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
    A caption for the above image.
    <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, выглядят в базовой разметке таблиц.

    # Имя Фамилия 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">Имя</th>
          <th scope="col">Фамилия</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 из одного.

    -1


    Пока нет комментариев

    Комментировать
    Введите комментарий
    Введите имя
    17 + ? = 19
    Введите капчу
    Заказать звонок
    Оставьте своё имя и номер телефона.
    Мы свяжемся с Вами в течении 15 минут.
    Я согласен на обработку персональных данных
    Заказать услугу
    Оставьте своё имя и номер телефона. Мы свяжемся с Вами в течение 15 минут для уточнения деталей заказа.
    Я согласен на обработку персональных данных
    Вызвать курьера
    Оставьте своё имя и номер телефона.
    Мы свяжемся с Вами в течении 15 минут.
    Я согласен на обработку персональных данных