Source

Типография

Ҳуҷҷатҳо ва намунаҳо барои типографияи 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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non comodo 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>ки асосан барои овоз, истилоҳҳои техникӣ ва ғайра.

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

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

Ихтисорот

Татбиқи услубии <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 ҳамчун иқтибос печонед .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутун адад.

<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. Бутун адад.

Шахси машҳур дар Сарлавҳаи Сарчашма 
<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. Бутун адад.

Шахси машҳур дар Сарлавҳаи Сарчашма 
<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. Бутун адад.

Шахси машҳур дар Сарлавҳаи Сарчашма 
<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
  • Молести бутуни дар масса
  • Facilisis дар aliquet nisl pretium
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ба таври ройгон озодона возеҳ кунед
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor loem
<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.

  • Lorem ipsum
  • Phasellus iaculis
  • Бехтарин
<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 ва дар вақти дилхоҳ.

Порта Малесуада
Этиам порта семина любовь любвие.
Истилоҳи буридашуда бурида мешавад
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum mass 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;
  }
}