in English

Типографија

Документација и примери за типографија на Bootstrap, вклучувајќи глобални поставки, наслови, текст на телото, списоци и многу повеќе.

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

Глобални поставки

Bootstrap поставува основни глобални стилови на приказ, типографија и врски. Кога е потребна поголема контрола, проверете ги класите за текстуални алатки .

Користете домашен стек на фонтови што го избира најдоброто font-familyза секој ОС и уред.
За поинклузивна и попристапна скала на типови, го користиме стандардниот корен на прелистувачот font-size(обично 16 пиксели) за посетителите да можат да ги приспособат стандардните поставки на прелистувачот по потреба.
Користете ги атрибутите $font-family-base, $font-size-baseи $line-height-baseкако наша типографска основа применета на <body>.
Поставете ја глобалната боја на врската преку $link-color.
Користете $body-bgза да поставите a background-colorна <body>( #fffстандардно).

Овие стилови може да се најдат во _reboot.scss, а глобалните променливи се дефинирани во _variables.scss. Погрижете се да $font-size-baseпоставите rem.

Наслови

Сите HTML наслови, <h1>преку <h6>, се достапни.

Наслов	Пример
`<h1></h1>`	h1. Наслов за подигање
`<h2></h2>`	h2. Наслов за подигање
`<h3></h3>`	h3. Наслов за подигање
`<h4></h4>`	h4. Наслов за подигање
`<h5></h5>`	h5. Наслов за подигање
`<h6></h6>`	h6. Наслов за подигање

<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. Наслов за подигање

h2. Наслов за подигање

h3. Наслов за подигање

h4. Наслов за подигање

h5. Наслов за подигање

h6. Наслов за подигање

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во кратенка за малку помала големина на фонтот.

attr

HTML

html

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

Блокцитати

За цитирање блокови на содржина од друг извор во вашиот документ. Завиткајте <blockquote class="blockquote">околу кој било HTML како цитат.

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

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

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

Спецификациите за HTML бараат атрибуцијата на блок цитат да биде поставена надвор од <blockquote>. Кога давате атрибуција, завиткајте го <blockquote>во a <figure>и користете <figcaption>елемент од ниво на блок (на пр. ) со .blockquote-footerкласата. Не заборавајте да го завиткате и името на изворната работа <cite>.

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

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>

Порамнување

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

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

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>

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

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