in English

Типографија

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

На овој страници

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

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

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

Наслови

Сви ХТМЛ наслови, <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

Дисплеј 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Сасс мапе и две променљиве, $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.

Ово је водећи параграф. Издваја се од редовних пасуса.

хтмл

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

Имајте на уму да ове ознаке треба да се користе у семантичке сврхе:

представља текст који је означен или истакнут у сврху референци или бележења.
представља споредне коментаре и ситна слова, као што су ауторска права и правни текст.
<s>представља елементе који више нису релевантни или више нису тачни.
представља распон инлине текста који треба да буде приказан на начин који указује да има нетекстуалну напомену.

Ако желите да стилизујете свој текст, требало би да користите следеће класе:

.markпримениће исте стилове као .
.smallпримениће исте стилове као .
.text-decoration-underlineпримениће исте стилове као .
.text-decoration-line-throughпримениће исте стилове као <s>.

Иако није приказано изнад, слободно користите и у ХТМЛ5. има за циљ да истакне речи или фразе без преношења додатне важности, док је углавном за глас, техничке термине итд.

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

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

Скраћенице

Стилизована имплементација ХТМЛ <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>A well-known quote, contained in a blockquote element.</p>
</blockquote>

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

ХТМЛ спецификација захтева да се атрибуција блок цитата постави изван <blockquote>. Када дајете атрибуцију, умотајте свој <blockquote>у а <figure>и користите <figcaption>елемент на нивоу а или блок (нпр. ) са .blockquote-footerкласом. Обавезно умотајте и назив изворног дела <cite>.

Добро познати цитат, садржан у елементу блок цитата.

хтмл

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

Поравнање

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

Добро познати цитат, садржан у елементу блок цитата.

хтмл

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

Добро познати цитат, садржан у елементу блок цитата.

хтмл

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

Ово је листа.
Изгледа потпуно нестилизовано.
Структурно, то је још увек листа.
Међутим, овај стил се примењује само на непосредне подређене елементе.
Угнежђене листе:
- нису под утицајем овог стила
- ипак ће показати метак
- и имају одговарајућу леву маргину
Ово може и даље бити корисно у неким ситуацијама.

хтмл

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

Прилагодљиве величине фонта

У Боотстрап 5 смо подразумевано омогућили прилагодљиве величине фонта, омогућавајући тексту да се природније скалира на различитим уређајима и величинама поља за приказ. Погледајте страницу РФС да бисте сазнали како ово функционише.

Сасс

Променљиве

Наслови имају неке наменске варијабле за величину и размак.

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

Разни елементи типографије који су овде покривени иу Ребоот -у такође имају наменске варијабле.

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

Микинс

Не постоје наменски миксинови за типографију, али Боотстрап користи респонзивну величину фонта (РФС) .