Типографија

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

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

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

Користите изворни скуп фонтова који бира најбоље 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">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Именовање извора

Додајте а <footer class="blockquote-footer">за идентификацију извора. Умотајте име изворног дела у <cite>.

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.

Неко познат у наслову извора

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

Поравнање

Користите текстуалне услужне програме по потреби да промените поравнање вашег блок цитата.

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.

Неко познат у наслову извора

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

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте.

Неко познат у наслову извора

<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и леву маргину на ставкама листе (само за непосредну децу). Ово се односи само на ставке непосредне деце листе , што значи да ћете морати да додате класу и за све угнежђене листе.

Лорем ипсум долор сит амет
Цонсецтетур адиписцинг елит
Интегер молестие лорем ат масса
Фацилисис ин претиум нисл аликует
Нулла волутпат аликуам велит
- Пхаселлус иацулис некуе
- Пурус содалес ултрициес
- Вестибулум лаореет порттитор сем
- Ац тристикуе либеро волутпат ат
Фауцибус порта лацус фрингилла вел
Аенеан сит амет ерат нунц
Егет порттитор лорем

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

Лорем ипсум
Пхаселлус иацулис
Нулла волутпат

<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класу да бисте скратили текст троточком.

Листе описа

Листа описа је савршена за дефинисање појмова.

Еуисмод

Вестибулум ид лигула порта фелис еуисмод семпер егет лациниа одио сем нец елит.

Донец ид елит нон ми порта гравида ат егет метус.

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

Етиам порта сем малесуада магна моллис еуисмод.

Скраћени термин је скраћен

Фусце дапибус, теллус ац цурсус цоммодо, тортор маурис цондиментум нибх, ут ферментум масса јусто сит амет рисус.

Нестинг

Листа угнежђених дефиниција: Аенеан посуере, тортор сед цурсус феугиат, нунц аугуе бландит нунц.

<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унутар низа медијских упита. Боотстрап то не ради уместо вас, али га је прилично лако додати ако вам затреба.

Ево примера тога у пракси. Изаберите било 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;
  }
}