Source

Типография

Bootstrap типографиясы үчүн документтер жана мисалдар, анын ичинде глобалдык жөндөөлөр, аталыштар, негизги текст, тизмелер жана башкалар.

Глобалдык орнотуулар

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

Ар бир ОС жана түзмөк үчүн эң жакшысын тандаган түпнуска шрифт стектерин колдонуңуз .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. Bootstrap аталышы
`<h2></h2>`	h2. Bootstrap аталышы
`<h3></h3>`	h3. Bootstrap аталышы
`<h4></h4>`	h4. Bootstrap аталышы
`<h5></h5>`	h5. Bootstrap аталышы
`<h6></h6>`	h6. Bootstrap аталышы

<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. Bootstrap аталышы

h2. Bootstrap аталышы

h3. Bootstrap аталышы

h4. Bootstrap аталышы

h5. Bootstrap аталышы

h6. Bootstrap аталышы

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

Inline текст элементтери

Жалпы 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>тегдер алып келе турган ар кандай керексиз семантикалык кесепеттерге жол бербөө үчүн жеткиликтүү.

Жогоруда көрсөтүлбөсө да, HTML5те <b>колдонуңуз <i>. <b>кошумча маани бербестен сөздөрдү же сөз айкаштарын бөлүп көрсөтүү үчүн колдонулат, ал эми <i>негизинен үн, техникалык терминдер ж.б.у.с.

Текст утилиталары

Тексттин тегиздөөсүн, трансформациясын, стилин, салмагын жана түсүн биздин тексттин утилиталары жана түстүү программалары менен өзгөртүңүз .

Аббревиатуралар

<abbr>Аббревиатуралар жана аббревиатуралар үчүн HTML элементинин стилдештирилген ишке ашырылышы . Аббревиатураларда демейки асты сызылган жана жардам курсоруна ээ болуп, курсорду жана жардамчы технологияларды колдонуучуларга кошумча контекстти камсыз кылат.

.initialismБир аз кичирээк шрифт өлчөмү үчүн аббревиатурага кошуңуз .

аттр

HTML

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

Blockquotes

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

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer 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 элит. Integer 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 элит. Integer 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 элит. Integer 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>

Тизмелер

Unstyled

list-styleТизмедеги элементтердин демейки жана сол четин алып салыңыз (дароо балдар үчүн гана). Бул дароо балдардын тизмесинин элементтерине гана тиешелүү , демек, сиз каалаган уя салынган тизмелер үчүн классты да кошушуңуз керек болот.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
претиум nisl aliquet жылы Facilisis
Nulla volutpat aliquam velit
- 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>

Inline

Тизмедеги маркерлерди алып салыңыз жана marginэки класстын айкалышы менен жарыкты колдонуңуз .list-inlineжана .list-inline-item.

Lorem ipsum
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, текстти эллипс менен кыскартуу үчүн классты кошо аласыз.

Сүрөттөмө тизмелери

Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

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