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
$link-color
u applika s-sottolinja tal-link biss fuq:hover
. - 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. Żomm f'moħħok li dawn l-intestaturi mhumiex responsivi awtomatikament, iżda huwa possibbli li jiġu attivati daqsijiet tat-tipa responsivi .
Display 1 |
Display 2 |
Display 3 |
Wiri 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>
Ċ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>
.mark
u .small
klassijiet huma wkoll disponibbli biex japplikaw l-istess stili kif <mark>
u <small>
filwaqt li tiġi evitata kwalunkwe implikazzjoni semantika mhux mixtieqa li jġibu t-tags.
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ż 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 class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Ismijiet sors
Żid a <footer class="blockquote-footer">
għall-identifikazzjoni tas-sors. Kebbeb l-isem tax-xogħol tas-sors fi <cite>
.
Kwotazzjoni magħrufa sew, li tinsab f'element blockquote.
<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>
Allinjament
Uża utilitajiet tat-test kif meħtieġ biex tbiddel l-allinjament tal-blockquote tiegħek.
Kwotazzjoni magħrufa sew, li tinsab f'element 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>
Kwotazzjoni magħrufa sew, li tinsab f'element 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>
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
Minn v4.3.0, Bootstrap jintbagħat bl-għażla li jippermetti daqsijiet tat-tipa li jirreaġixxu, li jippermetti li t-test jiskala b'mod aktar naturali madwar id-daqsijiet tal-apparat u tal-viewport. L- RFS jista 'jiġi attivat billi tinbidel il- $enable-responsive-font-sizes
varjabbli Sass għal true
u terġa' tikkompila Bootstrap.
Biex nappoġġjaw l- RFS , nużaw mixin Sass biex nissostitwixxu l- font-size
proprjetajiet normali tagħna. Id-daqsijiet tat-tipa responsivi se jiġu kkompilati calc()
f'funzjonijiet b'taħlita ta' rem
unitajiet ta' viewport u viewports biex jippermettu l-imġieba ta' skala reattiva. Aktar dwar RFS u l-konfigurazzjoni tagħha tista 'tinstab fuq ir- repożitorju GitHub tagħha .