in English

Типография

Документация и примери за типография на Bootstrap, включително глобални настройки, заглавия, основен текст, списъци и др.

На тази страница

Глобални настройки

Bootstrap задава основен глобален дисплей, типография и стилове на връзки. Когато е необходим повече контрол, вижте текстовите класове за помощ .

Използвайте естествен набор от шрифтове , който избира най-доброто font-familyза всяка операционна система и устройство.
За по-всеобхватна и достъпна мащабност на типа, ние използваме корена на браузъра по подразбиране font-size(обикновено 16px), така че посетителите да могат да персонализират настройките си по подразбиране на браузъра според нуждите.
Използвайте атрибутите $font-family-base, $font-size-baseи $line-height-baseкато нашата типографска основа, приложена към <body>.
Задайте глобалния цвят на връзката чрез $link-color.
Използвайте $body-bg, за да зададете background-colorна <body>( #fffпо подразбиране).

Тези стилове могат да бъдат намерени в _reboot.scss, а глобалните променливи са дефинирани в _variables.scss. Уверете се, че сте $font-size-baseзадали rem.

Заглавия

Всички HTML заглавия, <h1>до <h6>, са налични.

Заглавие	Пример
`<h1></h1>`	h1. Заглавие на Bootstrap
`<h2></h2>`	h2. Заглавие на Bootstrap
`<h3></h3>`	h3. Заглавие на Bootstrap
`<h4></h4>`	h4. Заглавие на Bootstrap
`<h5></h5>`	h5. Заглавие на Bootstrap
`<h6></h6>`	h6. Заглавие на Bootstrap

<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

h2. Заглавие на Bootstrap

h3. Заглавие на Bootstrap

h4. Заглавие на Bootstrap

h5. Заглавие на Bootstrap

h6. Заглавие на Bootstrap

html

<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.

Елегантно заглавие на дисплея с избледнял вторичен текст

html

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

Показване на заглавия

Традиционните заглавни елементи са проектирани да работят най-добре в съдържанието на вашата страница. Когато имате нужда от заглавие, което да се откроява, обмислете използването на заглавие за показване – по-голям, малко по-убедителен стил на заглавие.

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

Дисплей 5

Дисплей 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Заглавията на дисплея се конфигурират чрез $display-font-sizesкартата Sass и две променливи $display-font-weightи $display-line-height.

Заглавията на дисплея могат да се персонализират чрез две променливи $display-font-familyи $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Водя

Изпъкнете абзац, като добавите .lead.

Това е водещ параграф. Той се отличава от обикновените параграфи.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Вградени текстови елементи

Стил за общи вградени HTML5 елементи.

Можете да използвате маркера mark заподчертайтетекст.

~~Този ред от текст е предназначен да се третира като изтрит текст.~~

~~Този ред от текст трябва да се третира като вече неточен.~~

Този ред от текст е предназначен да се третира като допълнение към документа.

Този ред от текст ще се визуализира като подчертан.

Този ред от текст е предназначен да се третира като дребен шрифт.

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

Този ред се изобразява като текст в курсив.

html

<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>

Имайте предвид, че тези тагове трябва да се използват за семантични цели:

представлява текст, който е маркиран или осветен за целите на справка или нотиране.
представлява странични коментари и дребен шрифт, като авторски права и правен текст.
<s>представлява елемент, който вече не е подходящ или вече не е точен.
представлява участък от вграден текст, който трябва да бъде изобразен по начин, който показва, че има нетекстова анотация.

Ако искате да стилизирате своя текст, вместо това трябва да използвате следните класове:

.markще приложи същите стилове като .
.smallще приложи същите стилове като .
.text-decoration-underlineще приложи същите стилове като .
.text-decoration-line-throughще приложи същите стилове като <s>.

Въпреки че не е показано по-горе, не се колебайте да използвате и в HTML5. има за цел да подчертава думи или фрази, без да придава допълнителна важност, докато е предимно за глас, технически термини и т.н.

Текстови помощни програми

Променете подравняването на текста, трансформирайте, стила, теглото, височината на линията, декорацията и цвета с нашите помощни програми за текст и цветове .

Съкращения

Стилизирано внедряване на HTML <abbr>елемент за съкращения и акроними за показване на разширената версия при задържане на мишката. Съкращенията имат подчертаване по подразбиране и получават помощен курсор, за да осигурят допълнителен контекст при задържане и за потребителите на помощни технологии.

Добавете .initialismкъм съкращение за малко по-малък размер на шрифта.

атрибут

HTML

html

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

Блокови цитати

За цитиране на блокове от съдържание от друг източник във вашия документ. Обвийте <blockquote class="blockquote">всеки HTML като цитат.

Добре познат цитат, съдържащ се в елемент blockquote.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Наименуване на източник

HTML спецификацията изисква приписването на блокови цитати да бъде поставено извън <blockquote>. Когато предоставяте приписване, увийте своя <blockquote>в a <figure>и използвайте a <figcaption>или елемент на ниво блок (напр. ) с .blockquote-footerкласа. Не забравяйте да поставите и името на изходната работа <cite>.

Добре познат цитат, съдържащ се в елемент blockquote.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Подравняване

Използвайте текстови помощни програми, ако е необходимо, за да промените подравняването на вашия блоков цитат.

Добре познат цитат, съдържащ се в елемент blockquote.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Добре познат цитат, съдържащ се в елемент blockquote.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Списъци

Нестилизиран

Премахнете полето по подразбиране list-styleи лявото поле на елементите от списъка (само непосредствени деца). Това се отнася само за непосредствени дъщерни елементи от списъци , което означава, че ще трябва да добавите класа и за всички вложени списъци.

Това е списък.
Изглежда напълно нестилизирано.
Структурно, това все още е списък.
Този стил обаче се прилага само за непосредствени дъщерни елементи.
Вложени списъци:
- не се влияят от този стил
- все още ще показва куршум
- и имат подходящо ляво поле
Това все още може да бъде полезно в някои ситуации.

html

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

В редица

Премахнете водещите точки от списъка и приложете малко светлина marginс комбинация от два класа .list-inlineи .list-inline-item.

Това е елемент от списък.
И още един.
Но те се показват в ред.

html

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Подравняване на списъка с описания

Подравнете термините и описанията хоризонтално, като използвате предварително дефинираните класове (или семантични миксини) на нашата мрежова система. За по-дълги срокове можете по избор да добавите .text-truncateклас, за да съкратите текста с многоточие.

Списъци с описания

Списъкът с описания е идеален за дефиниране на термини.

Срок

Определение за термина.

И още малко текст за дефиниция на контейнер.

Друг термин

Това определение е кратко, така че няма допълнителни параграфи или нещо подобно.

Скъсеният термин е съкратен

Това може да бъде полезно, когато пространството е малко. Добавя многоточие в края.

Гнездене

Списък с вложени дефиниции: Чух, че харесвате списъци с дефиниции. Нека сложа списък с дефиниции във вашия списък с дефиниции.

html

<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">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Адаптивни размери на шрифта

В Bootstrap 5 сме активирали адаптивни размери на шрифта по подразбиране, което позволява на текста да се мащабира по-естествено в размерите на устройството и прозореца за изглед. Разгледайте страницата на RFS, за да разберете как работи това.

дързък

Променливи

Заглавията имат някои специални променливи за оразмеряване и разстояние.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Разни типографски елементи, обхванати тук и в Reboot , също имат специални променливи.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Миксини

Няма специални миксини за типография, но Bootstrap използва Responsive Font Sizing (RFS) .