Тыпаграфіка

Дакументацыя і прыклады тыпаграфікі Bootstrap, уключаючы глабальныя налады, загалоўкі, асноўны тэкст, спісы і многае іншае.

Глабальныя налады

Bootstrap задае асноўныя глабальныя стылі адлюстравання, тыпаграфікі і спасылак. Калі неабходны дадатковы кантроль, праверце тэкставыя класы ўтыліт .

Выкарыстоўвайце ўласны стэк шрыфтоў , які выбірае лепшае font-familyдля кожнай АС і прылады.
Для больш інклюзіўнай і даступнай шкалы тыпаў мы выкарыстоўваем корань браўзера па змаўчанні font-size(звычайна 16 пікселяў), каб наведвальнікі маглі наладзіць стандартныя налады браўзера па меры неабходнасці.
Выкарыстоўвайце атрыбуты $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.

Вы можаце выкарыстоўваць пазнаку длявылучыцьтэкст.

~~Гэты радок тэксту павінен разглядацца як выдалены тэкст.~~

~~Гэты радок тэксту павінен разглядацца як недакладны.~~

Гэты радок тэксту павінен разглядацца як дадатак да дакумента.

Гэты радок тэксту будзе адлюстроўвацца як падкрэслены

Гэты радок тэксту павінен разглядацца як дробны шрыфт.

Гэты радок адлюстроўваецца тлустым шрыфтам.

Гэты радок выдзелены курсівам.

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

Адаптыўныя памеры шрыфтоў

Пачынаючы з версіі 4.3.0, Bootstrap пастаўляецца з опцыяй уключэння адаптыўных памераў шрыфтоў, што дазваляе тэксту больш натуральна маштабавацца на розных прыладах і ў акне прагляду. RFS можна ўключыць, змяніўшы $enable-responsive-font-sizesзменную Sass на trueі перакампіляваўшы Bootstrap.

Для падтрымкі RFS мы выкарыстоўваем міксін Sass, каб замяніць нашы звычайныя font-sizeўласцівасці. Адаптыўныя памеры шрыфтоў будуць скампіляваны ў calc()функцыі з камбінацыяй remадзінак і адзінак прагляду, каб уключыць адаптыўнае маштабаванне. Больш падрабязна аб RFS і яго канфігурацыі можна знайсці ў рэпазітары GitHub .