Tlhaloso ea litlhaku
Litokomane le mehlala ea Bootstrap typography, ho kenyeletsoa litlhophiso tsa lefats'e, lihlooho, mongolo oa 'mele, manane, le tse ling.
Litlhophiso tsa lefats'e
Bootstrap e beha ponts'o ea mantlha ea lefats'e, typography, le mekhoa ea lihokelo. Ha ho hlokahala taolo e eketsehileng, hlahloba lihlopha tsa tšebeliso ea mongolo .
- Sebelisa pokello ea litlhaku tsa tlhaho tse khethang tse ntle
font-family
bakeng sa OS le sesebelisoa ka seng. - Bakeng sa mefuta e mengata e kenyeletsang le e fumanehang, re sebelisa motso oa kamehla oa
font-size
sebatli (ka tloaelo 16px) e le hore baeti ba ka khona ho etsa litlhophiso tsa sebatli sa bona kamoo ho hlokahalang. - Sebelisa
$font-family-base
,$font-size-base
, le$line-height-base
litšoaneleho e le motheo oa typographic o sebelisoang ho<body>
. - Beha 'mala oa lihokelo tsa lefats'e ka
$link-color
ho sebelisa mehala ea likhokahano feela ho:hover
. - Sebelisa
$body-bg
ho setabackground-color
ho<body>
(#fff
ka kamehla).
Mekhoa ena e ka fumanoa ka hare _reboot.scss
, 'me mefuta e fapaneng ea lefats'e e hlalosoa ka _variables.scss
. Etsa bonnete ba hore u $font-size-base
kene rem
.
Lihlooho
Lihlooho tsohle tsa HTML, <h1>
ho ea ho <h6>
, li fumaneha.
Sehlooho | Mohlala |
---|---|
<h1></h1> |
h1. Sehlooho sa Bootstrap |
<h2></h2> |
h2. Sehlooho sa Bootstrap |
<h3></h3> |
h3. Sehlooho sa Bootstrap |
<h4></h4> |
h4. Sehlooho sa Bootstrap |
<h5></h5> |
h5. Sehlooho sa Bootstrap |
<h6></h6> |
h6. Sehlooho sa 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
ka .h6
litlelase le tsona lia fumaneha, hobane ha u batla ho bapisa mongolo oa mongolo oa sehlooho empa u sa khone ho sebelisa karolo ea HTML e amanang le eona.
h1. Sehlooho sa Bootstrap
h2. Sehlooho sa Bootstrap
h3. Sehlooho sa Bootstrap
h4. Sehlooho sa Bootstrap
h5. Sehlooho sa Bootstrap
h6. Sehlooho sa 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>
Ho iketsetsa lihlooho
Sebelisa litlelase tsa lisebelisoa tse kenyellelitsoeng ho etsa mongolo o monyane oa sehlooho ho tsoa ho Bootstrap 3.
Sehlooho sa ponts'o e majabajaba Ka mongolo oa bobeli o fifetseng
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Hlahisa lihlooho
Lihlooho tsa lihlooho tse tloaelehileng li etselitsoe ho sebetsa hantle ka ho fetisisa nameng ea litaba tsa leqephe la hau. Ha u hloka sehlooho hore se hlahelle, nahana ka ho sebelisa sehlooho se bonts'itsoeng - setaele se seholoanyane, se nang le maikutlo a itseng. Hopola hore lihlooho tsena ha li arabele ka mokhoa o ikhethileng, empa hoa khoneha ho etsa hore boholo ba fonte bo arabele .
Pontšo 1 |
Pontšo 2 |
Pontšo ea 3 |
Pontšo ea 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>
Ketapele
Etsa hore serapa se hlahelle ka ho eketsa .lead
.
Ena ke serapa sa pele. E hlahella lirapeng tse tloaelehileng.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Lintlha tsa mongolo tse ka har'a mela
Setaele bakeng sa lintlha tse tloaelehileng tsa inline HTML5.
U ka sebelisa letšoao la letšoao hototobatsamongolo.
Mola ona oa mongolo o reretsoe ho nkuoa e le mongolo o hlakotsoeng.
Mola ona oa mongolo o reretsoe ho nkuoa o se o sa nepahala.
Mola ona oa mongolo o reretsoe ho nkoa e le tlatsetso tokomaneng.
Mola ona oa mongolo o tla fana ka mokhoa o thaliloeng
Mola ona oa mongolo o reretsoe ho nkoa e le mongolo o motle.
Mola ona o ngotsoe joalo ka mongolo o motenya.
Mola ona o ngotsoe joalo ka mongolo o tšekaletseng.
<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
'me .small
litlelase li fumaneha hape ho sebelisa mekhoa e ts'oanang <mark>
le <small>
ha u ntse u qoba litlamorao tse sa batleheng tsa semantic tseo li-tag li ka li tlisang.
Le hoja e sa bontšoa ka holimo, ikutloe u lokolohile ho sebelisa <b>
le <i>
ho HTML5. <b>
e reretsoe ho totobatsa mantsoe kapa lipoleloana ntle le ho fana ka bohlokoa bo eketsehileng ha <i>
boholo e le ea lentsoe, mantsoe a theknoloji, joalo-joalo.
Lisebelisoa tsa mongolo
Fetola tatellano ea mongolo, fetola, setaele, boima le 'mala ka lisebelisoa tsa rona tsa mongolo le lisebelisoa tsa mebala .
Likgutsufatso
Ts'ebetsong e hlophisitsoeng ea HTML's <abbr>
element bakeng sa khutsufatso le li-acronyms ho bonts'a mofuta o atolositsoeng ho hover. Likgutsufatso li na le mothalo oa kamehla 'me li fumana sekhechana sa thuso ho fana ka moelelo o eketsehileng mabapi le hover le ho basebelisi ba mahlale a thusang.
Eketsa .initialism
ho khutsufatso ea boholo ba fonte e nyane hanyane.
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Mantsoe a thibelang
Bakeng sa ho qotsa li-block tsa litaba tse tsoang mohloling o mong ka har'a tokomane ea hau. Qetella HTML<blockquote class="blockquote">
efe kapa efe joalo ka qotso.
Qotsulo e tsebahalang, e fuperoeng ke karolo ea blockquote.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Ho reha mohloli
Kenya a <footer class="blockquote-footer">
bakeng sa ho tseba mohloli. Qetella lebitso la mosebetsi oa mohloli ka <cite>
.
Qotsulo e tsebahalang, e fuperoeng ke karolo ea 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>
Ho tsamaisana
Sebelisa lisebelisoa tsa mongolo ha ho hlokahala ho fetola tekano ea blockquote ea hau.
Qotsulo e tsebahalang, e fuperoeng ke karolo ea 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>
Qotsulo e tsebahalang, e fuperoeng ke karolo ea 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>
Manane
Unstyled
Tlosa moeli oa kamehla list-style
le o ka ho le letšehali linthong tsa lenane (bana ba hona joale feela). Sena se sebetsa feela ho lenane la lintho tse fumanehang hanghang tsa bana , ho bolelang hore o tla hloka ho kenyelletsa sehlopha bakeng sa manane afe kapa afe a behiloeng.
- Lena ke lethathamo.
- E bonahala e sa ngoloa ka mokhoa o felletseng.
- Ka sebopeho, e ntse e le lethathamo.
- Leha ho le joalo, mokhoa ona o sebetsa feela ho likarolo tsa hang-hang tsa bana.
- Mathathamo a behiloeng:
- ha ba amehe ka mokhoa ona
- e ntse e tla hlahisa kulo
- 'me u be le moeli o nepahetseng oa leqele
- Sena se ntse se ka thusa maemong a mang.
<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>
E mocheng
Tlosa likulo tsa lenane 'me u sebelise leseli margin
le nang le motsoako oa lihlopha tse peli, .list-inline
le .list-inline-item
.
- Ena ke lethathamo la lintlha.
- Le e 'ngoe.
- Empa li hlahisoa ka har'a naha.
<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>
Tlhaloso ea lenane la tlhaloso
Lokisetsa mantsoe le litlhaloso ka mokhoa o otlolohileng ka ho sebelisa litlelase tse boletsoeng esale pele tsa sistimi ea rona (kapa metsoako ea semantic). Bakeng sa mantsoe a malelele, u ka khetha ho eketsa .text-truncate
sehlopha ho fokotsa mongolo ka ellipsis.
- Manane a tlhaloso
- Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.
- Nako
-
Tlhaloso ea lentsoe.
Le mongolo o mong oa tlhaloso ea setšoantšisi.
- Lereho le leng
- Tlhaloso ena e khuts'oane, kahoo ha ho lirapa tse eketsehileng kapa eng kapa eng.
- Lentsoe le khutsufalitsoeng le fokotsoe
- Sena se ka ba molemo ha sebaka se le thata. E eketsa ellipsis qetellong.
- Nesting
-
- Lethathamo la litlhaloso tse fumanehang
- Ke utloile u rata manane a litlhaloso. E-re ke behe lethathamo la litlhaloso ka har'a lethathamo la litlhaloso tsa hau.
<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>
Bongata ba litlhaku tse arabelang
Ho tloha ka v4.3.0, likepe tsa Bootstrap tse nang le khetho ea ho etsa hore boholo ba fonte bo arabele, bo lumellang mongolo hore o fetele ka tlhaho ho feta lisebelisoa le boholo ba pono. RFS e ka nolofalloa ka ho fetola mofuta oa $enable-responsive-font-sizes
Sass true
le ho khutlisa Bootstrap.
Ho tšehetsa RFS , re sebelisa motsoako oa Sass ho nkela font-size
thepa ea rona e tloaelehileng sebaka. Bophahamo ba mengolo e arabelang bo tla hlophisoa hore e be calc()
lits'ebetso tse kopantsoeng rem
le likarolo tsa pono ho etsa hore boitšoaro bo arabele. Tse ling mabapi le RFS le tlhophiso ea eona li ka fumanoa polokelong ea eona ea GitHub .