Учебники

Bootstrap — Типография

Октябрь 26, 2018

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

Заголовки

Все заголовки 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 даст следующий результат —

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

Чтобы добавить встроенный подзаголовок к любому из заголовков, просто добавьте <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 даст следующий результат —

Копия основного текста

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

<h2>Lead Example</h2>
<p class = "lead">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.</p>

акцент

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

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

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

<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> со светлой пунктирной рамкой вдоль нижней части и показывает полный текст при наведении курсора (если вы добавите этот текст в атрибут заголовка <abbr>). Чтобы получить немного меньший размер шрифта, добавьте .initialism к <abbr>. 

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

Адреса

С помощью тега <адрес> вы можете отобразить контактную информацию на своей веб-странице. Поскольку <адрес> по умолчанию для отображения: блок; вам нужно будет использовать

Теги для добавления разрывов строк в тексте адреса. 

<address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>

<address>
   <strong>Full Name</strong><br>
   <a href = "mailto:#">[email protected]</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 .

Упорядоченные списки . Упорядоченный список — это список, который упорядочен в некотором последовательном порядке и начинается с нумерации.

Ненумерованные списки — неупорядоченный список — это список, который не имеет определенного порядка и традиционно оформлен маркерами. Если вы не хотите, чтобы маркеры появлялись, вы можете удалить стили с помощью класса .list-unstyled . Вы также можете поместить все элементы списка в одну строку, используя класс .list-inline .

Списки определений — в этом типе списка каждый элемент списка может состоять как из элементов <dt>, так и из элементов <dd>. <dt> обозначает определение термина , и как словарь, это термин (или фраза), который определяется. Впоследствии <dd> является определением <dt>. Вы можете создавать термины и описания в строке <dl>, используя класс dl-Horizontal .

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

49
Share: