Skip to main content

Содержание

Стили для отображения Контента с некоторыми из наиболее часто используемых HTML-элементов, включая нормализацию, типографика, Изображения, таблицы и более.

Типографика

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 заголовки, <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>

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

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

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

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

Fancy display heading With faded secondary text 

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

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

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

Display 1

Display 2

Display 3

Display 4

 
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Выделение

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

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

<p class="lead">
  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 аббревиатуры для легкого уменьшения размера шрифта.

attr

HTML

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

Цитаты

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

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

<blockquote class="blockquote">
  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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

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

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

Someone famous in Source Title
<blockquote class="blockquote">
  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-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 blockquote-reverse">
  <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-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 class="list-unstyled">
  <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 class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">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 class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">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;
  }
}