in English

Тыпаграфіка

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

На гэтай старонцы

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

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

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

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

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

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

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

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

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

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

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

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>у <figure>і выкарыстоўвайце <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) .