Faigh an ìsleachadh air na prìomh phìosan de bhun-structar Bootstrap, a’ toirt a-steach ar dòigh-obrach airson leasachadh lìn nas fheàrr, nas luaithe agus nas làidire.

HTML5 sgrìobhainn

Bidh Bootstrap a’ cleachdadh cuid de eileamaidean HTML agus feartan CSS a dh’ fheumas an doctype HTML5 a chleachdadh. Cuir a-steach e aig toiseach do phròiseactan gu lèir.

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

Mobile an toiseach

Le Bootstrap 2, chuir sinn ris stoidhlichean càirdeil gluasadach roghainneil airson prìomh thaobhan den fhrèam. Le Bootstrap 3, tha sinn air am pròiseact ath-sgrìobhadh gus a bhith càirdeil gluasadach bhon toiseach. An àite a bhith a’ cur ri stoidhlichean gluasadach roghainneil, bidh iad air am fuine a-steach don chridhe. Gu dearbh, tha Bootstrap gluasadach an toiseach . Gheibhear ciad stoidhlichean gluasadach air feadh an leabharlainn gu lèir an àite ann am faidhlichean fa leth.

Gus dèanamh cinnteach gu bheilear a’ toirt seachad ceart agus a’ suathadh suathadh, cuir an taga meta viewport ris an fhaidhle <head>.

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

'S urrainn dhut comasan sùmaidh a chur à comas air innealan-làimhe le bhith a' cur user-scalable=noris an taga meta viewport. Bidh seo a’ cur casg air gluasad, a’ ciallachadh nach urrainn do luchd-cleachdaidh ach gluasad, agus mar thoradh air an sin bidh an làrach agad a’ faireachdainn beagan nas coltaiche ri tagradh dùthchasach. Gu h-iomlan, chan eil sinn a’ moladh seo air a h-uile làrach, mar sin bi faiceallach!

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

Clò-sgrìobhaidh agus ceanglaichean

Bidh Bootstrap a’ suidheachadh taisbeanadh cruinneil bunaiteach, clò-sgrìobhadh, agus stoidhlichean ceangail. Gu sònraichte, tha sinn:

Suidhich background-color: #fff;air anbody
Cleachd na @font-family-base, @font-size-base, agus @line-height-basebuadhan mar ar bunait clò-sgrìobhaidh
Suidhich dath a’ cheangail chruinneil tro @link-coloragus cuir an gnìomh fo-cheanglaichean ceangail a-mhàin air:hover

Gheibhear na stoidhlichean sin taobh a-staigh scaffolding.less.

Normalize.css

Airson tairgse thar-bhrobhsair nas fheàrr, bidh sinn a’ cleachdadh Normalize.css , pròiseact le Nicolas Gallagher agus Jonathan Neal .

Gabhadairean

Feumaidh Bootstrap eileamaid anns a bheil susbaint na làraich a chòmhdach agus an siostam clèithe againn a chumail. Faodaidh tu aon de dhà shoitheach a thaghadh airson a chleachdadh anns na pròiseactan agad. Thoir an aire, mar thoradh air paddingagus barrachd, nach eil soitheach sam bith air a neadachadh.

Cleachd .containerairson soitheach leud stèidhichte freagairteach.

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

Cleachd .container-fluidairson soitheach làn leud, a’ spangachadh leud iomlan a’ phuirt-seallaidh agad.

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

Tha Bootstrap a’ toirt a-steach siostam clèithe siùbhlach freagairteach, gluasadach a bhios gu h-iomchaidh a’ sgèile suas ri 12 colbhan mar a bhios meud an inneal no an sealladh-seallaidh ag àrdachadh. Tha e a’ toirt a-steach clasaichean ro-mhìnichte airson roghainnean cruth furasta, a bharrachd air measgachadh cumhachdach airson barrachd chruthan semantach a chruthachadh .

Ro-ràdh

Bithear a’ cleachdadh siostaman clèithe airson dealbhadh dhuilleagan a chruthachadh tro shreath de shreathan is cholbhan anns a bheil do shusbaint. Seo mar a tha siostam clèithe Bootstrap ag obair:

Feumaidh sreathan a bhith air an cur taobh a-staigh .containerleud (leud stèidhichte) no .container-fluid(làn-leud) airson co-thaobhadh ceart agus pleadhag.
Cleachd sreathan gus buidhnean còmhnard de cholbhan a chruthachadh.
Bu chòir susbaint a chuir ann an colbhan, agus chan fhaod ach colbhan a bhith nan clann de shreathan sa bhad.
Clasaichean clèithe ro-mhìnichte mar .rowagus .col-xs-4rim faighinn airson dealbhadh clèithe a dhèanamh gu sgiobalta. Faodar nas lugha de mheasgachaidhean a chleachdadh cuideachd airson dealbhadh nas semantach.
Bidh colbhan a’ cruthachadh cutairean (beàrnan eadar susbaint colbh) tro padding. Tha am pleadhag sin air a chothromachadh ann an sreathan airson a’ chiad agus an colbh mu dheireadh tro iomall àicheil air .rows.
Is e an iomall àicheil carson a tha na h-eisimpleirean gu h-ìosal seann-fhasanta. Is ann gus am bi susbaint taobh a-staigh colbhan clèithe air a lìnigeadh le susbaint nach eil air a’ ghriod.
Bithear a’ cruthachadh colbhan clèithe le bhith a’ sònrachadh an àireamh de dhusan colbh a tha rim faighinn a tha thu airson a sgaoileadh. Mar eisimpleir, bhiodh trì colbhan co-ionann a’ cleachdadh trì .col-xs-4.
Ma tha barrachd air 12 colbhan air an cur ann an aon sreath, bidh gach buidheann de cholbhan a bharrachd, mar aon aonad, a’ ceangal ri loidhne ùr.
Bidh clasaichean clèithe a’ buntainn ri innealan le leud sgrion nas motha na no co-ionann ris na meudan brisidh, agus a’ dol thairis air clasaichean clèithe a tha ag amas air innealan nas lugha. Mar sin, me a’ cur .col-md-*clas sam bith ri eileamaid bheir sin buaidh chan ann a-mhàin air an stoidhle aige air innealan meadhanach ach cuideachd air innealan mòra mura h-eil .col-lg-*clas an làthair.

Coimhead ris na h-eisimpleirean airson na prionnsapalan sin a chur an sàs anns a’ chòd agad.

Ceistean meadhanan

Bidh sinn a’ cleachdadh na ceistean meadhanan a leanas anns na Nas lugha de fhaidhlichean againn gus na prìomh phuingean briseadh san t-siostam clèithe againn a chruthachadh.

/* 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) { ... }

Bidh sinn uaireannan a’ leudachadh air na ceistean meadhanan sin gus a bhith a’ toirt a-steach max-widthCSS a chuingealachadh gu seata innealan nas cumhainge.

@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) { ... }

Roghainnean clèithe

Faic mar a tha taobhan de shiostam clèithe Bootstrap ag obair thairis air iomadh inneal le clàr feumail.

	Fònaichean innealan beaga a bharrachd (<768px)	Clàran innealan beaga (≥768px)	Innealan meadhanach deasg (≥992px)	Innealan mòra deasg (≥1200px)
Giùlan clèithe	Cothromach fad na h-ùine	Thuit sìos airson tòiseachadh, còmhnard os cionn puingean brisidh
Leud an t-soithich	Chan eil gin (auto)	750px	970px	1170px
Ro-leasachan clas	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# de cholbhan	12
Leud colbh	Auto	~62px	~81px	~97px
Leud an cutair	30px (15 piogsail air gach taobh de cholbh)
Neo-sheasmhach	Tha
Offsets	Tha
Òrdugh colbh	Tha

Eisimpleir: Air a chruachadh gu còmhnard

A’ cleachdadh aon sheata de .col-md-*chlasaichean clèithe, faodaidh tu siostam clèithe bunaiteach a chruthachadh a thòisicheas air a chruachadh air innealan gluasadach agus innealan clàr (an raon beag gu beag a bharrachd) mus tig thu gu bhith còmhnard air innealan deasg (meadhanach). Cuir colbhan clèithe ann an cruth sam bith .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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

Eisimpleir: container fluid

Tionndaidh cruth clèithe leud stèidhichte sam bith gu cruth làn-leud le bhith ag atharrachadh an taobh a-muigh agad .containergu .container-fluid.

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

Eisimpleir: Fòn-làimhe agus deasg

Nach eil thu airson gum bi na colbhan agad dìreach a’ cruachadh ann an innealan nas lugha? Cleachd na clasaichean clèithe innealan beaga is meadhanach a bharrachd le bhith a’ cur .col-xs-* .col-md-*ris na colbhan agad. Faic an eisimpleir gu h-ìosal airson beachd nas fheàrr air mar a tha e uile ag obair.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

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

Eisimpleir: Fòn-làimhe, clàr, deasg

Tog air an eisimpleir roimhe le bhith a’ cruthachadh dealbhadh eadhon nas beothaile agus nas cumhachdaiche le .col-sm-*clasaichean clàr.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

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

Eisimpleir: Còmhdach colbh

Ma tha barrachd air 12 colbhan air an cur ann an aon sreath, bidh gach buidheann de cholbhan a bharrachd, mar aon aonad, a’ ceangal ri loidhne ùr.

.col-xs-9

.col-xs-4
Bho 9 + 4 = 13 > 12, bidh an div 4-colbh seo air a phasgadh air loidhne ùr mar aon aonad ri thaobh.

.col-xs-6 Tha
colbhan às dèidh làimh a' leantainn air adhart air an loidhne ùr.

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

Ath-shuidheachadh colbhan freagairteach

Leis na ceithir sreathan de ghriodan rim faighinn tha thu gu bhith a’ ruith a-steach do chùisean far nach bi na colbhan agad, aig amannan brisidh sònraichte, ceart gu leòr leis gu bheil aon dhiubh nas àirde na am fear eile. Gus sin a chàradh, cleachd measgachadh de a .clearfixagus na clasaichean goireasach freagairteach againn .

.col-xs-6 .col-sm-3 Ath-mheudaich do shealladh-
seallaidh no thoir sùil air air an fhòn agad airson eisimpleir.

.col-xs-6 .col-sm-3

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

A bharrachd air a bhith a’ glanadh colbhan aig puingean brisidh freagairteach, is dòcha gum feum thu ath- shuidheachadh, putadh no slaodadh . Faic seo ann an gnìomh san eisimpleir clèithe .

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

Thoir air falbh cutairean

Thoir air falbh na cutairean bho shreath agus tha e na cholbhan leis a ' .row-no-gutterschlas.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

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

Colbhan dheth

Gluais colbhan air an taobh cheart a’ cleachdadh .col-md-offset-*chlasaichean. Bidh na clasaichean sin ag àrdachadh iomall clì colbh le *colbhan. Mar eisimpleir, .col-md-offset-4gluais .col-md-4thairis air ceithir colbhan.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

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

Faodaidh tu cuideachd cuir às do chothromachadh bho ìrean clèithe nas ìsle le .col-*-offset-0clasaichean.

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

Colbhan neadachaidh

Gus do shusbaint a neadachadh leis a’ ghriod àbhaisteach, cuir colbhan ùra .rowagus seata de .col-sm-*cholbhan taobh a-staigh .col-sm-*colbh a tha ann mu thràth. Bu chòir seata de cholbhan a bhith ann an sreathan neadachaidh a chuireas suas ri 12 no nas lugha (chan fheum thu na 12 colbhan a tha rim faighinn a chleachdadh).

Ìre 1: .col-sm-9

Ìre 2: .col-xs-8 .col-sm-6

Ìre 2: .col-xs-4 .col-sm-6

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

Òrdugh colbh

Atharraich gu furasta òrdugh nan colbhan clèithe togte againn le clasaichean .col-md-push-*agus mion-atharraichean..col-md-pull-*

.col-md-9 .col-md-putadh-3

.col-md-3 .col-md-pull-9

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

Nas lugha de mheasgachadh agus caochladairean

A bharrachd air clasaichean clèithe ro -thogte airson dealbhadh luath, tha Bootstrap a’ toirt a-steach Nas lugha de chaochladairean agus mheasgachaidhean airson na dreachan sìmplidh, semantach agad fhèin a ghineadh gu sgiobalta.

Caochlaidhean

Bidh caochladairean a’ dearbhadh an àireamh de cholbhan, leud an gutter, agus puing ceist nam meadhanan far an tòisichear air colbhan air bhog. Bidh sinn gan cleachdadh gus na clasaichean clèithe ro-mhìnichte a chaidh a chlàradh gu h-àrd a ghineadh, a bharrachd air na measgachaidhean àbhaisteach a tha air an liostadh gu h-ìosal.

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

Measgachadh

Bithear a’ cleachdadh mheasgachaidhean ann an co-bhonn ris na caochladairean clèithe gus CSS semantach a ghineadh airson colbhan clèithe fa leth.

// 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));
  }
}

Eisimpleir de chleachdadh

Faodaidh tu na caochladairean atharrachadh gu na luachan àbhaisteach agad fhèin, no dìreach na mixins a chleachdadh leis na luachan bunaiteach aca. Seo eisimpleir de bhith a’ cleachdadh nan roghainnean bunaiteach gus cruth dà-cholbh a chruthachadh le beàrn eadar.

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

Cinn

Tha a h-uile ceann HTML, <h1>tro <h6>, ri fhaighinn. .h1tro .h6chlasaichean rim faighinn cuideachd, airson nuair a tha thu airson stoidhle cruth-clò ceann-cinn a mhaidseadh ach fhathast ag iarraidh gun tèid an teacsa agad a thaisbeanadh air loidhne.

h1. Ceann-uidhe Bootstrap	Semibold 36px
h2. Ceann-uidhe Bootstrap	Semibold 30px
h3. Ceann-uidhe Bootstrap	Semibold 24px
h4. Ceann-uidhe Bootstrap	leth-bhreac 18px
h5. Ceann-uidhe Bootstrap	Semibold 14px
h6. Ceann-uidhe Bootstrap	Semibold 12px

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

<small>Cruthaich teacsa nas aotroime, àrd-sgoile ann an ceann sam bith le tag coitcheann no sa .smallchlas.

h1. Bootstrap ceann teacsa àrd-sgoile

h2. Bootstrap ceann teacsa àrd-sgoile

h3. Bootstrap ceann teacsa àrd-sgoile

h4. Bootstrap ceann teacsa àrd-sgoile

h5. Bootstrap ceann teacsa àrd-sgoile

h6. Bootstrap ceann teacsa àrd-sgoile

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

Leth-bhreac corp

font-sizeIs e bunait cruinne Bootstrap 14px , le ìre line-heightde 1.428 . Tha seo air a chur an sàs anns <body>na paragrafan agus a h-uile paragraf. A bharrachd air an sin, <p>gheibh (paragrafan) iomall gu h-ìosal de leth an àirde loidhne àireamhaichte (10px gu bunaiteach).

Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida agus eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Leth-bhreac corp luaidhe

Dèan paragraf a’ seasamh a-mach le bhith a’ cur .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Air a thogail le nas lugha

Tha an sgèile clò-sgrìobhaidh stèidhichte air dà Chaochladair nas lugha ann an caochladairean.less : @font-size-baseagus @line-height-base. Is e a’ chiad fhear am meud cruth-clò bunaiteach a thathar a’ cleachdadh air feadh agus is e an dàrna fear an àirde bun-loidhne. Bidh sinn a’ cleachdadh na caochladairean sin agus beagan matamataigs sìmplidh gus oirean, pleadhagan, agus àirdean loidhne de gach seòrsa againn agus barrachd a chruthachadh. Gnàthaich iad agus atharraich Bootstrap.

Eileamaidean teacsa in-loidhne

Teacs comharraichte

Airson ruith teacsa a chomharrachadh air sgàth cho iomchaidh sa tha e ann an co-theacs eile, cleachd an <mark>taga.

Faodaidh tu an taga comharra a chleachdadh gusoilleireachadhteacs.

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

Teacs air a sguabadh às

Airson blocaichean teacsa a chaidh a sguabadh às, cleachd an <del>taga.

~~Tha còir aig an loidhne teacsa seo a bhith air a làimhseachadh mar theacsa air a dhubhadh às.~~

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

Teacsa stailc troimhe

Airson blocaichean teacsa nach eil buntainneach tuilleadh a chomharrachadh cleachd an <s>taga.

~~Thathas an dùil gun tèid dèiligeadh ris an loidhne teacsa seo mar rud nach eil ceart tuilleadh.~~

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

Teacs air a chuir a-steach

Airson cur ris an sgrìobhainn a chomharrachadh cleachd an <ins>taga.

Thathas an dùil gun tèid dèiligeadh ris an loidhne teacsa seo mar chur ris an sgrìobhainn.

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

Teacsa le loidhne

Gus cuideam a chuir air teacsa, cleachd an <u>taga.

Bidh an loidhne teacsa seo a’ nochdadh mar a chaidh a shoilleireachadh

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

Cleachd tagaichean cuideam bunaiteach HTML le stoidhlichean aotrom.

Teacs beag

Airson dì-chuideamachadh inline no blocaichean teacsa, cleachd an <small>taga gus teacsa a shuidheachadh aig 85% meud a’ phàrant. Bidh eileamaidean cinn a 'faighinn an cuid fhèin font-sizeairson eileamaidean neadachaidh <small>.

No faodaidh tu eileamaid in-loidhne a chleachdadh le .smallàite sam bith <small>.

Tha còir aig an loidhne teacsa seo a bhith air a làimhseachadh mar chlò-bhualadh grinn.

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

Trom

Airson cuideam a chuir air criomag de theacsa le cuideam cruth-clò nas truime.

Tha a’ phìos teacsa a leanas air a thoirt seachad mar theacsa trom .

<strong>rendered as bold text</strong>

clò eadailteach

Airson cuideam a chur air criomag de theacsa le clò eadailteach.

Tha a’ phìos teacsa a leanas air a thoirt seachad mar theacsa clò eadailteach .

<em>rendered as italicized text</em>

Eileamaidean eile

Faodaidh tu a chleachdadh <b>agus <i>ann an HTML5. <b>thathar an dùil faclan no abairtean a shoilleireachadh gun a bhith a’ toirt cuideam a bharrachd fhad ‘s <i>a tha e gu ìre mhòr airson guth, teirmean teignigeach, msaa.

Clasaichean co-thaobhadh

Atharraich teacsa gu co-phàirtean gu furasta le clasaichean co-thaobhadh teacsa.

Teacs co-thaobhadh clì.

Teacs co-thaobhadh sa mheadhan.

Teacs co-thaobhadh ceart.

Teacs air fhìreanachadh.

Gun teacsa fillte.

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

Clasaichean cruth-atharrachaidh

Atharraich teacsa gu co-phàirtean le clasaichean calpachadh teacsa.

Teacs le litrichean beaga.

Teacs le mullach àrd.

Teacs calpaichte.

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

Giorrachaidhean

Gnìomhachadh stoidhle de eileamaid HTML <abbr>airson giorrachaidhean agus geàrr-chunntasan gus an dreach leudaichte air hover a shealltainn. Tha giorrachadh le titlefeart aig a’ chrìoch ìosal le dotagach aotrom agus cursair cuideachaidh air hover, a’ toirt seachad co-theacs a bharrachd air hover agus do luchd-cleachdaidh theicneòlasan taice.

Geàrr-chunntas bunaiteach

Is e giorrachadh den fhacal buadhan attr .

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

tùsachd

Cuir .initialismri giorrachadh airson cruth-clò beagan nas lugha.

Is e HTML an rud as fheàrr bho aran sliseag.

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

Seòlaidhean

Thoir seachad fiosrachadh conaltraidh airson an sinnsear as fhaisge no a 'bhuidheann obrach gu lèir. Glèidh an cruth le bhith a’ cur crìoch air a h-uile loidhne le <br>.

Twitter, Inc.
1355 Sràid a' Mhargaidh, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Ainm slàn
[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>

Blockquotes

Airson blocaichean de shusbaint a thogail bho thùs eile san sgrìobhainn agad.

Blockquote bunaiteach

Còmhdaich <blockquote>timcheall HTML sam bith mar an cuòt. Airson luachan dìreach, tha sinn a’ moladh a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Roghainnean Blockquote

Bidh stoidhle agus susbaint ag atharrachadh airson atharrachaidhean sìmplidh air ìre àbhaisteach <blockquote>.

Ag ainmeachadh stòr

Cuir a-steach <footer>airson an stòr aithneachadh. Còmhdaich ainm an tùs obrach ann am <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

Cuideigin ainmeil ann an Source Title

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

Taisbeanaidhean eile

Cuir ris .blockquote-reverseairson blockquote le susbaint co-thaobhadh ceart.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tha an t-iomlan posuere erat ante.

Cuideigin ainmeil ann an Source Title

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Liostaichean

Gun òrdugh

Liosta de nithean anns nach eil an òrdugh gu sònraichte cudromach.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem aig massa
Facilisis ann am pretium nisl aliquet
Gun a bhith a 'dol a-mach à bith
- Phasellus iaculis saor an asgaidh
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat aig
Faucibus porta lacus fringilla no
Aenean sit amet erat nunc
Luchdaich a-nuas porttitor lorem

<ul>
  <li>...</li>
</ul>

Dh'òrdaich

Liosta de nithean anns a bheil an òrdugh gu sònraichte cudromach.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem aig massa
Facilisis ann am pretium nisl aliquet
Gun a bhith a 'dol a-mach à bith
Faucibus porta lacus fringilla no
Aenean sit amet erat nunc
Luchdaich a-nuas porttitor lorem

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

Gun stoidhle

list-styleThoir air falbh an iomall bunaiteach agus clì air nithean liosta (clann sa bhad a-mhàin). Chan eil seo a’ buntainn ach ri nithean liosta chloinne sa bhad , a’ ciallachadh gum feum thu an clas a chur ris airson liostaichean neadachaidh sam bith cuideachd.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem aig massa
Facilisis ann am pretium nisl aliquet
Gun a bhith a 'dol a-mach à bith
- Phasellus iaculis saor an asgaidh
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat aig
Faucibus porta lacus fringilla no
Aenean sit amet erat nunc
Luchdaich a-nuas porttitor lorem

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

In-loidhne

Cuir a h-uile nì liosta air aon loidhne le display: inline-block;beagan pleadhag aotrom.

Ipsum
Phasellus iaculis
Gu h-obann

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

Tuairisgeul

Liosta de theirmean leis na tuairisgeulan co-cheangailte riutha.

Liostaichean tuairisgeul: Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.
Eusmod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida agus eget metus.
Port-adhair Malesuada: Etiam porta sem malesuada magna mollis euismod.

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

Tuairisgeul còmhnard

Dèan teirmean agus tuairisgeulan ann an <dl>loidhne suas taobh ri taobh. Tòisichidh e air a chruachadh mar <dl>s àbhaisteach, ach nuair a leudaicheas am bàr seòlaidh, dèan iad sin.

Liostaichean tuairisgeul: Tha liosta tuairisgeul foirfe airson teirmean a mhìneachadh.
Eusmod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida agus eget metus.
Port-adhair Malesuada: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus comodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

Gearradh fèin-ghluasadach

Gearraidh liostaichean tuairisgeul còmhnard teirmean a tha ro fhada airson a bhith a’ freagairt air a’ cholbh chlì le text-overflow. Ann am puirt-seallaidh nas cumhainge, atharraichidh iad chun chruth àbhaisteach air a chruachadh.

In-loidhne

Paisg criomagan còd in-loidhne le <code>.

Mar eisimpleir, <section>bu chòir a bhith air a phasgadh mar inline.

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

Teachd-a-steach cleachdaiche

Cleachd an <kbd>gus cuir a-steach a tha mar as trice air a chuir a-steach tro mheur-chlàr a chomharrachadh.

Gus clàran atharrachadh, dèan seòrsa cdagus ainm an eòlaire an uairsin.
Gus roghainnean a dheasachadh, brùth 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>

Bloc bunaiteach

Cleachd <pre>airson iomadh loidhne de chòd. Dèan cinnteach gun teich thu bho camagan ceàrn sam bith sa chòd airson a bhith a’ toirt seachad ceart.

<p>Sampall teacsa an seo...</p>

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

Faodaidh tu an .pre-scrollableclas a chuir ris gu roghnach, a shuidhicheas àirde as àirde de 350px agus a bheir seachad bàr-scrollaidh y-axis.

Caochlaidhean

Airson caochladairean a chomharrachadh cleachd an <var>taga.

y = m x + b

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

Toradh sampall

Airson blocaichean sampall toradh bho phrògram a chomharrachadh cleachd an <samp>taga.

Thathas an dùil gun tèid dèiligeadh ris an teacsa seo mar thoradh sampall bho phrògram coimpiutair.

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

Eisimpleir bunaiteach

Airson stoidhle bunaiteach - pleadhag aotrom agus dìreach luchd-sgaraidh còmhnard - cuir a 'chlas bunaiteach .tableri <table>. Is dòcha gu bheil e coltach nach eil feum air, ach leis gu bheilear a’ cleachdadh chlàran airson plugins eile leithid mìosachain agus luchd-togail cinn-latha, tha sinn air roghnachadh na stoidhlichean bùird àbhaisteach againn a sgaradh.

Caption clàr roghainneil.
#	A’ chiad ainm	An t-ainm mu dheireadh	Ainm-cleachdaidh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry	an Eòin	@twitter

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

Sreathan stiallach

Cleachd .table-stripedgus stiallan zebra a chur ri sreath bùird sam bith taobh a-staigh an fhaidhle <tbody>.

Co-fhreagarrachd tar-bhrabhsair

Tha bùird stiallach air an stialladh tron :nth-childtaghaidh CSS, nach eil ri fhaighinn ann an Internet Explorer 8.

#	A’ chiad ainm	An t-ainm mu dheireadh	Ainm-cleachdaidh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry	an Eòin	@twitter

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

Clàr crìche

Cuir ris .table-borderedairson crìochan air gach taobh den bhòrd agus na ceallan.

#	A’ chiad ainm	An t-ainm mu dheireadh	Ainm-cleachdaidh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry	an Eòin	@twitter

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

Sreathan hover

Cuir .table-hoverris gus staid hover a chomasachadh air sreathan bùird taobh a-staigh faidhle <tbody>.

#	A’ chiad ainm	An t-ainm mu dheireadh	Ainm-cleachdaidh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry	an Eòin	@twitter

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

Clàr dùmhail

Cuir .table-condensedris gus bùird a dhèanamh nas toinnte le bhith a’ gearradh pleadhag cealla ann an leth.

#	A’ chiad ainm	An t-ainm mu dheireadh	Ainm-cleachdaidh
1	Marc	Otto	@meadh
2	Iacob	Thornton	@saill
3	Larry the Bird		@twitter

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

Clasaichean co-theacsail

Cleachd clasaichean co-theacsail gus sreathan bùird no ceallan fa leth a dhath.

Clas	Tuairisgeul
`.active`	A’ cur an dath hover ri sreath no cealla sònraichte
`.success`	A’ comharrachadh gnìomh soirbheachail no adhartach
`.info`	A’ nochdadh atharrachadh neo gnìomh fiosrachail neo-phàirteach
`.warning`	A’ nochdadh rabhadh a dh’ fhaodadh a bhith feumach air aire
`.danger`	A’ comharrachadh gnìomh cunnartach no a dh’ fhaodadh a bhith àicheil

#	Ceann colbh	Ceann colbh	Ceann colbh
1	Susbaint colbh	Susbaint colbh	Susbaint colbh
2	Susbaint colbh	Susbaint colbh	Susbaint colbh
3	Susbaint colbh	Susbaint colbh	Susbaint colbh
4	Susbaint colbh	Susbaint colbh	Susbaint colbh
5	Susbaint colbh	Susbaint colbh	Susbaint colbh
6	Susbaint colbh	Susbaint colbh	Susbaint colbh
7	Susbaint colbh	Susbaint colbh	Susbaint colbh
8	Susbaint colbh	Susbaint colbh	Susbaint colbh
9	Susbaint colbh	Susbaint colbh	Susbaint colbh

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

A’ toirt brìgh do theicneòlasan cuideachail

Le bhith a’ cleachdadh dath gus brìgh a chur ri sreath bùird no cealla fa leth a’ toirt seachad sealladh lèirsinneach a-mhàin, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan cuideachaidh - leithid leughadairean sgrion. Dèan cinnteach gu bheil am fiosrachadh a tha air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (an teacsa faicsinneach san t-sreath/cealla clàr iomchaidh), no air a ghabhail a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .sr-onlychlas.

Clàran freagairteach

Cruthaich bùird freagairteach le bhith a ’pasgadh gin a .table-steach .table-responsivegus toirt orra gluasad gu còmhnard air innealan beaga (fo 768px). Nuair a choimheadas tu air rud sam bith nas motha na 768px de leud, chan fhaic thu eadar-dhealachadh sam bith anns na clàran sin.

Gearradh dìreach / giorrachadh

Bidh bùird fhreagarrach a’ cleachdadh overflow-y: hidden, a bhios a’ gearradh dheth susbaint sam bith a tha a’ dol seachad air oirean ìosal no àrd a’ bhùird. Gu sònraichte, faodaidh seo clàran-bìdh tuiteam-sìos agus widgets treas-phàrtaidh eile a ghearradh dheth.

Firefox agus raointean-cluiche

Tha stoidhle raon neònach aig Firefox anns a bheil widthsin a’ cur bacadh air a’ bhòrd fhreagarrach. Chan urrainnear seo a chuir seachad às aonais hack sònraichte Firefox nach toir sinn seachad ann am Bootstrap:

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

Airson tuilleadh fiosrachaidh, leugh am freagairt Stack Overflow seo .

#	Ceann clàr	Ceann clàr	Ceann clàr	Ceann clàr	Ceann clàr	Ceann clàr
1	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla
2	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla
3	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla

#	Ceann clàr	Ceann clàr	Ceann clàr	Ceann clàr	Ceann clàr	Ceann clàr
1	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla
2	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla
3	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla	Clàr cealla

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

Eisimpleir bunaiteach

Bidh smachdan foirm fa leth gu fèin-ghluasadach a’ faighinn beagan stoidhle cruinneil. Tha a h-uile teacsa <input>, <textarea>, agus <select>eileamaid le .form-controlair an suidheachadh gu width: 100%;bunaiteach. Paisg bileagan agus smachdan a-steach .form-groupairson am farsaingeachd as fheàrr.

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

Na bi a’ measgachadh buidhnean cruth le buidhnean cuir a-steach

Na measgachadh buidhnean foirm gu dìreach le buidhnean cuir a -steach . An àite sin, neadaich am buidheann cuir a-steach taobh a-staigh a’ bhuidheann fhoirm.

Foirm in-loidhne

Cuir .form-inlineris an fhoirm agad (nach fheum a bhith na <form>) airson smachdan a tha ceangailte ris an taobh chlì agus in-loidhne. Chan eil seo a’ buntainn ach ri foirmean taobh a-staigh puirt-seallaidh a tha co-dhiù 768px de leud.

Dh’ fhaodadh gum bi feum air leud gnàthaichte

Tha cuir a-steach agus taghaidhean air a width: 100%;chuir a-steach gu bunaiteach ann am Bootstrap. Taobh a-staigh foirmean in-loidhne, bidh sinn ag ath-shuidheachadh gum width: auto;faod grunn smachdan fuireach air an aon loidhne. A rèir do chruth, is dòcha gum bi feum air leud gnàthaichte a bharrachd.

Cuir bileagan ris an-còmhnaidh

Bidh trioblaid aig leughadairean sgrion leis na foirmean agad mura cuir thu a-steach bileag airson a h-uile cuir a-steach. Airson na foirmean in-loidhne seo, faodaidh tu na bileagan fhalach a’ cleachdadh a’ .sr-onlychlas. Tha dòighean eile ann airson bileag a thoirt seachad airson teicneòlasan taice, leithid an aria-label, aria-labelledbyno titlefeart. Mura h-eil gin dhiubh sin an làthair, faodaidh luchd-leughaidh sgrion a bhith a’ cleachdadh a’ placeholderbhuadh, ma tha iad ann, ach thoir an aire nach placeholdereilear a’ comhairleachadh a chleachdadh an àite dòighean bileagan eile.

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

Foirm chòmhnard

Cleachd na clasaichean clèithe ro-mhìnichte aig Bootstrap gus bileagan agus buidhnean de smachdan foirm a cho-thaobhadh ann an cruth còmhnard le bhith a’ cur .form-horizontalris an fhoirm (rud nach fheum a bhith na <form>). Le bhith a’ dèanamh sin atharraichidh .form-groupe gu bhith gad ghiùlan fhèin mar shreathan clèithe, agus mar sin chan eil feum air .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>

Smachdan le taic

Eisimpleirean de smachdan foirm àbhaisteach le taic ann an cruth foirm eisimpleir.

Cur a-steach

Smachd foirm as cumanta, raointean inntrigidh stèidhichte air teacsa. A’ toirt a-steach taic airson a h-uile seòrsa HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, agus color.

Dearbhadh seòrsa a dhìth

Cha tèid cuir a-steach làn stoidhle a-mhàin ma thèid an typeainmeachadh gu ceart.

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

Buidhnean cuir a-steach

Gus teacsa no putanan amalaichte a chur ris ro agus/no às deidh teacsa sam bith stèidhichte air teacsa <input>, thoir sùil air a’ cho-phàirt buidhne cuir a-steach .

Raon-teacsa

Smachd foirm a bheir taic do ghrunn loidhnichean teacsa. Atharraich rowsfeart mar a dh’ fheumar.

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

Bogsaichean sgrùdaidh agus rèidiothan

Tha bogsaichean sgrùdaidh airson aon no grunn roghainnean a thaghadh ann an liosta, agus tha rèidiothan airson aon roghainn a thaghadh bho mhòran.

Thathas a’ toirt taic do bhogsaichean-dearbhaidh agus rèidiothan ciorramach, ach gus cursair “nach eil ceadaichte” a thoirt seachad air gluasad a’ phàrant <label>, feumaidh tu an .disabledclas a chur ris a’ phàrant .radio, .radio-inline, .checkbox, no .checkbox-inline.

Default (cruachadh)

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

Bogsaichean sgrùdaidh in-loidhne agus rèidiothan

Cleachd na .checkbox-inlineno .radio-inlineclasaichean air sreath de bhogsaichean-seic no rèidiothan airson smachdan a nochdas air an aon loidhne.

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

Bogsaichean-dearbhaidh agus rèidiothan gun teacsa leubail

Mura h-eil teacsa agad taobh a-staigh an <label>, tha an cuir a-steach air a shuidheachadh mar a bhiodh dùil agad. An-dràsta chan obraich ach air bogsaichean-seic neo-loidhne agus rèidiothan. Cuimhnich fhathast gun toir thu seòrsa de leubail airson teicneòlasan cuideachaidh (mar eisimpleir, a’ cleachdadh aria-label).

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

Taghadh

Thoir an aire gu bheil oiseanan cruinn aig mòran de chlàran taghte dùthchasach - is e sin ann an Safari agus Chrome - nach gabh atharrachadh tro border-radiusthogalaichean.

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

Airson <select>smachdan leis a ' multipleghnè, tha grunn roghainnean air an sealltainn gu bunaiteach.

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

Smachd statach

Nuair a dh’ fheumas tu teacsa sìmplidh a chuir ri taobh leubail foirm taobh a-staigh foirm, cleachd an .form-control-staticclas air faidhle <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>

Stàit fòcas

Bidh sinn a’ toirt air falbh na stoidhlichean bunaiteach outlineair cuid de smachdan foirm agus a’ cur a-steach box-shadowna àite airson :focus.

`:focus`Stàite demo

Bidh an eisimpleir gu h-àrd a’ cleachdadh stoidhlichean àbhaisteach anns na sgrìobhainnean againn gus an :focusstaid air faidhle .form-control.

Stàite ciorramach

Cuir am disabledfeart boolean air cuir a-steach gus casg a chuir air eadar-obrachadh luchd-cleachdaidh. Bidh cuir a-steach ciorramach a’ nochdadh nas aotroime agus a’ cur not-allowedcùrsair ris.

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

Raointean ciorramach

Cuir am disabledfeart ri a <fieldset>gus a h-uile smachd taobh a-staigh an fhaidhle a dhì-cheadachadh <fieldset>aig an aon àm.

Caveat mu ghnìomhachd ceangail de`<a>`

Gu gnàthach, làimhsichidh brobhsairean a h-uile smachd cruth dùthchasach ( <input>, <select>agus <button>eileamaidean) taobh a-staigh a <fieldset disabled>mar chiorramaich, a’ cur casg air eadar-obrachadh meur-chlàr is luchag orra. Ach, ma tha <a ... class="btn btn-*">eileamaidean anns an fhoirm agad cuideachd, cha tèid iad sin ach stoidhle de pointer-events: none. Mar a chaidh a chomharrachadh anns an earrainn mu staid ciorramach airson putanan (agus gu sònraichte san fho-roinn airson eileamaidean acair), chan eil an togalach CSS seo àbhaisteach fhathast agus chan eil e a’ faighinn làn thaic ann an Opera 18 agus gu h-ìosal, no ann an Internet Explorer 11, agus bhuannaich e 't casg a chur air luchd-cleachdaidh meur-chlàr bho bhith comasach air na ceanglaichean sin a chuimseachadh no a chur an gnìomh. Mar sin airson a bhith sàbhailte, cleachd JavaScript àbhaisteach gus na ceanglaichean sin a chur à comas.

Co-fhreagarrachd tar-bhrabhsair

Ged a chuireas Bootstrap na stoidhlichean sin an sàs anns a h-uile brobhsair, chan eil Internet Explorer 11 agus gu h-ìosal a’ toirt làn thaic don disabledfheart air faidhle <fieldset>. Cleachd JavaScript gnàthaichte gus an raon-raoin sna brabhsairean sin a chur à comas.

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

Leughadh a-mhàin stàite

Cuir am readonlyfeart boolean air cuir a-steach gus casg a chuir air atharrachadh air luach an in-ghabhail. Tha coltas gu bheil cuir a-steach leughaidh a-mhàin nas aotroime (dìreach mar cuir a-steach ciorramach), ach cumaidh iad an cursair àbhaisteach.

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

Teacs cuideachaidh

Teacs cuideachaidh ìre bloc airson smachdan foirm.

A’ ceangal teacsa cuideachaidh ri smachdan fhoirm

Bu chòir teacsa cuideachaidh a bhith ceangailte gu soilleir ris an smachd foirm a tha e a’ buntainn ri cleachdadh a’ aria-describedbybhuadh. Nì seo cinnteach gun ainmich teicneòlasan cuideachaidh - leithid leughadairean sgrion - an teacsa cuideachaidh seo nuair a bhios an neach-cleachdaidh ag amas no a’ dol a-steach don smachd.

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

Stàitean dearbhaidh

Tha Bootstrap a’ toirt a-steach stoidhlichean dearbhaidh airson mearachd, rabhadh, agus stàitean soirbheachais air smachdan foirm. Gus a chleachdadh, cuir .has-warning, .has-error, no .has-successris an eileamaid phàrant. Gheibh .control-label, .form-control, agus taobh a- .help-blockstaigh an eileamaid sin na stoidhlichean dearbhaidh.

A’ giùlan staid dearbhaidh gu teicneòlasan cuideachail agus luchd-cleachdaidh dall-dath

Chan eil a bhith a’ cleachdadh nan stoidhlichean dearbhaidh sin gus staid smachd foirm a chomharrachadh ach a’ toirt seachad comharradh lèirsinneach, stèidhichte air dath, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan cuideachaidh - leithid leughadairean sgrion - no do luchd-cleachdaidh dall-dath.

Dèan cinnteach gu bheil comharra eile air staid air a thoirt seachad cuideachd. Mar eisimpleir, faodaidh tu sanas mu staid a thoirt a-steach ann an <label>teacsa smachd an fhoirm fhèin (mar a thachras san eisimpleir còd a leanas), cuir a-steach Glyphicon (le teacsa iomchaidh eile a’ cleachdadh a’ .sr-onlychlas - faic eisimpleirean Glyphicon ), no le bhith a’ toirt seachad faidhle bloc teacsa cuideachaidh a bharrachd . Gu sònraichte airson teicneòlasan cuideachaidh, faodar feart a thoirt do smachdan cruth neo-dhligheach aria-invalid="true".

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

Le ìomhaighean roghainneil

Faodaidh tu cuideachd ìomhaighean fios-air-ais roghainneil a chuir ris le cuir ris .has-feedbackagus an ìomhaigh cheart.

<input class="form-control">Chan obraich ìomhaighean fios-air-ais ach le eileamaidean teacsa .

Icons, bileagan, agus buidhnean cuir a-steach

Tha feum air suidheachadh làimhe de dh’ ìomhaighean fios-air-ais airson cuir a-steach às aonais leubail agus airson buidhnean cuir a -steach le tuilleadan air an taobh cheart. Thathas gad bhrosnachadh gu làidir bileagan a thoirt seachad airson a h-uile cuir a-steach airson adhbharan ruigsinneachd. Ma tha thu airson casg a chuir air bileagan, cuir am falach iad leis a’ .sr-onlychlas. Ma dh'fheumas tu dèanamh às aonais bileagan, atharraich topluach an ìomhaigh fios-air-ais. Airson buidhnean cuir a-steach, atharraich an rightluach gu luach piogsail iomchaidh a rèir leud an addon agad.

A’ giùlan brìgh an ìomhaigh gu teicneòlasan cuideachail

Gus dèanamh cinnteach gu bheil teicneòlasan cuideachaidh - leithid leughadairean sgrion - a 'toirt seachad brìgh ìomhaigh gu ceart, bu chòir teacsa falaichte a bharrachd a bhith air a thoirt a-steach don .sr-onlychlas agus gu soilleir co-cheangailte ris an fhoirm smachd a tha e a' buntainn ri bhith a 'cleachdadh aria-describedby. Air an làimh eile, dèan cinnteach gu bheil an ciall (mar eisimpleir, an fhìrinn gu bheil rabhadh ann airson raon inntrigidh teacsa sònraichte) air a thoirt seachad ann an cruth air choreigin eile, leithid atharrachadh teacsa an dearbh rud a tha <label>co-cheangailte ri smachd an fhoirm.

Ged a tha na h-eisimpleirean a leanas mu thràth a’ toirt iomradh air staid dearbhaidh nan smachdan cruth aca fhèin san <label>teacsa fhèin, chaidh an dòigh gu h-àrd (a’ cleachdadh .sr-onlyteacsa agus aria-describedby) a thoirt a-steach airson adhbharan mìneachaidh.

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

Ìomhaighean roghainneil ann an cruthan còmhnard agus in-loidhne

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

`.sr-only`Ìomhaighean roghainneil le bileagan falaichte

Ma chleachdas tu an .sr-onlyclas gus smachdan foirm fhalach <label>(seach a bhith a’ cleachdadh roghainnean labeling eile, leithid am aria-labelfeart), atharraichidh Bootstrap suidheachadh na h-ìomhaigh gu fèin-ghluasadach aon uair ‘s gu bheil e air a chur ris.

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

Smachd air meud

Suidhich àirdean a’ cleachdadh chlasaichean mar .input-lg, agus suidhich leudan a’ cleachdadh chlasaichean colbh clèithe mar .col-lg-*.

Meud àirde

Cruthaich smachdan cruth nas àirde no nas giorra a tha a rèir meud nam putanan.

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

Meudan buidhne cruth còmhnard

Meudaich bileagan gu sgiobalta agus cruthaich smachdan taobh a-staigh .form-horizontalle bhith a’ cur ris .form-group-lgno .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>

Meud colbh

Còmhdaich cuir a-steach ann an colbhan clèithe, no eileamaid phàrant àbhaisteach sam bith, gus an leud a tha thu ag iarraidh a chuir an gnìomh gu furasta.

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

Tagaichean putan

Cleachd na clasaichean putan air <a>, <button>, no <input>eileamaid.

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

Cleachdadh co-theacsa sònraichte

Ged a ghabhas clasaichean putan a chleachdadh air <a>agus <button>eileamaidean, chan eil ach <button>eileamaidean a’ faighinn taic taobh a-staigh ar co-phàirtean nav agus navbar.

Ceanglaichean ag obair mar phutanan

Ma thèid na h- <a>eileamaidean a chleachdadh mar phutanan - a’ brosnachadh gnìomhachd in-duilleag, an àite a bhith a’ seòladh gu sgrìobhainn no earrann eile air an duilleag làithreach - bu chòir faidhle iomchaidh a thoirt dhaibh cuideachd role="button".

Rendering tar-bhrabhsair

Mar chleachdadh as fheàrr, tha sinn gu mòr a’ moladh an <button>eileamaid a chleachdadh nuair as urrainnear gus dèanamh cinnteach gu bheilear a’ toirt seachad tar-bhrobhsair.

Am measg rudan eile, tha bug ann am Firefox <30 a tha gar casg bho bhith a’ suidheachadh nam line-heightputanan <input>stèidhichte air, ag adhbhrachadh nach bi iad dìreach a’ freagairt ri àirde nam putanan eile air Firefox.

Roghainnean

Cleachd gin de na clasaichean putan a tha rim faighinn gus putan le stoidhle a chruthachadh gu sgiobalta.

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

A’ toirt brìgh do theicneòlasan cuideachail

Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ri putan ach a’ toirt seachad comharradh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil fiosrachadh air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (teacs faicsinneach a’ phutan), no air a thoirt a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .sr-onlychlas.

Meudan

A bheil thu ag iarraidh putanan nas motha no nas lugha? Cuir ris .btn-lg, .btn-sm, no .btn-xsairson meudan a bharrachd.

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

Cruthaich putanan ìre bloc - an fheadhainn a tha a 'dol thairis air leud iomlan pàrant - le bhith a' cur .btn-block.

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

Stàite gnìomhach

Nochdaidh putanan air am brùthadh (le cùl-raon nas dorcha, crìoch nas dorcha, agus dubhar a-staigh) nuair a bhios iad gnìomhach. Airson <button>eileamaidean, thèid seo a dhèanamh tro :active. Airson <a>eileamaidean, tha e air a dhèanamh le .active. Ach, faodaidh tu a chleachdadh .activeair <button>s (agus am feart a aria-pressed="true"thoirt a-steach) ma dh’ fheumas tu an stàit gnìomhach ath-riochdachadh gu prògramach.

Eileamaid putan

Chan fheumar a chuir ris :activeoir is e clas-brèige a th’ ann, ach ma dh’ fheumas tu an aon choltas a sparradh, rachaibh air adhart agus cuir ris .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>

Eileamaid anchor

Cuir an .activeclas ri <a>putanan.

Ceangal bun-sgoile Ceangal

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

Stàite ciorramach

Thoir air na putanan coimhead neo-bhriog le bhith gan seargadh air ais le opacity.

Eileamaid putan

Cuir am disabledfeart ri <button>putanan.

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

Co-fhreagarrachd tar-bhrabhsair

Ma chuireas tu a’ disabledbhuadh ri <button>, bheir Internet Explorer 9 agus gu h-ìosal an teacsa liath le sgàil-theacsa mì-mhodhail nach urrainn dhuinn a chàradh.

Eileamaid anchor

Cuir an .disabledclas ri <a>putanan.

Ceangal bun-sgoile Ceangal

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

Bidh sinn a’ cleachdadh .disabledmar chlas goireis an seo, coltach ris a’ .activechlas chumanta, agus mar sin chan eil feum air ro-leasachan.

Cunnart gnìomh ceangail

Bidh an clas seo a’ cleachdadh pointer-events: nonegus feuchainn ri comas-gnìomh ceangail <a>s a chur à comas, ach nach eil an togalach CSS sin àbhaisteach fhathast agus nach eil làn thaic ann an Opera 18 agus gu h-ìosal, no ann an Internet Explorer 11. A bharrachd air an sin, eadhon ann am brobhsairean a bheir taic pointer-events: none, meur-chlàr chan eil buaidh aig seòladh fhathast, a’ ciallachadh gum bi e comasach fhathast do luchd-cleachdaidh meur-chlàr lèirsinneach agus luchd-cleachdaidh theicneòlasan taice na ceanglaichean sin a chuir an gnìomh. Mar sin airson a bhith sàbhailte, cleachd JavaScript àbhaisteach gus na ceanglaichean sin a chur à comas.

Dealbhan freagairteach

Faodar dealbhan ann am Bootstrap 3 a dhèanamh càirdeil le bhith a’ cur ris a’ .img-responsivechlas. Tha seo a 'buntainn max-width: 100%;, height: auto;agus display: block;ris an ìomhaigh gus am bi e a' dol gu math ris an eileamaid phàrant.

Gus ìomhaighean a chleachdas an .img-responsiveclas a mheadhanachadh, cleachd .center-blockan àite .text-center. Faic earrann nan clasaichean cuideachaidh airson tuilleadh fiosrachaidh mu .center-blockchleachdadh.

Ìomhaighean SVG agus IE 8-10

Ann an Internet Explorer 8-10, tha ìomhaighean SVG le .img-responsivemeud neo-chothromach. Gus seo a rèiteachadh, cuir ris width: 100% \9;far a bheil sin riatanach. Cha bhith Bootstrap a’ cleachdadh seo gu fèin-ghluasadach leis gu bheil e ag adhbhrachadh duilgheadasan ann an cruthan ìomhaigh eile.

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

Cruthan dhealbhan

Cuir clasaichean ri <img>eileamaid gus ìomhaighean a dhealbhadh gu furasta ann am pròiseact sam bith.

Co-fhreagarrachd tar-bhrabhsair

Cumaibh cuimhne nach eil taic aig Internet Explorer 8 airson oiseanan cruinn.

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

Dathan co-theacsail

Cuir an cèill brìgh tro dhath le dòrlach de chlasaichean goireasachd cuideam. Faodar iad sin a chuir an sàs ann an ceanglaichean cuideachd agus dorchaichidh iad air hover dìreach mar na stoidhlichean ceangail àbhaisteach againn.

Fusce dapibus, tellus ac cursus comodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla 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>

A’ dèiligeadh ri sònrachas

Uaireannan chan urrainnear clasaichean cuideam a chuir an sàs air sgàth cho sònraichte ‘s a tha neach-taghaidh eile. Anns a’ mhòr-chuid de chùisean, tha e na dhòigh-obrach gu leòr do theacsa a phasgadh ann <span>an clas leis a’ chlas.

A’ toirt brìgh do theicneòlasan cuideachail

Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ris ach a’ toirt seachad sealladh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil am fiosrachadh a tha air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (chan eilear a’ cleachdadh na dathan co-theacsa ach gus brìgh a tha mar-thà anns an teacsa/comharradh a dhaingneachadh), no air a ghabhail a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .sr-onlychlas. .

Cùl-fhiosrachadh co-theacsail

Coltach ris na clasaichean dath teacsa co-theacsach, cuir gu furasta cùl-raon eileamaid ann an clas co-theacsail sam bith. Bidh co-phàirtean acair a’ dorchachadh air hover, dìreach mar na clasaichean teacsa.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla 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>

A’ dèiligeadh ri sònrachas

Aig amannan chan urrainnear clasaichean cùl-fhiosrachaidh co-theacsail a chuir an sàs air sgàth cho sònraichte sa tha taghadh eile. Ann an cuid de chùisean, tha e na dhòigh-obrach gu leòr susbaint an eileamaid agad a phasgadh ann <div>an clas leis a’ chlas.

A’ toirt brìgh do theicneòlasan cuideachail

Coltach ri dathan co-theacsail , dèan cinnteach gu bheil brìgh sam bith air a thoirt seachad tro dhath cuideachd air a thoirt seachad ann an cruth nach eil dìreach taisbeanaidh.

Dùin an ìomhaigh

Cleachd an ìomhaigh dlùth choitcheann airson cuir às do shusbaint mar mhodalan agus rabhaidhean.

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

Cùram

Cleachd cùraman gus gnìomhachd tuiteam-sìos agus stiùireadh a chomharrachadh. Thoir an aire gum bi an cùram bunaiteach air ais gu fèin-ghluasadach ann an clàir-thaice .

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

Brògan sgiobalta

Cuir eileamaid air bhog air an taobh chlì no deas le clas. !importantair a thoirt a-steach gus cùisean sònraichte a sheachnadh. Faodar clasaichean a chleachdadh cuideachd mar mheasgachaidhean.

<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();
}

Blocaichean susbaint sa mheadhan

Suidhich eileamaid gu display: blockagus meadhan tro margin. Ri fhaighinn mar mheasgachadh agus clas.

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

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

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

Soilleireachadh

Dèan soilleir gu furasta floatle bhith a’ cur .clearfix ris an eileamaid phàrant . A’ cleachdadh am meanbh-sholarachadh mar a chòrd Nicolas Gallagher ris. Faodar a chleachdadh cuideachd mar mixin.

<!-- 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();
}

A 'sealltainn agus a' falach susbaint

Thoir air eileamaid a bhith air a shealltainn no air fhalach ( a’ gabhail a-steach leughadairean sgrion ) le cleachdadh .showagus .hiddenclasaichean. Bidh na clasaichean sin a’ cleachdadh !importantgus còmhstrithean sònraichte a sheachnadh, dìreach mar na fleòdrain sgiobalta . Chan eil iad rim faighinn ach airson togail ìre bloc. Faodaidh iad cuideachd a bhith air a chleachdadh mar mixins.

.hideri fhaighinn, ach chan eil e an-còmhnaidh a’ toirt buaidh air leughadairean sgrion agus chan eil e air a mholadh mar v3.0.1. Cleachd .hiddenno .sr-onlyan àite sin.

A bharrachd air an sin, .invisiblefaodar a chleachdadh gus dìreach faicsinneachd eileamaid a thogail, a’ ciallachadh displaynach eil e air atharrachadh agus gum faod an eileamaid fhathast buaidh a thoirt air sruthadh na sgrìobhainn.

<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();
}

Leughadair sgrion agus susbaint seòladh meur-chlàr

Falaich eileamaid air a h-uile inneal ach a -mhàin leughadairean sgrion le .sr-only. Thig .sr-onlycòmhla .sr-only-focusablegus an eileamaid a shealltainn a-rithist nuair a tha fòcas ann (me le cleachdaiche meur-chlàr a-mhàin). Tha e riatanach airson na cleachdaidhean ruigsinneachd as fheàrr a leantainn . Faodar a chleachdadh cuideachd mar mheasgachaidhean.

<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();
}

Dealbh a chur an àite

Cleachd an .text-hideclas no am measgachadh gus cuideachadh le bhith a’ cur ìomhaigh cùl-fhiosrachaidh an àite susbaint teacsa eileamaid.

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

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

Airson leasachadh gluasadach nas luaithe, cleachd na clasaichean goireis sin airson a bhith a’ sealltainn agus a’ falach susbaint le inneal tro cheist mheadhanan. Tha clasaichean goireis ann cuideachd airson susbaint a thogail nuair a thèid a chlò-bhualadh.

Feuch an cleachd thu iad sin air stèidh chuingealaichte agus seachain dreachan gu tur eadar-dhealaichte den aon làrach a chruthachadh. An àite sin, cleachd iad gus cur ri taisbeanadh gach inneal.

Clasaichean rim faighinn

Cleachd aon no measgachadh de na clasaichean a tha rim faighinn airson susbaint a thogail thairis air puingean-seallaidh.

	Innealan beaga a bharrachdFònaichean (<768px)	Innealan beagaClàran (≥768px)	Innealan meadhanachDeasg (≥992px)	Innealan mòraDeasg (≥1200px)
`.visible-xs-*`	faicsinneach	Falaichte	Falaichte	Falaichte
`.visible-sm-*`	Falaichte	faicsinneach	Falaichte	Falaichte
`.visible-md-*`	Falaichte	Falaichte	faicsinneach	Falaichte
`.visible-lg-*`	Falaichte	Falaichte	Falaichte	faicsinneach
`.hidden-xs`	Falaichte	faicsinneach	faicsinneach	faicsinneach
`.hidden-sm`	faicsinneach	Falaichte	faicsinneach	faicsinneach
`.hidden-md`	faicsinneach	faicsinneach	Falaichte	faicsinneach
`.hidden-lg`	faicsinneach	faicsinneach	faicsinneach	Falaichte

Mar v3.2.0, thig na clasaichean airson gach puing-briseadh ann an trì atharrachaidhean, aon airson gach luach seilbh .visible-*-*CSS air a liostadh gu h-ìosal.display

Buidheann de chlasaichean	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Mar sin, airson scrionaichean beaga ( xs) a bharrachd mar eisimpleir, is iad na .visible-*-*clasaichean a tha rim faighinn: .visible-xs-block, .visible-xs-inline, agus .visible-xs-inline-block.

Tha na clasaichean .visible-xs, .visible-sm, .visible-md, agus .visible-lgcuideachd ann, ach chan eil iad air an moladh mar v3.2.0 . Tha iad timcheall air co-ionann ri .visible-*-block, ach a-mhàin le cùisean sònraichte a bharrachd airson <table>eileamaidean co-cheangailte ri togail.

Clasaichean clò-bhualaidh

Coltach ris na clasaichean freagairteach àbhaisteach, cleachd iad sin airson susbaint a thogail airson clò.

Clasaichean	Brabhsair	Clò-bhuail
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Falaichte	faicsinneach
`.hidden-print`	faicsinneach	Falaichte

Tha an clas .visible-printann cuideachd ach chan eil e air a mholadh mar v3.2.0. Tha e timcheall air co-ionann ri .visible-print-block, ach a-mhàin le cùisean sònraichte a bharrachd airson <table>eileamaidean co-cheangailte.

Cùisean deuchainn

Ath-mheudaich do bhrobhsair no luchdaich air diofar innealan gus na clasaichean goireis freagairteach a dhearbhadh.

Ri fhaicinn air...

Tha comharran-seic uaine a’ nochdadh gu bheil an eileamaid ri fhaicinn sa phort-seallaidh gnàthach agad.

Beag a bharrachd ✔ Ri fhaicinn air x-bheag

Beag ✔ Ri fhaicinn air beag

Meadhanach ✔ Ri fhaicinn air meadhan

Mòr ✔ Ri fhaicinn air mòr

A bharrachd beag is beag ✔ Ri fhaicinn air x-beag agus beag

Meadhanach agus mòr ✔ Ri fhaicinn air meadhanach mòr agus mòr

A bharrachd beag is meadhanach ✔ Ri fhaicinn air x-beag agus meadhanach

Beag agus mòr ✔ Ri fhaicinn air beag is mòr

A bharrachd beag agus mòr ✔ Ri fhaicinn air x-beag agus mòr

Beag is meadhanach ✔ Ri fhaicinn air beag is meadhanach

Falaichte air...

An seo, tha comharran-seic uaine cuideachd a’ nochdadh gu bheil an eileamaid falaichte sa phort-seallaidh gnàthach agad.

Beag a bharrachd ✔ Falaichte air x-bheag

Beag ✔ Falaichte air beag

Meadhanach ✔ Falaichte air meadhan

Mòr ✔ Falaichte air mòr

A bharrachd beag is beag ✔ Falaichte air x-beag agus beag

Meadhanach agus mòr ✔ Falaichte air meadhanach mòr agus mòr

A bharrachd beag is meadhanach ✔ Falaichte air x-beag agus meadhanach

Beag agus mòr ✔ Falaichte air beag is mòr

A bharrachd beag agus mòr ✔ Falaichte air x-beag agus mòr

Beag is meadhanach ✔ Falaichte air beag is meadhanach

Tha CSS Bootstrap air a thogail air Less, ro-phròiseasar le comas-gnìomh a bharrachd leithid caochladairean, measgachadh, agus gnìomhan airson CSS a chuir ri chèile. Faodaidh an fheadhainn a tha airson an stòr Nas lugha de fhaidhlichean a chleachdadh an àite na faidhlichean CSS cruinnichte againn feum a dhèanamh de na caochladairean agus measgachadh farsaing a bhios sinn a’ cleachdadh tron fhrèam.

Tha caochladairean clèithe agus measgachaidhean air an còmhdach ann an roinn siostam a’ ghriod .

A 'deasachadh bootstrap

Faodar Bootstrap a chleachdadh ann an co-dhiù dà dhòigh: leis an CSS a chaidh a chuir ri chèile no leis an stòr Nas lugha de fhaidhlichean. Gus na faidhlichean nas lugha a chur ri chèile, thoir sùil air an roinn Toiseach tòiseachaidh airson mar a shuidhicheas tu an àrainneachd leasachaidh agad gus na h-òrdughan riatanach a ruith.

Faodaidh innealan cruinneachaidh treas-phàrtaidh obrachadh le Bootstrap, ach chan eil iad a’ faighinn taic bhon phrìomh sgioba againn.

Caochlaidhean

Bithear a’ cleachdadh caochladairean tron phròiseact gu lèir mar dhòigh air luachan a chleachdar gu cumanta leithid dathan, beàrnan no cruachan cruth-clò a mheadhanachadh agus a cho-roinn. Airson mion-sgrùdadh iomlan, faic an Customizer .

Dathan

Cleachd dà sgeama dathan gu furasta: sgèile-gràin agus semantic. Bidh dathan liath-sgèile a’ toirt cothrom luath air cumaidhean de dhubh a thathas a’ cleachdadh gu cumanta fhad ‘s a tha semantic a’ toirt a-steach grunn dhathan a tha air an sònrachadh do luachan co-theacsail brìoghmhor.

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

Cleachd gin de na caochladairean dath sin mar a tha iad no ath-shònrachadh iad gu caochladairean nas brìghte airson do phròiseact.

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

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

Sgafall

Dòrlach de chaochladairean airson prìomh eileamaidean de chnàmhan na làraich agad a ghnàthachadh gu sgiobalta.

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

Ceanglaichean

Stoidhle do cheanglaichean gu furasta leis an dath cheart le dìreach aon luach.

// 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;
  }
}

Thoir an aire gu bheil e a’ @link-hover-colorcleachdadh gnìomh, inneal uamhasach eile bho Nas lugha, gus an dath hover ceart a chruthachadh gu fèin-ghluasadach. Faodaidh tu darken, lighten, , saturate, agus desaturate.

Clò-sgrìobhaidh

Suidhich gu furasta do chruth-clò, meud teacsa, stiùireadh, agus barrachd le beagan caochladairean sgiobalta. Bidh Bootstrap a’ cleachdadh iad sin cuideachd gus measgachadh clò-sgrìobhaidh furasta a thoirt seachad.

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

Ìomhaighean

Dà chaochladair sgiobalta airson suidheachadh agus ainm faidhle nan ìomhaighean agad a ghnàthachadh.

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

Co-phàirtean

Bidh co-phàirtean air feadh Bootstrap a’ cleachdadh cuid de chaochladairean bunaiteach airson luachan cumanta a shuidheachadh. Seo an fheadhainn as cumanta a chleachdar.

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

Measgachadh reiceadair

Is e measgachadh a th’ ann am measgachaidhean reiceadair gus taic a thoirt do dh’iomadh brobhsair le bhith a’ toirt a-steach a h-uile ro-leasachan reiceadair iomchaidh anns a’ CSS cruinnichte agad.

Meud bogsa

Ath-shuidhich modal bogsa do cho-phàirtean le aon mheasgachadh. Airson co-theacs, faic an artaigil cuideachail seo bho Mozilla .

Tha am measgachadh air a mholadh mar v3.2.0, le toirt a-steach Autoprefixer. Gus co-fhreagarrachd air ais a ghleidheadh, cumaidh Bootstrap a’ cleachdadh am measgachadh air an taobh a-staigh gus am bi Bootstrap v4.

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

Oiseanan cruinn

An-diugh tha a h-uile brobhsair ùr-nodha a’ toirt taic don t- border-radiusseilbh nach eil ro-shuidhichte. Mar sin, chan eil measgachadh ann .border-radius(), ach tha Bootstrap a’ toirt a-steach geàrr-chunntasan airson dà oisean a chuairteachadh gu sgiobalta air taobh sònraichte nì.

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

Faileas bogsa (Drop).

Ma tha an luchd-èisteachd targaid agad a’ cleachdadh na brobhsairean agus na h-innealan as ùire agus as motha, bi cinnteach gun cleachd thu an box-shadowtogalach leis fhèin. Ma tha feum agad air taic airson seann innealan Android (ro-v4) agus iOS (ro-iOS 5), cleachd am measgachadh nach deach a mholadh gus na tha a dhìth a thogail.-webkit .

Chan eil am measgachadh air a mholadh mar v3.1.0, leis nach eil Bootstrap a’ toirt taic oifigeil do na h-àrd-ùrlaran seann-fhasanta nach eil a’ toirt taic don togalach àbhaisteach. Gus co-fhreagarrachd air ais a ghleidheadh, cumaidh Bootstrap a’ cleachdadh am measgachadh air an taobh a-staigh gus am bi Bootstrap v4.

Dèan cinnteach gun cleachd rgba()thu dathan anns na faileasan bogsa agad gus am bi iad a’ measgachadh cho sgiobalta sa ghabhas le cùl-fhiosrachadh.

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

Eadar-ghluasadan

Ioma mixins airson sùbailteachd. Suidhich a h-uile fiosrachadh gluasaid le aon, no sònraich dàil agus fad fa leth mar a dh ’fheumar.

Tha na mixins air an ìsleachadh mar v3.2.0 , le toirt a-steach Autoprefixer. Gus co-fhreagarrachd air ais a ghleidheadh, cumaidh Bootstrap a’ cleachdadh na mixins air an taobh a-staigh gus am bi Bootstrap v4.

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

Atharrachaidhean

Rothar, sgèile, eadar-theangachadh (gluasad), no sgàineadh nì sam bith.

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

Beothachaidhean

Measgachadh singilte airson a bhith a’ cleachdadh feartan beothachaidh CSS3 gu lèir ann an aon dearbhadh agus measgachadh eile airson togalaichean fa leth.

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

Neo-sheasmhachd

Suidhich an neo-sheasmhachd airson a h-uile brobhsair agus thoir seachad cùl-taic filterairson IE8.

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

Teacs neach-àite

Thoir seachad co-theacsa airson smachdan foirm taobh a-staigh gach raon.

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

Colbhan

Cruthaich colbhan tro CSS taobh a-staigh aon eileamaid.

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

Caiseadan

Tionndaidh gu furasta dà dhath sam bith gu caisead cùil. Faigh nas adhartaiche agus suidhich stiùireadh, cleachd trì dathan, no cleachd caisead radial. Le aon mheasgachadh gheibh thu a h-uile co-chòrdadh ro-shuidhichte a dh’ fheumas tu.

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

Faodaidh tu cuideachd ceàrn caisead sreathach dà-dathte àbhaisteach a shònrachadh:

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

Ma tha feum agad air caisead stoidhle barber-stripe, tha sin furasta cuideachd. Dìreach sònraich aon dath agus cuiridh sinn thairis air stripe geal tar-shoilleir.

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

Suas an ante agus cleachd trì dathan nan àite. Suidhich a 'chiad dath, an dàrna dath, stad dath an dàrna dath (luach ceudad mar 25%), agus an treas dath leis na measgachaidhean sin:

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

Cinn suas! Ma dh’ fheumas tu caisead a thoirt air falbh a-riamh, dèan cinnteach gun cuir thu às do IE sònraichte sam bith a filterchuir thu ris. Faodaidh tu sin a dhèanamh le bhith a 'cleachdadh a' .reset-filter()mheasgachaidh ri taobh background-image: none;.

Measgachadh goireasachd

Is e measgachadh de ghoireasan a th’ ann an goireasan measgachadh a bhios a’ cothlamadh thogalaichean CSS nach eil ceangailte ri chèile gus amas no gnìomh sònraichte a choileanadh.

Soilleireachadh

Na dìochuimhnich cur class="clearfix"ri eileamaid sam bith agus an àite sin cuir ris a’ .clearfix()mheasgachadh far a bheil sin iomchaidh. A’ cleachdadh am micro clearfix bho Nicolas Gallagher .

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

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

Ionadachadh còmhnard

Cuir meadhan gu sgiobalta air eileamaid sam bith taobh a-staigh a phàrant. Tha feum air widthno max-widthri shuidheachadh.

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

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

Meudachadh luchd-cuideachaidh

Sònraich tomhasan nì nas fhasa.

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

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

Stuthan teacsa ath-mheudachadh

Dèan rèiteachadh gu furasta air na roghainnean ath-mheudachadh airson raon teacsa sam bith, no eileamaid sam bith eile. Duilgheadasan gu giùlan àbhaisteach brabhsair ( both).

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

A 'gearradh teacsa

Gearr teacsa gu furasta le ellipsis le aon mheasgachadh. Feumaidh eileamaid a bhith blockno inline-blockìre.

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

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

Dealbhan retina

Sònraich dà shlighe ìomhaigh agus na tomhasan ìomhaigh @1x, agus bheir Bootstrap ceist meadhanan @2x. Ma tha mòran ìomhaighean agad ri frithealadh, smaoinich air an ìomhaigh retina CSS agad a sgrìobhadh le làimh ann an aon cheist mheadhanan.

.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);
}

Fhad ‘s a tha Bootstrap air a thogail air Nas lugha, tha port Sass oifigeil aige cuideachd . Bidh sinn ga chumail ann an stòr GitHub air leth agus a’ làimhseachadh ùrachaidhean le sgriobt tionndaidh.

Dè tha air a ghabhail a-steach

Leis gu bheil repo air leth aig port Sass agus a’ frithealadh luchd-èisteachd beagan eadar-dhealaichte, tha susbaint a’ phròiseict gu math eadar-dhealaichte bhon phrìomh phròiseact Bootstrap. Bidh seo a’ dèanamh cinnteach gu bheil port Sass cho co-chòrdail ri nas urrainn de shiostaman stèidhichte air Sass.

Slighe	Tuairisgeul
`lib/`	Còd Ruby gem (rèiteachadh Sass, Rails agus Compass integration)
`tasks/`	Sgriobtaichean tionndaidh (a’ tionndadh suas an abhainn Nas lugha gu Sass)
`test/`	Deuchainnean cruinneachadh
`templates/`	Taisbeanadh air pacaidean compass
`vendor/assets/`	Sass, JavaScript, agus faidhlichean cruth-clò
`Rakefile`	Gnìomhan taobh a-staigh, leithid ràcan agus tionndadh

Tadhail air stòr- tasgaidh GitHub port Sass gus na faidhlichean sin fhaicinn ag obair.

Stàladh

Airson fiosrachadh air mar a stàlaicheas agus a chleachdas tu Bootstrap airson Sass, thoir sùil air an GitHub repository readme . Is e seo an stòr as ùire agus tha fiosrachadh ann airson a chleachdadh le Rails, Compass, agus pròiseactan àbhaisteach Sass.

Bootstrap airson Sass

CSS

Ro-shealladh

HTML5 sgrìobhainn

Mobile an toiseach

Clò-sgrìobhaidh agus ceanglaichean

Normalize.css

Gabhadairean

Siostam clèithe

Ro-ràdh

Ceistean meadhanan

Roghainnean clèithe

Eisimpleir: Air a chruachadh gu còmhnard

Eisimpleir: container fluid

Eisimpleir: Fòn-làimhe agus deasg

Eisimpleir: Fòn-làimhe, clàr, deasg

Eisimpleir: Còmhdach colbh

Ath-shuidheachadh colbhan freagairteach

Thoir air falbh cutairean

Colbhan dheth

Colbhan neadachaidh

Òrdugh colbh

Nas lugha de mheasgachadh agus caochladairean

Caochlaidhean

Measgachadh

Eisimpleir de chleachdadh

Clò-sgrìobhaidh

Cinn

h1. Ceann-uidhe Bootstrap

h2. Ceann-uidhe Bootstrap

h3. Ceann-uidhe Bootstrap

h4. Ceann-uidhe Bootstrap

h5. Ceann-uidhe Bootstrap

h6. Ceann-uidhe Bootstrap

h1. Bootstrap ceann teacsa àrd-sgoile

h2. Bootstrap ceann teacsa àrd-sgoile

h3. Bootstrap ceann teacsa àrd-sgoile

h4. Bootstrap ceann teacsa àrd-sgoile

h5. Bootstrap ceann teacsa àrd-sgoile

h6. Bootstrap ceann teacsa àrd-sgoile

Leth-bhreac corp

Leth-bhreac corp luaidhe

Air a thogail le nas lugha

Eileamaidean teacsa in-loidhne

Teacs comharraichte

Teacs air a sguabadh às

Teacsa stailc troimhe

Teacs air a chuir a-steach

Teacsa le loidhne

Teacs beag

Trom

clò eadailteach

Eileamaidean eile

Clasaichean co-thaobhadh

Clasaichean cruth-atharrachaidh

Giorrachaidhean

Geàrr-chunntas bunaiteach

tùsachd

Seòlaidhean

Blockquotes

Blockquote bunaiteach

Roghainnean Blockquote

Ag ainmeachadh stòr

Taisbeanaidhean eile

Liostaichean

Gun òrdugh

Dh'òrdaich

Gun stoidhle

In-loidhne

Tuairisgeul

Tuairisgeul còmhnard

Gearradh fèin-ghluasadach

Còd

In-loidhne

Teachd-a-steach cleachdaiche

Bloc bunaiteach

Caochlaidhean

Toradh sampall

Clàir

Eisimpleir bunaiteach

Sreathan stiallach

`:focus`Stàite demo

Caveat mu ghnìomhachd ceangail de`<a>`

`.sr-only`Ìomhaighean roghainneil le bileagan falaichte