in English

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-baseKan typographic base atan , $font-size-base, leh $line-height-baseattribute te hi hmang la , <body>.
  • Global link color via set la, $link-colorlink underlines chauh chu :hover.
  • ( by default) ah $body-bga 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-baseSet in tih ngei ngei tur a remni .

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>

.h1through .h6classes 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>

.markleh class-te pawh tag-te’n an rawn thlen tur semantic implication duh loh zawng zawng chu pumpelh chungin style .smallang 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.

.initialismFont-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.

Source Title -a mi hmingthang tak
<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.

Source Title -a mi hmingthang tak
<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.

Source Title -a mi hmingthang tak
<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-styleList 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 marginclass pahnih inzawmkhawm hmangin light engemaw zat hmang la, .list-inlineleh .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-truncateellipsis 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 trueBootstrap ah thlak leh recompiling hmangin enable theih a ni.

RFS support tur chuan kan font-sizeproperty pangngai thlak nan Sass mixin kan hmang thin . Responsive font size te chu calc()function hrang hrangah compile a ni ang a, mix of remleh 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 .