Bootstrap size font: Typography · Bootstrap

Содержание

Типографика · Bootstrap на русском

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

Содержание

Глобальные параметры

Bootstrap устанавливает основные глобальные дисплеи, типографии, и стили ссылок. В частности, мы:

  • Использовать родной стек шрифтов, который выбирает лучшие font-family Для каждой операционной системы и устройства.
  • Используйте $font-family-base, $font-size-base и $line-height-base атрибутами как наши типографской базы в случае <body>.
  • Установите глобальный цвет ссылки через $link-color и применить только подчеркивает на :hover.
  • Используйте $body-bg настройка background-color на <body> (#fff по умолчанию).

Эти стили можно найти в _reboot.scss, и глобальные переменные, определенные в _variables.scss.

Заголовки

Все HTML заголовки, <h2> через <h6>, доступны.

Semibold 36px

h3. Bootstrap heading

Semibold 30px

h4. Bootstrap heading

Semibold 24px
h5. Bootstrap heading
Semibold 18px
h5. Bootstrap heading
Semibold 14px
h6. Bootstrap heading
Semibold 12px
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h5>h5.  Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

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

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p>h2. Bootstrap heading</p>
<p>h3. Bootstrap heading</p>
<p>h4. Bootstrap heading</p>
<p>h5. Bootstrap heading</p>
<p>h5. Bootstrap heading</p>
<p>h6. Bootstrap heading</p>

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

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

Fancy display heading

With faded secondary text

<h4>
  Fancy display heading
  <small>With faded secondary text</small>
</h4>

Отображение заголовков

Традиционной рубрике элементы предназначены для работы в мясе содержание страницы. Когда вам нужен Заголовок, чтобы выделиться, используйте отображение заголовоков—более крупная, чуть более самоуверенные стиль заголовка.

<h2>Display 1</h2>
<h2>Display 2</h2>
<h2>Display 3</h2>
<h2>Display 4</h2>

Выделение

Создайте выделенный параграф путем добавления .lead.

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

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

Встроенные текстовые элементы

Стайлинг для общего встроенные элементы HTML5.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text. </strong></p>
<p><em>This line rendered as italicized text.</em></p>

.mark и .small занятия также можно применить те же стили, как <mark> и <small>, избегая любых нежелательных семантических последствий, которые теги доведет.

Пока не показано выше, не стесняйтесь использовать <b> и <i> в HTML5. <b> предназначен для выделения слова или фразы без передачи дополнительного значения в то время как <i> в основном для голоса, технических терминов и т. д.

Текстовые утилиты

Изменение выравнивания текста, преобразование, стиль, вес и цвет с текстовые утилиты.

Аббревиатуры

Стилизованные реализация языка HTML <abbr> элемент аббревиатур и сокращений, чтобы показать расширенную версию на наведение. Аббревиатуры с title атрибут светло пунктирной нижней границы и помочь курсора на наведение, обеспечивая дополнительный контекст в наведение и для пользователей вспомогательных технологий.

Добавьте .initialism аббревиатуры для легкого уменьшения размера шрифта.

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>

Цитаты

За цитирование блоки Контента из другого источника в документе. Обертывание <blockquote> вокруг HTML-код Как цитата.

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. </p>
</blockquote>

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

Добавьте <footer> для указания источника. Заключите имя источника работы в <cite>.

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Обратное позиционирование

Добавьте .blockquote-reverse для выравнивания цитаты справа.

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Списки

Без стиля

Удаление list-style и отступ слева для списка пунктов. Такое удаление применяется только к непосредственных дочерних элементов, то есть необходимо добавлять соответствующий класс в любых вложенных списков.

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

Встроенный

Удалить списка пулями и применить некоторый свет margin при сочетании двух классов, . list-inline и .list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul>
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

Выровненный список описаний

Согласовать условия и описания по горизонтали с помощью нашей блочной системы предопределенных классов (или семантические миксины). На более длительные сроки, по желанию можно добавить .text-truncate класс для усечения текста с многоточием.

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.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<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>

  <dt>Truncated term is truncated</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt>Nesting</dt>
  <dd>
    <dl>
      <dt>Nested definition list</dt>
      <dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. </dd>
    </dl>
  </dd>
</dl>

Адаптивная типография

Responsive typography относится к масштабирования текста и составляющих просто регулировать корневого элемента font-size в серии медиа запросы. Bootstrap не сделает это за вас, но это довольно легко добавить, если вам это нужно.

Вот пример на практике. Выбирайте те font-size и медиа запросы, которые пожелаете.

html {
  font-size: 14px;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 16px;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 20px;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 28px;
  }
}

Bootstrap Бутстрап 4 Text Typography

Параметры начальной загрузки 4 по умолчанию

Bootstrap 4 использует значение по умолчанию
font-size of 16px, and its
line-height is 1. 5.

По умолчанию font-family используется шрифт «Новая», шрифт, Arial, без засечек.

Кроме того, все <p> элементы имеют margin-top: 0 и margin-bottom: 1rem (16px по умолчанию).

<h2> — <h6>

Bootstrap 4 стили HTML заголовки (<h2> —
<h6>)  с более смелым шрифтом и увеличенным размером шрифта:

Пример

h3 Bootstrap heading (2rem = 32px)

h4 Bootstrap heading (1.75rem = 28px)

h5 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)

Отображение заголовков

Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: .display-1, .display-2, .display-3, .display-4

<small>

В Bootstrap 4 элемент HTML <small> используется для создания более светлого, вторичного текста в любом заголовке:

Пример

h3 heading

secondary text

h4 heading

secondary text

h5 heading

secondary text

h5 heading

secondary text

h6 heading

secondary text

<mark>

Bootstrap 4 будет стиль HTML <mark> элемент с желтым цветом фона и некоторые отступы:

Пример

Используйте элемент Mark для highlight Текста.

<abbr>

Bootstrap 4 будет стиль HTML <abbr> элемент с пунктирным нижней границы:

Пример

The WHO was founded in 1948.

<blockquote>

Добавьте .blockquote класс к a <blockquote> при цитировании блоков содержимого из другого источника:

Пример

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

<dl>

Bootstrap 4 будет стиль HTML <dl> элемент следующим образом:

Пример

Coffee
— black hot drink
Milk
— white cold drink

<code>

Bootstrap 4 будет стиль HTML <code> элемент следующим образом:

Пример

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

<kbd>

Bootstrap 4 будет стиль HTML <kbd> элемент следующим образом:

Пример

Use ctrl + p to open the Print dialog box.

<pre>

Bootstrap 4 будет стиль HTML <pre> элемент следующим образом:

Пример

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

Другие классы типографии

Следующие классы Bootstrap 4 можно добавить в HTML-элементы стиля далее:

КлассОписание
.font-weight-boldПолужирный текст
.font-italicКурсивный текст
.font-weight-lightЛегковесный текст
.font-weight-normalОбычный текст
.leadВыделяет абзац
. smallОбозначает меньший текст (значение 85% от размера родительского элемента)
.text-leftУказывает текст, выровненный по левому краю
.text-*-rightОбозначает текст, выровненный по левому краю на малых, средних, больших или XLarge экранах
.text-centerОбозначает текст, выровненный по центру
.text-*-centerОбозначает выравнивание текста по центру на малых, средних, больших или XLarge экранах
.text-rightУказывает текст с выравниванием по правому краю
.text-*-rightОбозначает текст с выравниванием по правому краю на малых, средних, больших или XLarge экранах
.text-justifyОбозначает обоснованный текст
.text-monospaceТекст с интервалом
. text-nowrapОбозначает отсутствие текста переноса
.text-lowercaseОбозначает текст в нижнем регистре
.text-uppercaseУказывает верхний текст
.text-capitalizeОбозначает текст с прописными буквами
.initialismОтображение текста внутри <abbr> элемента в немного меньшем размере шрифта
.list-unstyledУдаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих <ul> и <ol> ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам)
.list-inlineРазмещение всех элементов списка в одной строке (используется вместе с
. list-inline-item на каждом <li> Элементами)
.pre-scrollableДелает <pre> элемент прокручиваемым

Полный Bootstrap 4 CSS Ссылка

Для полного справочника всех классов CSS, доступных в Bootstrap 4, посетите наш
Bootstrap 4 все классы ссылка.

responsive-design — Как реализовать адаптивную типографику с помощью Bootstrap 4?

Я создаю адаптивное веб-приложение с Bootstrap 4. Я хочу, чтобы размер шрифта всего текста был уменьшен на мобильных устройствах по сравнению с рабочим столом, поэтому я добавил следующее в свой базовый файл css согласно документации Bootstrap (https://getbootstrap.com/docs/4.0/content/typography/):

 html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1. 6rem;
  }
}

Однако размер шрифта остается фиксированным. Что я делаю неправильно?

5

sean

6 Янв 2018 в 14:17

3 ответа

Лучший ответ

Это особенность Sass.

Чтобы иметь доступ к миксинам медиа-точек останова и переменным размера, вам необходимо:

  1. добавить файл custom.scss
  2. @import "node_modules/bootstrap/scss/bootstrap";
  3. и настроить компилятор Sass

https://getbootstrap.com/docs/4.0/getting-started/theming/

3

hayden
6 Янв 2018 в 11:29

Я думаю, что самый простой способ — использовать @media Queries . Предположим, что вы хотите изменить размер шрифта отзывчиво для содержимого с классом «class-name» или даже для всего html-тега, просто добавьте ваши медиазапросы в конец файла CSS или в любое место внутри него.

Пример кода: 

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  
    .class-name {font-size: 16px;}
  }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) {  
    .class-name {font-size: 30px;}
  }

  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) { 
    .class-name {font-size: 40px;}

  /* Extra large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {  
    .class-name {font-size: 48px;}
  }

  /*

Более подробную информацию можно найти здесь.

8

Ayman Al-Absi
14 Май 2018 в 22:12

Начиная с Bootstrap 4.3.1 , теперь есть RFS (адаптивный размер шрифта)! Однако, как описано в документах, вы должны включить его используя переменную $enable-responsive-font-sizes SASS.

Демонстрация RFS: https://www.codeply.com/go/jr8RbeNf2M

До начальной загрузки 4.3.1 вы могли бы реализовать адаптивный текст, используя SASS. Однако вам нужно указать желаемый соответствующий селектор (ы) для текста, который вы хотите изменить размер …

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.1rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1. 2rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.3rem;
  }
}

@import "bootstrap";

Демонстрация: https://www.codeply.com/go/5pZDWAvenE

Это также может быть сделано с использованием только CSS (без SASS):

Демонстрация: https://www.codeply.com/go/E1MVXqp21D

5

Zim
31 Мар 2019 в 09:24

box-sizing | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+4.0+10.0+7.0+3.1+5.0+1.0+2.1+4.0+3.2+5.0+

Краткая информация

Значение по умолчаниюcontent-box
НаследуетсяНет
ПрименяетсяКо всем элементам
Процентная записьНеприменима
Ссылка на спецификациюhttp://www. w3.org/TR/css3-ui/#box-sizing

Версии CSS

Описание

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

content-box
Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box
Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
padding-box
Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).
inherit
Наследует значение родителя.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
   .box1 { 
    background: #f0f0f0; /* Цвет фона */
    width: 300px; /* Ширина блока */
    padding: 10px; /* Поля */
    border: 2px solid #000; /* Параметры рамки */
   }
   .box2 { 
    background: #fc0; /* Цвет фона */
    width: 300px; /* Ширина блока */
    padding: 10px; /* Поля */
    margin-top: 10px; /* Отступ сверху */
    border: 2px solid #000; /* Параметры рамки */
    -moz-box-sizing: border-box; /* Для Firefox */  
    box-sizing: border-box; /* Ширина блока с полями */
   }
  </style>
 </head>
 <body> 
  <div>Ширина с учетом значения свойства width, полей и границ.</div>
  <div>Ширина равна значению свойства width.</div>
 </body>
</html>

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента (width), полей слева и справа (padding) и толщины границ (border). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing. Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Ширина блоков

Браузеры

Firefox поддерживает нестандартное свойство -moz-box-sizing.

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing.

Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box.

Типографика · Bootstrap

Документация и примеры типографики Bootstrap, включая глобальные настройки, заголовки, основной текст, списки и многое другое.

Глобальные настройки

Bootstrap устанавливает основные глобальные стили отображения, оформления и ссылок. Когда требуется больше контроля, проверьте текстовые служебные классы.

  • Используйте собственный стек шрифтов, который выбирает лучшее семейство шрифтов для каждой ОС и устройства.
  • Для более инклюзивной и доступной шкалы типов мы предполагаем, что корневой каталог браузера по умолчанию размер шрифта (обычно 16 пикселей), чтобы посетители могли настроить свои настройки браузера по умолчанию по мере необходимости.
  • Используйте атрибуты $ font-family-base , $ font-size-base и $ line-height-base в качестве нашей типографской основы, применяемой к .
  • Установите глобальный цвет ссылки через $ link-color и примените подчеркивание ссылки только на : hover .
  • Используйте $ body-bg , чтобы установить цвет фона для (по умолчанию #fff ).

Эти стили можно найти в _reboot.scss , а глобальные переменные определены в _variables.scss . Обязательно установите $ font-size-base в rem .

Заголовки

Доступны все заголовки HTML, от

до

.

Товарная позиция Пример

 h2. Заголовок начальной загрузки

 h3.Заголовок начальной загрузки

 h4. Заголовок начальной загрузки

 h5. Заголовок начальной загрузки

 h5. Заголовок начальной загрузки

 h6.Заголовок начальной загрузки
  
 h2. Заголовок начальной загрузки 


 h3. Заголовок начальной загрузки 


 h4.
  Заголовок начальной загрузки 

 h5. Заголовок начальной загрузки 


 h5. Заголовок начальной загрузки 


 h6. Заголовок начальной загрузки

.h2 – .h6 классы также доступны, когда вы хотите сопоставить стиль шрифта заголовка, но не можете использовать связанный элемент HTML.

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

  
 h2. Заголовок начальной загрузки 


 h3. Заголовок начальной загрузки 


 h4. Заголовок начальной загрузки 


 h5. Заголовок начальной загрузки 


 h5. Заголовок начальной загрузки 


 h6. Заголовок начальной загрузки

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

Используйте включенные служебные классы, чтобы воссоздать небольшой текст вторичного заголовка из Bootstrap 3.

Необычный заголовок дисплея
С выцветшим второстепенным текстом 

  

  Необычный заголовок дисплея
  
 С выцветшим второстепенным текстом

Показать заголовки

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

Дисплей 1
Дисплей 2
Дисплей 3
Дисплей 4
  
 Дисплей 1 


 Дисплей 2 


 Дисплей 3 


 Дисплей 4

Свинец

Выделите абзац, добавив .Свинец .

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

  

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

Встроенные текстовые элементы

Стили для стандартных встроенных элементов HTML5.

Вы можете использовать тег mark, чтобы выделить текста.

Эта строка текста должна рассматриваться как удаленный текст.

Эта строка текста считается неточной.

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

Эта строка текста будет отображаться как подчеркнутая

Эта строка текста предназначена для работы с мелким шрифтом.

Эта строка выделена полужирным шрифтом.

Эта строка выделена курсивом. 

  
 Вы можете использовать тег mark для  выделения  текста.


  Эта строка текста должна рассматриваться как удаленный текст.   


  Эта строка текста считается неточной.  


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


  Эта строка текста будет отображаться как подчеркнутая  


  Эту строку текста следует рассматривать как мелкий шрифт.  


  Эта строка выделена жирным шрифтом. 


  Эта строка выделена курсивом.

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

Хотя это не показано выше, вы можете свободно использовать и в HTML5. предназначен для выделения слов или фраз без придания дополнительной важности, в то время как в основном предназначен для озвучивания, технических терминов и т. Д.

Текстовые утилиты

Измените выравнивание, преобразование, стиль, толщину и цвет текста с помощью наших текстовых и цветовых утилит.

Сокращения

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

Добавьте .initialism до аббревиатуры для немного меньшего размера шрифта.

  
  attr  


  HTML

Цитаты

Для цитирования блоков контента из другого источника в вашем документе. Оберните

вокруг любого HTML в качестве цитаты.

Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число означает анте.

  <цитата>
  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число - ставка анте.

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

Добавьте <нижний колонтитул> для идентификации источника. Оберните название исходной работы в .

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число означает анте.

  <цитата>
  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число - ставка анте. 

  
 Кто-то, известный в  Source Title

Выравнивание

При необходимости используйте текстовые утилиты, чтобы изменить выравнивание цитаты.

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число означает анте.

  <цитата>
  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit.Целое число - ставка анте. 

  
 Кто-то, известный в  Source Title

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число означает анте.

  <цитата>
  
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. Целое число - ставка анте. 

  
 Кто-то, известный в  Source Title

Списки

Не стилизованный

Удалите стандартный стиль списка и левое поле для элементов списка (только непосредственные дочерние элементы). Это применимо только к непосредственным дочерним элементам списка , то есть вам нужно будет добавить класс также для любых вложенных списков.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis в аликвоте pretium nisl
  • Нулла волутпат аликвам велит
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Энеан сижу амет эрат нунц
  • Eget porttitor lorem
  
    
  
  •  Lorem ipsum dolor sit amet 
    • 
  
  •  Consectetur adipiscing elit 
    • 
  
  •  Целочисленное слово molestie lorem и масса 
    • 
  
  •  Facilisis в аликвоте pretium nisl 
    • 
  
  •  Нулла волутпат аликвам велит
    
      
      
    •  Phasellus iaculis neque 
      • 
      
    •  Ульты Purus sodales 
      • 
      
    •  Vestibulum laoreet porttitor sem 
      • 
      
    •  Ac tristique libero volutpat в 
      • 
    
    
  
    • 
  
  •  Faucibus porta lacus fringilla vel 
    • 
  
  •  Энеан сидит, амет эрат нунч 
    • 
  
  •  Эгет-порттитор Лорем 
    •

Рядный

Удалите маркеры из списка и примените небольшое поле с комбинацией двух классов, . list-inline и . list-inline-item .

  • Lorem ipsum
  • Phasellus iaculis
  • Нулла волутпат
  
    
  
  •  Lorem ipsum 
    • 
  
  •  Phasellus iaculis 
    • 
  
  •  Нулла волутпат 
    •

Выравнивание списка описаний

Выровняйте термины и описания по горизонтали с помощью предопределенных классов нашей системы сеток (или семантических миксинов). Для более длительных сроков вы можете дополнительно добавить .text-truncate , чтобы обрезать текст многоточием.

Описания
Список описаний идеально подходит для определения терминов.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Порт Малесуада
Etiam porta sem malesuada magna mollis euismod.
Усеченный термин усеченный
Fusce dapibus, tellus ac cursus Commodo, toror mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Вложенность
Список вложенных определений
Aenean posuere, toror sed cursus feugiat, nunc augue blandit nunc.
  

  
 Списки описаний 

  
 Список описаний идеально подходит для определения терминов. 


  
 Euismod 

  

    
 Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. 

    
 Готово, чтобы пройти элит без порта беременных в Эгет Метус.

  


  
 Порт Малесуада 

  
 Etiam porta sem malesuada magna mollis euismod. 


  
 Усеченный термин усечен 

  
 Fusce dapibus, tellus ac cursus Commodo, Tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 


  
 Вложенность 

  

    

      
 Список вложенных определений 

      
 Энеанский посуере, мучитель sed cursus feugiat, nunc augue blandit nunc.

Адаптивная типографика

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

Вот пример того, как это работает. Выберите любой размер шрифта s и медиа-запросы, которые вы хотите.

  html {
  размер шрифта: 1 бэр;
}

@include media-breakpoint-up (sm) {
  html {
    размер шрифта: 1.2рем;
  }
}

@include media-breakpoint-up (md) {
  html {
    размер шрифта: 1,4 бэр;
  }
}

@include media-breakpoint-up (lg) {
  html {
    размер шрифта: 1.6rem;
  }
}

Типографика · Bootstrap v4.6

Документация и примеры типографики Bootstrap, включая глобальные настройки, заголовки, основной текст, списки и многое другое.

Глобальные настройки

Bootstrap устанавливает основные глобальные стили отображения, оформления и ссылок. Когда требуется больше контроля, проверьте текстовые служебные классы.

  • Используйте собственный стек шрифтов, который выбирает лучшее семейство шрифтов для каждой ОС и устройства.
  • Для более инклюзивной и доступной шкалы шрифтов мы используем корень браузера по умолчанию font-size (обычно 16 пикселей), чтобы посетители могли настроить свои браузеры по умолчанию по мере необходимости.
  • Используйте атрибуты $ font-family-base , $ font-size-base и $ line-height-base в качестве нашей типографской основы, применяемой к .
  • Установите глобальный цвет ссылки через $ link-color и примените подчеркивание ссылки только на : hover .
  • Используйте $ body-bg , чтобы установить цвет фона для (по умолчанию #fff ).

Эти стили можно найти в _reboot.scss , а глобальные переменные определены в _variables.scss . Обязательно установите $ font-size-base в rem .

Заголовки

Доступны все заголовки HTML, от

до

.

Товарная позиция Пример

 h2. Заголовок начальной загрузки

 h3. Заголовок начальной загрузки

 h4. Заголовок начальной загрузки

 h5.Заголовок начальной загрузки

 h5. Заголовок начальной загрузки

 h6. Заголовок начальной загрузки
  
 h2. Заголовок начальной загрузки 


 h3. Заголовок начальной загрузки 


 h4. Заголовок начальной загрузки 


 h5.
  Заголовок начальной загрузки 

 h5.Заголовок начальной загрузки 


 h6. Заголовок начальной загрузки

.h2 – .h6 классы также доступны, когда вы хотите сопоставить стиль шрифта заголовка, но не можете использовать связанный элемент HTML.

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

  
 h2.Заголовок начальной загрузки 


 h3. Заголовок начальной загрузки 


 h4. Заголовок начальной загрузки 


 h5. Заголовок начальной загрузки 


 h5. Заголовок начальной загрузки 


 h6. Заголовок начальной загрузки

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

Используйте включенные служебные классы, чтобы воссоздать небольшой текст вторичного заголовка из Bootstrap 3.

Необычный заголовок дисплея

С выцветшим второстепенным текстом 

  

  Необычный заголовок дисплея
  
 С выцветшим второстепенным текстом

Отображать заголовки

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

Дисплей 1
Дисплей 2
Дисплей 3
Дисплей 4
  
 Дисплей 1 


 Дисплей 2 


 Дисплей 3 


 Дисплей 4

Свинец

Выделите абзац, добавив . Свинец .

Это ведущий абзац. Он выделяется из обычных абзацев.

  

  Это ведущий абзац. Он выделяется из обычных абзацев.

Встроенные текстовые элементы

Стили для стандартных встроенных элементов HTML5.

Вы можете использовать тег mark, чтобы выделить текста.

Эта строка текста должна рассматриваться как удаленный текст.

Эта строка текста считается неточной.

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

Эта строка текста будет отображаться как подчеркнутая

Эта строка текста предназначена для работы с мелким шрифтом.

Эта строка выделена полужирным шрифтом.

Эта строка выделена курсивом. 

  
 Вы можете использовать тег mark для  выделения  текста. 


  Эта строка текста должна рассматриваться как удаленный текст.  


  Эта строка текста считается неточной.  


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


  Эта строка текста будет отображаться как подчеркнутая  


  Эту строку текста следует рассматривать как мелкий шрифт.  


  Эта строка выделена жирным шрифтом  


  Эта строка выделена курсивом.

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

Хотя это не показано выше, вы можете свободно использовать и в HTML5. предназначен для выделения слов или фраз без придания дополнительной важности, в то время как в основном предназначен для озвучивания, технических терминов и т. Д.

Текстовые утилиты

Измените выравнивание, преобразование, стиль, толщину и цвет текста с помощью наших текстовых и цветовых утилит.

Сокращения

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

Добавьте .initialism к аббревиатуре для немного меньшего размера шрифта.

  
  attr  


  HTML

Цитаты

Для цитирования блоков контента из другого источника в вашем документе. Оберните

вокруг любого HTML в качестве цитаты.

Известная цитата, содержащаяся в элементе цитаты.

  <цитата>
  
 Известная цитата, содержащаяся в элементе цитаты.

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

Добавьте <нижний колонтитул> для идентификации источника. Оберните название исходной работы в .

Известная цитата, содержащаяся в элементе цитаты.

  <цитата>
  
 Известная цитата, содержащаяся в элементе цитаты. 

  
 Кто-то, известный в  Source Title

Выравнивание

При необходимости используйте текстовые утилиты, чтобы изменить выравнивание цитаты.

> Известная цитата, содержащаяся в элементе цитаты.

  <цитата>
  
> Известная цитата, содержащаяся в элементе цитаты.  

  
 Кто-то, известный в  Source Title

Известная цитата, содержащаяся в элементе цитаты.

  <цитата>
  
 Известная цитата, содержащаяся в элементе цитаты.

  
 Кто-то, известный в  Source Title

Списки

Не стилизованный

Удалите стандартный стиль списка и левое поле для элементов списка (только непосредственные дочерние элементы). Это применимо только к непосредственным дочерним элементам списка , то есть вам нужно будет добавить класс также для любых вложенных списков.

  • Это список.
  • Похоже, он совершенно не стилизован.
  • Конструктивно это все-таки список.
  • Однако этот стиль применяется только к непосредственным дочерним элементам.
  • Вложенные списки:
    • не затронуты этим стилем
    • по-прежнему покажет пулю
    • и соответствующее левое поле
  • Это может пригодиться в некоторых ситуациях.
  
    
  
  •  Это список. 
    • 
  
  •  Похоже, он полностью лишен стиля.
    • 
  
  •  Структурно это все еще список. 
    • 
  
  •  Однако этот стиль применяется только к непосредственным дочерним элементам. 
    • 
  
  •  Вложенные списки:
    
      
      
    •  не зависит от этого стиля 
      • 
      
    •  по-прежнему будет отображаться маркер 
      • 
      
    •  и иметь соответствующее левое поле. 
      • 
    
    
  
    • 
  
  •  Это может пригодиться в некоторых ситуациях. 
    •

Рядный

Удалите маркеры из списка и примените небольшое поле с комбинацией двух классов, .list-inline и . list-inline-item .

  • Это элемент списка.
  • И еще один.
  • Но они отображаются встроенными.
  
    
  
  •  Это элемент списка. 
    • 
  
  •  И еще один. 
    • 
  
  •  Но они отображаются встроенными. 
    •

Выравнивание списка описаний

Выровняйте термины и описания по горизонтали с помощью предопределенных классов нашей системы сеток (или семантических миксинов). Для более длительных сроков вы можете дополнительно добавить класс .text-truncate , чтобы обрезать текст с помощью многоточия.

Описания
Список описаний идеально подходит для определения терминов.
Срок

Определение термина.

И еще текст определения заполнителя.

Другой термин
Это определение короткое, поэтому никаких лишних абзацев или чего-либо еще.
Усеченный термин усеченный
Это может быть полезно, когда места мало.Добавляет многоточие в конце.
Вложенность
Список вложенных определений
Я слышал, вам нравятся списки определений. Позвольте мне поместить список определений в ваш список определений.
  

  
 Списки описаний 

  
 Список описаний идеально подходит для определения терминов. 


  
 Срок 

  

    
 Определение термина.  

    
 И еще текст определения заполнителя.

  


  
 Другой термин 

  
 Это определение короткое, поэтому никаких лишних абзацев или чего-либо еще. 


  
 Усеченный термин усечен 

  
 Это может быть полезно, когда места мало. Добавляет многоточие в конце. 


  
 Вложенность 

  

    

      
 Список вложенных определений 

      
 Я слышал, вам нравятся списки определений. Позвольте мне поместить список определений в ваш список определений.

Размер адаптивного шрифта

Начиная с версии 4.3.0, Bootstrap поставляется с возможностью включения гибких размеров шрифта, что позволяет более естественно масштабировать текст в зависимости от устройства и размеров области просмотра. RFS можно включить, изменив переменную Sass $ enable-responsive-font-sizes на true и перекомпилировав Bootstrap.

Для поддержки RFS мы используем миксин Sass для замены наших обычных свойств font-size . Адаптивные размеры шрифтов будут скомпилированы в функции calc () с сочетанием rem, и единиц просмотра, чтобы обеспечить адаптивное масштабирование. Подробнее о RFS и его конфигурации можно найти в его репозитории GitHub.

Bootstrap 4 Текст / Типографика

Bootstrap 4 Настройки по умолчанию

Bootstrap 4 использует значение по умолчанию
font-size из 16 пикселей, а его
line-height — 1,5.

Семейство шрифтов по умолчанию — Helvetica Neue, Helvetica, Arial, sans-serif.

Кроме того, все элементы

имеют
margin-top: 0 и margin-bottom: 1rem (по умолчанию 16 пикселей).

—

Bootstrap 4 стилизует заголовки HTML (от

от

до

) с более жирным шрифтом и
увеличенный размер шрифта:

Пример

Заголовок h3 Bootstrap (2rem = 32px)

h4 Заголовок начальной загрузки (1.

75rem = 28 пикселей)

Заголовок h5 Bootstrap (1.5rem = 24px)
Заголовок h5 Bootstrap (1.25rem = 20px)
h6 Заголовок начальной загрузки (1rem = 16px)

Попробуй сам »

Отображаемые заголовки

Отображаемые заголовки используются для того, чтобы выделяться больше, чем обычные заголовки (более крупные
font-size и более легкий font-weight), и там
можно выбрать один из четырех классов: .display-1 , .display-2 , .дисплей-3 , . дисплей-4

<маленький>

В Bootstrap 4 элемент HTML используется для создания более светлого второстепенного текста в любом заголовке:

Пример

h3 заголовок

вторичный текст

h4 заголовок

вторичный текст

заголовок h5

вторичный текст

заголовок h5

вторичный текст

h6 заголовок

вторичный текст

Попробуй сам »

<отметка>

Bootstrap 4 стилизует элемент HTML
с желтым цветом фона и небольшим отступом:

Bootstrap 4 стилизует элемент HTML
с точечной каймой внизу:

Добавьте . blockquote class на


при цитировании блоков контента из другого источника:

Пример

Вот уже 50 лет WWF защищает будущее природы. Всемирный фонд дикой природы, ведущая в мире природоохранная организация, работает в 100 странах, и его поддерживают 1,2 миллиона членов в США и около 5 миллионов во всем мире.

Попробуй сам »

Bootstrap 4 стилизует элемент HTML

следующим образом:

<код>

Bootstrap 4 стилизует элемент HTML следующим образом:

Пример

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

Попробуй сам "

<КБД>

Bootstrap 4 стилизует элемент HTML следующим образом:

 
 
 Bootstrap 4 стилизует элемент HTML  
  следующим образом: 


 
 Пример 


 

Текст в предварительном элементе 

отображается с фиксированной шириной 

шрифт, и он сохраняет 

оба пробела и 

разрывы строк. 
 


Попробуй сам "
 
 
 Другие классы типографики 

 
 Приведенные ниже классы Bootstrap 4 могут быть добавлены для дальнейшего оформления элементов HTML: 

 
 
  Класс 
      Описание 
      Пример 
   
 
  .шрифт жирный-жирный  
      Жирный текст 
      Попробуйте 
   
 
  . Шрифт-груз-жирдер  
      Полужирный текст 
      Попробовать 
   
 
  . Шрифт курсивный  
      Курсив 
      Попробуйте 
   
 
  . Font-weight-light  
      Облегченный текст 
      Попробуйте 
   
 
  .шрифт-вес-легче  
      Облегченный текст 
      Попробуйте 
   
 
  . Font-weight-normal  
      Обычный текст 
      Попробуйте 
   
 
  .  Свинец  
      Выделяет абзац 
      Попробуйте 
   
 
  . Маленький  
      Обозначает меньший текст (установлен на 80% от размера родительского) 
      Попробуйте 
   
 
  .текст слева  
      Обозначает текст с выравниванием по левому краю 
      Попробуйте 
   
 
   .text - * - слева  
      Обозначает текст с выравниванием по левому краю на маленьких, средних, больших или xlarge экранах. 
      Попробуйте 
   
 
  . Текстовый разрыв  
      Предотвращает нарушение макета длинным текстом 
      Попробуйте 
   
 
   .text-center  
      Обозначает текст с выравниванием по центру 
      Попробуйте 
   
 
  .текст - * - центр  
      Обозначает текст с выравниванием по центру на маленьких, средних, больших или xlarge экранах.  
      Попробуйте 
   
 
   .text-decoration-none  
      Удаляет подчеркивание ссылки 
      Попробуйте 
   
 
  . Текст-право  
      Обозначает текст с выравниванием по правому краю 
      Попробуйте 
   
 
   .text - * - правый  
      Обозначает текст с выравниванием по правому краю на малых, средних, больших или xlarge экранах. 
      Попробуйте 
   
 
  .выравнивание текста по ширине  
      Обозначает текст с выравниванием по ширине 
      Попробуйте 
   
 
   .text-monospace  
      Моноширинный текст 
      Попробуйте 
   
 
   .text-nowrap  
      Указывает на отсутствие переноса текста 
      Попробуйте 
   
 
  . Текст в нижнем регистре  
      Обозначает текст в нижнем регистре 
      Попробуйте 
   
 
  . сброс текста  
      Сбрасывает цвет текста или ссылки (наследует цвет от родительского). 
      Попробуйте 
   
 
  . Верхний регистр текста  
      Обозначает текст в верхнем регистре 
      Попробуйте 
   
 
  . Text-capitalize  
      Обозначает прописной текст 
      Попробуйте 
   
 
   .инициализм  
      Отображает текст внутри элемента    немного меньшим размером шрифта 
      Попробуйте 
   
 
  .список без стиля  
      Удаляет стиль списка по умолчанию и левое поле для элементов списка (работает как с  
     , так и с  
       ). Этот класс применяется только к непосредственным дочерним элементам списка (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс также к любым вложенным спискам) 

      Попробуйте 
   
 
   . list-inline  
      Помещает все элементы списка в одну строку (используется вместе с
     .list-inline-item  для каждого элемента 
  • ) 
    		• 
      Попробуйте 
   
     
      . С предварительной прокруткой  
      Делает элемент  
      прокручиваемым 
    		
      Попробуйте 
   
     
     
     Полный справочник CSS для начальной загрузки 4 
    
 
     Чтобы получить полную информацию обо всех классах CSS, доступных в Bootstrap 4, посетите наш
Справочник по всем классам Bootstrap 4. 
    
 
    

 
     
     Бутстрап 4 цвета 
    
      


 
     
     Цвета текста 
    
 
     Bootstrap 4 имеет несколько контекстных классов, которые можно использовать для предоставления «значения через цвета».
    
 
     Классы цветов текста:  .text-mute ,
  .text-primary ,  .text-success ,  .text-info ,
  .text-warning ,  .text-dangerous ,  . text-secondary ,  .text-white ,
  .text-dark ,  .text-body  (цвет тела по умолчанию / часто черный) и  .text-light : 
    

 
     Пример 
    

 
     Этот текст отключен. 
    
 
     Этот текст важен. 
    
 
     Этот текст указывает на успех.
    
 
     Этот текст представляет некоторую информацию. 
    
 
     Этот текст представляет собой предупреждение. 
    
 
     Этот текст представляет опасность. 
    
 
     Дополнительный текст. 
    
 
     Темно-серый текст. 
    
 
     Основной текст. 
    
 
     Светло-серый текст. 
    

Попробуй сам "


 
     Классы контекстного текста также могут использоваться в ссылках, которые добавят более темный цвет при наведении курсора: 
    


 
     Вы также можете добавить 50% непрозрачности для черного или белого текста с помощью классов  .text-black-50  или  .text-white-50 : 
    

 
     Пример 
    

   
     Черный текст с непрозрачностью 50% на белом фоне 
    
   
     Белый текст с непрозрачностью 50% на черном фоне 
    

Попробуй сам "


 
     
     Цвет фона 
    

 
     Классы цветов фона: . bg-primary , 
.bg-success ,  .bg-info ,  .bg-warning ,  .bg-dangerous ,  .bg-secondary ,  .bg-dark  и  .bg-light . 
    
 
     Обратите внимание, что цвета фона не определяют цвет текста, поэтому в некоторых случаях вы захотите использовать их вместе с классом  .text- * . 
    

 
     Пример 
    

 
     Этот текст важен. 
    
 
     Этот текст указывает на успех. 
    
 
     Этот текст представляет некоторую информацию.
    
 
     Этот текст представляет собой предупреждение. 
    
 
     Этот текст представляет опасность. 
    
 
     Дополнительный цвет фона. 
    
 
     Темно-серый цвет фона. 
    
 
     Светло-серый цвет фона. 
    

Попробуй сам "
 
    

 
     
     Bootstrap 4 Типографика и форматирование текста 
    
                                
                
            
                
                 
     В этом руководстве вы узнаете о стилях и форматировании текстового содержимого, такого как заголовки, абзацы, цитаты и т.  Д.с помощью Bootstrap. 
    
                 
     Работа с заголовками 
    
                 
     Вы можете определить все заголовки HTML, от  
     
     до  
     
     - так же, как вы определяете в простом документе HTML. Вы также можете использовать классы заголовков с  .h2  по  .h6  для других элементов, если вы хотите применить стиль к тексту элемента так же, как и к заголовкам. 
    
                
                
                    
                        
                         
      
     h2.Заголовок начальной загрузки 
    

     h3. Заголовок начальной загрузки 
    

     h4. Заголовок начальной загрузки 
    

     h5. Заголовок начальной загрузки 
    

     h5. Заголовок начальной загрузки 
    

     h6. Заголовок начальной загрузки 
          
     - Результат приведенного выше примера будет выглядеть примерно так:
     Настройка заголовков 
     Кроме того, вы можете использовать тег    с . text-muted , чтобы отображать вторичный текст любого заголовка в меньшем и более легком варианте. Вот пример:
      
    
    Необычный заголовок дисплея
    
     С выцветшим второстепенным текстом 
      
     - Результат приведенного выше примера будет выглядеть примерно так:
     Отображаемые заголовки 
     Bootstrap 4 вводит отображаемые заголовки, которые можно использовать, когда вам нужно выделить заголовок.Отображаемые заголовки отображаются более крупным шрифтом  , но более светлым  шрифтом .
     Доступны четыре различных заголовка дисплея. Вот пример:
      
     Отображать заголовок 1 
    

     Отображать заголовок 2 
    

     Показать заголовок 3 
    

     Отображать заголовок 4 
          
     - Результат приведенного выше примера будет выглядеть примерно так:
     Работа с абзацами 
     Глобальное значение по умолчанию для начальной загрузки  font-size  равно  1rem  (обычно 16 пикселей), с высотой строки    1.5 . Это применяется к   и всем абзацам. В дополнение к этому, нижнее поле, равное половине их высоты строки   (по умолчанию 10 пикселей), применяется ко всем абзацам, то есть к элементам 
     .
     Вы также можете выделить абзац, добавив к нему класс  .lead .
      
     Так выглядит обычный абзац в Bootstrap.
    

     Так выделяется абзац в Bootstrap. 
          
     - HTML-код в приведенных выше примерах даст следующий результат:
      Совет:  В CSS  rem  означает «root em».1rem равен размеру шрифта корневого элемента (т.е. элемента  ), который по умолчанию составляет 16 пикселей в большинстве браузеров.
     Вы можете легко выровнять текст по левому, правому и центру внутри абзаца, используя классы выравнивания текста.
      
     Текст с выравниванием по левому краю.
    

     Выровненный по центру текст. 
    

     Текст с выравниванием по правому краю 
    

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

     Текст с выравниванием по левому краю на средних или широких окнах просмотра. 
    

     Текст с выравниванием по левому краю на больших или широких окнах просмотра. 
    

     Текст с выравниванием по левому краю на очень больших или широких окнах просмотра.  
          
     Форматирование текста 
     Вы можете использовать теги форматирования текста, такие как   ,   ,   , чтобы сделать текст жирным, курсивом, мелким шрифтом и т. Д., Точно так же, как и в простом HTML.
      
      Текст выделен жирным шрифтом  
    

      Это компьютерный код  
    

      Это выделенный текст  
    

      Текст выделен курсивом  
    

      Это выделенный текст  
    

      Это небольшой текст  
    

      Это сильно подчеркнутый текст  
    

     Это  индекс  и superscript 
    

      Этот текст вставляется в документ  
    

      Этот текст удален из документа  
          
     - Результат приведенного выше примера будет выглядеть примерно так:
     Преобразование текста 
     Вы также можете преобразовать текст в нижний, верхний регистр или сделать их заглавными.
      
     Быстрая коричневая лисица перепрыгивает через ленивую собаку. 
    

     Быстрая коричневая лисица перепрыгивает через ленивую собаку. 
    

     Быстрая коричневая лисица перепрыгивает через ленивую собаку. 
          
     - Результат приведенного выше примера будет выглядеть примерно так:
     Раскраска текста 
     Цвета - это мощный метод передачи важной информации в дизайне веб-сайтов.
     Bootstrap имеет несколько специальных служебных классов, которые можно использовать для этой цели, например, отображение сообщения об успехе зеленым цветом, предупреждения или сообщения об ошибке красным цветом и т. Д.
      
     Основной: внимательно прочтите инструкции, прежде чем продолжить. 
    

     Второстепенный: этот признак был удален из последней версии. 
    

     Успешно: ваше сообщение успешно отправлено.
    

     Информация: вы должны согласиться с условиями, чтобы завершить процесс регистрации. 
    

     Предупреждение: возникла проблема с сетевым подключением. 
    

     Опасно: произошла ошибка при отправке ваших данных. 
    

     Без звука: этот абзац текста неактивен. 
          
     - Результат приведенного выше примера будет выглядеть примерно так:
     Пожалуйста, ознакомьтесь с главой Вспомогательные классы Bootstrap, чтобы узнать о других классах раскраски текста и фона, а также о различных других служебных классах.
     Стильные цитаты 
     Вы также можете красиво взглянуть на свои цитаты - просто определите цитаты с помощью стандартного элемента 
     , а таблица стилей начальной загрузки сделает все остальное.
     Кроме того, для идентификации источника вы можете добавить элемент 
      с классом  .blockquote-footer  и обернуть имя исходного произведения в   , например:
      <цитата>
    
     Мир - опасное место для жизни; не из-за злых людей, а из-за людей, которые ничего не делают с этим.
    
    
     Автор  Альберт Эйнштейн  
    

      
     - Результат приведенного выше примера будет выглядеть примерно так:
     Вы также можете выровнять цитаты по правому краю или по центру, просто применив классы выравнивания текста . text-right  или  .text-center  в элементе 
     .
     Bootstrap 3 Типографика 
     Bootstrap включает стили, определяющие внешний вид текстовых элементов.
     На этой странице показано, как отображаются определенные текстовые элементы при использовании Bootstrap (часто без использования каких-либо классов). Как правило, любая страница, которая ссылается на таблицу стилей Bootstrap 3, будет отображать эти элементы таким же образом (если это не отменено другими стилями).
     Основной текст 
     Глобальный размер шрифта  Bootstrap по умолчанию  составляет  14 пикселей , а его высота строки   -  1.42857143 . Это применяется к элементу   и всем абзацам.
     Семейство шрифтов  по умолчанию :  "Helvetica Neue", Helvetica, Arial, sans-serif .
     Кроме того, элементы 
      имеют нижнее поле, равное половине их вычисленной высоты строки (по умолчанию 10 пикселей).
     Как и в случае с любым другим элементом, вы можете изменить любое из этих значений.
     Заголовки 
     Заголовки имеют вес шрифта  500 , высоту строки  1,1  и наследуют семейство шрифтов и цвет. У заголовков также есть верхнее и нижнее поля.
     h2 (полужирный шрифт 36 пикселей) 
     h3 (полужирный 30 пикселей) 
     h4 (полужирный шрифт 24 пикселя) 
     h5 (полужирный шрифт 18 пикселей) 
     h5 (полужирный шрифт 14 пикселей) 
     h6 (полужирный шрифт 12 пикселей) 
     Классы заголовков 
     Bootstrap также включает классы заголовков из . h2 – .h6  на случай, если вам нужно отобразить встроенный текст в стиле определенного заголовка.
     .h2 (полужирный шрифт 36 пикселей)
    .h3 (полужирный 30 пикселей)
     .h4 (полужирный шрифт 24 пикселя)
     .h5 (полужирный шрифт 18 пикселей)
     .h5 (полужирный шрифт 14 пикселей)
     .h6 (полужирный шрифт 12 пикселей)
     Подзаголовки 
     Вы можете создать подзаголовок или дополнительный текст, поместив текст внутри элемента    внутри заголовка.
     Заголовок 1 
    Подзаголовок
     Заголовок 2 
    Подзаголовок
     Заголовок 3 
    Подзаголовок
     Заголовок 4 
    Подзаголовок
     Заголовок 5 
    Подзаголовок
     Заголовок 6 
    Подзаголовок
     Маркированный текст 
     Элемент HTML    представляет текст, помеченный или выделенный для справочных целей, в связи с его релевантностью в другом контексте.
     Вот пример отрисовки этого элемента в Bootstrap:
     Образец  выделенного текста .
     Выравнивание текста 
     Bootstrap включает классы, созданные специально для выравнивания текста.
     Выровнено по левому краю
     С выравниванием по центру
     Выровнено по правому краю
     Обосновано.
     Без переноса
     Классы преобразования текста 
     Bootstrap включает классы, созданные специально для преобразования текста.
     Текст в нижнем регистре.
     Текст в верхнем регистре.
     Текст с заглавной буквы
     Сокращения 
     В HTML    представляет собой аббревиатуру или акроним.Атрибут  title  может использоваться для расширения аббревиатуры.
     В Bootstrap аббревиатуры с атрибутом  title  отображаются со светлой пунктирной нижней границей и курсором справки при наведении.
      Проф.
     Инициализм 
     Вы можете добавить класс Bootstrap  .initialism , чтобы отображать аббревиатуру с немного меньшим размером шрифта.
      SQL  используется для запросов к базам данных.
     Цитаты 
     Цитаты - по умолчанию 
     В Bootstrap элемент 
      отображается следующим образом:
     <цитата>
     Самый важный момент в вашей жизни сейчас.Самый важный человек в вашей жизни - это тот, с кем вы сейчас находитесь, а самое важное занятие в вашей жизни - это то, чем вы занимаетесь сейчас.
     Цитаты - Источник 
     Bootstrap визуализирует элементы    и 
     , вложенные в элемент 
      следующим образом:
     <цитата>
     Большинство из нас переполнено всевозможными убеждениями.Мы пропитаны здравым смыслом и преобладающей мудростью нашей культуры, традиций, сообществ, профессии, семьи и друзей.
     Том Кэмпбелл в фильме  My Big Toe 
     Блок-цитаты - Реверс 
     Вы можете использовать Bootstrap .blockquote-reverse  класс для выравнивания по правому краю цитата:
     <цитата>
     Большинство из нас переполнено всевозможными убеждениями. Мы пропитаны здравым смыслом и преобладающей мудростью нашей культуры, традиций, сообществ, профессии, семьи и друзей.
     Том Кэмпбелл в фильме  My Big Toe 
     Списки 
     Bootstrap применяет различные стили и имеет ряд классов специально для списков.
     Списки - без стиля 
     Вы можете использовать класс  Bootstrap  .list-unstyled  для рендеринга списков без их стандартного  стиля списка  и  левого поля :
    •  Кошки
    •  Собаки
    •  Слоны
     Списки - встроенные 
     Вы можете использовать Bootstrap .list-inline  класс для рендеринга списков как  display: inline-block  и для применения некоторых отступов:
    •  Кошки
    •  Собаки
    •  Слоны
     Списки описаний 
     В Bootstrap списки описаний отображаются следующим образом:
     Архат
     «Совершенный», преодолевший три яда желания, ненависти и невежества.
     Бодхи
     Пробудившаяся мудрость.
     Дзен
     Медитативное погружение, в котором устраняются все дуалистические различия.
     Списки описаний - горизонтальные 
     Вы можете расположить термины и описания по горизонтали, добавив класс Bootstrap  dl-horizontal .
     Обратите внимание, что это работает, только когда область просмотра шире. Если вы не видите разницы между тем, как отображается этот пример и предыдущий, вы можете открыть предварительный просмотр в новом окне. Если по-прежнему ничего не изменилось, возможно, вам понадобится устройство большего размера, чтобы просмотреть этот пример.
     Архат
     «Совершенный», преодолевший три яда желания, ненависти и невежества.
     Бодхи
     Пробудившаяся мудрость.
     Дзен
     Медитативное погружение, в котором устраняются все дуалистические различия.
     Код 
     В Bootstrap элемент    отображается следующим образом:
     Атрибут  accesskey  можно использовать в любом элементе HTML5.
     Ввод с клавиатуры 
     В Bootstrap элемент    отображается следующим образом:
     Чтобы сохранить документ на Mac, нажмите Command+S 
     Предварительно отформатированный текст 
     В Bootstrap элемент 
      отображается следующим образом: 
    

    

     В этом тексте
был отформатирован с использованием
   предварительный тег HTML.Браузер должен
      отображать все пустое пространство
как было введено.

     Вы также можете добавить класс  с предварительной прокруткой Bootstrap , чтобы установить максимальную высоту   на 350 пикселей и установить полосу прокрутки по оси Y.
     Пример текста 
     В Bootstrap элемент    отображается следующим образом:
     Компьютер сообщает:  Недостаточно памяти .Я всегда думал, что у меня хорошая память!
     Переменные 
     В Bootstrap элемент    отображается следующим образом:
      E  =  m  c  2 
     Bootstrap Typography - примеры и руководство 
     Заметки - это небольшие компоненты, очень полезные для вставки дополнительной информации.
      Основная нота:  Lorem, ipsum dolor sit amet conctetur adipisicing elit. Диплом
     doloremque officia labouriosam. Itaque ex obcaecati architeo! Qui needitatibus delectus
     placeat illo rem id nisi consquatur esse, sint perspiciatis soluta porro?
      Дополнительное примечание:  Lorem, ipsum dolor sit amet conctetur adipisicing elit.
     Cum doloremque officia labouriosam. Itaque ex obcaecati architeo! Qui needitatibus
     delectus placeat illo rem id nisi consquatur esse, sint perspiciatis soluta porro?
      Успех примечания:  Lorem, ipsum dolor sit amet conctetur adipisicing elit.Диплом
     doloremque officia labouriosam. Itaque ex obcaecati architeo! Qui needitatibus delectus
     placeat illo rem id nisi consquatur esse, sint perspiciatis soluta porro?
      Обратите внимание на опасность:  Lorem, ipsum dolor sit amet conctetur adipisicing elit. Диплом
     doloremque officia labouriosam. Itaque ex obcaecati architeo! Qui needitatibus delectus
     placeat illo rem id nisi consquatur esse, sint perspiciatis soluta porro?
      Примечание. Предупреждение:  Lorem, ipsum dolor sit amet conctetur adipisicing elit.Диплом
     doloremque officia labouriosam. Itaque ex obcaecati architeo! Qui needitatibus delectus
     placeat illo rem id nisi consquatur esse, sint perspiciatis soluta porro?
      Информация о примечании:  Lorem, ipsum dolor sit amet conctetur adipisicing elit. Диплом
     doloremque officia labouriosam. Itaque ex obcaecati architeo! Qui needitatibus delectus
     placeat illo rem id nisi consquatur esse, sint perspiciatis soluta porro?
      Свет для нот:  Lorem, ipsum dolor sit amet conctetur adipisicing elit.Диплом
     doloremque officia labouriosam. Itaque ex obcaecati architeo! Qui needitatibus delectus
     placeat illo rem id nisi consquatur esse, sint perspiciatis soluta porro?
     .
    Добавить комментарий 
    Ваш адрес email не будет опубликован. Обязательные поля помечены *