in English

Типография

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

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

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

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

Ин параграфи пешбар аст. Он аз параграфҳои муқаррарӣ фарқ мекунад.

<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>ки асосан барои овоз, истилоҳҳои техникӣ ва ғайра.

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

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

Ихтисорот

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

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

аттр

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>

Андозаи шрифтҳои ҷавобӣ

Аз v4.3.0, Bootstrap имкон медиҳад, ки андозаҳои шрифти ҷавобгӯро фаъол созанд ва имкон медиҳад, ки матн дар миқёси дастгоҳ ва андозаи намоишгоҳ табиатан васеътар шавад. RFS -ро тавассути тағир додани $enable-responsive-font-sizesтағирёбандаи Sass ба trueва аз нав тартиб додани Bootstrap фаъол кардан мумкин аст.

Барои дастгирии RFS , мо як омехтаи Sass-ро барои иваз кардани font-sizeхосиятҳои муқаррарии худ истифода мебарем. Андозаи шрифтҳои ҷавобгӯ ба calc()функсияҳо бо омехтаи remвоҳидҳои намоишӣ ва намоишӣ мураттаб карда мешаванд, то рафтори миқёси ҷавобиро фаъол созанд. Маълумоти бештарро дар бораи RFS ва конфигуратсияи он дар анбори GitHub пайдо кардан мумкин аст .