in English

Типографија

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

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

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

  • Користете домашен стек на фонтови што го избира најдоброто font-familyза секој ОС и уред.
  • За поинклузивна и попристапна скала на типови, го користиме стандардниот корен на прелистувачот font-size(обично 16 пиксели) за посетителите да можат да ги приспособат стандардните поставки на прелистувачот по потреба.
  • Користете ги атрибутите $font-family-base, $font-size-baseи $line-height-baseкако наша типографска основа применета на <body>.
  • Поставете ја глобалната боја на врската преку $link-colorи применувајте ги подвлекувањата на врската само на :hover.
  • Користете $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. Наслов за подигање

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

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

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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во кратенка за малку помала големина на фонтот.

attr

HTML

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

Блокцитати

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

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

<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, Bootstrap се испорачува со опција за овозможување одговорни големини на фонтови, дозволувајќи му на текстот да се скалира поприродно низ големини на уредот и приказот. RFS може да се овозможи со промена на $enable-responsive-font-sizesпроменливата Sass во trueи прекомпајлирање на Bootstrap.

За поддршка на RFS , користиме Sass mixin за да ги замениме нашите нормални font-sizeсвојства. Одговорните големини на фонтови ќе се компајлираат во calc()функции со мешавина на remединици и приказ на приказ за да се овозможи однесувањето на одговорното скалирање. Повеќе за RFS и неговата конфигурација може да најдете на неговото складиште GitHub .