Bootstrap использует Helvetica Neue, Helvetica, Arial и sans-serif в стеке шрифтов по умолчанию. Используя функцию типографии Bootstrap, вы можете создавать заголовки, абзацы, списки и другие встроенные элементы. Давайте посмотрим на каждый из них в следующих разделах.

Ранее статья о типографии Bootstrap 3. Типография - заголовки, цитаты, списки, работа с текстом. Часть 2 уже публиковалась. Прочтите ее, будет полезно!

Заголовки

Все заголовки HTML (от h1 до h6) оформлены в Bootstrap. Пример показан ниже -

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

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

I'm Heading1 h1

I'm Heading2 h2

I'm Heading3 h3

I'm Heading4 h4

I'm Heading5 h5

I'm Heading6 h6

Встраиваемые подзаголовки

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

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

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

I'm Heading1 h1. I'm secondary Heading1 h1

I'm Heading2 h2. I'm secondary Heading2 h2

I'm Heading3 h3. I'm secondary Heading3 h3

I'm Heading4 h4. I'm secondary Heading4 h4

I'm Heading5 h5. I'm secondary Heading5 h5

I'm Heading6 h6. I'm secondary Heading1 h6

Чтобы добавить некоторый акцент на абзац, добавьте class = "lead". Это даст вам больший размер шрифта, более легкий вес и более высокую высоту линии, как в следующем примере -

Lead Example

This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.

Акцент

HTML-теги подчеркивания по умолчанию, такие как small устанавливает текст на 85% размера родителя, strong подчеркивает текст с более тяжелым шрифтом, а em выделяет текст курсивом.

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

<small>This content is within tag</small>

<strong>This content is within tag</strong>

<em>This content is within tag and is rendered as italics</em>

 
<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

Сокращения

Элемент HTML abbr обеспечивает разметку аббревиатур или сокращений, таких как WWW или HTTP. Элементы стиля Bootstrap abbr с легкой пунктирной рамкой внизу и раскрывают полный текст при наведении (пока вы добавляете этот текст в атрибут title abbr). Чтобы получить немного меньший размер шрифта, добавьте .initialism в abbr.

<abbr title = "World Wide Web">WWW</abbr>

<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

Адреса

Используя тег address, вы можете отображать контактную информацию на своей веб-странице. Поскольку address по умолчанию отображается в CSS как block; вам нужно будет использовать теги для добавления разрывов строк в текст прилагаемого адреса, натример тег br.

<address>
   <strong>Some Company, Inc.</strong>

   007 street

   Some City, State XXXXX

   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>
 
<address>
   <strong>Full Name</strong>

   <a href = "mailto:#">Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.</a>
</address>

Цитаты

Вы можете использовать blockquote по умолчанию для любого текста HTML. Другие варианты включают в себя добавление тега small для идентификации источника цитаты и выравнивания по правому краю блока с использованием класса .pull-right. Следующий пример демонстрирует все эти функции -

<blockquote>
   <p>This is a default blockquote example. This is a default
      blockquote example. This is a default blockquote
      example.This is a default blockquote example. This is a
      default blockquote example.</p>
</blockquote>
 
<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
 
<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

Посмотреть

Списки

Bootstrap поддерживает упорядоченные списки, неупорядоченные списки и списки определений.

• Упорядоченные списки - упорядоченный список - это список, который попадает в какой-то последовательный порядок и предваряется цифрами.
• Неупорядоченные списки. Неупорядоченный список - это список, который не имеет особого порядка и традиционно оформлен пулями. Если вы не хотите, чтобы маркеры отображались, вы можете удалить стиль, используя класс .list-unstyled. Вы также можете поместить все элементы списка в одну строку, используя класс .list-inline.
• Списки определений. В этом типе списка каждый элемент списка может состоять из элементов dt и dd. dt означает термин определения , и, как словарь, это термин (или фраза), который определяется. Впоследствии dd является определением dt. Вы можете заключить термины и описания в dl рядом друг с другом, используя класс dl-horizontal.

Следующий пример демонстрирует каждый из этих типов -

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>
 
<h4>Example of Unordered List</h4>
 
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>
 
<h4>Example of Unstyled List</h4>
 
<ul class = "list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>
 
<h4>Example of Inline List</h4>
 
<ul class = "list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>
 
<h4>Example of Definition List</h4>
 
<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>
 
<h4>Example of Horizontal Definition List</h4>
 
<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

Посмотреть

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!