Source

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(typically 16px) kan assume a, chuvangin visitor te 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 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

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

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Duis mollis, est non commodo luctus tih a ni a, a man pawh a tlawm hle.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 atan 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.

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere chu a ante a ni.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Source pakhat hming vuah

<footer class="blockquote-footer">Source hriat theihna tur a Add rawh . Source work hming chu <cite>.

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere chu a ante a ni.

Source Title -a mi hmingthang tak

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere chu a ante a ni.

Source Title -a mi hmingthang tak

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere chu a ante a ni.

Source Title -a mi hmingthang tak

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor thu amet
A rilru a buai em em a, a rilru a hah em em bawk a
Integer molestie lorem chu massa ah a awm a
Facilisis ah hian a awm a
Nulla volutpat a ni a, a hlimthla a ni
- Phasellus iaculis chu a lo chhuak a
- Purus sodales chu a hring chhuak thin
- A rilru a buai em em a, a rilru a hah em em bawk a
- A rilru a buai em em a, a rilru a hah em em bawk a. Ac tristique libero volutpat at
A rilru a buai em em a, a rilru a hah em em bawk a. Faucibus porta lacus fringilla vel
Aenean thu amet erat nunc
Eget porttitor lorem a ni

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</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.

Lorem chu ipsum a ni
Phasellus iaculis tih a ni a
Nulla volutpat a ni

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

Euismod tih a ni

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a.

Donec id elit non mi porta gravida chu eget metus ah a awm a.

Malesuada chu a ni

A rilru a buai em em a, a rilru a hah em em bawk a. Etiam porta sem malesuada magna mollis euismod.

Truncated term chu truncated a ni

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a.

Nesting tih a ni

Nested hrilhfiahna list: Aenean posuere, tortor sed chibai bukna, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Responsive typography hmanga ziah a ni

Responsive typographyfont-size tih hian media query hrang hrang chhunga root element’s te siamrem mai mai hmanga text leh component scaling tihna a ni. Bootstrap hian hetiang hian a ti lo che a, mahse i mamawh chuan add theih a awlsam khawp mai.

Hetah hian a taka hman dan entirnan kan rawn tarlang e. font-sizeI duh ang s leh media query te thlang rawh .

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}