in English

Типография

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

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

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

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

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

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

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

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

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

Дисплей 1
Дисплей 2
Дисплей 3
Дисплей 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.

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

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

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

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

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

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

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

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

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

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

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

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

<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>елемент за съкращения и акроними за показване на разширената версия при задържане на мишката. Съкращенията имат подчертаване по подразбиране и получават помощен курсор, за да осигурят допълнителен контекст при задържане и за потребителите на помощни технологии.

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

атрибут

HTML

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

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

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

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

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

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

Добавете <footer class="blockquote-footer">за идентифициране на източника. Увийте името на изходната работа в <cite>.

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

Някой известен в заглавието на източника
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

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

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

Някой известен в заглавието на източника
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

Някой известен в заглавието на източника
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Списъци

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

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

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

  • Това е елемент от списък.
  • И още един.
  • Но те се показват в ред.
<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клас, за да съкратите текста с многоточие.

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

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

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

Друг термин
Това определение е кратко, така че няма допълнителни параграфи или нещо подобно.
Скъсеният термин е съкратен
Това може да бъде полезно, когато пространството е малко. Добавя многоточие в края.
Гнездене
Списък с вложени дефиниции
Чух, че харесвате списъци с дефиниции. Нека сложа списък с дефиниции във вашия списък с дефиниции.
<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>

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

Считано от v4.3.0, Bootstrap се доставя с опция за активиране на адаптивни размери на шрифта, което позволява на текста да се мащабира по-естествено в размерите на устройството и прозореца за изглед. RFS може да се активира чрез промяна на $enable-responsive-font-sizesпроменливата Sass на trueи повторно компилиране на Bootstrap.

За да поддържаме RFS , ние използваме Sass mixin, за да заменим нашите нормални font-sizeсвойства. Адаптивните размери на шрифта ще бъдат компилирани във calc()функции с комбинация от remединици и прозорци, за да се даде възможност за адаптивно мащабиране. Повече за RFS и неговата конфигурация можете да намерите в неговото хранилище GitHub .