Типография

Bootstrap типографиясе өчен документлар һәм мисаллар, глобаль көйләүләр, рубрикалар, тән тексты, исемлекләр һ.б.

Глобаль көйләүләр

Bootstrap төп глобаль дисплей, типография һәм сылтама стильләрен куя. Күбрәк контроль кирәк булганда, текст ярдәмендә классларны карагыз .

OSәр җайланма һәм җайланма өчен иң яхшысын сайлаган туган шрифт стакасын кулланыгыз .font-family
Күбрәк инклюзив һәм үтемле тип масштабы өчен, без браузерның төп тамыры font-size(гадәттә 16px) дип уйлыйбыз, шуңа күрә килүчеләр үз браузерының дефолтларын кирәк булганда көйли алалар.
$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

Башлыклар

Барлык 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 аукторы. Duis mollis, коммерция булмаган люктус.

<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>Aboveгарыда күрсәтелмәсә дә , <i>HTML5 кулланырга ирек бирегез . <b>сүз яки фразеологизмнарны яктырту өчен, өстәмә әһәмият бирмичә <i>, күбесенчә тавыш, техник терминнар һ.б.

Текст ярдәмендә

Текстны тигезләү, үзгәртү, стиль, авырлык, төсне безнең текст ярдәмендә һәм төс ярдәмендә кулланыгыз .

Кыскартулар

HTML <abbr>элементын кыскартулар һәм кыскартулар өчен стилизацияләнгән киңәйтү версиясен күрсәтү өчен. Кыскартуларның төп сызыгы бар һәм ярдәмче курсорны алу һәм өстәмә технологияләр кулланучыларга өстәмә контекст бирү өчен.

.initialismБераз кечерәк шрифт өчен кыскартуга өстәгез .

атт

HTML

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

Блоккотлар

Документыгыздагы бүтән чыганактан эчтәлек блокларын китерү өчен. <blockquote class="blockquote">HTMLәрбер цитата итеп урыгыз .

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.

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

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.

Чыганак исемендә танылган кеше

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

Тигезләү

Блоккотның тигезләнешен үзгәртү өчен кирәк булганда текст ярдәмчесен кулланыгыз.

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.

Чыганак исемендә танылган кеше

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

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.

Чыганак исемендә танылган кеше

<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һәм сул маржаны бетерегез (шунда ук балалар гына). Бу бары тик балалар исемлеге пунктларына гына кагыла , димәк, сез ояланган исемлекләр өчен класс өстәргә тиеш.

Лорем ипсум долор амет утыра
Consectetur adipiscing elit
Массадагы тулы молести лорем
Претиум нисл аликетында фасилис
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Пурус содалес ультрикасы
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Энеан утыра
Порттор лоремасын алыгыз

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

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

Etiam porta sem maleuada magna mollis euismod.

Киселгән термин киселгән

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentation massa justo sit amet risus.

Оя ясау

Ояланган билгеләмә исемлеге: Эне посуере, җәберләүче sed cursus feugiat, нунг авуг бландид нунк.

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

Onsаваплы типография

Onsаваплы типография текст элементларын масштаблау, төп сорау элементларын 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;
  }
}