Типография

Ҳуҷҷатҳо ва намунаҳо барои типографияи Bootstrap, аз ҷумла танзимоти глобалӣ, сарлавҳаҳо, матни асосӣ, рӯйхатҳо ва ғайра.

Дар ин саҳифа

Танзимоти глобалӣ

Bootstrap намоиши асосии глобалӣ, типография ва услубҳои истинодро муқаррар мекунад. Вақте ки назорати бештар лозим аст, синфҳои утилитаҳои матниро тафтиш кунед .

Стеки шрифти ватаниро истифода баред, ки font-familyбарои ҳар як ОС ва дастгоҳ беҳтаринро интихоб мекунад .
Барои миқёси намуди бештар фарогир ва дастрас, мо решаи пешфарзии браузерро font-size(одатан 16px) истифода мебарем, то меҳмонон метавонанд пешфарзҳои браузери худро дар ҳолати зарурӣ танзим кунанд.
$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. Сарлавҳаи 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

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. Барои таъкид кардани калимаҳо ё ибораҳо бе аҳамияти иловагӣ пешбинӣ шудааст, дар ҳоле ки асосан барои овоз, истилоҳҳои техникӣ ва ғайра.

Утилитҳои матнӣ

Бо ёрии утилитаҳои матнӣ ва рангҳои мо ҳамоҳангсозии матн, табдил, услуб, вазн, баландии сатр, ороиш ва рангро тағир диҳед .

Ихтисорот

Татбиқи услубии <abbr>унсури HTML барои ихтисорот ва ихтисоротҳо барои нишон додани версияи васеъшуда дар болои нишона. Ихтисоротҳо дорои хатти пешфарз мебошанд ва курсори ёриро ба даст меоранд, то контексти иловагиро дар боло ва ба истифодабарандагони технологияҳои ёрирасон таъмин кунанд.

Ба .initialismихтисорот барои андозаи шрифти каме хурдтар илова кунед.

аттр

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 Sizeing (RFS) -ро истифода мебарад .