Bootstrap infrastructure pawimawh tak takte lowdown hmu la, web development tha zawk, rang zawk, chak zawka kan kalpui dan te pawh a tel.

HTML5 doctype a ni

Bootstrap hian HTML element thenkhat leh CSS property thenkhat HTML5 doctype hman ngai te a hmang thin. I project zawng zawng tan tirh lamah telh vek rawh.

<!doctype html>
<html lang="en">
  ...
</html>

Mobile hmasa ber

Bootstrap 2 hmang hian framework-a thil pawimawh tak takte tan mobile friendly style optional kan dah belh bawk. Bootstrap 3 hmang hian a tir atang khan mobile friendly turin project hi kan ziak thar leh ta a ni. Optional mobile style-a dah belh ai chuan core-ah an bak nghal vek a ni. Dik tak chuan Bootstrap hi mobile hmasa ber a ni . Mobile first style hi file hrang hrangah ni lovin library pumpuiah hmuh theih a ni.

Rendering dik tak leh touch zooming dik tak neih theih nan viewport meta tag chu i <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noMobile device-a zooming theihna chu viewport meta tag-ah dahin i disable thei bawk . Hei hian zooming a titawp a, chu chu users te chuan scroll chauh an ti thei tihna a ni a, i site chu native application ang deuhin a awm deuh deuh a ni. A pum puiin site tinah hei hi kan recommend lo a, chuvangin fimkhur rawh!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Typography leh link te pawh a awm bawk

Bootstrap hian global display, typography leh link style hrang hrangte a set a. A bik takin, kan:

Set background-color: #fff;a nibody
Kan typographic base atan , , leh attribute @font-family-basete @font-size-basehmang rawh@line-height-base
Global link color via set la, @link-colorlink underlines chauh on rawh:hover

Heng style te hi scaffolding.less.

Normalize rawh.css

Cross-browser rendering tihchangtlun nan Normalize.css kan hmang a, chu chu Nicolas Gallagher leh Jonathan Neal te project a ni.

Container te pawh a awm

Bootstrap hian site contents wrap tur leh kan grid system dahna tur containing element a mamawh a ni. I project-a hman tur container pahnih zinga pakhat i thlang thei bawk. Hriat tur chu, a chhan paddingleh a aia tam, container pahnih hi nestable an ni lo.

.containerResponsive fixed width container atan hmang ang che .

<div class="container">
  ...
</div>

Full width container atan hmang la .container-fluid, i viewport zau zawng zawng a huam vek ang.

<div class="container-fluid">
  ...
</div>

Bootstrap hian responsive, mobile first fluid grid system a keng tel a, device emaw viewport size a san chhoh zel chuan column 12 thleng a scale thei a ni. Layout awlsam zawka siam theihna tur class predefined a awm a, chubakah semantic layout tam zawk siamna tur mixin chak tak tak a awm bawk .

Inhmelhriattirna

Grid system hi i content dahna row leh column hrang hrang hmanga page layout siam nan hman a ni. Bootstrap grid system hnathawh dan chu hetiang hi a ni:

Row te chu alignment leh padding dik tak neih theih nan .container(fixed-width) emaw (full-width) chhungah dah tur a ni ..container-fluid
Row hmangin column hrang hrang horizontal group siam rawh.
Content chu column chhungah dah tur a ni a, column chauh chu row fate nghal thei a ni.
Predefined grid class ang chi .rowleh .col-xs-4grid layout siam thuai theihna tur a awm bawk. Semantic layout tam zawk atan pawh mixin tlem zawk hman theih a ni bawk.
Column hian gutters (column content inkar gap) a siam a, padding. .rowChu padding chu s -a negative margin hmangin column hmasa leh hnuhnung ber atan row-ah offset a ni.
Negative margin hi a hnuaia entirnan te hi outdented a nih chhan a ni. Grid column chhunga content awmte chu non-grid content nena line up a nih theih nan a ni.
Grid column siam nan hian column awm zat sawm leh pahnih span duh zat tarlan a ni. Entirnan, column inang pathum chuan pathum an hmang ang .col-xs-4.
Row khat chhunga column 12 aia tam dah a nih chuan, extra column group tinte chu unit pakhat angin line tharah an khuh ang.
Grid class hi breakpoint size aia tam emaw, a tlukpui emaw screen width nei device-ah hman a ni a, device tenau zawk target-a grid class-te chu a override bawk. Chuvangin, eg .col-md-*element pakhatah class eng pawh apply hian medium device-ah chauh a styling a nghawng dawn lo va, class pakhat a awm loh chuan device lian tak takah pawh a nghawng dawn a .col-lg-*ni.

Heng thu bulte hi i code-a hman dan tur entirnan en rawh.

Media lama zawhna awm thei te

Kan Less file-ah hian a hnuaia media query te hi kan grid system-a key breakpoint siam nan kan hmang a.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Heng media query te hi kan tizau fo thin a, max-widthCSS chu device set tawi zawka tihtlem nan a dah tel thin.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Grid duhthlan tur a awm

Bootstrap grid system aspect hrang hrangte chu device tam takah handy table hmanga hnathawh dan en rawh.

	Extra tenau zawk hmanrua Phone (<768px) .	Thil tenawm tak tak Tablet (≥768px) .	Thil hmanrua lian lo tak tak Desktops (≥992px) .	Device lian tak tak Desktops (≥1200px) .
Grid awm dan	Engtik lai pawhin Horizontal a ni	A bul tan nan a tlakbuak a, breakpoints chungah horizontal a ni
Container zau zawng	A awm lo (auto) .	750px a ni	970px a ni	1170px a ni
Class hmasa ber a ni	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# of column hrang hrang a awm	12 a ni
Column zau zawng	Auto a ni	~62px a ni	~81px a ni	~97px a ni
Gutter zau zawng	30px (column sir lehlamah 15px)
Nestable a ni	Awle
Offsets te a awm	Awle
Column order tur a ni	Awle

Entirnan: Stacked-to-horizontal tih ang chi

Grid class set khat hmangin .col-md-*basic grid system i siam thei a, chu chu mobile device leh tablet device (the extra small to small range)-ah stack-a tan a ni a, chutah chuan desktop (medium) device-ah chuan horizontal a ni. Grid column te chu eng pawh ah dah rawh .row.

.col-md-1 tih a ni

.col-md-8 tih a ni

.col-md-4 tih a ni

.col-md-6 tih a ni

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Entirnan: Fluid dahna

Fixed-width grid layout eng pawh chu full-width layout-ah chantir la, i pawn lam ber .containerchu .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Entirnan: Mobile leh desktop

I column te chu device tenau zawkah stack mai mai turin i duh lo em ni? .col-xs-* .col-md-*I column -ah te dah belhin extra small leh medium device grid class te chu hmang rawh . A hnathawh zawng zawng hriatna tha zawk hriat duh chuan a hnuaia entîrna hi en rawh.

.col-xs-12 .col-md-8 tih a ni

.col-xs-6 .col-md-4 tih a ni

.col-xs-6 tih a ni

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Entirnan: Mobile, tablet, desktop te hi a ni

Entirna hmasa ang khan tablet .col-sm-*class hmangin layout chak zawk leh chak zawk siamin siam rawh.

.col-xs-12 .col-sm-6 .col-md-8 tih a ni

.col-xs-6 .col-md-4 tih a ni

.col-xs-6 .col-sm-4 tih a ni

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Entirnan: Column wrapping tih ang chi

Row khat chhunga column 12 aia tam dah a nih chuan, extra column group tinte chu unit pakhat angin line tharah an khuh ang.

.col-xs-9 tih a ni

.col-xs-4
9 + 4 = 13 > 12 a nih avangin he 4-column-wide div hi line thar pakhatah contiguous unit pakhat angin a wrapped a.

.col-xs-6
A hnuaia column te chu line thar zawh hian an chhunzawm zel a.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Responsive column a reset leh thin

Grid tier pali awm tawhte nen chuan, breakpoint thenkhatah chuan, pakhat chu a dang aiin a sang zawk avangin i column-te chu a clear dik lo hle tih i tawk ngei ang. .clearfixChu chu siam\hat nan a leh kan responsive utility class te inzawmkhawm hmang rawh .

.col-xs-6 .col-sm-3
I viewport size thlak danglam emaw, entirnan i phone-ah check out emaw rawh.

.col-xs-6 .col-sm-3 tih a ni

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Responsive breakpoint-a column clearing bakah hian offset, push, emaw pull emaw reset a ngai mai thei bawk . Hei hi grid entirnan action-ah en rawh .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

Gutters te chu la chhuak rawh

.row-no-guttersRow khat atanga gutters te chu la chhuak la, class nen column a ni.

.col-xs-12 .col-md-8 tih a ni

.col-xs-6 .col-md-4 tih a ni

.col-xs-6 tih a ni

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Column offset dan tur

.col-md-offset-*Class hmangin column te chu dinglamah sawn rawh . Heng class te hian column pakhat veilam margin chu column hrang hrangin an tipung a *. Entirnan, column pali chungah .col-md-offset-4a kal thei..col-md-4

.col-md-4 tih a ni

.col-md-4 .col-md-offset-4 ah hian a awm a

.col-md-3 .col-md-offset-3 tih a ni

.col-md-6 .col-md-offset-3 tih a ni

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0Grid tier hnuai zawk atanga offset te pawh class te nen i override thei bawk .

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

Nesting column hrang hrang te

Default grid hmanga i content nest tur chuan column awmsa chhungah column thar .rowleh set dah la . Nested row-ah hian column set 12 emaw a aia tlem emaw add tur a awm tur a ni (column awm 12 awm zawng zawng hman vek a ngai lo)..col-sm-*.col-sm-*

Level 1: .col-sm-9 ah hian a awm a

Level 2: .col-xs-8 .col-sm-6 ah hian a awm a

Level 2: .col-xs-4 .col-sm-6 ah hian a awm a

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Column order tur a ni

Kan built-in grid column te order .col-md-push-*leh .col-md-pull-*modifier class te awlsam takin thlak danglam theih a ni.

.col-md-9 .col-md-push-3 tih a ni

.col-md-3 .col-md-pull-9 tih a ni

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Mixin leh variable tlem zawk

Fast layouts atan prebuilt grid class bakah hian Bootstrap ah hian Less variables leh mixins te pawh a awm a, chu chuan i duh duh simple, semantic layouts te rang taka i siam theih nan a hmang bawk.

Variables te pawh a awm

Variables hian column awm zat, gutter zau zawng, leh floating column tanna tur media query point a tichiang a ni. Hengte hi a chunga kan document tawh predefined grid class te siam nan kan hmang a, chubakah a hnuaia custom mixins tarlan te tan pawh kan hmang bawk.

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Mixins te a awm

Mixins te hi grid variable te nen inzawmin grid column hrang hrang tan semantic CSS siam nan hman a ni.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Entirna hman dan

Variable te chu i custom value ah i siam danglam thei a, a nih loh leh mixins te chu an default value nen i hmang mai thei bawk. Hetah hian default settings hmanga two-column layout siam dan tur entirnan kan rawn tarlang e, a inkarah gap awmin.

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Thupui hrang hrangte

HTML heading zawng zawng, <h1>through <h6>, a awm vek. .h1through .h6classes pawh a awm a, heading pakhat font styling nena inmil duh mahse i text chu inline-a lang tura i duh lai atan.

h1. Bootstrap tih thupui hmangin	Semibold a ni a, 36px a ni
h2. Bootstrap tih thupui hmangin	Semibold a ni a, 30px a ni
h3. Bootstrap tih thupui hmangin	Semibold a ni a, 24px a ni
h4. Bootstrap tih thupui hmangin	Semibold 18px a ni
h5. Bootstrap tih thupui hmangin	Semibold 14px a ni
h6. Bootstrap tih thupui hmangin	Semibold 12px a ni

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

Generic <small>tag emaw .smallclass emaw hmangin heading eng pawhah text lighter, secondary siam rawh.

h1. Bootstrap tih thupui hmangin Secondary text a awm

h2. Bootstrap tih thupui hmangin Secondary text a awm

h3. Bootstrap tih thupui hmangin Secondary text a awm

h4. Bootstrap tih thupui hmangin Secondary text a awm

h5. Bootstrap tih thupui hmangin Secondary text a awm

h6. Bootstrap tih thupui hmangin Secondary text a awm

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Taksa copy a ni

Bootstrap hian global default font-sizechu 14px a ni a, a line-heightchu 1.428 a ni. Hei hi <body>paragraph leh paragraph zawng zawngah hman a ni. Chu bakah, <p>(paragraphs) te chuan an computed line-height chanve (10px by default) bottom margin an dawng bawk.

A rilru a buai em em a, a rilru a hah em em bawk a. Nullam quis risus eget urna mollis ornare vel eu leo. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies lirthei.

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 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. non metus auctor fringilla. 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. 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. non metus auctor fringilla.

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

<p>...</p>

Lead taksa copy a ni

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">...</p>

Less hmanga sak a ni

Typographic scale hi variable -a Less variable pahnih atanga siam a ni.less : @font-size-baseleh @line-height-base. A hmasa ber chu base font-size hman zawng zawng a ni a, a pahnihna chu base line-height a ni. Chu variable leh math awlsam tak tak thenkhat hmangin kan type zawng zawng leh a dangte margin, padding, leh line-height te kan siam thin. Customize la, Bootstrap pawh a adapt thei ang.

Inline-a thuziak element hrang hrangte

Thuziak chhinchhiahna

Context danga a relevance avanga text run pakhat highlight tur chuan <mark>tag hmang la.

Mark tag hmangin i hmang thei angtlangpuithumal.

You can use the mark tag to <mark>highlight</mark> text.

Text tihbo a ni

Text block delete tawhte tarlanna atan <del>tag hmang ang che.

~~He line of text hi deleted text anga ngaih tur a ni.~~

<del>This line of text is meant to be treated as deleted text.</del>

Thuziak hmanga strikethrough

Text block inzawm tawh lote tarlanna atan <s>tag hmang ang che.

~~He thuziak line hi a dik tawh lo anga ngaih tur a ni.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Thuziak dah luh a ni

Document-a thil belh tur tarlanna atan <ins>tag hmang rawh.

He line of text hi document-a dah belh anga ngaih tur a ni.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Thuziak hnuaia line awm

Text underline tur chuan <u>tag hmang la.

He line of text hian underline angin a render ang

<u>This line of text will render as underlined</u>

HTML-a default emphasis tags te chu style lightweight tak tak hmangin hmang rawh.

Thuziak te te

Inline emaw, text block emaw de-emphasizing atan chuan <small>tag hmangin text chu parent size 85%-ah set rawh. font-sizeHeading element te hian nested element te tan anmahni an dawng thin <small>.

A dang pawhin inline element with .smallin place of any <small>.

He line of text hi fine print anga ngaih tur a ni.

<small>This line of text is meant to be treated as fine print.</small>

Tumruh

Font-weight rit zawka thuziak snippet pakhat ngaih pawimawh nan.

A hnuaia thuziak snippet hi bold text angin kan render ang .

<strong>rendered as bold text</strong>

Italics hmanga ziah a ni

Italic hmanga thuziak snippet pakhat ngaih pawimawh nan.

A hnuaia thuziak snippet hi italicized text anga render a ni .

<em>rendered as italicized text</em>

Element hrang hrang a inthlak danglam thin

Zalen takin hmang la <b>, <i>HTML5 ah pawh 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.

Alignment class hrang hrang te

Text alignment class nei component hrang hrangah awlsam takin text realign theih.

Left aligned thuziak a awm.

Center aligned thuziak.

Thuziak dinglam aligned a ni.

Thudik dik tak.

Wrap text a awm lo.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Hrilhfiahna class hrang hrang

Text capitalization class hmangin component hrang hrangah text siam danglam.

Thuziak te tak te.

Thuziak lian tak tak.

Thuziak lian tak tak hmanga ziah.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

A tawi zawngin

<abbr>Hover-a expanded version lantir nan abbreviation leh acronym atan HTML’s element stylized implementation . Attribute nei abbreviation te titlehian light dotted bottom border leh hover-a help cursor an nei a, hei hian hover-ah leh assistive technology hmangtute tan context dang a pe a ni.

Basic tawifelna

Attribute tih thumal tawifelna chu attr tih a ni.

<abbr title="attribute">attr</abbr>

Initialism a ni

.initialismFont-size tlem deuh deuh atan abbreviation- ah dah la .

HTML hi chhangphut sliced hnua thil tha ber a ni.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Address te pawh a awm

Pi leh pu hnai ber emaw hnathawhna taksa pum pui emaw biak theihna tur information present. Line zawng zawng chu <br>.

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. 1355 Market Street, Suite 900
San Francisco, CA 94103 P
: (123) 456-7890

Hming kimchang
hmasa [email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Blockquote te pawh a awm

I document chhunga source dang atanga block block quoting atan.

Default ah chuan blockquote a awm

HTML<blockquote> eng pawh chu quote angin wrap vek ang che. Straight quote atan chuan a .<p>

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

Blockquote tih theih a ni

Standard pakhata simple variation atan style leh content thlak danglam <blockquote>.

Source pakhat hming vuah

<footer>Source hriat theihna tur a dah belh bawk ang che. 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>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Display hrang hrang a awm bawk

.blockquote-reverseRight-aligned content awmna blockquote atan add 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-reverse">
  ...
</blockquote>

List te a awm

Order lo a ni

Order-in chiang taka a pawimawh loh thil list .

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 hi a chhuak thei lo
- 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>
  <li>...</li>
</ul>

Order a ni

Order -in chiang taka a pawimawhna thil list .

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

<ol>
  <li>...</li>
</ol>

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 hi a chhuak thei lo
- 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>...</li>
</ul>

Inline a ni

List item zawng zawng chu line khatah dah la, display: inline-block;light padding thenkhat nen.

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

<ul class="list-inline">
  <li>...</li>
</ul>

Hrilhfiahna

Thumal list leh a kaihhnawih sawifiahna.

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.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Horizontal hmanga sawifiahna

Term leh description te chu <dl>line up side-by-side-in siam rawh. Default s angin stacked off in a start a <dl>, mahse navbar a expand chuan hengte hi ti ve rawh.

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.
Felis euismod semper chu a chhuak a: 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.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Auto-truncating a ni thei

Horizontal description list hian term sei lutuk, veilam column-a fit theih lohte chu a truncate ang text-overflow. Viewport tawi zawkah chuan default stacked layout ah an inthlak ang.

Inline a ni

Code inline snippet te chu <code>.

Entirnan, <section>inline angin wrapped tur a ni.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

User input a ni

<kbd>Keyboard hmanga input luh tlangpui chu entir nan hmang rawh .

Directory thlak tur chuan a cdhnuaiah directory hming ziak la.
Settings edit tur chuan press rawh ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Basic block a ni

<pre>Code line tam tak atan hmang ang che . Rendering dik tak neih theih nan code chhunga angle bracket awm zawng zawng chu escape ngei ngei tur a ni.

<p>Hetah hian thuziak entir rawh...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Class chu duhthusamin i dah thei a .pre-scrollable, chu chuan max-height 350px a set ang a, y-axis scrollbar a pe bawk ang.

Variables te pawh a awm

Variable tarlanna atan <var>tag hmang ang che.

y = m x + b tih a ni

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Sample output a ni

Program atanga block sample output tarlanna atan <samp>tag hmang ang che.

He thuziak hi computer program atanga sample output anga ngaih tur a ni.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Entirna bulpui ber

Basic styling atan—light padding leh horizontal divider chauh—base class .tablechu eng <table>. Super redundant angin a lang thei a, mahse calendar leh date picker ang chi plugin dang tana table hman tam tak avang hian kan custom table style te chu isolate kan thlang ta a ni.

Table caption pawh a awm thei bawk.
# a ni.	Hming hmasa	Hming hnuhnung	User hming a ni
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a	chu Sava chu a ni	@twitter ah a awm

<table class="table">
  ...
</table>

Striped row hrang hrang a awm

.table-stripedA chhunga table row eng pawhah zebra-striping dah belh nan hmang ang che <tbody>.

Cross-browser hmanga hman theih a ni

Striped table te hi CSS selector hmangin style a ni a :nth-child, hei hi Internet Explorer 8 ah chuan a awm lo.

# a ni.	Hming hmasa	Hming hnuhnung	User hming a ni
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a	chu Sava chu a ni	@twitter ah a awm

<table class="table table-striped">
  ...
</table>

Table border nei a ni

.table-borderedTable leh cell sir zawng zawnga border awmte tan add rawh .

# a ni.	Hming hmasa	Hming hnuhnung	User hming a ni
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a	chu Sava chu a ni	@twitter ah a awm

<table class="table table-bordered">
  ...
</table>

Hover row hrang hrang a awm

.table-hoverA chhunga table row hrang hranga hover state enable turin Add rawh <tbody>.

# a ni.	Hming hmasa	Hming hnuhnung	User hming a ni
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a	chu Sava chu a ni	@twitter ah a awm

<table class="table table-hover">
  ...
</table>

Table condensed a ni

.table-condensedCell padding chu a chanvea then la, table compact zawka siam turin dah rawh .

# a ni.	Hming hmasa	Hming hnuhnung	User hming a ni
1. a ni	Mark	Otto chuan a ti a	@mdo a ni
2. 2.	Jakoba chu a ni	Thornton-a chuan a ti a	@thau
3. A ni	Larry chuan a ti a		@twitter ah a awm

<table class="table table-condensed">
  ...
</table>

Contextual class hrang hrang te

Table row emaw cell pakhat zel emaw color turin contextual class hmang ang che.

Pawl	Hrilhfiahna
`.active`	Row emaw cell emaw bik ah hover color a apply thin
`.success`	Thiltih hlawhtling emaw, thil \ha emaw a nih thu a tarlang
`.info`	Neutral informative change emaw action emaw a nih thu a tarlang
`.warning`	Ngaihsak ngai thei vaukhânna a târ lang
`.danger`	Thil hlauhawm tak emaw, thil tha lo awm thei emaw a nih thu a tarlang

# a ni.	Column thupui (heading) a awm	Column thupui (heading) a awm	Column thupui (heading) a awm
1. a ni	Column chhunga thu awmte	Column chhunga thu awmte	Column chhunga thu awmte
2. 2.	Column chhunga thu awmte	Column chhunga thu awmte	Column chhunga thu awmte
3. A ni	Column chhunga thu awmte	Column chhunga thu awmte	Column chhunga thu awmte
4. 4.	Column chhunga thu awmte	Column chhunga thu awmte	Column chhunga thu awmte
5. 5.	Column chhunga thu awmte	Column chhunga thu awmte	Column chhunga thu awmte
6. 6.	Column chhunga thu awmte	Column chhunga thu awmte	Column chhunga thu awmte
7. 7.1	Column chhunga thu awmte	Column chhunga thu awmte	Column chhunga thu awmte
8. A ni	Column chhunga thu awmte	Column chhunga thu awmte	Column chhunga thu awmte
9. A ni	Column chhunga thu awmte	Column chhunga thu awmte	Column chhunga thu awmte

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Assistive technology-te hnena awmzia thlentu

Table row emaw, cell pakhat zel emawa awmzia belh turin color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute – screen reader ang chi hmangtute hnenah a thlen dawn lo. Color hmanga tarlan information chu a thupui a\ang ngeia lang (table row/cell kaihhnawih a thuziak hmuh theih) a nih theih nan, a nih loh leh kawng dang hmanga telh a nih theih nan, .sr-onlyclass nena thup belh thuziak ang chi.

Chhanna pe thei table te

Responsive table siam la, eng .tablein pawh wrapping .table-responsivela, device tenau (768px hnuai lam)-ah horizontal-a scroll turin siam rawh. 768px wide aia lian thil i en hian heng table-ah hian danglamna i hmu lo vang.

Vertical clipping/truncation tih a ni

Responsive tables make use of overflow-y: hidden, chu chuan table hnuai lam emaw, chunglam emaw atanga chhuak content eng pawh a clip off thin. A bik takin hei hian dropdown menu leh third-party widget dangte a clip off thei a ni.

Firefox leh fieldset te a awm bawk

Firefox hian fieldset styling awkward engemaw zat a nei a width, chu chuan responsive table a tibuai a ni. Hei hi Bootstrap-a kan pek loh Firefox-specific hack tel lo chuan override theih a ni lo :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Hriat belh duh chuan he Stack Overflow chhanna hi chhiar la .

# a ni.	Table thupuiah hian	Table thupuiah hian	Table thupuiah hian	Table thupuiah hian	Table thupuiah hian	Table thupuiah hian
1. a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni
2. 2.	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni
3. A ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni

# a ni.	Table thupuiah hian	Table thupuiah hian	Table thupuiah hian	Table thupuiah hian	Table thupuiah hian	Table thupuiah hian
1. a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni
2. 2.	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni
3. A ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni	Table cell a ni

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Entirna bulpui ber

Mimal form control te hian global styling engemaw zat an dawng nghal vek a. Textual <input>, <textarea>, leh <select>elements with zawng zawng chu default-in .form-controla set vek a ni. width: 100%;Label leh control te chu wrap in a, .form-groupa hlat zawng tha ber tur a ni.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Form group leh input group te chu mix suh

Form group leh input group te chu direct in mix suh . Chu ai chuan input group chu form group chhungah nest la.

Inline-a siam a ni

Left-aligned leh inline-block control-te tan i form- ah dah la .form-inline(a nih a ngai lo ). Hei hi viewport chhunga form 768px zau aia tlem lo tan chauh a ni.<form>

Custom widths a mamawh mai thei

Bootstrap ah hian inputs leh selects te width: 100%;chu default in a apply tawh a. Inline form chhungah chuan chu chu width: auto;line khatah control tam tak awm thei turin kan reset thin. I layout a zirin custom width dang a ngai mai thei.

Label te pawh add fo thin ang che

Input tin atan label i dah tel loh chuan screen reader-te chuan i form-ah harsatna an nei ang. .sr-onlyHeng inline form te tan hian class hmangin label te chu i thup thei ang . Assistive technology-te tana label pek dan dang dang a awm a, chu chu aria-label, aria-labelledbyemaw titleattribute te hi a ni. Chûng zînga pakhat mah a awm loh chuan screen reader-te chuan placeholderattribute hman an hmang thei a, a awm chuan, mahse placeholderlabeling method dangte aiah hman a ṭha lo tih hre reng ang che.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Horizontal ang maia awm

Bootstrap-a grid class ruahman lawk hmangin form control-a label leh group-te chu horizontal layout-ah align la, form-ah dah belh rawh .form-horizontal(chu chu a nih a ngai lo <form>). Chutianga tih chuan .form-groups chu grid row anga awm turin a thlak danglam a, chuvangin .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Controls thlawp theih a ni

Entirna form layout-a support standard form control entirnan.

Input te pawh a awm

Form control tlanglawn ber, text hmanga input field. HTML5 chi hrang hrang support a huam vek: text, password, datetime, , datetime-local, date, month, time, week, number, email, url, search, telleh color.

Type declaration neih a ngai a ni

typeInputs te chu anmahni dik taka declare a nih chauhvin fully styled a ni ang .

<input type="text" class="form-control" placeholder="Text input">

Input group hrang hrang te

Text-based eng pawh hma leh/ emaw hnua integrated text emaw button emaw dah belh duh chuan input group component kha en<input> la .

Textarea ah hian a awm

Form control a ni a, chu chuan text line tam tak a support thei. rowsA tul angin attribute thlak rawh .

<textarea class="form-control" rows="3"></textarea>

Checkbox leh radio te pawh a awm bawk

Checkbox hi list pakhata option pakhat emaw, a aia tam emaw thlan nan a ni a, radio erawh chu tam tak zinga option pakhat thlan nan a ni thung.

Disabled checkbox leh radio te hi a support a, mahse parent hover-a "not-allowed" cursor pek tur chuan class chu parent , , , or -ah <label>i dah a ngai ang ..disabled.radio.radio-inline.checkbox.checkbox-inline

Default (stack tawh) a ni.

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Inline checkbox leh radio te a awm bawk

Line khata control langte tan checkbox emaw radio emaw series-a .checkbox-inlineor class te hmang rawh ..radio-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Checkbox leh radio te label text awm lo

, chhungah text i neih loh <label>chuan input chu i beisei angin a awm a. Tunah hian non-inline checkbox leh radio-ah chauh a thawk mek. Assistive technology-te tana label chi khat (entir nan, hman aria-label) la pe turin hre reng ang che.

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

A thlang chhuak

Native select menu tam tak—chu chu Safari leh Chrome-ah chuan— border-radiusproperties hmanga siam danglam theih loh tur rounded corner an nei tih hre reng ang che.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>Attribute nei control tan chuan multipledefault-in option tam tak a lang.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Static control theih a ni

Form chhunga form label bulah plain text dah i mamawh hunah chuan .form-control-staticclass chu a -ah hmang ang che <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Focus state a ni

outlineForm control thenkhata default styles te chu kan paih a, box-shadowa aiah a kan apply thin a :focus.

Demo `:focus`state a ni

A chunga entirnan input hian kan documentation-ah custom styles hmangin :focusa .form-control.

Disabled state a ni

disabledInput pakhatah boolean attribute dah la, user interaction a awm loh nan. Disabled inputs te chu a light zawkin a lang a, not-allowedcursor add bawk.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Fieldset te chu tihtawp a ni

disabledattribute chu a chhungah dah la, <fieldset>a chhunga control zawng zawng chu <fieldset>vawi khatah disable vek rawh.

Link functionality chungchang hriattirna`<a>`

Default-ah chuan browser-te chuan a chhunga native form control ( <input>, <select>leh <button>elements) zawng zawng <fieldset disabled>chu disabled angin an en ang a, an chungah keyboard leh mouse inzawmna pahnih a veng ang. Mahse, i form-ah <a ... class="btn btn-*">elements pawh a tel a nih chuan hengte hi style of pointer-events: none. Button-te tana disabled state chungchang section-a kan sawi tawh ang khan (leh a bik takin anchor element-te tana sub-section-ah) he CSS property hi standardized a la ni lo va, Opera 18 leh a hnuai lamah emaw, Internet Explorer 11-ah emaw chuan a support kim lo a, hnehna a chang ta a ni 't keyboard hmangtute'n heng link-te hi an focus emaw, an activate emaw theih lohna turin a khap lo. Chuvangin him taka awm tur chuan custom JavaScript hmangin chutiang link chu disable rawh.

Cross-browser hmanga hman theih a ni

disabledBootstrap hian browser zawng zawngah heng style te hi a hmang vek dawn laiin, Internet Explorer 11 leh a hnuai lam hian attribute hi a support kim lo a <fieldset>ni. Heng browser-a fieldset awmte hi tihtawp nan custom JavaScript hmang ang che.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Chhiar tur chauh state

Input pakhatah boolean attribute dah la, readonlyinput value tihdanglam loh nan. Read-only inputs te chu a light zawkin a lang (disabled inputs ang bawkin), mahse standard cursor chu vawng reng rawh.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Ṭanpuina thuziak

Form control hrang hrang atan block level help text.

Help text chu form controls nena inzawm tir

aria-describedbyHelp text chu attribute hmanna nena inzawm form control nen chiang taka inzawm tur a ni. Hei hian assistive technology – screen reader ang chi – te chuan user-in control a focus emaw, a luh emaw hunah he help text hi an puang chhuak ang.

<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Validation tih a ni

Bootstrap hian form control-a error, warning, leh hlawhtlinna state hrang hrangte validation style a keng tel a ni. Hman tur chuan parent element- ah .has-warning, .has-error, emaw dah la. Chu element chhunga , , leh awm .has-successapiang chuan validation styles te chu a dawng ang..control-label.form-control.help-block

Assistive technology leh colorblind hmangtute hnena validation state thlen

Heng validation styles te hi form control dinhmun tarlanna atana hman hian hmuh theih, color-based indication chauh a pe a, chu chu assistive technology hmangtute - screen reader ang chi - hmangtute hnenah emaw, colorblind hmangtute hnenah emaw a thlen dawn lo.

State indication dang pawh pek a nih theih nan hma la rawh. Entirnan, form control-a <label>text-ah ngei pawh state chungchanga hint i dah thei (a hnuaia code entirnan a awm ang hian), Glyphicon i.sr-only dah thei bawk ( class hmanga alternative text dik tak nen - Glyphicon entirnan en rawh ), emaw, an additional help text block a awm bawk. A bik takin assistive technology te tan chuan form control dik lo te pawh aria-invalid="true"attribute pek theih a ni bawk.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Icon optional te nen

Tin, optional feedback icon te pawh a dah belh thei bawk a, .has-feedbackicon dik tak chu i dah belh thei bawk.

Feedback icon te hian textual <input class="form-control">elements chauh hmangin hna an thawk thin.

Icon, label leh input group te a awm bawk

Label nei lo input leh dinglama add-on nei input group tan feedback icon te chu manual positioning a ngai a ni. Accessibility avang hian input zawng zawng tan label pe turin kan fuih tak zet che u a ni. Label tarlan loh i duh chuan .sr-onlyclass nen thup rawh. Label tel lova i tih tur a nih chuan topfeedback icon value kha siamrem rawh. Input group tan chuan righti addon zau zawng a zirin pixel value dik takah value chu siamrem rawh.

Icon awmzia chu assistive technology-te hnena thlen

Assistive technology – screen reader ang chi – te hian icon awmzia dik taka an sawi theih nan, .sr-onlyclass-ah hian thuziak thup dang dah belh tur a ni a, a hmanna nena inzawm form control nen chiang taka inzawm tir tur a aria-describedbyni A dang pawhin, a awmzia (entir nân, text entry field pakhat tâna vaukhânna a awm tih) chu <label>form control nêna inzawm tak tak thuziak tihdanglam ang chi, form dang hmanga sawi chhuah a nih theih nân enfiah bawk ang che.

A hnuaia entîrnate hian an form control hrang hrangte validation state chu <label>text-ah ngei pawh sawi tawh mah se, a chunga technique ( .sr-onlytext leh aria-describedby) hmanga tarlan chu a lantîr nân dah tel a ni.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Horizontal leh inline form-a icon duhthlan tur a awm

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Optional icons te chu thup a ni`.sr-only` label thup te nen

.sr-onlyClass chu form control’s thup nan i hmang a nih chuan <label>(labelling option dang, aria-labelattribute ang chi hmang lovin) Bootstrap hian icon a dah zawh veleh a awmna tur chu a siam rem nghal vek ang.

@ a ni.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Sizing control tur a ni

Class ang chi hmangin heights set la .input-lg, grid column class ang chi hmangin width set rawh.col-lg-* rawh.

A san zawng sizing a ni

Button size nena inmil form control sang zawk emaw tawi zawk emaw siam rawh.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Horizontal form group lian leh te te

Rang takin size label leh form controls chhungah emaw .form-horizontaldahin .form-group-lgor .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Column lian leh te

Input te chu grid column-ah wrap la, emaw custom parent element eng pawh hmangin, awlsam taka width duhzawng enforce turin.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Button tags a awm bawk

<a>, <button>, emaw <input>element pakhata button class te hmang rawh .

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Context-a hman dan tur

<a>Button class hi on leh <button>elements hman theih a nih laiin , <button>kan nav leh navbar component chhungah hian elements chauh support a ni.

Links te chu button angin an thawk a

Element-te chu button anga thawk tura hman a nih chuan <a>– in-page functionality tichhuaktu, tuna page chhunga document emaw section dang emaw kal ai chuan – a remchan dan angin pek tur a ni bawk role="button".

Cross-browser hmanga siam a ni

A tha ber angin, cross-browser rendering inmil theihna turin a theih phawt chuan element hman kan rawt tak zet a ni.<button>

Thil dang dang zingah Firefox <30 ah hian bug aline-height awm a, chu chuan of <input>-based buttons te chu kan set thei lo a, chu chuan Firefox a button dangte san zawng nen a inmil chiah lo a ni.

Thil thlan theih a ni

Button class awm zawng zawng hmang la, rang takin styled button siam rawh.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Assistive technology-te hnena awmzia thlentu

Button pakhata awmzia belh turin color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute – screen reader ang chi hmangtute hnenah a thlen dawn lo. Color hmanga tarlan information chu a thupui a\ang ngeia lang (button-a thuziak hmuh theih), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .sr-onlyclass nena thup thup belh ang chi a ni.

Size hrang hrang

Button lian zawk emaw te zawk emaw i duh em? Add .btn-lg, .btn-sm, or .btn-xssize dang atan.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Block level button—nu leh pa pakhat zau zawng zawnga huam vek—chu , dah belhin siam .btn-blockrawh.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active state a ni

Active laiin buttons chu pressed (background dum zawk, border dum zawk, leh inset shadow nen) a lang ang. <button>Elements tan chuan hei hi :active. <a>Elements tan chuan .active. Mahse, active state chu programmatic-a replicate a ngai a nih chuan s .active-ah i hmang thei (leh attribute pawh i dah tel thei bawk).<button>aria-pressed="true"

Button element a awm

:activePseudo-class a nih avangin add a ngai lo , mahse a hmel ang chiah kha force a ngai a nih chuan kal zel la, add rawh .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Anchor element a awm

.activeClass chu <a>buttons ah dah la .

Primary link a ni Zawm

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Disabled state a ni

Button te chu click theih loh angin siam la, opacity.

Button element a awm

disabledAttribute chu <button>buttons ah te dah la .

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Cross-browser hmanga hman theih a ni

disabledattribute chu a -ah i dah chuan <button>Internet Explorer 9 leh a hnuaia mi hian text-shadow tenawm tak, kan siam that theih loh nen text gray-ah a rawn render ang.

Anchor element a awm

.disabledClass chu <a>buttons ah dah la .

Primary link a ni Zawm

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Hetah hian utility class atan kan hmang .disableda, common class nen a inang a .active, chuvangin prefix a ngai lo.

Link hnathawh dan tur caveat

He class hian s pointer-events: none-a link functionality tihtawp tumna atan a hmang a <a>, mahse chu CSS property chu standardized a la ni lo va, Opera 18 leh a hnuai lamah emaw, Internet Explorer 11-ah emaw a support kim lo a, chu bakah, browser-ah pawh support pointer-events: none, keyboard navigation chu a nghawng lo a, chu chu keyboard hmu thei leh assistive technology hmangtute chuan heng link te hi an la activate thei dawn tihna a ni. Chuvangin him tur chuan custom JavaScript hmangin chutiang link chu disable rawh.

Responsive thlalak te

.img-responsiveBootstrap 3-a images te hi class dah belh hmangin responsive-friendly-a siam theih a ni . Hei hi max-width: 100%;, height: auto;leh display: block;image-ah pawh a hman theih a, chutiang chuan parent element-ah a scale tha hle.

.img-responsiveClass hmanga thlalak center tur .center-blockchuan .text-center. Hman dan tur chipchiar zawka hriat duh chuan helper classes section en rawh.center-block .

SVG images leh IE 8-10 te a awm bawk

Internet Explorer 8-10 ah chuan SVG images with .img-responsivete hi a size a inang lo hle. Hei hi siamthat tur width: 100% \9;chuan a tulna hmunah add tur a ni. Bootstrap hian image format dangte tan harsatna a thlen avangin automatic in a apply lo.

<img src="..." class="img-responsive" alt="Responsive image">

Hmanlai thlalak te

<img>Eng project pawha awlsam taka image style turin element pakhatah class dah belh rawh .

Cross-browser hmanga hman theih a ni

Internet Explorer 8 hian rounded corners support a tlachham tih hre reng ang che.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Contextual rawng hrang hrang

Emphasis utility class tlemte hmangin colour hmangin awmzia sawi rawh. Hengte hi link-ah pawh hman theih a ni a, kan default link style ang bawkin hover-ah pawh a thim ang.

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. tortor mauris nibh.

Nullam id dolor id nibh ultricies lirthei ut id elit.

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 lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a.

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

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. non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Specificity chungchang sawiho

A châng chuan selector dang specificity vangin emphasis class hman theih a ni lo. A tam zawkah chuan workaround tling tak chu i text <span>chu class nen a wrap hi a ni.

Assistive technology-te hnena awmzia thlentu

awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color-in a tarlan information chu a thupui a\ang ngeia lang thei a nih leh nih loh enfiah rawh (contextual color-te chu text/markup-a awm tawh awmzia tihchak nan chauh hman a ni), a nih loh leh kawng dang hmanga dah tel a nih theih nan, .sr-onlyclass nena thup belh thuziak ang chi .

Contextual background hrang hranga awmte

Contextual text color class ang bawkin element pakhat background chu contextual class eng pawhah awlsam takin set rawh. Anchor component te chu hover-ah a thim ang a, text class ang bawkin.

Nullam id dolor id nibh ultricies lirthei ut id elit.

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 lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a.

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

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. non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Specificity chungchang sawiho

A châng chuan selector dang specificity vangin contextual background class hi hman theih a ni lo. A then phei chuan workaround tling tak chu i element content <div>chu class nen a wrap hi a ni.

Assistive technology-te hnena awmzia thlentu

As with contextual colors , colour hmanga awmzia sawi chhuah apiang pawh chu presentation chauh ni lo format-a sawi chhuah a nih theih nan enfiah rawh.

Icon kha khar rawh

Modal leh alerts ang chi content dismiss nan generic close icon hmang ang che.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets te pawh a awm

Dropdown functionality leh direction tarlan nan caret hmang ang che. Default caret chu dropup menu ah chuan automatic in a reverse ang tih hre reng ang che .

<span class="caret"></span>

Quick floats a ni

Class pakhat nen element pakhat chu veilam emaw dinglam emaw-ah float rawh. !importantspecificity issue awm lo turin a dah tel bawk. Class te hi mixin atan pawh hman theih a ni.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Center chhunga thu awmte block te

Element pakhat chu to display: blockleh center hmangin set rawh margin. Mixin leh class angin a awm bawk.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix rawh

Parent elementfloat ah dahin awlsam takin s clear rawh . Nicolas Gallagher-a’n a tihlar angin micro clearfix a hmang. Mixin atan pawh hman theih a ni..clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Content entir leh thup

Element pakhat chu entir emaw thup emaw turin force ( screen reader tan pawh tel ) .showleh .hiddenclass hmangin. Heng class te hian !importantspecificity conflicts awm lohna turin an hmang a, quick floats ang bawkin . Block level toggling atan chauh an awm. Mixin atan pawh hman theih a ni.

.hidea awm a, mahse screen reader te a nghawng ngai lo va, v3.0.1 atang khan deprecated a ni. Use .hiddenemaw hmang zawk rawh .sr-only.

Chubakah, .invisibleelement pakhat hmuh theihna chauh toggle nan hman theih a ni a, chu displaychu a siam danglam loh tihna a ni a, chu element chuan document kal dan a la nghawng thei tho tihna a ni.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Screen reader leh keyboard hmanga kal theihna tur a awm bawk

Screen reader tih loh device zawng zawngah element pakhat chu .sr-only. Combine .sr-onlywith .sr-only-focusableelement chu focus a nih hunah a lantir leh theih nan (eg keyboard-only user hmangin). Accessibility best practices zawm tur chuan a tul . Mixin atan pawh hman theih a ni.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Image thlak danglam a ni

.text-hideElement pakhata text content chu background image hmanga thlak danglam tura pui turin class emaw mixin emaw hmang rawh .

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

Mobile-friendly development chak zawk neih nan heng utility class te hi media query hmanga device hrang hranga content entir leh thup nan hmang la. Tin, print huna content toggling na tur utility class te pawh a awm bawk.

Hengte hi a tlem berah hman tum la, site khata version hrang hrang siam loh tur a ni. Chu ai chuan, device tinte presentation tihpun nân hmang zâwk ang che.

Class awm thei te

Viewport breakpoint hrang hranga content toggling nan class awm zawng zawng pakhat emaw, combination emaw hmang ang che.

	Extra te te device te pawh a awm bawkPhone hrang hrang (<768px) te.	Device te te te teTablet (≥768px) te a awm bawk.	Medium hmanrua teDesktop (≥992px) te pawh a awm bawk.	Device lian tak tak teDesktop (≥1200px) te pawh a awm bawk.
`.visible-xs-*`	Hmuh theih	Thuhruk	Thuhruk	Thuhruk
`.visible-sm-*`	Thuhruk	Hmuh theih	Thuhruk	Thuhruk
`.visible-md-*`	Thuhruk	Thuhruk	Hmuh theih	Thuhruk
`.visible-lg-*`	Thuhruk	Thuhruk	Thuhruk	Hmuh theih
`.hidden-xs`	Thuhruk	Hmuh theih	Hmuh theih	Hmuh theih
`.hidden-sm`	Hmuh theih	Thuhruk	Hmuh theih	Hmuh theih
`.hidden-md`	Hmuh theih	Hmuh theih	Thuhruk	Hmuh theih
`.hidden-lg`	Hmuh theih	Hmuh theih	Hmuh theih	Thuhruk

v3.2.0 atang khan breakpoint tin tan class te chu variation pathum a awm a, a hnuaia tarlan CSS property value .visible-*-*tin atan pakhat .display

Class hrang hrang group hrang hrang	CSS a ni`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

xsChuvangin, entirnan extra small ( ) screens tan chuan .visible-*-*class awm thei te chu: .visible-xs-block, .visible-xs-inline, leh .visible-xs-inline-block.

Class .visible-xs, .visible-sm, .visible-md, leh te .visible-lgpawh a awm a, mahse v3.2.0 atang khan hman tawh loh a ni. Toggling -related elements .visible-*-blockatana special case dang tih loh chu , nen an inang tlangpui .<table>

Print class hrang hrang a awm

Responsive class pangngai ang bawkin, print tur content toggling nan hengte hi hmang ang che.

Class hrang hrang te	Browser hmanga en theih a ni	Print rawh
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Thuhruk	Hmuh theih
`.hidden-print`	Hmuh theih	Thuhruk

Class .visible-printpawh a awm a mahse v3.2.0 atang khan deprecated a ni. -related element-te .visible-print-blocktana special case dang tih loh chu , nen a inang tlangpui .<table>

Test case te pawh a awm bawk

I browser size thlak la, device hrang hrangah load la, responsive utility class te test rawh.

A hmuh theih...

Green checkmarks hian element chu i viewport hman mek ah a lang tih a tarlang.

Extra te tak te ✔ X-small ah hmuh theih a ni

Te ✔ A te tak teah hmuh theih

Hmanrua ✔ Medium-ah hmuh theih a ni

Hrawl ✔ A lian takah hmuh theih

Extra te leh te te ✔ X-a te leh te ah hmuh theih

Medium leh lian tak a ni ✔ Medium leh large-ah hmuh theih

Extra te leh medium te ✔ X-small leh medium-ah hmuh theih

A te leh a lian ✔ A te leh a lianah hmuh theih

Extra te leh lian tak tak ✔ X-a te leh lian takah hmuh theih

Small leh medium a ni ✔ Small leh medium-ah hmuh theih

Thup a ni a...

Hetah hian green checkmarks hian element chu i viewport awm mekah thup a nih thu a tarlang bawk.

Extra te tak te ✔ x-small ah thup a ni

Te ✔ Tlemte chungah thup a ni

Hmanrua ✔ Medium-ah thup a ni

Hrawl ✔ A lian chungah thup a ni

Extra te leh te te ✔ x-small leh te ah thup a ni

Medium leh lian tak a ni ✔ Medium leh large-ah thup a ni

Extra te leh medium te ✔ x-small leh medium ah thup a ni

A te leh a lian ✔ A te leh lian chungah thup a ni

Extra te leh lian tak tak ✔ X-a te leh lian takah thup a ni

Small leh medium a ni ✔ Small leh medium-ah thup a ni

Bootstrap hian CSS hi Less hmanga siam a ni a, preprocessor a ni a, CSS compile na tur variable, mixin leh function ang chi functionality dang a nei bawk. Kan compiled CSS files ai chuan source Less files hmang duhtute chuan framework chhung zawnga kan hman variable leh mixin tam tak te chu an hmang tangkai thei a ni.

Grid variable leh mixins te chu Grid system section chhungah hian a huam vek a ni .

Bootstrap hmanga compiling a ni

Bootstrap hi kawng hnih tal hman theih a ni a, chu chu compiled CSS hmang emaw, source Less files hmang emaw a ni. Less files te compile tur chuan Getting Started tih kha en la khan i development environment setup dan tur chu command mamawh te run theih nan en la.

Third party compilation tools te hian Bootstrap hmangin hna an thawk thei a, mahse kan core team te hian an support lo.

Variables te pawh a awm

Variables hi project pumpuiah hman tlanglawn value hrang hrang color, spacing, font stack te centralize leh share theihna atan hman a ni. Breakdown kimchang hriat duh chuan Customizer ah hian en la .

A rawng hrang hrang

A awlsam zawngin color scheme pahnih hmang la: grayscale leh semantic. Grayscale colors hian black shade hman tlanglawn tak takte chu rang taka hmuh theihna a pe a, semantic-ah chuan awmze nei contextual value-a dah color hrang hrangte a tel thung.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Heng color variable te hi a awm ang angin hmang la, i project atan variable awmze nei zawkah reassign leh rawh.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Scaffolding siam a ni

I site skeleton-a key element hrang hrangte rang taka siam theihna tur variable kutdawh.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Link te pawh a awm

I link te chu awlsam takin value pakhat chauh hmangin color dik takin style rawh.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Hriat tur chu the @link-hover-colorhian function a hmang a, Less atanga tool mak tak dang a ni a, chu chuan automagically in hover color dik tak a siam thei a ni. , darken, lighten, saturateleh desaturate.

Typography hmanga ziah a ni

I typeface, text size, leading leh a dangte chu awlsam takin quick variable tlemte hmangin set rawh. Bootstrap hian hengte pawh hi a hmang tangkai a, typographic mixin awlsam tak tak a pe thei bawk.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Icons te pawh a awm

I icon awmna leh filename siam dan tur quick variable pahnih.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Component hrang hrangte

Bootstrap chhung zawnga component hrang hrangte hian common value set nan default variable thenkhat an hmang thin. Hetah hian hman tlanglawn ber berte chu kan rawn tarlang e.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Vendor mixin te a awm bawk

Vendor mixins hi i compiled CSS-a vendor prefix kaihhnawih zawng zawng dah tel a, browser tam tak support tura puitu mixin a ni.

Box-sizing a ni

I components te box model chu mixin pakhat hmangin reset rawh. Context hriat duh chuan Mozilla aṭanga he thuziak ṭangkai tak hi en rawh .

Mixin hi v3.2.0 atang khan hman tawh loh a ni a, Autoprefixer hman a ni tawh bawk. Backwards-compatibility humhim nan Bootstrap hian Bootstrap v4 thlengin mixin chu internal-in a hmang chhunzawm zel dawn a ni.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Corner round tak tak a awm

Tunah chuan tunlai browser zawng zawng hian non-prefixed border-radiusproperty hi an support vek tawh. Chutiang a nih avang chuan .border-radius()mixin a awm lo a, mahse Bootstrap hian thil pakhat sir bik a corner pahnih rang taka round theihna tur shortcut a keng tel a ni.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Box (Drop) ah hian a awm a

I target audience te hian browser leh device thar ber leh ropui ber ber an hmang a nih chuan box-shadowproperty chu a mah chauhin hmang mai rawh. Android (pre-v4) leh iOS device hlui (pre-iOS 5) support i mamawh chuan deprecated mixin hmangin a mamawh chu la rawh-webkit prefix mamawh chu la rawh.

Mixin hi v3.1.0 atang khan deprecated a ni a, Bootstrap hian official takin standard property support lo platform hmanlai tawhte chu a support loh avangin. Backwards-compatibility humhim nan Bootstrap hian Bootstrap v4 thlengin mixin chu internal-in a hmang chhunzawm zel dawn a ni.

I box shadow-ah hian color hmang ngei ang che, rgba()chutiang chuan background nen a inmil thei ang bera an inzawm theih nan.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Inthlak danglamna te

Flexibility atan mixin tam tak a awm. Transition information zawng zawng pakhat hmangin set la, a nih loh leh a tul angin delay leh duration hranpa ziak rawh.

Mixins te hi v3.2.0 atang khan hman tawh loh a ni a, Autoprefixer hman a ni tawh bawk. Backwards-compatibility humhim nan Bootstrap hian Bootstrap v4 thlengin mixins te chu internal-in a hmang chhunzawm zel dawn a ni.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Hrilhfiahna te

Thil eng pawh rotate, scale, translate (move), emaw skew emaw.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animation te pawh a awm

Declaration pakhata CSS3-a animation property zawng zawng hmanna tur mixin pakhat leh property pakhat zel atan mixin dang.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacity a ni

Browser zawng zawng tan opacity set la, filterIE8 tan fallback pe rawh.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Hmun dahna thuziak

Field tin chhunga form control awmte tan context pe rawh.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Column hrang hrang a awm

Element pakhat chhungah CSS hmangin column siam thin.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradient te a awm

Color pahnih eng pawh awlsam takin background gradient ah chantir rawh. Advanced deuh la, direction set la, color pathum hmang la, radial gradient hmang rawh. Mixin pakhat hmang hian prefixed syntax i mamawh zawng zawng i hmu vek ang.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Standard two-color, linear gradient angle pawh i tarlang thei bawk:

#gradient > .directional(#333; #000; 45deg);

Barber-stripe style gradient i mamawh chuan chu pawh chu a awlsam hle. Color pakhat chauh specify la, translucent white stripe kan overlay ang.

#gradient > .striped(#333; 45deg);

Ante chu up la, a aiah color pathum hmang rawh. Color hmasa ber, color pahnihna, color pahnihna color stop (25% ang percentage value) leh color pathumna chu heng mixins hmang hian set rawh:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Lu a ti sang a! Gradient i paih chhuah a ngai a nih chuan IE-specific filteri dah belh tawh zawng zawng chu paih chhuak ngei ang che. .reset-filter()Chu chu a bulah mixin hmangin i ti thei ang background-image: none;.

Utility mixin te pawh a awm bawk

Utility mixins chu CSS property dang nena inzawm lote inzawmkhawmin thil tum emaw hna bik emaw tihhlawhtlinna tur mixin a ni.

Clearfix rawh

class="clearfix"Element eng pawha dah theihnghilh la, .clearfix()a remchan dan angin mixin chu dah belh rawh. Nicolas Gallagher hnen atanga micro clearfix a hmang .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Horizontal centering a awm a

A nu leh pa chhungah element eng pawh chu rang takin center rawh. A mamawh emaw , set tur widthemaw a ni.max-width

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Sizing puitu te

Thil pakhat dimension awlsam zawkin tarlang rawh.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Textarea lian leh te tihdanglam theih

Textarea eng pawh, element dang eng pawh tan awlsam takin resize options configure theih a ni. Browser awm dan pangngai ( both) ah a default a.

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Thuziak truncating tih a ni

Mixin pakhat hmangin ellipsis hmangin awlsam takin text truncate theih a ni. Element chu a nih blockemaw inline-blocklevel emaw a ngai.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina thlalak te

Image path pahnih leh @1x image dimensions te tarlang la, Bootstrap hian @2x media query a pe ang. Image tam tak rawngbawl tur i neih chuan media query pakhatah i retina image CSS chu manual-a ziah tum ang che.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Bootstrap hi Less hmanga siam a nih laiin official Sass port a nei bawk . GitHub repository hranah kan enkawl a, update te chu conversion script hmangin kan handle thin.

Eng nge a tel

Sass port hian repo hran a neih avangin audience danglam deuh deuh a rawng a bawl avangin, he project chhunga thu awmte hi Bootstrap project lian ber nen a danglam hle. Hei hian Sass port chu Sass-based system tam thei ang ber nen a inmil theih nan a pui a ni.

Kawng	Hrilhfiahna
`lib/`	Ruby gem code (Sass configuration, Rails leh Compass te inzawmkhawmna) te a awm bawk.
`tasks/`	Converter scripts (upstream Less chu Sass-ah a inthlak) .
`test/`	Compilation test hrang hrang neih a ni
`templates/`	Compass package a rawn lang chhuak
`vendor/assets/`	Sass, JavaScript leh font file te a awm bawk
`Rakefile`	Internal task, rake leh convert ang chi te

Sass port-a GitHub repository tlawh la, heng file te hi action-a hmuh theih a ni.

Installation tih a ni

Bootstrap for Sass install dan leh hman dan tur hriat duh chuan GitHub repository readme ah hian en theih a ni. Source thar ber a ni a, Rails, Compass, leh standard Sass project-a hman tur information a awm bawk.

Sass tan bootstrap a awm

CSS a ni

A tlangpuiin

HTML5 doctype a ni

Mobile hmasa ber

Typography leh link te pawh a awm bawk

Normalize rawh.css

Container te pawh a awm

Grid system hmanga siam a ni

Inhmelhriattirna

Media lama zawhna awm thei te

Grid duhthlan tur a awm

Entirnan: Stacked-to-horizontal tih ang chi

Entirnan: Fluid dahna

Entirnan: Mobile leh desktop

Entirnan: Mobile, tablet, desktop te hi a ni

Entirnan: Column wrapping tih ang chi

Responsive column a reset leh thin

Gutters te chu la chhuak rawh

Column offset dan tur

Nesting column hrang hrang te

Column order tur a ni

Mixin leh variable tlem zawk

Variables te pawh a awm

Mixins te a awm

Entirna hman dan

Typography hmanga ziah a ni

Thupui hrang hrangte

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

h1. Bootstrap tih thupui hmangin Secondary text a awm

h2. Bootstrap tih thupui hmangin Secondary text a awm

h3. Bootstrap tih thupui hmangin Secondary text a awm

h4. Bootstrap tih thupui hmangin Secondary text a awm

h5. Bootstrap tih thupui hmangin Secondary text a awm

h6. Bootstrap tih thupui hmangin Secondary text a awm

Taksa copy a ni

Lead taksa copy a ni

Less hmanga sak a ni

Inline-a thuziak element hrang hrangte

Thuziak chhinchhiahna

Text tihbo a ni

Thuziak hmanga strikethrough

Thuziak dah luh a ni

Thuziak hnuaia line awm

Thuziak te te

Tumruh

Italics hmanga ziah a ni

Element hrang hrang a inthlak danglam thin

Alignment class hrang hrang te

Hrilhfiahna class hrang hrang

A tawi zawngin

Basic tawifelna

Initialism a ni

Address te pawh a awm

Blockquote te pawh a awm

Default ah chuan blockquote a awm

Blockquote tih theih a ni

Source pakhat hming vuah

Display hrang hrang a awm bawk

List te a awm

Order lo a ni

Order a ni

Style nei lo a ni

Inline a ni

Hrilhfiahna

Horizontal hmanga sawifiahna

Auto-truncating a ni thei

Code a ni

Inline a ni

User input a ni

Basic block a ni

Variables te pawh a awm

Sample output a ni

Table te pawh a awm

Entirna bulpui ber

Striped row hrang hrang a awm

Demo `:focus`state a ni

Link functionality chungchang hriattirna`<a>`

Optional icons te chu thup a ni`.sr-only` label thup te nen