Бутстрап Типография - Особенности типографии Bootstrap с примерами

Содержание:

Anonim

Введение в Bootstrap Типография

Типография - одна из последних особенностей начальной загрузки. Это особенно используется для стилизации и форматирования текстовых элементов. Используя типографскую функцию начальной загрузки, кто-то может создавать заголовки, абзацы, некоторые другие встроенные элементы и списки. В основном, начальная загрузка использует 1rem (16px), поскольку размер шрифта, включая высоту строки, остается равным 5. По умолчанию для семейства начальной загрузки используются шрифты sans-serif, Arial. Устанавливает, как содержимое должно отображаться на теле, цвет фона на теле, используется шрифт. размер и высота строки для создания полей, отступов и т. д.

Особенности Bootstrap Typography

Ниже приведены различные особенности типографии следующим образом:

1) Заголовки

HTML-заголовки делятся на

в

Начальная загрузка
отображается в размере шрифта

Начальная загрузка

отображается в размере шрифта

Начальная загрузка

отображается в размере шрифта

Начальная загрузка

отображается в размере шрифта
Начальная загрузка
отображается в размере шрифта
Начальная загрузка
отображается в размере шрифта

Используя HTML-код, он дает вывод, как показано ниже:

Используя типографику Bootstrap, он разрабатывается и форматируется с использованием соответствующих классов, как показано ниже:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Вывод приведенного выше кода с использованием Bootstrap Typography выглядит следующим образом:

2) Отзывчивые заголовки

Адаптивные заголовки - одна из лучших вещей, которую можно создать с помощью типографики. это элементы, в которых текст автоматически корректируется с помощью класса, отвечающего размеру устройства. Таким образом, можно легко увидеть один и тот же текст соответствующим образом на разных устройствах.

Просто добавьте отзывчивый класс в тег заголовка следующим образом:

Responsive Header

Таким образом, он будет отображать вывод как:

Отзывчивый Заголовок.

Вы можете проверить один и тот же текст на разных устройствах, а также изменив размер браузера, он покажет изменения.

3)

Этот тег используется для создания более легкого и мелкого вторичного текста в вашем заголовке. По умолчанию он составляет 85% от размера родительского заголовка.

Пример:

Example heading secondary text

Выход:

h5 заголовок вторичного текста

4)

Этот тег используется для выделения текста.

Пример :

Bootstrap Typography

Bootstrap Typography

Это используется для выделения текста.

5)

Этот тег используется для обозначения аббревиатуры. Сокращения имеют подчеркивание по умолчанию и получают курсор справки, чтобы предоставить дополнительный контекст при наведении курсора и пользователям вспомогательных технологий.

Пример:

В мире так много стран. Индия - лучшая страна

6)

Указывает на удаленный текст

Пример:

Этот тег используется для отображения удаленного текста.

Выход:

Этот тег используется для показа.

7)

Элемент blockquote используется для представления контента из другого источника.

Пример:

Blockquotes

Blockquotes

Элемент blockquote используется для представления контента из другого источника:


Очень мало нужно для счастливой жизни; это все в тебе, в твоем образе мышления. Жизнь - это как играть на скрипке на публике и изучать инструмент в процессе игры.

Выход:

Цитаты
Элемент blockquote используется для представления контента из другого источника:

Очень мало нужно для счастливой жизни; это все внутри вас, в вашем образе мышления. Жизнь похожа на публичную игру на скрипке и обучение инструменту.

8)
:

Этот тег используется для отображения списка описания.

Пример:

Элемент dl указывает список описания:


Хлеб

- белый

- коричневый

Холодные напитки

- пепси

Выход:

Элемент dl указывает список описания:

Хлеб
белый
коричневый
Холодные напитки
Пепси.

9)

Встроенное утверждение кода должно быть объединено в элементе кода.

Пример:

Следующие элементы HTML: span, section и div определяют раздел в документе.

Выход:

Следующие элементы HTML: span, section и div определяют раздел в документе.

10) Контекстные цвета

Это не что иное, как другой класс, который используется для передачи значения разными цветами.
У него есть разные классы, такие как .text-muted, .text-info, .text-primary, .text-success, .text-warning, .text-danger.

Пример:

Используйте контекстные классы для обеспечения «значения через цвета»:

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет предупреждение.

Этот текст представляет опасность.

Выход:

Этот текст отключен.
Этот текст важен.
Этот текст указывает на успех.
Этот текст представляет некоторую информацию.
Этот текст представляет предупреждение.
Этот текст представляет опасность.

Где мы можем использовать

  • Большинство веб-дизайнеров предпочитают использовать типографику начальной загрузки для лучшего восприятия текстового формата.
  • Это особенно используется при стилизации и форматировании текстового содержимого.
  • В большинстве случаев существует проблема, связанная с отзывчивостью текста. Размер текста варьируется в зависимости от устройства. Таким образом, эти проблемы проясняются с помощью функции типографии начальной загрузки.
  • Bootstrap Typography настраивается простым способом, чтобы представить его привлекательным для конечного пользователя.
  • Такие текстовые элементы на веб-странице всегда будут отображаться через ссылку на таблицу стилей Bootstrap 4 таким же образом, за исключением того, что эти элементы переопределяются другими классами стилей.
  • Bootstrap предоставляет разработчикам удобные типографские функции, позволяющие им легко создавать заголовки, абзацы, списки и другие встроенные элементы, которые будут привлекательны для читателей.

Вывод

  • В соответствии со всеми подробностями, приведенными в приведенном выше содержании, различные типографские функции Bootstrap для заголовков, блок-цитат, текстовых заголовков, выделенного текста, сокращений с подходящими примерами.
  • Такие надежные и красивые функции Bootstrap делают его очень популярной и уникальной средой разработки интерфейса, которая широко используется многими организациями.
  • Начальная загрузка поставляется со всеми типографскими тегами, для которых мы хотим стилизовать все, от тега до

    и вся иерархия заголовков.

Рекомендуемые статьи

Это руководство по типографии Bootstrap. Здесь мы обсуждаем различные особенности типографии Bootstrap, такие как заголовки, цитаты, аббревиатуры, пометки и т. Д. Вы также можете посмотреть следующие статьи, чтобы узнать больше -

  • Команды начальной загрузки
  • Компоненты начальной загрузки
  • Как установить Bootstrap
  • Схема начальной загрузки