Typography hmanga ziah a ni

Bootstrap typography atana documentation leh entirnan, global settings, headings, body text, lists leh a dangte pawh a tel.

He page ah hian

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 chu $link-color.
( 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.

Display 1. tih a ni

Display 2 a awm

Display 3 a awm

Display 4 a awm

Display 5 a awm

Display 6 tih a ni

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

$display-font-sizesDisplay heading te hi Sass map leh variable pahnih hmangin configure a ni a, $display-font-weightleh $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;

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>

Chutiang tag te chu semantic purpose atan hman tur a ni tih fimkhur rawh:

reference emaw notation emaw atana mark emaw highlight emaw text a entir a ni.
side-comment leh small print, copyright leh legal text ang chi te a entir a ni.
<s>element pawimawh tawh lo emaw, dik tawh lo emaw a entir a ni.
inline text span pakhat a entir a, chu chu non-textual annotation a neihzia tilangtu anga render tur a ni.

I text style i duh chuan a hnuaia class te hi i hmang zawk tur a ni:

.marka style ang chiah kha a hmang ang .
.smalla style ang chiah kha a hmang ang .
.text-decoration-underlinea style ang chiah kha a hmang ang .
.text-decoration-line-througha style ang chiah kha a hmang ang <s>.

A chunga kan tarlan loh laiin, hman theih leh HTML5-a hman theih a ni. thumal emaw thumal emaw pawimawhna belhchhah lovin tarlanna tur a ni a, chutih laiin a tam zawk chu aw, technical term, etc. atan a ni.

Text utilities te pawh a awm

Kan text utilities leh color utilities hmangin text alignment, transform, style, weight, line-height, decoration 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>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Source pakhat hming vuah

HTML spec ah chuan blockquote attribution chu <blockquote>. Attribution i pek dawnin i in <blockquote>a-ah wrap la, class nen a emaw block level element (eg, ) emaw <figure>hmang rawh. Source work hming pawh wrap ngei ang che.<figcaption>.blockquote-footer<cite>

Quote hriat hlawh tak, blockquote element chhunga awm.

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

Alignment tih a ni

I blockquote alignment thlak nan a tul angin text utilities hmang rawh.

Quote hriat hlawh tak, blockquote element chhunga awm.

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

Quote hriat hlawh tak, blockquote element chhunga awm.

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

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

Bootstrap 5 ah hian default-in responsive font size kan enable a, device leh viewport size hrang hrangah text chu natural takin a scale theih phah a ni. Hei hi engtin nge a thawh tih hriat duh chuan RFS page hi en la .

Sass a ni

Variables te pawh a awm

Headings hian sizing leh spacing atan dedicated variable thenkhat an nei a.

$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;

Hetah leh Reboot -a typography element hrang hrang kan sawite hian dedicated variable an nei bawk.

$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;

Mixins te a awm

Typography atana mixin bik a awm lo a, mahse Bootstrap hian Responsive Font Sizing (RFS) a hmang ve tho .