Typography
Zvinyorwa uye mienzaniso yeBootstrap typography, inosanganisira zvigadziriso zvepasi rose, misoro, zvinyorwa zvemuviri, zvinyorwa, nezvimwe.
Global settings
Bootstrap inoseta kuratidzwa kwepasirese, kutaipa, uye mataira ekubatanidza. Kana kutonga kwakawanda kuchidikanwa, tarisa zvinyorwa zvekushandisa makirasi .
- Shandisa yakasarudzika font stack inosarudza yakanakisa
font-family
kune yega yega OS uye mudziyo. - Kuti uwedzere kusanganisirwa uye kusvikika mhando chiyero, isu tinoshandisa browser's default root
font-size
(kazhinji 16px) kuitira kuti vashanyi vagone kugadzirisa yavo browser defaults sezvinodiwa. - Shandisa iyo
$font-family-base
,$font-size-base
, uye$line-height-base
hunhu seyedu typographic base inoshandiswa kune iyo<body>
. - Seta iyo global link color kuburikidza ne
$link-color
. - Shandisa
$body-bg
kuseta abackground-color
pane<body>
(#fff
nekusarudzika).
Aya masitayera anogona kuwanikwa mukati _reboot.scss
, uye machinjiro epasi rose anotsanangurwa mu _variables.scss
. Iva nechokwadi chekuisa $font-size-base
mukati rem
.
Misoro
Yese misoro yeHTML, <h1>
kuburikidza ne <h6>
, iripo.
Heading | Muenzaniso |
---|---|
<h1></h1> |
h1. Bootstrap musoro |
<h2></h2> |
h2. Bootstrap musoro |
<h3></h3> |
h3. Bootstrap musoro |
<h4></h4> |
h4. Bootstrap musoro |
<h5></h5> |
h5. Bootstrap musoro |
<h6></h6> |
h6. Bootstrap musoro |
<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
kuburikidza .h6
nemakirasi anowanikwawo, nekuti kana iwe uchida kufananidza font yemusoro wenyaya asi usingakwanise kushandisa yakabatana HTML element.
h1. Bootstrap musoro
h2. Bootstrap musoro
h3. Bootstrap musoro
h4. Bootstrap musoro
h5. Bootstrap musoro
h6. Bootstrap musoro
<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>
Kugadzirisa misoro
Shandisa makirasi ekushandisa akasanganisirwa kugadzirazve diki diki musoro wemusoro kubva kuBootstrap 3.
Musoro wekuratidza mafancy Une mavara echipiri akadzima
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Ratidza misoro
Zvinyorwa zvemusoro zvechinyakare zvakagadzirirwa kushanda zvakanyanya munyama yezvinyorwa zvepeji rako. Paunenge uchida musoro kuti uoneke, funga kushandisa musoro wekuratidza - muhombe, une maonero emusoro zvishoma.
<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>
Misoro yekuratidzira inogadziriswa kuburikidza $display-font-sizes
nemepu yeSass uye maviri akasiyana, $display-font-weight
uye $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;
Tungamira
Ita kuti ndima ibude pachena nekuwedzera .lead
.
Iyi indima inotungamira. Inomira pachena kubva mundima dzenguva dzose.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Inline zvinyorwa zvinyorwa
Kutaera kune zvakajairika inline HTML5 zvinhu.
Unogona kushandisa mamaki tag kuhighlighttext.
Mutsetse wemavara uyu unofanirwa kubatwa semavara akadzimwa.
Mutsara wechinyorwa uyu unoitirwa kuti utorerwe seusisina chokwadi.
Mutsara wechinyorwa uyu unofanirwa kubatwa sewedzero kugwaro.
Mutsara wemavara uyu unozopa sekunyorwa kwazvakaitwa.
Mutsara wechinyorwa uyu unoitirwa kubatwa sechinyorwa chakanaka.
Mutsetse uyu wakashandurwa semavara matema.
Mutsetse uyu unoitwa semavara akatsveyamiswa.
<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>
Chenjerera kuti iwo ma tag anofanirwa kushandiswa semantic chinangwa:
<mark>
inomiririra chinyorwa chakamakwa kana kujekeswa sezvinangwa kana zvibodzwa.<small>
inomiririra mativi-tsanangudzo uye zvinyorwa zvidiki, sekodzero uye zvinyorwa zvepamutemo.<s>
inomiririra chinhu chisisakoshese kana chisisakodzeri.<u>
inomiririra kureba kwemavara ari mukati memutsara anofanira kupihwa nenzira inoratidza kuti ane chirevo chisiri chezvinyorwa.
Kana iwe uchida kunyora mavara ako, iwe unofanirwa kushandisa anotevera makirasi pachinzvimbo:
.mark
ichashandisa zvitayera zvakafanana ne<mark>
..small
ichashandisa zvitayera zvakafanana ne<small>
..text-decoration-underline
ichashandisa zvitayera zvakafanana ne<u>
..text-decoration-line-through
ichashandisa zvitayera zvakafanana ne<s>
.
Kunyange zvisina kuratidzwa pamusoro, inzwa wakasununguka kushandisa <b>
uye <i>
muHTML5. <b>
inoitirwa kuratidza mazwi kana mitsara pasina kuwedzera kukosha, asi <i>
kazhinji ndeyeizwi, tekinoroji mazwi, nezvimwe.
Zvinyorwa zvekushandisa
Shandura kurongeka kwemavara, shandura, chimiro, uremu, mutsara-kureba, kushongedzwa uye ruvara nezvishandiso zvedu zvemavara uye mavara ekushandisa .
Madimburiko
Kuitwa kwakamisikidzwa kweHTML's <abbr>
element yekupfupisa uye acronyms kuratidza yakawedzera vhezheni pane hover. Mapfupi ane default underline uye kuwana yekubatsira cursor yekupa mamwe mamiriro pane hover uye kune vashandisi veanobatsira matekinoroji.
Wedzera .initialism
kuchidimbu chemavara madiki zvishoma.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquotes
Zvekutora zvivharo zvemukati kubva kune imwe sosi mukati megwaro rako. Putira <blockquote class="blockquote">
kutenderedza chero HTML se quote.
Chirevo chinozivikanwa, chiri mu blockquote element.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Kudoma kwakabva
Iyo HTML spec inoda kuti blockquote attribution iiswe kunze kweiyo <blockquote>
. Paunenge uchipa chirevo, peta yako <blockquote>
mu a <figure>
uye shandisa a <figcaption>
kana block level element (semuenzaniso, <p>
) .blockquote-footer
nekirasi. Iva nechokwadi chekuputira zita rekwakabva basa mukati <cite>
zvakare.
<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>
Alignment
Shandisa zvinyorwa zvinoshandiswa sezvinodiwa kuti uchinje kurongeka kwe blockquote yako.
<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>
Lists
Unstyled
Bvisa iyo yakasarudzika list-style
uye yekuruboshwe muganho pane rondedzero zvinhu (pakarepo vana chete). Izvi zvinongoshanda kune ipapo vana rondedzero zvinhu , zvichireva kuti iwe uchafanirwa kuwedzera kirasi kune chero rondedzero yakanyorwa zvakare.
- Iri rondedzero.
- Inoratidzika isina kunyorwa zvachose.
- Nemaitiro, ichiri rondedzero.
- Nekudaro, chimiro ichi chinoshanda chete kune izvo zvinokurumidza zvemwana zvinhu.
- Nested lists:
- havana kukanganiswa nemaitiro aya
- icharamba ichiratidza bara
- uye uve neruboshwe rwakakodzera
- Izvi zvinogona kunge zvichiri kubatsira mune mamwe mamiriro.
<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>
Inline
Bvisa mabara erondedzero uye shandisa mwenje margin
une musanganiswa wemakirasi maviri, .list-inline
uye .list-inline-item
.
- Ichi chinhu chakanyorwa.
- Uye mumwe.
- Asi anoratidzwa mukati memutsara.
<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>
Tsananguro rondedzero kurongeka
Gadzirisa mazwi uye tsananguro zvakachinjika nekushandisa grid system yedu yakafanotsanangurwa makirasi (kana semantic musanganiswa). Kwematemu marefu, unogona kusarudza kuwedzera .text-truncate
kirasi kuderedza zvinyorwa ne ellipsis.
- Tsanangudzo mazita
- Rondedzero yerondedzero yakakwana pakutsanangura mazwi.
- Term
-
Tsanangudzo yeshoko.
Uye mamwe mavara etsanangudzo yenzvimbo.
- Imwe temu
- Tsanangudzo iyi ipfupi, saka hapana mamwe ndima kana chero chinhu.
- Izwi rakadimburirwa rakadimburwa
- Izvi zvinogona kubatsira kana nzvimbo yakaoma. Inowedzera ellipsis kumagumo.
- Nesting
-
- Nested tsanangudzo list
- Ndakanzwa iwe uchida tsanangudzo mazita. Rega ndiise rondedzero yerondedzero mukati merondedzero yako yerondedzero.
<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>
Anopindura masaizi efonti
MuBootstrap 5, takagonesa saizi yefonti inopindura nekumisikidza, zvichibvumira mavara kuti awedzere zvakajairwa pane mudziyo uye saizi yekuona. Tarisa pane iyo RFS peji kuti uone kuti izvi zvinoshanda sei.
Sass
Variables
Misoro ine zvimwe zvakatsaurirwa zvakasiyana-siyana zvehukuru uye nzvimbo.
$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;
Miscellaneous typography zvinhu zvakafukidzwa pano uye muReboot zvakare zvine zvakatsaurwa zvakasiyana.
$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
Iko hakuna yakazvitsaurira musanganiswa we typography, asi Bootstrap inoshandisa Inopindura Font Sizing (RFS) .