Source

Тыпаграфіка

Дакументацыя і прыклады тыпаграфікі 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.

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.

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

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

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

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

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

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

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

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

<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
Цэлы лік нападаў lorem і маса
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
Нула волютпат

<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клас, каб абрэзаць тэкст шматкроп'ем.

Спісы апісанняў

Спіс апісанняў ідэальна падыходзіць для вызначэння тэрмінаў.

Эўізмод

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>

Адаптыўная друкарня

Адаптыўная тыпаграфіка азначае маштабаванне тэксту і кампанентаў шляхам простай карэкціроўкі каранёвага элемента font-sizeў шэрагу медыя-запытаў. Bootstrap не зробіць гэта за вас, але яго даволі лёгка дадаць, калі вам гэта спатрэбіцца.

Вось прыклад гэтага на практыцы. Выберыце любыя font-sizeс і медыя-запыты, якія хочаце.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}