Tipografija
Dokumentazzjoni u eżempji għat-tipografija Bootstrap, inklużi settings globali, intestaturi, test tal-korp, listi, u aktar.
Settings globali
Bootstrap jistabbilixxi stili ta' wiri, tipografija u link globali bażiċi. Meta jkun meħtieġ aktar kontroll, iċċekkja l- klassijiet ta 'utilità testwali .
- Uża munzell ta 'font indiġeni li jagħżel l-aħjar
font-family
għal kull OS u apparat. - Għal skala tat-tip aktar inklużiva u aċċessibbli, nużaw l-għerq default tal-brawżer
font-size
(tipikament 16px) sabiex il-viżitaturi jkunu jistgħu jippersonalizzaw il-inadempjenzi tal-browser tagħhom kif meħtieġ. - Uża l-
$font-family-base
,$font-size-base
, u l-$line-height-base
attributi bħala l-bażi tipografika tagħna applikata għall-<body>
. - Issettja l-kulur tal-link globali permezz ta'
$link-color
. - Uża
$body-bg
biex tissettjabackground-color
fuq il-<body>
(#fff
b'mod awtomatiku).
Dawn l-istili jistgħu jinstabu fi ħdan _reboot.scss
, u l-varjabbli globali huma definiti fi _variables.scss
. Kun żgur li $font-size-base
tissettja rem
.
Intestaturi
L-intestaturi HTML kollha, <h1>
sa <h6>
, huma disponibbli.
Intestatura | Eżempju |
---|---|
<h1></h1> |
h1. Intestatura Bootstrap |
<h2></h2> |
h2. Intestatura Bootstrap |
<h3></h3> |
h3. Intestatura Bootstrap |
<h4></h4> |
h4. Intestatura Bootstrap |
<h5></h5> |
h5. Intestatura Bootstrap |
<h6></h6> |
h6. Intestatura 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
permezz ta' .h6
klassijiet huma wkoll disponibbli, għal meta trid tqabbel l-istil tat-tipa ta' intestatura iżda ma tistax tuża l-element HTML assoċjat.
h1. Intestatura Bootstrap
h2. Intestatura Bootstrap
h3. Intestatura Bootstrap
h4. Intestatura Bootstrap
h5. Intestatura Bootstrap
h6. Intestatura 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>
Customizing intestaturi
Uża l-klassijiet ta 'utilità inklużi biex toħloq mill-ġdid it-test ta' l-intestatura sekondarja żgħira minn Bootstrap 3.
Intestatura fancy display B'test sekondarju faded
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Uri l-intestaturi
Elementi tal-intestatura tradizzjonali huma ddisinjati biex jaħdmu l-aħjar fil-laħam tal-kontenut tal-paġna tiegħek. Meta jkollok bżonn intestatura biex tispikka, ikkunsidra li tuża intestatura tal- wiri — stil taʼ intestatura ikbar u kemmxejn iktar opinjonista.
<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>
L -intestaturi tal-wiri huma kkonfigurati permezz tal- $display-font-sizes
mappa Sass u żewġ varjabbli, $display-font-weight
u $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;
Ċomb
Agħmel paragrafu jispikkaw billi żżid .lead
.
Dan huwa paragrafu ewlieni. Jispikka minn paragrafi regolari.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Elementi tat-test inline
Styling għal elementi HTML5 inline komuni.
Tista' tuża t-tikketta tal-marka biexjenfasizzawtest.
Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala test imħassra.
Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala li m'għadhiex preċiża.
Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala żieda mad-dokument.
Din il-linja tat-test se tirrendi kif issottolinjat.
Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala stampar fini.
Din il-linja mogħtija bħala test grassett.
Din il-linja mogħtija bħala test korsiv.
<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>
Oqgħod attent li dawk it-tikketti għandhom jintużaw għal skop semantiku:
<mark>
jirrappreżenta test li huwa mmarkat jew enfasizzat għal skopijiet ta' referenza jew notazzjoni.<small>
jirrappreżenta kummenti sekondarji u titra żgħira, bħall-awtur u test legali.<s>
jirrappreżenta element li m'għadhomx rilevanti jew m'għadhomx preċiżi.<u>
jirrappreżenta medda ta' test inline li għandu jiġi rrappreżentat b'mod li jindika li għandu annotazzjoni mhux testwali.
Jekk trid tfassal it-test tiegħek, għandek tuża l-klassijiet li ġejjin minflok:
.mark
se tapplika l-istess stili bħal<mark>
..small
se tapplika l-istess stili bħal<small>
..text-decoration-underline
se tapplika l-istess stili bħal<u>
..text-decoration-line-through
se tapplika l-istess stili bħal<s>
.
Filwaqt li mhux muri hawn fuq, tħossok liberu li tuża <b>
u <i>
fl-HTML5. <b>
huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali, filwaqt li <i>
huwa l-aktar għal vuċi, termini tekniċi, eċċ.
Utilitajiet tat-test
Ibdel l-allinjament tat-test, ittrasforma, stil, piż, għoli tal-linja, dekorazzjoni u kulur bl-utilitajiet tat- test u l-utilitajiet tal- kulur tagħna .
Abbrevjazzjonijiet
Implimentazzjoni stilizzata tal- <abbr>
element tal-HTML għall-abbrevjazzjonijiet u l-akronimi biex turi l-verżjoni estiża fuq il-post. L-abbrevjazzjonijiet għandhom sottolinja awtomatika u jiksbu cursor ta' għajnuna biex jipprovdu kuntest addizzjonali fuq il-passaġġ u lill-utenti tat-teknoloġiji ta' assistenza.
Żid .initialism
ma' abbrevjazzjoni għal font-size kemmxejn iżgħar.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquotes
Biex tikkwota blokki ta' kontenut minn sors ieħor fid-dokument tiegħek. Kebbeb <blockquote class="blockquote">
madwar kwalunkwe HTML bħala l-kwotazzjoni.
Kwotazzjoni magħrufa sew, li tinsab f'element blockquote.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Ismijiet sors
L-ispeċifikazzjoni HTML teħtieġ li l-attribuzzjoni tal-blockquote titqiegħed barra l- <blockquote>
. Meta tipprovdi l-attribuzzjoni, wrap tiegħek <blockquote>
fi a <figure>
u uża a <figcaption>
jew element ta' livell ta' blokka (eż., <p>
) mal- .blockquote-footer
klassi. Kun żgur li wrap l-isem tax-xogħol tas-sors <cite>
ukoll.
<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>
Allinjament
Uża utilitajiet tat-test kif meħtieġ biex tbiddel l-allinjament tal-blockquote tiegħek.
<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>
Listi
Unstyled
Neħħi l-marġni default list-style
u tax-xellug fuq l-oġġetti tal-lista (tfal immedjati biss). Dan japplika biss għal oġġetti tal-lista tat-tfal immedjati , li jfisser li jkollok bżonn iżżid il-klassi għal kwalunkwe listi mnaqqsa wkoll.
- Din hija lista.
- Jidher kompletament unstyled.
- Strutturalment, għadu lista.
- Madankollu, dan l-istil japplika biss għal elementi tfal immedjati.
- Listi mdaħħla:
- mhumiex affettwati minn dan l-istil
- xorta se juri bulit
- u jkollhom marġini tax-xellug xierqa
- Dan xorta jista 'jkun utli f'xi sitwazzjonijiet.
<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>
F'konformità
Neħħi l-balal ta 'lista u applika ftit dawl margin
b'kombinazzjoni ta' żewġ klassijiet, .list-inline
u .list-inline-item
.
- Din hija oġġett tal-lista.
- U ieħor.
- Iżda huma murija inline.
<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>
Lista ta 'deskrizzjoni allinjament
Allinja termini u deskrizzjonijiet orizzontalment billi tuża l-klassijiet predefiniti tas-sistema tal-grilja tagħna (jew mixins semantiċi). Għal termini itwal, tista' b'għażla żżid .text-truncate
klassi biex taqta' t-test b'ellipsis.
- Listi ta' deskrizzjoni
- Lista ta 'deskrizzjoni hija perfetta għad-definizzjoni tat-termini.
- Terminu
-
Definizzjoni għat-terminu.
U xi test ta' definizzjoni ta' placeholder aktar.
- Terminu ieħor
- Din id-definizzjoni hija qasira, għalhekk l-ebda paragrafi żejda jew xejn.
- It-terminu maqtugħ huwa maqtugħ
- Dan jista 'jkun utli meta l-ispazju huwa strett. Iżżid ellissi fl-aħħar.
- Ibejtu
-
- Lista ta' definizzjoni mnaqqsa
- Smajt li tħobb il-listi tad-definizzjonijiet. Ħa npoġġi lista ta' definizzjoni fil-lista ta' definizzjoni tiegħek.
<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>
Daqsijiet tat-tipa li jirrispondu
F'Bootstrap 5, ippermettejna daqsijiet tat-tipa li jirrispondu b'mod awtomatiku, u b'hekk it-test ikun jista' jiskala b'mod aktar naturali madwar id-daqsijiet tal-apparat u tal-viewport. Agħti ħarsa lejn il- paġna tal-RFS biex issir taf kif jaħdem dan.
Sass
Varjabbli
L-intestaturi għandhom xi varjabbli ddedikati għad-daqs u l-ispazjar.
$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;
Elementi mixxellanji tat-tipografija koperti hawn u f'Reboot għandhom ukoll varjabbli ddedikati.
$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;
Mixins
M'hemm l-ebda mixins dedikati għat-tipografija, iżda Bootstrap juża Daqs tal-Font Responsive (RFS) .