CSS
Suidhichidhean CSS cruinne, eileamaidean HTML bunaiteach air an stialladh agus air an neartachadh le clasaichean leudachail, agus siostam clèithe adhartach.
Ro-shealladh
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>Siostam clèithe
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’ dol gu 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-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.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 do cheann as iomallaiche .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 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.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
.col-xs-6 .col-sm-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’ dol gu 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.
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.
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 > 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.
seallaidh no thoir sùil air air an fhòn agad airson eisimpleir.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.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>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-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>Clò-sgrìobhaidh
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 ann an<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 neadachadh<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 teicnigeach, 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 don sinnsear as fhaisge no don bhuidheann obrach gu lèir. Glèidh 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]
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.
<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.
<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
- Eget 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
- Eget 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
- Eget 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.
Còd
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><section></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 + ,
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><p>Sample text here...</p></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>Clàir
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.
| # | A’ chiad ainm | An t-ainm mu dheireadh | Ainm-cleachdaidh |
|---|---|---|---|
| 1 | Marc | Otto | @meadh |
| 2 | Iacob | Thornton | @saill |
| 3 | Larry | an Eòin |
<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 |
<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 |
<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 |
<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 | ||
<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>Foirmean
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-seic 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—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—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 taice (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.
:focusStà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 class="sr-only" 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.
(soirbheachas)
@
(soirbheachas)
<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>Putanan
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 cuir 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.
<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.
<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
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">Clasaichean neach-cuideachaidh
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
Aig amannan chan urrainnear clasaichean cuideam a chuir an sàs air sgàth cho sònraichte sa tha taghadh 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">×</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 a’ .text-hidechlas no am measgachadh gus cuideachadh le bhith a’ cur ìomhaigh cùil an àite susbaint teacsa eileamaid.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Goireasan freagairteach
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 | CSSdisplay |
|---|---|
.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
✔ Ri fhaicinn air x-beag agus beag
✔ Ri fhaicinn air meadhanach mòr agus mòr
✔ Ri fhaicinn air x-beag agus meadhanach
✔ Ri fhaicinn air beag is mòr
✔ Ri fhaicinn air x-beag agus mòr
✔ 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.
A 'cleachdadh nas lugha
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-ainmich 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 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 an ro-leasachan a 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.
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.
.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.
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.
.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);
}A 'cleachdadh Sass
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 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.