Tipografia
Dokumentacioni dhe shembujt për tipografinë Bootstrap, duke përfshirë cilësimet globale, titujt, tekstin e trupit, listat dhe më shumë.
Parametrat globale
Bootstrap vendos stilet bazë globale të ekranit, tipografisë dhe lidhjeve. Kur nevojitet më shumë kontroll, shikoni klasat e përdorimit të tekstit .
- Përdorni një grumbull font origjinal që zgjedh më të mirën
font-family
për çdo OS dhe pajisje. - Për një shkallë më gjithëpërfshirëse dhe më të aksesueshme të tipit, ne përdorim rrënjën e paracaktuar të shfletuesit
font-size
(zakonisht 16 pikselë) në mënyrë që vizitorët të mund të personalizojnë parazgjedhjet e shfletuesit të tyre sipas nevojës. - Përdorni atributet
$font-family-base
,$font-size-base
dhe$line-height-base
si bazën tonë tipografike të aplikuar në<body>
. - Vendosni ngjyrën globale të lidhjes nëpërmjet
$link-color
dhe aplikoni nënvizimet e lidhjes vetëm në:hover
. - Përdorni
$body-bg
për të vendosur njëbackground-color
në<body>
(#fff
si parazgjedhje).
Këto stile mund të gjenden brenda _reboot.scss
, dhe variablat globale përcaktohen në _variables.scss
. Sigurohuni që të $font-size-base
vendosni rem
.
Titujt
Të gjithë titujt HTML, <h1>
përmes <h6>
, janë të disponueshëm.
Drejtimi | Shembull |
---|---|
<h1></h1> |
h1. Titulli i bootstrap |
<h2></h2> |
h2. Titulli i bootstrap |
<h3></h3> |
h3. Titulli i bootstrap |
<h4></h4> |
h4. Titulli i bootstrap |
<h5></h5> |
h5. Titulli i bootstrap |
<h6></h6> |
h6. Titulli i 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
përmes .h6
klasave janë gjithashtu të disponueshme, kur dëshironi të përputheni me stilin e shkronjave të një titulli, por nuk mund të përdorni elementin e lidhur HTML.
h1. Titulli i bootstrap
h2. Titulli i bootstrap
h3. Titulli i bootstrap
h4. Titulli i bootstrap
h5. Titulli i bootstrap
h6. Titulli i 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>
Përshtatja e titujve
Përdorni klasat e përfshira të shërbimeve për të rikrijuar tekstin e vogël të titullit dytësor nga Bootstrap 3.
Titulli i zbukuruar i ekranit Me tekst dytësor të zbehur
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Shfaq titujt
Elementet tradicionale të titullit janë krijuar për të funksionuar më mirë në përmbajtjen e përmbajtjes së faqes suaj. Kur keni nevojë për një titull për t'u dalluar, merrni parasysh përdorimin e një titulli të ekranit - një stil titulli më të madh dhe pak më të opinionit. Mbani në mend se këta tituj nuk janë të përgjegjshëm si parazgjedhje, por është e mundur të aktivizoni madhësitë e përgjegjshme të shkronjave .
Ekrani 1 |
Ekrani 2 |
Ekrani 3 |
Ekrani 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>
Plumbi
Bëni një paragraf të dallohet duke shtuar .lead
.
Ky është një paragraf kryesor. Ai dallohet nga paragrafët e rregullt.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Elementet e tekstit në linjë
Stilimi për elementët e zakonshëm të linjës HTML5.
Ju mund të përdorni etiketën e shenjës për tënxjerr në pahteksti.
Ky rresht teksti është menduar të trajtohet si tekst i fshirë.
Ky rresht teksti është menduar të trajtohet si jo më i saktë.
Ky rresht teksti është menduar të trajtohet si një shtesë në dokument.
Ky rresht teksti do të shfaqet siç është nënvizuar
Ky rresht teksti është menduar të trajtohet si shtyp i imët.
Ky rresht është paraqitur si tekst i trashë.
Ky rresht përkthehet si tekst i pjerrët.
<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
dhe .small
klasat janë gjithashtu të disponueshme për të aplikuar të njëjtat stile si <mark>
dhe <small>
duke shmangur çdo implikim semantik të padëshiruar që do të sillnin etiketat.
Edhe pse nuk tregohet më lart, mos ngurroni të përdorni <b>
dhe <i>
në HTML5. <b>
ka për qëllim të nxjerrë në pah fjalë ose fraza pa përcjellë rëndësi shtesë, ndërsa <i>
është kryesisht për zërin, termat teknike, etj.
Shërbimet e tekstit
Ndryshoni shtrirjen e tekstit, transformimin, stilin, peshën dhe ngjyrën me shërbimet tona të tekstit dhe shërbimet e ngjyrave .
Shkurtesat
Implementimi i stilizuar i <abbr>
elementit HTML për shkurtesat dhe akronimet për të treguar versionin e zgjeruar në lëvizje. Shkurtesat kanë një nënvizim të paracaktuar dhe fitojnë një kursor ndihme për të ofruar kontekst shtesë në lëvizje dhe për përdoruesit e teknologjive ndihmëse.
Shtoni .initialism
në një shkurtim për një madhësi fonti pak më të vogël.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blloqe kuotash
Për të cituar blloqe të përmbajtjes nga një burim tjetër brenda dokumentit tuaj. Mbështilleni <blockquote class="blockquote">
rreth çdo HTML si citat.
Një citat i njohur, i përfshirë në një element blloku.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Emërtimi i një burimi
Shto një <footer class="blockquote-footer">
për identifikimin e burimit. Mbështillni emrin e punës burimore në <cite>
.
Një citat i njohur, i përfshirë në një element blloku.
<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>
Radhitje
Përdorni shërbimet e tekstit sipas nevojës për të ndryshuar shtrirjen e kuotimit tuaj të bllokut.
Një citat i njohur, i përfshirë në një element blloku.
<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>
Një citat i njohur, i përfshirë në një element blloku.
<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>
Listat
E pa stiluar
Hiqni kufirin e paracaktuar list-style
dhe të majtë në artikujt e listës (vetëm fëmijët e menjëhershëm). Kjo vlen vetëm për artikujt e listës së fëmijëve të menjëhershëm , që do të thotë se do t'ju duhet të shtoni klasën edhe për çdo listë të ndërthurur.
- Kjo është një listë.
- Duket krejtësisht e pa stiluar.
- Strukturisht, është ende një listë.
- Megjithatë, ky stil vlen vetëm për elementët e menjëhershëm të fëmijëve.
- Listat e mbivendosura:
- nuk ndikohen nga ky stil
- do të tregojë ende një plumb
- dhe kanë diferencën e duhur të majtë
- Kjo mund të jetë ende e dobishme në disa situata.
<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>
Në rradhë
Hiqni pikat e një liste dhe aplikoni pak dritë margin
me një kombinim të dy klasave, .list-inline
dhe .list-inline-item
.
- Ky është një artikull në listë.
- Dhe një tjetër.
- Por ato shfaqen në linjë.
<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>
Përafrimi i listës së përshkrimit
Lidhni termat dhe përshkrimet horizontalisht duke përdorur klasat e paracaktuara të sistemit tonë të rrjetit (ose përzierjet semantike). Për afate më të gjata, mund të shtoni opsionalisht një .text-truncate
klasë për të shkurtuar tekstin me një elipsë.
- Listat e përshkrimeve
- Një listë përshkrimi është e përkryer për përcaktimin e termave.
- Afati
-
Përkufizimi për termin.
Dhe disa tekste të tjera të përkufizimit të mbajtësit të vendit.
- Një term tjetër
- Ky përkufizim është i shkurtër, kështu që nuk ka paragrafë shtesë ose asgjë.
- Termi i cunguar është i cunguar
- Kjo mund të jetë e dobishme kur hapësira është e ngushtë. Shton një elipsë në fund.
- Folezimi
-
- Lista e përcaktimeve të ndërlidhura
- Kam dëgjuar që ju pëlqeni listat e definicioneve. Më lejoni të vendos një listë përkufizimesh brenda listës suaj të përkufizimeve.
<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>
Madhësitë e përgjegjshme të shkronjave
Që nga versioni 4.3.0, Bootstrap ofron opsionin për të aktivizuar madhësitë e përgjegjshme të shkronjave, duke lejuar që teksti të shkallëzohet më natyrshëm në madhësitë e pajisjes dhe të pamjes. RFS mund të aktivizohet duke ndryshuar $enable-responsive-font-sizes
variablin Sass në true
dhe duke ripërpiluar Bootstrap.
Për të mbështetur RFS , ne përdorim një miks Sass për të zëvendësuar font-size
vetitë tona normale. Madhësitë e përgjegjshme të shkronjave do të përpilohen në calc()
funksione me një përzierje të rem
njësive dhe porta të pamjes për të mundësuar sjelljen e shkallëzimit të përgjegjshëm. Më shumë rreth RFS dhe konfigurimit të tij mund të gjenden në depon e tij GitHub .