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
. - 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.
<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>
Lihlooho tsa ponts'o li lokisoa ka $display-font-sizes
'mapa oa Sass le mefuta e 'meli, $display-font-weight
le $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;
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>
Hlokomela hore li-tag tseo li lokela ho sebelisoa molemong oa semantic:
<mark>
e emela mongolo o tšoailoeng kapa o totobalitsoeng molemong oa ho ngolla kapa oa ho ngola.<small>
e emela maikutlo a mahlakoreng le mongolo o monyane, joalo ka litokelo tsa molao le mongolo oa molao.<s>
e emela ntho e seng e sa sebetsa kapa e seng e sa nepahale.<u>
e emetse nako ya mongolo o ka hara melawana o lokelang ho fetolelwa ka mokgwa o bontshang hore o na le tlhaloso eo e seng ya mongolo.
Haeba u batla ho ngola mongolo oa hau, u lokela ho sebelisa lihlopha tse latelang ho e-na le hoo:
.mark
e tla sebelisa mekhoa e tšoanang le ea<mark>
..small
e tla sebelisa mekhoa e tšoanang le ea<small>
..text-decoration-underline
e tla sebelisa mekhoa e tšoanang le ea<u>
..text-decoration-line-through
e tla sebelisa mekhoa e tšoanang le ea<s>
.
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, athe <i>
hangata e le ea lentsoe, mantsoe a theknoloji, joalo-joalo.
Lisebelisoa tsa mongolo
Fetola tatellano ea mongolo, phetoho, setaele, boima, bophahamo ba mohala, mokhabiso 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>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Ho reha mohloli
Tlhaloso ea HTML e hloka hore tlhaloso ea blockquote e behoe ka ntle ho <blockquote>
. Ha u fana ka tlhaloso, thatela ea hau <blockquote>
ka a <figure>
'me u sebelise a <figcaption>
kapa a block level element (mohlala, <p>
) le .blockquote-footer
sehlopha. Etsa bonnete ba hore o thatela lebitso la mosebetsi oa mohloli <cite>
hape.
<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>
Ho tsamaisana
Sebelisa lisebelisoa tsa mongolo ha ho hlokahala ho fetola tekano ea blockquote ea hau.
<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>
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 Bootstrap 5, re nolofalelitse boholo ba lifonti tse arabelang ka mokhoa o ikhethileng, ho lumella mongolo ho hola ka tlhaho ho feta lisebelisoa le boholo ba sebaka sa pono. Sheba leqephe la RFS ho fumana hore na sena se sebetsa joang.
Sass
Lintho tse fapaneng
Lihlooho li na le mefuta e fapaneng ea boholo le sebaka.
$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;
Likarolo tse fapaneng tsa typography tse koahetsoeng mona le ho Reboot le tsona li na le mefuta e fapaneng.
$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;
Metsoako
Ha ho na metsoako e inehetseng bakeng sa typography, empa Bootstrap e sebelisa Responsive Font Sizing (RFS) .