Typography hmanga ziah a ni
Bootstrap typography atana documentation leh entirnan, global settings, headings, body text, lists leh a dangte pawh a tel.
Khawvel pum huap settings
Bootstrap hian global display, typography leh link style hrang hrangte a set a. Control tam zawk a mamawh hunah chuan textual utility classes te kha en la .
- OS leh device tin tana tha ber thlang thei tur native font stack hmang ang che .
font-family
- Type scale inclusive leh accessible zawk atan chuan browser default root
font-size
(a tlangpuiin 16px) kan hmang a, chutiang chuan tlawhtute chuan an browser default te chu a tul angin an customize thei ang. $font-family-base
Kan typographic base atan ,$font-size-base
, leh$line-height-base
attribute te hi hmang la ,<body>
.- Global link color via set la,
$link-color
link underlines chauh chu:hover
. - ( by default) ah
$body-bg
a set turin hmang rawh .background-color
<body>
#fff
Heng style te hi , chhungah hmuh theih a ni a _reboot.scss
, global variable te chu _variables.scss
. $font-size-base
Set in tih ngei ngei tur a rem
ni .
Thupui hrang hrangte
HTML heading zawng zawng, <h1>
through <h6>
, a awm vek.
Heading tih a ni | Entirna |
---|---|
<h1></h1> |
h1. Bootstrap tih thupui hmangin |
<h2></h2> |
h2. Bootstrap tih thupui hmangin |
<h3></h3> |
h3. Bootstrap tih thupui hmangin |
<h4></h4> |
h4. Bootstrap tih thupui hmangin |
<h5></h5> |
h5. Bootstrap tih thupui hmangin |
<h6></h6> |
h6. Bootstrap tih thupui hmangin |
<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
through .h6
classes pawh a awm a, heading pakhat font styling inmil duh mahse a kaihhnawih HTML element hman theih loh hunah atan.
h1. Bootstrap tih thupui hmangin
h2. Bootstrap tih thupui hmangin
h3. Bootstrap tih thupui hmangin
h4. Bootstrap tih thupui hmangin
h5. Bootstrap tih thupui hmangin
h6. Bootstrap tih thupui hmangin
<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>
Headings siam dan tur
Bootstrap 3 atanga secondary heading text te tak te chu siam thar leh turin utility class awmte hmang rawh.
Fancy display heading Secondary text faded tawh nen
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Thupui (headings) te chu entir rawh
Traditional heading elements te hi i page content saah a thawk tha ber turin siam a ni. Heading langsar tûra i mamawh hunah, display heading —heading style lian zâwk, ngaih dân tlem zâwk — hman chu ngaihtuah rawh. Heng heading te hi default-in responsive an ni lo tih hre reng ang che, mahse responsive font sizes enable theih a ni .
Display 1. tih a ni |
Display 2 a awm |
Display 3 a awm |
Display 4 a awm |
<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>
Kaihruai
Paragraph pakhat chu .lead
.
Hei hi lead paragraph a ni. Paragraph pangngai atang chuan a langsar hle.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Inline-a thuziak element hrang hrangte
Inline HTML5 element hman tlanglawn tak takte tan styling.
Mark tag hmangin i hmang thei angtlangpuithumal.
He line of text hi deleted text anga ngaih tur a ni.
He thuziak line hi a dik tawh lo anga ngaih tur a ni.
He line of text hi document-a dah belh anga ngaih tur a ni.
He line of text hian underline angin a render ang
He line of text hi fine print anga ngaih tur a ni.
He line hi bold text anga rendered a ni.
He line hi italicized text anga rendered a ni.
<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
leh class-te pawh tag-te’n an rawn thlen tur semantic implication duh loh zawng zawng chu pumpelh chungin style .small
ang chiah hman theih a ni bawk.<mark>
<small>
A chunga kan tarlan loh laiin, hman theih <b>
leh <i>
HTML5-a hman theih a ni. <b>
thumal emaw thumal emaw pawimawhna belhchhah lovin tarlanna tur a nih laiin <i>
a tam zawk chu aw, technical terms, etc. atan a ni.
Text utilities te pawh a awm
Kan text utilities leh color utilities hmangin text alignment, transform, style, weight, leh color te thlak rawh .
A tawi zawngin
<abbr>
Hover-a expanded version lantir nan abbreviation leh acronym-te tana HTML’s element stylized implementation . Abbreviation te hian default underline an nei a, help cursor an nei a, chu chuan hover-ah leh assistive technology hmangtute tan context dang a pe thei a ni.
.initialism
Font-size tlem deuh deuh atan abbreviation- ah dah la .
attr a ni
HTML a ni
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Blockquote te pawh a awm
I document chhunga source dang atanga block block quoting atan. HTML<blockquote class="blockquote">
eng pawh chu quote angin wrap vek ang che.
Quote hriat hlawh tak, blockquote element chhunga awm.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Source pakhat hming vuah
<footer class="blockquote-footer">
Source hriat theihna tur a Add rawh . Source work hming chu <cite>
.
Quote hriat hlawh tak, blockquote element chhunga awm.
<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>
Alignment tih a ni
I blockquote alignment thlak nan a tul angin text utilities hmang rawh.
Quote hriat hlawh tak, blockquote element chhunga awm.
<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>
Quote hriat hlawh tak, blockquote element chhunga awm.
<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>
List te a awm
Style nei lo a ni
list-style
List item-a default leh left margin chu paih chhuak rawh (immediate children chauh). This only applies to immediate children list items , chu chu nested list eng pawh tan pawh class i add a ngai dawn tihna a ni.
- Hei hi list a ni.
- Unstyled vek niin a lang.
- Structural lamah chuan list a la ni reng.
- Mahse, he style hian immediate child elements chauh a huam a ni.
- Nested list te chu:
- he style hian a nghawng lo
- bullet a la lantir dawn a ni
- leh veilam margin tling tak an nei bawk
- Hei hi dinhmun ṭhenkhatah chuan a la ṭangkai thei tho.
<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 a ni
List pakhata bullet te chu la chhuakin margin
class pahnih inzawmkhawm hmangin light engemaw zat hmang la, .list-inline
leh .list-inline-item
.
- Hei hi list item a ni.
- Tin, pakhat dang a ni bawk.
- Mahse inline-ah an rawn lang chhuak thung.
<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>
Thuziak list alignment a awm
Kan grid system-a class (or semantic mixins) a ruat lawk hmangin term leh description te chu horizontal-in align rawh. Hun rei zawk atan chuan .text-truncate
ellipsis hmanga text truncate turin class i dah belh thei bawk.
- Thuziak list te a awm
- Description list hi terms sawifiahna atan a tha ber.
- Hunbi
-
Thumal awmzia sawifiahna.
Tin, placeholder definition text thenkhat dang pawh a awm bawk.
- Term dang a ni leh bawk
- He hrilhfiahna hi a tawi a, chuvangin extra paragraph emaw engmah emaw a awm lo.
- Truncated term chu truncated a ni
- Hei hi hmun a tlem chuan a tangkai thei hle. A tawpah ellipsis a dah belh bawk.
- Nesting tih a ni
-
- Nested hrilhfiahna list
- Definition list i duh tih ka hria. I definition list chhungah hian definition list ka dah ang.
<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>
Font size hrang hrang a chhang thei
v4.3.0 atang khan Bootstrap hian responsive font sizes enable theihna option nen a rawn thawn a, chu chuan text chu device leh viewport size hrang hrangah natural takin a scale thei a ni. RFS$enable-responsive-font-sizes
hi Sass variable chu true
Bootstrap ah thlak leh recompiling hmangin enable theih a ni.
RFS support tur chuan kan font-size
property pangngai thlak nan Sass mixin kan hmang thin . Responsive font size te chu calc()
function hrang hrangah compile a ni ang a, mix of rem
leh viewport unit hmangin responsive scaling behavior a awm thei ang. RFS leh a configuration chungchang hi a GitHub repository ah hian hmuh theih a ni .