Cкачать
  1. Главная
  2. Документация
  3. Bootstrap 3
  4. CSS
  5. Типография

Типография

Типография bootstrap 3: Заголовки, Основной текст, Встроенные текстовые элементы, Выравнивание классов, Классы трансформации, Аббревиатуры, Адреса, Цитаты, Списки

Заголовки

Доступны все заголовки HTML от <h1> - <h6>. Также доступны классы от .h1 - .h6, на случай если вы захотите изменить стиль заголовков, но вместе с тем хотите, чтобы соседней текст отображался в том же строке.

h1. Bootstrap heading

 Semibold 36px

h2. Bootstrap heading

 Semibold 30px

h3. Bootstrap heading

 Semibold 24px

h4. Bootstrap heading

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

Простое создание, вторичного текста в любом заголовке за помощью тега <small> или класса .small.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
 
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Основной текст

Bootstrap глобальный размер шрифта font-size равен 14px, с line-height 1.428. Это применимо к <body> и всем параграфам. Кроме того, <p> (параграфы) получают нижний предел половины вычисленной высоты строки (по умолчанию 10px).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Ведущий основной текст

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

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

<p class="lead">...</p>

Построение с использованием Less

Масштаб шрифтов основана на двух Less переменных в variables.Less: @font-size-base и @line-height-base. Первый это базовый размер шрифта используемый везде, а второй является базовой высоты строки. Мы используем эти переменные и простую арифметику для создания margins, paddings, и line-heights всех наших типов и прочего. Настройте их, чтобы адаптировать Bootstrap.

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

Маркированый текст

Для выделения пробега текста благодаря своей актуальности в другом контексте, использовать <mark> tag.

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

Удаленный текст

Для обозначения блоков текста, которые были удалены использовать <del> tag.

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

<del>This line of text is meant to be treated as deleted text.</del>

Зачеркнутый текст

Не для индикации блоков текста, которые утратили свою актуальность использования <s> tag.

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

<s>This line of text is meant to be treated as no longer accurate.</s>

Вставленный текст

Для обозначения дополнения к документу использовать <ins> tag.

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

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Подчеркнутый текст

Чтобы подчеркнуть используйте <u> tag.

This line of text will render as underlined

<u>This line of text will render as underlined</u>

Чтобы выделить текст можно использовать HTML-теги по умолчанию, добавив им легкие стили.

Маленький текст

Для уменьшения выделения встроенного текста или блока текста, используйте тег <small>, чтобы задать ему размер, который будет составлять 85% от размера его родительского элемента. Заголовки должны установлены собственные (отдельные) font-size для вложенных элементов <small>.

В качестве альтернативы, можно использовать встроенный элемент с классом .small-где в середине <small>

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

<small>This line of text is meant to be treated as fine print.</small>

Жирный шрифт

Для выделения фрагмента текста с тяжелым насыщенным шрифтом.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Курсив

Для выделения фрагмента текста курсивом.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Альтернативные элементы

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

Классы выравнивания

Легко перестраивать текст для компонентов с выравниванием текста.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<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-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Классы трансформации

Transform текста в компонентах с классами текст капитализации.

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

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

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

Основные аббревиатуры

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

Инициализм

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

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Адреса

Представьте контактную информацию. Обезопасьте форматирования закончив все строки <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com 
<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

Цитаты

Цитаты нужны для цитирования блока содержимого с другого ресурса в теле вашего документа.

Цитаты по умолчанию

Оберните при помощи <blockquote>-HTML-код-код, который должен быть цитатой. Рекомендуем начинать цитату из <p>.

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>

Варианты цитаты

Изменение стиля и содержимого для простых вариаций стандартного <blockquote>.

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

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

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

Someone famous in Source Title
<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.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

Списки

Неупорядоченный

Список пунктов, когда порядок сортировки not явного значение.

  • 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>...</li>
</ul>

Упорядоченный

Список пунктов, когда порядок сортировки does явное значение.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Без стиля

Удаление 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 class="list-unstyled">
  <li>...</li>
</ul>

Встроенный

Размещение всех пунктов списка в одну линию при помощи display: inline-block; и небольших внутренних отступов.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

Описание

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

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.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Горизонтальное описание

Расположение терминов и их описаний бок о бок в линию при помощи <dl>.

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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Автоматическое сужение

Горизонтальный список описания будет автоматически сужаться, если в нем есть слишком долгие строки, которые не помещаются в левую колонку с text-overflow. В узком окне данный список примет стандартный вид для разметки.

Пожертвовать