Source

Типография

Документация и примери за типография на 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.

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 елементи.

Можете да използвате маркера 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 като цитат.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цяло число posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-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. Цяло число posuere erat a ante.

Някой известен в заглавието на източника

<blockquote class="blockquote">
  <p class="mb-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>

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цяло число posuere erat a ante.

Някой известен в заглавието на източника

<blockquote class="blockquote text-center">
  <p class="mb-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>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цяло число posuere erat a ante.

Някой известен в заглавието на източника

<blockquote class="blockquote text-right">
  <p class="mb-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клас, за да съкратите текста с многоточие.

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

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

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Малесуада порта

Etiam porta sem malesuada magna mollis euismod.

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Гнездене

Списък с вложени дефиниции: 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">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </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>

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

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

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