Последние новости:

Поиск по сайту:

Исключить из наших наслаждений воображение — значит свести их на нет (М. Пруст).

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

5 мин для чтения
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
16.05.2017
Bootstrap - Типографика

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>

 

Сегмент кода выше выведет следующий результат:

Lead Body Copy

Для того, чтобы добавить акцент к абзацу, добавить класс = «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> с легким пунктиром границы вдоль дна и показывает полный текст. Для того, чтобы получить немного меньший размер шрифта добавить .initialism к <abbr>.

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

 

Адреса

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

<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:#">mailto@somedomain.ru</a>
</address>

 

Цитаты

Вы можете использовать по умолчанию <blockquote> вокруг любого HTML текста. Другие варианты включают в себя тег <small> для идентификации источника цитаты и правого выравнивая blockquote используя класс .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>. Вы можете сделать термины и описания в <dt> выстраиваются в линию бок о бок, используя класс 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>

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Если статья понравилась, то поделитесь ей в социальных сетях:

Читайте также

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Статьи партнеров:

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить

Спасибо! Ваша заявка принята

close

Спасибо! Ваша заявка принята

close