Типография
Ҳуҷҷатҳо ва намунаҳо барои типографияи Bootstrap, аз ҷумла танзимоти глобалӣ, сарлавҳаҳо, матни асосӣ, рӯйхатҳо ва ғайра.
Танзимоти глобалӣ
Bootstrap намоиши асосии глобалӣ, типография ва услубҳои истинодро муқаррар мекунад. Вақте ки назорати бештар лозим аст, синфҳои утилитаҳои матниро тафтиш кунед .
- Стеки шрифти ватаниро истифода баред, ки
font-family
барои ҳар як ОС ва дастгоҳ беҳтаринро интихоб мекунад . - Барои миқёси навъи бештар фарогир ва дастрас, мо решаи пешфарзии браузерро
font-size
(одатан 16px) истифода мебарем, то меҳмонон метавонанд пешфарзҳои браузери худро дар ҳолати зарурӣ танзим кунанд. $font-family-base
,$font-size-base
, ва атрибутҳоро$line-height-base
ҳамчун пойгоҳи типографии мо, ки ба<body>
.- Ранги истиноди глобалиро тавассути
$link-color
. $body-bg
Барои насб кардани abackground-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>
Намоиши сарлавҳаҳо
Унсурҳои сарлавҳаи анъанавӣ тарҳрезӣ шудаанд, ки дар гӯшти мундариҷаи саҳифаи шумо беҳтарин кор кунанд. Вақте ки ба шумо сарлавҳа лозим аст, то фарқ кунад, истифодаи сарлавҳаи намоишро баррасӣ кунед - услуби сарлавҳаи калонтар ва каме бештар ақидатар.
<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-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
Пешбарӣ
Параграфро бо илова кардани .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>
шарҳҳои паҳлӯӣ ва чопи хурд, ба монанди ҳуқуқи муаллиф ва матни қонуниро намояндагӣ мекунад.<s>
унсуреро ифода мекунад, ки дигар мувофиқ нестанд ё дигар дақиқ нестанд.<u>
як фосилаи матни дохилиро ифода мекунад, ки бояд тавре нишон дода шавад, ки он эзоҳоти ғайриматнӣ дорад.
Агар шумо хоҳед, ки матни худро услуб кунед, шумо бояд ба ҷои он синфҳои зеринро истифода баред:
.mark
ҳамон услубҳоро татбиқ хоҳад кард<mark>
..small
ҳамон услубҳоро татбиқ хоҳад кард<small>
..text-decoration-underline
ҳамон услубҳоро татбиқ хоҳад кард<u>
..text-decoration-line-through
ҳамон услубҳоро татбиқ хоҳад кард<s>
.
Гарчанде ки дар боло нишон дода нашудааст, озодона истифода баред <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>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Номгузории манбаъ
Мушаххасоти HTML талаб мекунад, ки аттрибутсияи блоки иқтибос берун аз <blockquote>
. Ҳангоми пешниҳоди аттрибутсия, худро <blockquote>
дар a печонед <figure>
ва <figcaption>
элементи сатҳи блокро (масалан, <p>
) бо .blockquote-footer
синф истифода баред. Боварӣ ҳосил кунед, ки номи асари манбаъро <cite>
низ печонед.
<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>
Ҳамоҳангсозӣ
Ҳангоми зарурат утилитаҳои матниро барои тағир додани ҳамоҳангии блоки иқтибосатон истифода баред.
<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>
<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
ва чапи ҷузъҳои рӯйхатро хориҷ кунед (танҳо кӯдакони фаврӣ). Ин танҳо ба ҷузъҳои рӯйхати кӯдакони фаврӣ дахл дорад , яъне ба шумо лозим меояд, ки синфро барои ҳама рӯйхатҳои дохилшуда низ илова кунед.
- Ин рӯйхат аст.
- Он комилан ноустувор ба назар мерасад.
- Аз ҷиҳати сохторӣ, он ҳоло ҳам рӯйхат аст.
- Аммо, ин услуб танҳо ба унсурҳои кӯдаки фаврӣ дахл дорад.
- Рӯйхати ҷойгиршуда:
- аз ин услуб бетаъсир намемонанд
- хануз тир нишон медихад
- ва маржаи чапи мувофиқ доранд
- Ин метавонад то ҳол дар баъзе ҳолатҳо муфид бошад.
<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>
Андозаи шрифтҳои ҷавобӣ
Дар 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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Миксинҳо
Барои матбаа миксинҳои махсус вуҷуд надоранд, аммо Bootstrap Responsive Font Sizeing (RFS) -ро истифода мебарад .