Source

Типографија

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 како цитат.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

Некој познат во изворниот наслов 
<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>

Порамнување

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

Некој познат во изворниот наслов 
<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>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број posuere erat a ante.

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Цел број molestie lorem at massa
  • Фацилиза во претиум нисл аликет
  • Нула волутпат аликвам велит
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Енеан седат амет ерат нунц
  • Eget porttitor lorem
<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.

  • Лорем Ипсум
  • Phasellus iaculis
  • Nulla volutpat
<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класа за да го скратите текстот со елипса.

Списоци со опис
Списокот со опис е совршен за дефинирање на поими.
Еуизмод

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Малесуада порта
Etiam porta sem malesuada magna mollis euismod.
Скратениот термин е скратен
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Гнездење
Список со вгнездени дефиниции
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. 
<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во низа медиумски прашања. Bootstrap не го прави ова за вас, но е прилично лесно да се додаде доколку ви треба.

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