Типографија

Документација и примери за Боотстрап типографију, укључујући глобална подешавања, наслове, основни текст, листе и још много тога.

Глобална подешавања

Боотстрап поставља основне глобалне стилове приказа, типографије и линкова. Када је потребна већа контрола, погледајте текстуалне услужне класе .

Користите изворни скуп фонтова који бира најбоље 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

Наслови

Сви ХТМЛ наслови, <h1>до <h6>, су доступни.

Наслов	Пример
`<h1></h1>`	х1. Боотстрап наслов
`<h2></h2>`	х2. Боотстрап наслов
`<h3></h3>`	х3. Боотстрап наслов
`<h4></h4>`	х4. Боотстрап наслов
`<h5></h5>`	х5. Боотстрап наслов
`<h6></h6>`	х6. Боотстрап наслов

<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класе су такође доступне, када желите да ускладите стил фонта наслова, али не можете да користите повезани ХТМЛ елемент.

х1. Боотстрап наслов

х2. Боотстрап наслов

х3. Боотстрап наслов

х4. Боотстрап наслов

х5. Боотстрап наслов

х6. Боотстрап наслов

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

Прилагођавање наслова

Користите укључене услужне класе да поново направите мали секундарни текст наслова из Боотстрапа 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>

Инлине текстуални елементи

Стилизација за уобичајене уграђене ХТМЛ5 елементе.

Можете користити ознаку за означавањеистакнутитекст.

~~Овај ред текста треба да се третира као избрисан текст.~~

~~Овај ред текста треба да се третира као више нетачан.~~

Овај ред текста треба да се третира као додатак документу.

Овај ред текста ће се приказати као подвучен

Овај ред текста треба да се третира као ситна слова.

Овај ред је приказан као подебљани текст.

Овај ред је приказан као курзив текст.

<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>у ХТМЛ5. <b>има за циљ да истакне речи или фразе без преношења додатне важности, док <i>је углавном за глас, техничке термине итд.

Текстуални услужни програми

Промените поравнавање текста, трансформишите, стил, тежину и боју помоћу наших текстуалних услужних програма и боја .

Скраћенице

Стилизована имплементација ХТМЛ <abbr>елемента за скраћенице и акрониме за приказ проширене верзије при лебдењу. Скраћенице имају подразумевану подвучену линију и добијају курсор помоћи за пружање додатног контекста при лебдењу и корисницима помоћних технологија.

Додајте .initialismскраћеници за мало мању величину фонта.

аттр

ХТМЛ

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

Блоцккуотес

За цитирање блокова садржаја из другог извора унутар вашег документа. Замотајте <blockquote class="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 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 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 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, Боотстрап се испоручује са опцијом за омогућавање прилагодљивих величина фонта, омогућавајући тексту да се природније скалира на различитим уређајима и величинама поља за приказ. РФС се може омогућити променом променљиве $enable-responsive-font-sizesСасс у trueи поновним компајлирањем Боотстрап-а.

Да бисмо подржали РФС , користимо Сасс микин да заменимо наша нормална font-sizeсвојства. Респонзивне величине фонтова ће бити компајлиране у calc()функције са мешавином јединица remи јединица за приказ како би се омогућило прилагодљиво понашање скалирања. Више о РФС -у и његовој конфигурацији можете пронаћи у његовом ГитХуб спремишту .