CSS
Ntọala CSS zuru ụwa ọnụ, ihe HTML ndị bụ isi emebere ma kwalite ya na klaasị enwere ike, yana sistemụ grid dị elu.
Nchịkọta
Nweta obere ala na akụkụ isi nke akụrụngwa Bootstrap, gụnyere ụzọ anyị si eme ka ọ dị mma, ngwa ngwa na mmepe weebụ siri ike.
HTML5 doctype
Bootstrap na-eji ụfọdụ ihe HTML yana akụrụngwa CSS chọrọ iji HTML5 doctype. Tinye ya na mmalite nke ọrụ gị niile.
<!DOCTYPE html>
<html lang="en">
...
</html>Mobile mbụ
Site na Bootstrap 2, anyị gbakwunyere ụdị enyi na enyi mkpanaka nhọrọ maka akụkụ ndị bụ isi nke usoro. Site na Bootstrap 3, anyị edegharịrị ọrụ ahụ ka ọ bụrụ enyi na enyi site na mmalite. Kama ịgbakwunye na ụdị ekwentị mkpanaaka, a na-esi ya n'ime isi. N'ezie, Bootstrap bụ mkpanaka mbụ . Enwere ike ịhụ ụdị mbụ ekwentị mkpanaaka n'ọbá akwụkwọ niile kama ịbụ na faịlụ dị iche iche.
Iji hụ na nsụgharị kwesịrị ekwesị na imetụ mbugharị, tinye mkpado meta nlele na faịlụ <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Ị nwere ike gbanyụọ ike mbugharị na ngwaọrụ mkpanaka site na ịgbakwunye user-scalable=nona mkpado meta nlele. Nke a na-egbochi mbugharị, nke pụtara na ndị ọrụ nwere ike ịpịgharịa, wee mee ka saịtị gị nwee mmetụta dị ka ngwa ala. N'ozuzu, anyị anaghị akwado nke a na saịtị ọ bụla, yabụ jiri nlezianya!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Ederede na njikọ
Bootstrap na-esetịpụ ihe ngosi zuru ụwa ọnụ, akwụkwọ edemede na ụdị njikọ. Kpọmkwem, anyị:
- Tọọ
background-color: #fff;nabody - Jiri
@font-family-base,@font-size-base, na@line-height-basenjirimara dị ka ntọala ederede anyị - Tọọ ụcha njikọ zuru ụwa ọnụ site
@link-colorna ma tinye akara njikọ naanị na:hover
Enwere ike ịchọta ụdị ndị a n'ime scaffolding.less.
Hazie.css
Maka nsụgharị ihe nchọgharị ka mma, anyị na-eji Normalize.css , ọrụ Nicolas Gallagher na Jonathan Neal .
Akpa
Bootstrap chọrọ mmewere nwere iji kechie ọdịnaya saịtị wee debe sistemu grid anyị. Ị nwere ike ịhọrọ otu n'ime akpa abụọ ị ga-eji na ọrụ gị. Rịba ama na, n'ihi paddingna ihe ndị ọzọ, ọ dịghị akpa adịghị akwụ ụgwọ.
Jiri .containermaka akpa obosara edoziri na-anabata.
<div class="container">
...
</div>Jiri .container-fluidmaka akpa obosara zuru oke, na-agbasa obosara nke ebe nlele gị.
<div class="container-fluid">
...
</div>Sistemụ grid
Bootstrap na-agụnye sistemu grid mmiri mbụ nke mkpanaaka nke na-erute kọlụm 12 nke ọma ka ngwaọrụ ma ọ bụ nlegharị anya na-abawanye. Ọ na-agụnye klaasị akọwapụtagoro maka nhọrọ nhazi dị mfe, yana mixins siri ike maka ịmepụta nhazi nhazi ọzọ .
Okwu mmalite
A na-eji sistemụ grid maka ịmepụta nhazi ibe site na usoro ahịrị na ogidi ndị na-edobe ọdịnaya gị. Nke a bụ ka sistemụ grid Bootstrap si arụ ọrụ:
- Ekwesịrị idowe ahịrị n'ime
.container(obere-obosara) ma ọ bụ.container-fluid(obosara zuru oke) maka itinye n'ọnọdụ kwesịrị ekwesị na padding. - Jiri ahịrị iji mepụta otu kọlụm kwụ ọtọ.
- Ekwesịrị idowe ọdịnaya n'ime kọlụm, naanị kọlụm nwere ike ịbụ ụmụaka nke ahịrị ozugbo.
- Klas grid akọwapụtagoro dị ka
.rowma.col-xs-4dị maka ịme nhazi grid ngwa ngwa. Enwere ike iji mixins pere mpe maka nhazi usoro ọmụmụ karịa. - Ogidi na-emepụta ọwa mmiri (ohere dị n'etiti ọdịnaya kọlụm) site na
padding. Akwụsịla padding ahụ n'ahịrị maka kọlụm nke mbụ na nke ikpeazụ site na oke adịghị mma na.rows. - Oke na-adịghị mma bụ ya mere ihe atụ ndị dị n'okpuru ji pụta ìhè. Ọ bụ ya mere na ọdịnaya dị n'ime kọlụm grid ka ejiri ọdịnaya na-abụghị grid jupụta.
- A na-emepụta kọlụm grid site na ịkọwa ọnụọgụgụ kọlụm iri na abụọ dị nke ịchọrọ ịgbasa. Dịka ọmụmaatụ, ogidi atọ hà nhata ga-eji atọ
.col-xs-4. - Ọ bụrụ na etinyere ihe karịrị ogidi iri na abụọ n'ime otu ahịrị, otu ọ bụla nke kọlụm agbakwunyere ga-, dị ka otu nkeji, kechie na ahịrị ọhụrụ.
- Klaasị grid na-emetụta ngwaọrụ ndị nwere obosara ihuenyo kariri ma ọ bụ haha na nha nkwụsịtụ, na-ewepụkwa klas grid ezubere iche na obere ngwaọrụ. Ya mere, dịka ọmụmaatụ itinye
.col-md-*klaasị ọ bụla na mmewere agaghị emetụta naanị nhazi ya na ngwaọrụ ndị na-ajụ, kamakwa na nnukwu ngwaọrụ ma ọ bụrụ na.col-lg-*klaasị adịghị.
Lelee ihe atụ maka itinye ụkpụrụ ndị a na koodu gị.
Ajụjụ mgbasa ozi
Anyị na-eji ajụjụ mgbasa ozi ndị a na faịlụ ndị dị obere iji mepụta isi ihe nkwụsịtụ na sistemụ grid anyị.
/* 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) { ... }Anyị na-agbasawanye na ajụjụ mgbasa ozi ndị a mgbe ụfọdụ max-widthka ịtinye machi CSS na ngwaọrụ dị warara dị warara.
@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) { ... }Nhọrọ grid
Hụ ka akụkụ nke sistemụ grid Bootstrap si arụ ọrụ n'ofe ngwaọrụ nwere tebụl aka.
| Ekwentị obere ngwaọrụ ndị ọzọ (<768px) | Mbadamba ụrọ obere ngwaọrụ (≥768px) | Desktọpụ ngwaọrụ etiti (≥992px) | Desktọpụ ngwaọrụ buru ibu (≥1200px) | |
|---|---|---|---|---|
| Omume grid | Asọmpi mgbe niile | Dabiri ka ịmalite, kehoraizin n'elu ebe nkwụsịtụ | ||
| obosara akpa | Ọ nweghị (akpaaka) | 750px | 970px | 1170px |
| Nganiihu klaasị | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # nke ogidi | 12 | |||
| Obosara kọlụm | Akpaaka | ~ 62px | ~ 81px | ~ 97px |
| Obosara gutter | 30px (15px n'akụkụ ọ bụla nke kọlụm) | |||
| Akwụsịghị ya | Ee | |||
| Akwụsịtụ | Ee | |||
| Ntụnye kọlụm | Ee | |||
Ọmụmaatụ: Akwadoro-ruo-horizontal
N'iji otu .col-md-*klaasị grid, ị nwere ike ịmepụta usoro grid bụ isi nke na-amalite na ngwaọrụ mkpanaka na ngwaọrụ mbadamba (nke dị ntakịrị na obere nso) tupu ị ghọọ kehoraizin na desktọọpụ (ọkara) ngwaọrụ. Debe ogidi grid na nke ọ bụla .row.
.kọl-md-1
.kọl-md-1
.kọl-md-1
.kọl-md-1
.kọl-md-1
.kọl-md-1
.kọl-md-1
.kọl-md-1
.kọl-md-1
.kọl-md-1
.kọl-md-1
.kọl-md-1
.kọl-md-8
.kọl-md-4
.kọl-md-4
.kọl-md-4
.kọl-md-4
.kọl-md-6
.kọl-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>Ọmụmaatụ: Akpa mmiri
Tụgharịa okirikiri nhọrọ ukwuu obosara ọ bụla ka ọ bụrụ nhazi obosara zuru oke site n'ịgbanwe elu gị .containerka ọ bụrụ .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Ọmụmaatụ: Mobile na desktọpụ
Ịchọghị ka kọlụm gị kwụkọba n'ime obere ngwaọrụ? Jiri klaasị grid ngwaọrụ ndị ọzọ dị obere na nke ọkara site na ịgbakwunye .col-xs-* .col-md-*na kọlụm gị. Lee ihe atụ n'okpuru ka ị nweta echiche ka mma ka ọ na-arụ ọrụ.
.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
.kọl-xs-6
.kọl-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>Ọmụmaatụ: Mobile, mbadamba, desktọpụ
Wulite na ihe atụ gara aga site n'ịmepụta okirikiri nhọrọ ukwuu dị ike yana .col-sm-*klaasị mbadamba.
.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>Ọmụmaatụ: Mkpuchi kọlụm
Ọ bụrụ na etinyere ihe karịrị ogidi iri na abụọ n'ime otu ahịrị, otu ọ bụla nke kọlụm agbakwunyere ga-, dị ka otu nkeji, kechie na ahịrị ọhụrụ.
.kọl-xs-9
.col-xs-4
Ebe ọ bụ na 9 + 4 = 13> 12, nke a 4-ogidi-wide div na-ekechie n'elu ọhụrụ ahịrị dị ka otu contiguous unit.
Ebe ọ bụ na 9 + 4 = 13> 12, nke a 4-ogidi-wide div na-ekechie n'elu ọhụrụ ahịrị dị ka otu contiguous unit.
.col-xs-6
Ogidi ndị na-esote na-aga n'ihu n'ahịrị ọhụrụ ahụ.
Ogidi ndị na-esote na-aga n'ihu n'ahịrị ọhụrụ ahụ.
<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>Tụgharịa kọlụm na-anabata
N'iji usoro grids anọ dị, ị ga-abanyerịrị na nsogbu ebe, n'oge nkwụsịtụ ụfọdụ, kọlụm gị anaghị ekpochapụ nke ọma n'ihi na otu dị ogologo karịa nke ọzọ. Iji dozie nke ahụ, jiri nchikota nke a na klaasị mmekọ.clearfix anyị na -anabata .
.col-xs-6 .col-sm-3
Mezigharịa nlele gị ma ọ bụ lelee ya na ekwentị gị maka ọmụmaatụ.
Mezigharịa nlele gị ma ọ bụ lelee ya na ekwentị gị maka ọmụmaatụ.
.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>Na mgbakwunye na ikpochapụ kọlụm n'ebe nkwụsịtụ na-anabata, ị nwere ike ịtọgharịa nkwụsị, ịkwanye, ma ọ bụ ịdọrọ . Hụ nke a ka ọ na-eme na ihe atụ grid .
<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>Kọlụm na-emezigharị
Bugharịa ogidi gaa n'aka nri site na iji .col-md-offset-*klaasị. Klas ndị a na-abawanye oke aka ekpe nke kọlụm site na *kọlụm. Dịka ọmụmaatụ, .col-md-offset-4na-ebugharị .col-md-4n'elu ogidi anọ.
.kọl-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>Ịnwekwara ike iji .col-*-offset-0klaasị machie nkwụghachi site na ọkwa grid dị ala.
<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>Ogidi akwụ
Iji grid ndabara tinye akwu ọdịnaya gị, tinye nke ọhụrụ .rowna nhazi .col-sm-*kọlụm n'ime .col-sm-*kọlụm dị adị. Ahịrị akwụkwụ kwesịrị ịgụnye otu kọlụm gbakwụnye ihe ruru 12 ma ọ bụ ole na ole (ọ chọghị ka ị jiri kọlụm 12 niile dị).
Ọkwa 1: .col-sm-9
Ọkwa 2: .col-xs-8 .col-sm-6
Ọkwa 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>Ntụnye kọlụm
.col-md-push-*Jiri klaasị gbanwee ngwa ngwa usoro kọlụm grid anyị arụnyere n'ime ya .col-md-pull-*.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-adọta-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>Obere mixins na mgbanwe
Na mgbakwunye na klaasị grid arụgoro arụgoro maka nhazi ngwa ngwa, Bootstrap gụnyere obere mgbanwe na mixins maka ịmepụta ngwa ngwa nke gị dị mfe, nhazi nhazi.
Mgbanwe
Mgbanwe na-ekpebi ọnụọgụ nke kọlụm, obosara gotter na ebe ajụjụ mgbasa ozi ga-amalite ogidi ndị na-ese n'elu mmiri. Anyị na-eji ndị a iji wepụta klaasị grid akọwapụtara n'elu, yana maka mixins omenala edepụtara n'okpuru.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Ngwakọta
A na-eji mixins na njikọta yana mgbanwe grid iji mepụta CSS ntụgharị uche maka kọlụm grid nke ọ bụla.
// 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));
}
}Ojiji ọmụmaatụ
Ị nwere ike gbanwee mgbanwe ndị ahụ ka ọ bụrụ ụkpụrụ omenala nke gị, ma ọ bụ jiri mixins na ụkpụrụ ndabara ha. Nke a bụ ọmụmaatụ nke iji ntọala ndabara iji mepụta nhazi kọlụm abụọ nwere oghere n'etiti.
.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>Ederede
Isi okwu
Isi HTML niile, <h1>site na <h6>, dị. .h1A na-enwetakwa site na .h6klaasị, n'ihi na mgbe ịchọrọ ka ọ dabara na ụdị edemede nke isiokwu mana ka chọrọ ka egosipụta ederede gị n'ahịrị.
h1. Isiokwu bootstrap |
Semibold 36px |
h2. Isiokwu bootstrap |
Semibold 30px |
h3. Isiokwu bootstrap |
Semibold 24px |
h4. Isiokwu bootstrap |
Semibold 18px |
h5. Isiokwu bootstrap |
Semibold 14px |
h6. Isiokwu 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>Mepụta ihe nfe, ederede nke abụọ n'isi ọ bụla nwere <small>mkpado jeneriki ma ọ bụ .smallklaasị.
h1. Isiokwu Bootstrap ederede nke abụọ |
h2. Isiokwu Bootstrap ederede nke abụọ |
h3. Isiokwu Bootstrap ederede nke abụọ |
h4. Isiokwu Bootstrap ederede nke abụọ |
h5. Isiokwu Bootstrap ederede nke abụọ |
h6. Isiokwu Bootstrap ederede nke abụọ |
<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>Mpempe ahụ
Ndabara zuru ụwa ọnụ nke Bootstrap font-sizebụ 14px , yana line-heightnke 1.428 . A na-etinye nke a <body>na paragraf niile. Na mgbakwunye, <p>(paragraf) na-enweta oke ala nke ọkara ogologo ahịrị ha gbakọrọ (10px na ndabara).
Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị. Nullam id dolor id nibh ultricies vehicula.
N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị. Donec ullamcorper nulla na-abụghị metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla na-abụghị metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Achọpụtaghị m porta gravida na eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Nkomi nke ndu
Mee ka paragraf pụta ìhè site n'ịgbakwunye .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor omee. Duis mollis, ọ bụghị commodo luctus.
<p class="lead">...</p>Eji Obere wuo ya
Ọnụ ọgụgụ ederede dabere na mgbanwe abụọ dị obere na mgbanwe . obere : @font-size-basena @line-height-base. Nke mbụ bụ nha font-isi ejiri mee ihe niile na nke abụọ bụ ogologo ahịrị ntọala. Anyị na-eji mgbanwe ndị ahụ na ụfọdụ mgbakọ na mwepụ dị mfe iji mepụta oke, paddings, na ogologo ahịrị ụdị anyị niile na ndị ọzọ. Hazie ha na Bootstrap na-emegharị.
Ihe ederede inline
Ederede akara
Maka ịkọwapụta ọsọ nke ederede n'ihi mkpa ya na mpaghara ọzọ, jiri <mark>mkpado.
Ị nwere ike iji mkpado akara napụta ìhèederede.
You can use the mark tag to <mark>highlight</mark> text.Ederede ehichapụ
Maka igosi ngọngọ nke ederede ehichapụrụ jiri <del>mkpado.
Ezubere ahịrị ederede a ka ewere ya dị ka ederede ehichapụ.
<del>This line of text is meant to be treated as deleted text.</del>Ederede pụtara
Maka igosi ngọngọ nke ederede na-adịkwaghị mkpa jiri <s>mkpado.
Ezubere ahịrị ederede a ka a na-emeso ya ka ọ bụghịzi eziokwu.
<s>This line of text is meant to be treated as no longer accurate.</s>Etinyere ederede
Maka igosi mgbakwunye na akwụkwọ ahụ jiri <ins>mkpado.
Ezubere ahịrị ederede a ka ewere ya dị ka mgbakwunye na akwụkwọ ahụ.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Ederede akara
Iji gosi akara ederede jiri <u>mkpado.
Ahịrị ederede a ga-atụgharị dị ka etinyere n'okpuru
<u>This line of text will render as underlined</u>Jiri mkpado mkpado ndabara HTML jiri ụdị dị fechaa mee ihe.
Obere ederede
Maka imesi ike inline ma ọ bụ ngọngọ ederede, jiri <small>mkpado ka ịtọ ederede na 85% nha nne na nna. Isi ihe na-enweta nke ha font-sizemaka <small>ihe akwụrụ akwụrụ.
Ị nwere ike iji ihe ntanetị .smalln'ọnọdụ nke ọ bụla <small>.
Ezubere ahịrị ederede a ka ewere ya dị ka ezigbo mbipụta.
<small>This line of text is meant to be treated as fine print.</small>Obi ike
Maka imesi snippet nke ederede ike na iji mkpụrụedemede dị arọ karịa.
Asụgharịrị snippet nke a dị ka ederede siri ike .
<strong>rendered as bold text</strong>Italics
Maka iji ọkpịsị aka na-emesi snippet nke ederede ike.
Asụgharịrị snipet ederede na-esote dị ka ederede italicized .
<em>rendered as italicized text</em>Ihe ndị ọzọ
Enwere onwe gị iji <b>na <i>HTML5. <b>bu n'obi ime ka okwu ma ọ bụ nkebiokwu pụta ìhè na-ebupụtaghị mkpa ọzọ ebe ọ <i>na-abụkarị maka olu, okwu teknụzụ, wdg.
Klas mmezi
Hazie ederede n'ụzọ dị mfe na klaasị nhazi ederede.
Ederede akwadoro akaekpe.
Ederede dabara n'etiti.
Ederede akwadoro akanri.
Ederede ziri ezi.
Enweghị ederede kechie.
<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>Klas mgbanwe
Tụgharịa ederede n'ime akụrụngwa nwere klaasị nnukwu ederede.
Ederede obere.
Ederede elu.
Ederede n'isi.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Ndebiri
Mmejuputa HTML nke ahaziri <abbr>ahazi maka ndebiri na mkpọ okwu iji gosi ụdị gbasaara na hover. Mbiri nke nwere titlenjiri mara nwere obere ntụpọ nwere ntụpọ ala yana ihe enyemaka na hover, na-enye nkọwa ọzọ na hover yana ndị ọrụ teknụzụ enyemaka.
Mbibiri isi
Mbiri nke okwu àgwà bụ attr .
<abbr title="attribute">attr</abbr>mmalite
Tinye .initialismna ndebiri maka obere mkpụrụedemede pere mpe.
HTML bụ ihe kacha mma ebe ọ bụ na achịcha sliced.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Adreesị
Nye ozi kọntaktị maka nna nna kacha nso ma ọ bụ ọrụ niile. Chekwaa nhazi site na iji ahịrị niile mechie <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Aha zuru oke
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Aha zuru oke
[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>Ihe mgbochi
Maka ịhota ngọngọ nke ọdịnaya sitere na isi mmalite ọzọ n'ime akwụkwọ gị.
Nkwukọrịta ngọngọ
Kechie <blockquote>gburugburu HTML ọ bụla dị ka ntinye akwụkwọ. Maka nkwuputa okwu kwụ ọtọ, anyị na-akwado a <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Nhọrọ Blockquote
Ụdị na ọdịnaya na-agbanwe maka ndịiche dị mfe na ọkọlọtọ <blockquote>.
Ịkpọ aha isi iyi
Tinye ihe <footer>maka ịchọpụta isi mmalite. Kechie aha ọrụ isi mmalite na <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer na-emepe emepe.
<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>Ngosipụta ọzọ
Tinye .blockquote-reversemaka blockquote nwere ọdịnaya dabara adaba.
<blockquote class="blockquote-reverse">
...
</blockquote>Ndepụta
Edeghị iwu
Ndepụta ihe nke usoro ahụ adịghị mkpa n'ụzọ doro anya.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem na massa
- Facilisis na pretium nisl aliquet
- Ngwa ngwa ngwa ngwa ngwa
- Phasellus iaculis bụ ihe dị mkpa
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat na
- Faucibus Porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Enyere iwu
Ndepụta nke ihe n'usoro na- emetụta nke ọma.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem na massa
- Facilisis na pretium nisl aliquet
- Ngwa ngwa ngwa ngwa ngwa
- Faucibus Porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Ekebeghị ụdị
Wepu ndabara list-stylena oke aka ekpe na ihe ndetu (naanị ụmụaka ozugbo). This only applys to instant children list things , meaning you will need to add the class for any ested lists as well.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem na massa
- Facilisis na pretium nisl aliquet
- Ngwa ngwa ngwa ngwa ngwa
- Phasellus iaculis bụ ihe dị mkpa
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat na
- Faucibus Porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>N'ahịrị
Debe ihe ndepụta niile n'otu ahịrị yana display: inline-block;obere ihe mkpuchi ọkụ.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Nkọwa
Ndepụta okwu na nkọwa ha metụtara.
- Ndepụta nkọwa
- Ndepụta nkọwa zuru oke maka ịkọwa okwu.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Achọpụtaghị m porta gravida na eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Nkọwa kwụ ọtọ
Mee usoro na nkọwa <dl>n'ahịrị n'akụkụ n'akụkụ. Na-amalite ekpokọtara dị ka ndabara <dl>s, mana mgbe navbar gbasaa, mee ihe ndị a.
- Ndepụta nkọwa
- Ndepụta nkọwa zuru oke maka ịkọwa okwu.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Achọpụtaghị m porta gravida na eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>Na-akpachapụ onwe ya
Ndepụta nkọwa kwụ ọtọ ga-ewelata usoro ndị toro ogologo na ọ dabara na kọlụm aka ekpe yana text-overflow. N'ọdụ ụgbọ mmiri dị warara, ha ga-agbanwe gaa na nhazi nke etinyere nke ọma.
Koodu
N'ahịrị
Jiri snippet kechie koodu inline <code>.
Dịka ọmụmaatụ,
<section>ekwesịrị ịfụkọta ya dị ka inline.
For example, <code><section></code> should be wrapped as inline.Ntinye onye ọrụ
Jiri <kbd>gosi ntinye a na-ejikarị ahụigodo abanye.
Ka ịgbanwee akwụkwọ ndekọ aha, pịnye
cdaha ndekọ na-esochi ya.
Ka idezi ntọala, pịa ctrl + ,
Ka idezi ntọala, pịa 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>Ihe mgbochi
Jiri <pre>maka ọtụtụ ahịrị koodu. Jide n'aka na ị ga-agbanarị brackets akụkụ ọ bụla dị na koodu maka nsụgharị kwesịrị ekwesị.
<p>Ihe atụ ederede ebe a...</p>
<pre><p>Sample text here...</p></pre>Ị nwere ike itinye .pre-scrollableklaasị na nhọrọ, nke ga-edobe max-elu 350px wee nye akwụkwọ mpịakọta y-axis.
Mgbanwe
Maka igosi mgbanwe jiri <var>mkpado.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Mmepụta sample
N'ihi na-egosi blocks mmepụta sample si mmemme jiri <samp>mkpado.
Ezubere ka ewere ederede a dị ka ihe nlele sitere na mmemme kọmputa.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Tebụl
Ihe atụ bụ isi
Maka nhazi nke nkiti — padding ọkụ na naanị ndị na-ekesa kehoraizin — tinye klaasị isi na nke .tableọ bụla <table>. Ọ nwere ike iyi ihe na-adịghị arụ ọrụ nke ukwuu, mana n'ihi iji tebụl eme ihe maka plugins ndị ọzọ dị ka kalenda na ndị na-ahọrọ ụbọchị, anyị ahọrọla ikewapụ ụdị tebụl omenala anyị.
| # | Aha mbụ | Aha ikpeazụ | Aha njirimara |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jekọb | Thornton | @abụba |
| 3 | Larry | Nnụnụ ahụ |
<table class="table">
...
</table>Ahịrị ndị dọwara adọwa
Jiri .table-stripedtinye eriri zebra na ahịrị tebụl ọ bụla n'ime <tbody>.
Ndakọrịta ihe nchọgharị gafere
A na-ahazi tebụl ndị a kewara ekewa site na onye :nth-childnhọpụta CSS, nke adịghị na Internet Explorer 8.
| # | Aha mbụ | Aha ikpeazụ | Aha njirimara |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jekọb | Thornton | @abụba |
| 3 | Larry | Nnụnụ ahụ |
<table class="table table-striped">
...
</table>Tebụl gbara oke ókè
Tinye .table-borderedmaka oke n'akụkụ niile nke tebụl na sel.
| # | Aha mbụ | Aha ikpeazụ | Aha njirimara |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jekọb | Thornton | @abụba |
| 3 | Larry | Nnụnụ ahụ |
<table class="table table-bordered">
...
</table>Hụgharịa ahịrị
Tinye .table-hoveriji mee ka ọnọdụ hover na ahịrị tebụl n'ime a <tbody>.
| # | Aha mbụ | Aha ikpeazụ | Aha njirimara |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jekọb | Thornton | @abụba |
| 3 | Larry | Nnụnụ ahụ |
<table class="table table-hover">
...
</table>Okpokoro condensed
Tinye .table-condensedka tebụl dịkwuo kọmpat site n'ịbelata ihe mgbochi cell na ọkara.
| # | Aha mbụ | Aha ikpeazụ | Aha njirimara |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jekọb | Thornton | @abụba |
| 3 | Larry The Bird | ||
<table class="table table-condensed">
...
</table>Klaasị ihe atụ
Jiri klaasị okirikiri mee ka ahịrị tebụl agba agba ma ọ bụ sel nke ọ bụla.
| Klas | Nkọwa |
|---|---|
.active |
Na-etinye ụcha hover n'otu ahịrị ma ọ bụ cell |
.success |
Na-egosi omume ọma ma ọ bụ nke ọma |
.info |
Na-egosi mgbanwe ma ọ bụ omume na-anọpụ iche |
.warning |
Na-egosi ịdọ aka ná ntị nwere ike ịchọ nlebara anya |
.danger |
Na-egosi omume dị ize ndụ ma ọ bụ nwere ike adịghị mma |
| # | Isi kọlụm | Isi kọlụm | Isi kọlụm |
|---|---|---|---|
| 1 | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm |
| 2 | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm |
| 3 | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm |
| 4 | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm |
| 5 | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm |
| 6 | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm |
| 7 | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm |
| 8 | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm |
| 9 | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm | Ọdịnaya nke kọlụm |
<!-- 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>Na-eme ka ọ pụta ìhè na teknụzụ enyemaka
Iji agba gbakwunye ihe ọ pụtara na ahịrị tebụl ma ọ bụ sel nke ọ bụla na-enye naanị ihe ngosi, nke agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (ederede a na-ahụ anya na ahịrị/cell tebụl dị mkpa), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro na .sr-onlyklaasị.
Tebụl na-anabata
Mepụta tebụl na-anabata ya site na ịkechi nke ọ bụla .tableiji .table-responsivemee ka ha pịgharịa n'okirikiri na obere ngwaọrụ (n'okpuru 768px). Mgbe ị na-elele ihe ọ bụla buru ibu karịa 768px n'obosara, ị gaghị ahụ ihe ọ bụla na tebụl ndị a.
Mkpọchi/ mkpọtu kwụ ọtọ
Tebụl na-anabata ihe na-eji overflow-y: hidden, nke na-ewepụ ọdịnaya ọ bụla na-agafe n'akụkụ ala ma ọ bụ elu nke tebụl. Karịsịa, nke a nwere ike ihichapụ menus dropdown na wijetị ndị ọzọ.
Firefox na ngalaba ntọala
Firefox nwere ụfọdụ styling ubi na-adịghị mma nke metụtara widthnke na-egbochi tebụl na-anabata. Enweghị ike ịkagbu nke a na-enweghị mbanye anataghị ikike Firefox akọwapụtara nke anyị na- enyeghị na Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Maka ozi ndị ọzọ, gụọ azịza Stack Overflow a .
| # | Isiokwu okpokoro | Isiokwu okpokoro | Isiokwu okpokoro | Isiokwu okpokoro | Isiokwu okpokoro | Isiokwu okpokoro |
|---|---|---|---|---|---|---|
| 1 | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell |
| 2 | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell |
| 3 | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell |
| # | Isiokwu okpokoro | Isiokwu okpokoro | Isiokwu okpokoro | Isiokwu okpokoro | Isiokwu okpokoro | Isiokwu okpokoro |
|---|---|---|---|---|---|---|
| 1 | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell |
| 2 | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell |
| 3 | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell | Tebụl cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Ụdị
Ihe atụ bụ isi
Njikwa ụdị n'otu n'otu na-enweta ụdị ejiji zuru ụwa ọnụ na-akpaghị aka. Ederede <input>, <textarea>, na <select>ihe niile nwere .form-controlka edobere na width: 100%;ndabara. Kechie akara na njikwa .form-groupmaka oghere kacha mma.
<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>Ejikọtala otu ụdị na otu ntinye
Ejikọtala otu ụdị ozugbo na otu ntinye . Kama, kpakọba otu ndenye n'ime otu ụdị.
Ụdị n'ịntanetị
Tinye .form-inlinen'ụdị gị (nke na-ekwesịghị ịbụ a <form>) maka njikwa n'aka ekpe yana inline-block. Nke a na-emetụta naanị ụdị n'ime ọdụ ụgbọ elu dịkarịa ala 768px obosara.
Nwere ike ịchọ obosara omenala
Ntinye na nhọrọ width: 100%;etinyere na ndabara na Bootstrap. N'ime ụdị inline, anyị na-emegharị nke ahụ width: auto;ka ọtụtụ njikwa nwere ike ibi n'otu ahịrị. Dabere na nhazi gị, enwere ike ịchọkwu obosara omenala.
Tinye akara mgbe niile
Ndị na-agụ ihuenyo ga-enwe nsogbu na ụdị gị ma ọ bụrụ na itinyeghị akara maka ntinye ọ bụla. Maka ụdị inline ndị a, ị nwere ike zoo akara n'iji .sr-onlyklas ahụ. Enwere ụzọ ọzọ nke ịnye akara maka teknụzụ enyemaka, dị ka aria-label, aria-labelledbyma ọ bụ titlenjirimara. Ọ bụrụ na ọ nweghị nke ọ bụla n'ime ihe ndị a dị, ndị na-agụ enyo nwere ike ịmalite iji placeholdernjirimara ahụ, ọ bụrụ na ọ dị, mana rịba ama na akwadoghị iji placeholderdị ka nnọchi maka ụzọ akara ndị ọzọ.
<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>Ụdị kwụ ọtọ
Jiri klaasị grid akọwapụtagoro agbagoro agbagoro iji kwado akara na otu njikwa ụdị n'usoro kwụ ọtọ site n'ịgbakwunye .form-horizontalna ụdị ahụ (nke na-ekwesịghị ịbụ <form>). Ime otú ahụ na-agbanwe .form-groups ka ọ na-akpa àgwà ka ahịrị grid, yabụ na ọ dịghị mkpa .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>Njikwa akwadoro
Ihe atụ nke njikwa ụdị ọkọlọtọ akwadoro na nhazi ụdị ihe atụ.
Ntinye
Njikwa ụdị a na-ahụkarị, mpaghara ntinye dabere na ederede. Gụnyere nkwado maka ụdị HTML5 niile: text, password, datetime, datetime-local, date, month, time, , week, number, email, url, search, tel, na color.
Ụdị nkwupụta achọrọ
A ga-ahazi ntinye ntinye typenke ọma ma ọ bụrụ na ekwuputa ya nke ọma.
<input type="text" class="form-control" placeholder="Text input">Otu ntinye
Ka ịgbakwunye ederede ma ọ bụ bọtịnụ agbakwunyere tupu na/ma ọ bụ mgbe ọ bụla dabere na ederede <input>, lelee mpaghara ntinye otu .
Mpaghara ederede
Njikwa ụdị nke na-akwado ọtụtụ ahịrị ederede. Gbanwee rowsàgwà ka ọ dị mkpa.
<textarea class="form-control" rows="3"></textarea>Igbe nlele na redio
Igbe nlele bụ maka ịhọrọ otu ma ọ bụ ọtụtụ nhọrọ na ndepụta, ebe redio bụ maka ịhọrọ otu nhọrọ n'ime ọtụtụ.
A na-akwado igbe nrịbama na redio ndị nwere nkwarụ, mana iji weta cursor "anaghị anabata" n'ife nne na nna <label>, ị ga-achọ itinye .disabledklas ahụ na nne na nna .radio, .radio-inline, .checkbox, ma ọ bụ .checkbox-inline.
Ndi an-kpọ (kpakọtara)
<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>Igbe nrịbama n'ịntanetị na redio
Jiri .checkbox-inlinema ọ bụ .radio-inlineklaasị n'usoro igbe nlele ma ọ bụ redio maka njikwa ndị pụtara n'otu ahịrị.
<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>Igbe nlele na redio na-enweghị ederede akara
Ọ bụrụ na ịnweghị ederede n'ime <label>, etinyere ndenye ka ị tụrụ anya ya. Ugbu a na-arụ ọrụ naanị na igbe nlele na redio na-abụghị inline. Cheta ka ịnye ụfọdụ ụdị akara maka teknụzụ enyemaka (dịka ọmụmaatụ, iji 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>Họrọ
Rịba ama na ọtụtụ nchịkọta nhọrọ nke ala ala-ya bụ na Safari na Chrome-nwere akụkụ gburugburu nke enweghị ike ịmegharị site na border-radiusakụrụngwa.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Maka<select> njikwa nwere multiplenjirimara, a na-egosi ọtụtụ nhọrọ na ndabara.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>njikwa static
Mgbe ịchọrọ idowe ederede doro anya n'akụkụ akara n'ụdị n'ime ụdị, jiri .form-control-staticklas ahụ na <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>Steeti lekwasịrị anya
Anyị na-ewepụ ụdị ndabara outlinena ụfọdụ njikwa ụdị wee tinye a box-shadown'ọnọdụ ya maka :focus.
ngosi:focus steeti
Ntinye ihe atụ dị n'elu na-eji ụdị omenala na akwụkwọ anyị iji gosi :focussteeti na a .form-control.
Ọnọdụ nkwarụ
Tinye njirimara disabledboolean na ntinye iji gbochie mmekọrịta onye ọrụ. Ntinye ngwurọ na-egosi ọkụ ma tinye not-allowedcursor.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Agbanyụrụ okirikiri
Tinye disablednjirimara na a <fieldset>iji gbanyụọ njikwa niile dị n'ime<fieldset> otu oge.
Amụma banyere ọrụ njikọ nke<a>
Site na ndabara, ihe nchọgharị ga-emeso njikwa ụdị ala ala niile ( <input>, <select>na <button>ọcha) n'ime onye <fieldset disabled>nwere nkwarụ, na-egbochi ma keyboard na òké mmekọrịta na ha. Agbanyeghị, ọ bụrụ na ụdị gị gụnyekwara <a ... class="btn btn-*">ihe ndị a, a ga-enye naanị ụdị pointer-events: none. Dị ka ekwuru na ngalaba gbasara ọnọdụ nkwarụ maka bọtịnụ (na kpọmkwem na mpaghara mpaghara maka ihe arịlịka), ihe onwunwe CSS a ahazibeghị nke ọma na akwadobeghị ya na Opera 18 na n'okpuru, ma ọ bụ na Internet Explorer 11, wee merie. 't egbochi ndị ọrụ ahụigodo ka ha nwee ike ilekwasị anya ma ọ bụ mee ka njikọ ndị a rụọ ọrụ. Ya mere, ka ọ dịrị nchebe, jiri Javascript omenala iji gbanyụọ njikọ ndị a.
Ndakọrịta ihe nchọgharị gafere
Ọ bụ ezie na Bootstrap ga-etinye ụdị ndị a na ihe nchọgharị niile, Internet Explorer 11 na nke dị n'okpuru anaghị akwado disablednjirimara na faịlụ <fieldset>. Jiri Javascript omenala iji gbanyụọ ntọala ubi na ihe nchọgharị ndị a.
<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>kwuo naanị ọgụgụ
Tinye njirimara readonlyboolean na ntinye iji gbochie mgbanwe nke uru ntinye. Ntinye naanị ọgụgụ na-apụta ọkụ (dị ka ntinye nwere nkwarụ), mana jigide cursor ọkọlọtọ.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Ederede enyemaka
Ederede enyemaka mgbochi maka njikwa ụdị.
Na-ejikọta ederede enyemaka na njikwa ụdị
Ekwesịrị ijikọ ederede enyemaka nke ọma na njikwa ụdị ọ metụtara iji aria-describedbynjirimara ahụ. Nke a ga-ahụ na teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo - ga-akpọsa ederede enyemaka a mgbe onye ọrụ lekwasịrị anya ma ọ bụ banye na njikwa.
<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>Steeti nkwado
Bootstrap gụnyere ụdị nkwado maka njehie, ịdọ aka ná ntị na ihe ịga nke ọma na njikwa ụdị. Iji jiri, tinye .has-warning, .has-error, ma ọ bụ .has-successna mmewere nne na nna. Ihe ọ bụla .control-label, .form-control, na .help-blockn'ime mmewere ahụ ga-enweta ụdị nkwado.
Na-ebuga steeti nkwado maka teknụzụ enyemaka na ndị ọrụ kpuru isi awọ
Iji ụdị nkwado ndị a iji gosipụta ọnọdụ njikwa ụdị na-enye naanị ihe ngosi, agba agba, nke agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo - ma ọ bụ ndị ọrụ kpuru isi.
Gbaa mbọ hụ na enyekwara ihe ngosi ọzọ ọzọ. Dị ka ọmụmaatụ, ị nwere ike ịgụnye ntule gbasara steeti na ederede njikwa ụdị <label>n'onwe ya (dị ka ọ dị na ụkpụrụ koodu na-esonụ), gụnyere Glyphicon (ya na ederede ọzọ kwesịrị ekwesị site na iji .sr-onlyklas - lee ihe atụ Glyphicon ), ma ọ bụ site n'inye ihe. mgbachi ederede enyemaka ọzọ . Kpọmkwem maka teknụzụ enyemaka, njikwa ụdị na-ezighi ezi nwekwara ike ịnye aria-invalid="true"njirimara.
<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>Na akara ngosi nhọrọ
Ịnwekwara ike ịgbakwunye akara ngosi nzaghachi nhọrọ yana mgbakwunye .has-feedbackna akara ngosi ziri ezi.
Akara ngosi nzaghachi na-arụ ọrụ naanị na ihe ederede <input class="form-control">.
Akara ngosi, akara, na otu ntinye
Achọrọ idobe akara ngosi nzaghachi n'aka maka ntinye na-enweghị akara yana maka otu ntinye nwere mgbakwunye n'aka nri. A na-agba gị ume ka ịnye akara maka ntinye niile maka ohere ịnweta. Ọ bụrụ na ịchọrọ igbochi akara ngosi, zoo ya na .sr-onlyklaasị. Ọ bụrụ na ị ga-emerịrị na-enweghị akara, gbanwee topuru akara ngosi nzaghachi. Maka otu ntinye, gbanwee righturu ka ọ bụrụ uru pikselụ kwesịrị ekwesị dabere na obosara nke addon gị.
Na-ebufe ihe akara ngosi pụtara na teknụzụ enyemaka
Iji hụ na teknụzụ na-enyere aka - dị ka ndị na-agụ ihuenyo - na-ebupụta ihe akara ngosi pụtara nke ọma, ekwesịrị itinye ederede ọzọ zoro ezo na .sr-onlyklaasị ma jikọta ya na njikwa ụdị ọ metụtara iji aria-describedby. N'aka nke ọzọ, hụ na ihe ọ pụtara (dịka ọmụmaatụ, eziokwu ahụ bụ na enwere ịdọ aka ná ntị maka otu mpaghara ntinye ederede) na-ebuga n'ụdị ọzọ, dị ka ịgbanwere ederede nke ihe <label>jikọrọ ya na njikwa ụdị.
Ọ bụ ezie na ihe atụ ndị a ekwupụtalarị ọnọdụ nkwado nke njikwa ụdị ha n'ime <label>ederede n'onwe ya, esonyela usoro a dị n'elu (iji .sr-onlyederede na aria-describedby) maka ebumnuche nkọwa.
<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>Akara ngosi nhọrọ n'ụdị kehoraizin na inline
<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>Akara ngosi nhọrọ nwere akara zoro .sr-onlyezo
Ọ bụrụ na ị na-eji .sr-onlyklas ahụ iji zoo ụdị njikwa ụdị <label>(kama iji nhọrọ nrịbama ndị ọzọ, dị ka aria-labelàgwà), Bootstrap ga-edozi ọnọdụ nke akara ngosi ozugbo agbakwunyere ya.
(ihe ịga nke ọma)
@
(ihe ịga nke ọma)
<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>Njikwa nha nha
Tọọ ogo site na iji klas dịka .input-lg, ma tọọ obosara site na iji klaasị kọlụm grid ka .col-lg-*.
Nhazi ịdị elu
Mepụta njikwa ụdị ogologo ma ọ bụ nke dị mkpụmkpụ dabara nha bọtịnụ.
<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>Nha otu ụdị kwụ ọtọ
Hazie akara ngwa ngwa wee mepụta njikwa n'ime .form-horizontalsite na ịgbakwunye .form-group-lgma ọ bụ .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>Nha kọlụm
Kechie ntinye n'ime kọlụm grid, ma ọ bụ mmewere nne na nna ọ bụla, iji mee ka obosara chọrọ ngwa ngwa.
<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>Bọtịnụ
Mkpado bọtịnụ
Jiri klaasị bọtịnụ na <a>, <button>, ma ọ bụ <input>mmewere.
<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">Ojiji akọwapụtara nke ọma
Ọ bụ ezie na enwere ike iji klaasị bọtịnụ <a>na <button>ihe, naanị <button>ihe ndị a na-akwado n'ime akụrụngwa ụgbọ mmiri na navbar anyị.
Njikọ na-arụ ọrụ dị ka bọtịnụ
Ọ bụrụ na <a>a na-eji ihe ndị ahụ eme ihe dị ka bọtịnụ - na-akpali ọrụ na ibe, kama ịgagharị na akwụkwọ ma ọ bụ ngalaba ọzọ n'ime ibe dị ugbu a - ekwesịrị inye ha ihe kwesịrị ekwesị role="button".
Nsụgharị ihe nchọgharị
Dịka omume kachasị mma, anyị na-akwado nke ukwuu iji <button>mmewere mgbe ọ bụla enwere ike iji hụ na ntụgharị ihe nchọgharị dabara adaba.
Tinyere ihe ndị ọzọ, enwere ahụhụ na Firefox <30 nke na-egbochi anyị ịtọ ntọala line-heightnke <input>-bọtịnụ, na-eme ka ha adabaghị n'ogo nke bọtịnụ ndị ọzọ na Firefox.
Nhọrọ
Jiri klaasị bọtịnụ ọ bụla dị ka imepụta bọtịnụ ahaziri ngwa ngwa.
<!-- 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>Na-eme ka ọ pụta ìhè na teknụzụ enyemaka
Iji agba tinye ihe pụtara na bọtịnụ naanị na-enye ihe ngosi anya, nke agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (ederede a na-ahụ anya nke bọtịnụ), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .sr-onlyklaasị.
Nha
Ị na-achọ bọtịnụ buru ibu ma ọ bụ obere? Tinye .btn-lg, .btn-sm, ma ọ bụ .btn-xsmaka nha ndị ọzọ.
<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>Mepụta bọtịnụ mgbochi mgbochi-ndị na-agbatị obosara nke nne na nna - site na ịgbakwunye .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>Steeti nọ n'ọrụ
Bọtịnụ ga-apụta na a pịara ya (nwere okirikiri gbara ọchịchịrị, oke gbara ọchịchịrị, na ndò inset) mgbe ọ na-arụ ọrụ. Maka <button>ihe, a na-eme nke a site na :active. Maka <a>ọcha, ejiri ya mee ya .active. Agbanyeghị, ịnwere ike iji .activena <button>s (ma tinye aria-pressed="true"njirimara) ọ bụrụ na ịchọrọ ịmegharị steeti nọ n'ọrụ na mmemme.
Ihe bọtịnụ
Ọ dịghị mkpa ịgbakwunye :activedị ka ọ bụ pseudo-class, ma ọ bụrụ na ị chọrọ ịmanye otu ọdịdị, gaa n'ihu tinye .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>Ihe arịlịka
Tinye .activeklas na <a>bọtịnụ.
<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>Ọnọdụ nkwarụ
Mee ka bọtịnụ yie ka enweghị ike ịpị site na iji opacity.
Ihe bọtịnụ
Tinye disablednjirimara na <button>bọtịnụ.
<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>Ndakọrịta ihe nchọgharị gafere
Ọ bụrụ na ị gbakwunye disablednjirimara na a <button>, Internet Explorer 9 na n'okpuru ga-eme ka ederede isi awọ na ndò ederede jọgburu onwe ya nke anyị enweghị ike idozi.
Ihe arịlịka
Tinye .disabledklas na <a>bọtịnụ.
<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>Anyị na-eji .disableddị ka klaasị ịba uru ebe a, dị ka .activeklaasị nkịtị, yabụ enweghị prefix achọrọ.
Akaụntụ arụmọrụ njikọ
Klas a na-eji pointer-events: noneagbalị gbanyụọ ọrụ njikọ nke <a>s, mana ihe onwunwe CSS ahụ ahazibeghị nke ọma na akwadobeghị ya na Opera 18 na n'okpuru, ma ọ bụ na Internet Explorer 11. Na mgbakwunye, ọbụna na ihe nchọgharị na-akwado pointer-events: none, kiiboodu. igodo ụzọ ka emetụtaghị ya, nke pụtara na ndị na-ahụ maka ahụigodo na ndị na-eji teknụzụ enyemaka ka ga-enwe ike ịgbalite njikọ ndị a. Ya mere, ka ọ dịrị nchebe, jiri Javascript omenala iji gbanyụọ njikọ ndị a.
Onyonyo
Onyonyo na-anabata
Enwere ike ime ihe onyonyo dị na Bootstrap 3 ka ọ bụrụ enyi na enyi site na mgbakwunye nke .img-responsiveklaasị. Nke a metụtara max-width: 100%;, height: auto;yana display: block;onyonyo a ka o wee tụọ nke ọma na mmewere nne na nna.
Iji mee ka onyonyo n'etiti etiti .img-responsiveklaasị, jiri .center-blockkama .text-center. Hụ ngalaba klaasị inyeaka maka nkọwa ndị ọzọ gbasara .center-blockojiji.
Foto SVG na IE 8-10
Na Internet Explorer 8-10, onyonyo SVG .img-responsivenwere enweghị oke nha. Iji dozie nke a, tinye width: 100% \9;ebe ọ dị mkpa. Bootstrap anaghị etinye nke a na akpaghị aka n'ihi na ọ na-ebute nsogbu na ụdị onyonyo ndị ọzọ.
<img src="..." class="img-responsive" alt="Responsive image">Ụdị onyonyo
Tinye klaasị na <img>mmewere iji hazie onyonyo n'ụzọ dị mfe na ọrụ ọ bụla.
Ndakọrịta ihe nchọgharị gafere
Buru n'uche na Internet Explorer 8 enweghị nkwado maka akụkụ okirikiri.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Klas inyeaka
Agba agba agba
Wepụta ihe pụtara site na agba na obere klaasị ịba uru. Enwere ike itinye ihe ndị a na njikọ, ọ ga-agbakwa ọchịchịrị na ntugharị dị ka ụdị njikọ anyị na-adịghị.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, bụ nke na-abụghị commodo luctus, bụ nke na-adịghị commodo luctus.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla na-abụghị 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>Na-emekọ ihe kpọmkwem
Mgbe ụfọdụ enweghị ike itinye klaasị nkwusi ike n'ihi nhọpụta onye ọzọ. N'ọtụtụ oge, ihe ngwọta zuru oke bụ iji klas gị kechie ederede gị na <span>klas.
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka
Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (a na-eji naanị agba ndị gbara ya gburugburu na-eme ka ihe dị adị na ederede/akara akara), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede ọzọ zoro ezo na .sr-onlyklaasị. .
Nzụlite okirikiri
Yiri klaasị agba ederede gburugburu, tọọ ngwa ngwa ndabere nke mmewere na klaasị ọ bụla. Akụkụ arịlịka ga-agba ọchịchịrị na ntugharị, dịka klaasị ederede.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, bụ nke na-abụghị commodo luctus, bụ nke na-adịghị commodo luctus.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla na-abụghị 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>Na-emekọ ihe kpọmkwem
Mgbe ụfọdụ, enweghị ike itinye klaasị ndabere gburugburu n'ihi nkọwapụta nke onye ọzọ. N'ọnọdụ ụfọdụ, ihe ngwọta zuru oke bụ ijikọ ọdịnaya nke mmewere gị <div>na klas.
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka
Dị ka ọ dị na agba agba , hụ na a na-ebutekwa ihe ọ bụla pụtara site na agba n'ụdị na-abụghị nke ngosi.
Mechie akara ngosi
Jiri akara ngosi nso nso a maka ịchụpụ ọdịnaya dịka modal na ọkwa.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Carets
Jiri nlekọta iji gosi ọrụ ndọda na ntụzịaka. Rịba ama na nlekọta ndabara ga-atụgharị na-akpaghị aka na nchịkọta nhọrọ .
<span class="caret"></span>Na-ese n'elu mmiri ngwa ngwa
Jiri klaasị see ihe mmewere n'aka ekpe ma ọ bụ aka nri. !importantagụnyere iji zere nsogbu ndị akọwapụtara. Enwere ike iji klaasị dị ka mixins.
<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();
}Ihe mgbochi ọdịnaya etiti
Tọọ mmewere gaa display: blockna etiti site na margin. Dị ka mixin na klaasị.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
Kwuo ngwa ngwa floats site na ịgbakwunye .clearfix na mmewere nne na nna . Na -eji micro clearfix dị ka Nicolas Gallagher na-ewu ewu. Enwere ike iji ya mee ihe dị ka 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();
}Na-egosi na zoo ọdịnaya
Manye ihe ngosi ka egosi ma ọ bụ zoo ( gụnyere maka ndị na-agụ ihuenyo ) site na iji .showyana .hiddenklaasị. Klas ndị a na-eji !importantiji zere esemokwu kpọmkwem, dị ka ndị na -ese n'elu mmiri ngwa ngwa . Ha dị naanị maka ngbanwe larịị ngọngọ. Enwere ike iji ha dị ka mixins.
.hidedị, mana ọ naghị emetụta ndị na-agụ ihuenyo mgbe niile ma na- emebi emebi dị ka nke v3.0.1 . Jiri .hiddenma ọ bụ .sr-onlykama.
Ọzọkwa, .invisibleenwere ike iji gbanwee naanị visibiliti nke ihe mmewere, nke pụtara na displayanaghị agbanwe ya na mmewere ahụ ka nwere ike imetụta ọbịbịa nke akwụkwọ ahụ.
<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();
}Ihe na-agụ ihuenyo na ọdịnaya igodo igodo
Zoo ihe mmewere na ngwaọrụ niile ewezuga ndị na-agụ ihuenyo nwere .sr-only. Jikọta .sr-onlyya .sr-only-focusableiji gosi mmewere ọzọ mgbe agbadoro ya anya (dịka onye ọrụ naanị ahụigodo). Ọ dị mkpa maka ịgbaso ụzọ nnweta kacha mma . Enwere ike iji ya mee ihe dị ka mixins.
<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();
}Ndochi onyonyo
Jiri .text-hideklaasị ma ọ bụ mixin nyere aka dochie ọdịnaya ederede mmewere site na iji onyonyo ndabere.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Ngwa na-anabata
Maka mmepe enyi na enyi mkpanaka ngwa ngwa, jiri klaasị mmekọ ndị a maka igosi na zoo ọdịnaya site na ngwaọrụ site na ajụjụ mgbasa ozi. Agụnyere klaasị bara uru maka ịtụgharị ọdịnaya mgbe ebipụtara ya.
Gbalịa iji ndị a na obere ndabere ma zere ịmepụta ụdị dị iche iche nke otu saịtị ahụ. Kama, jiri ha meju ihe ngosi ngwaọrụ ọ bụla.
Klas dị
Jiri otu ma ọ bụ ngwakọta nke klaasị dị maka ịtụgharị ọdịnaya n'ofe ebe nkwụsịtụ nlele.
| Ngwa nta ndị ọzọEkwentị (<768px) | Obere ngwaọrụMbadamba ụrọ (≥768px) | Ngwa dị nfeDesktọpụ (≥992px) | Ngwaọrụ buru ibuDesktọpụ (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Na-ahụ anya | Zoro ezo | Zoro ezo | Zoro ezo |
.visible-sm-* |
Zoro ezo | Na-ahụ anya | Zoro ezo | Zoro ezo |
.visible-md-* |
Zoro ezo | Zoro ezo | Na-ahụ anya | Zoro ezo |
.visible-lg-* |
Zoro ezo | Zoro ezo | Zoro ezo | Na-ahụ anya |
.hidden-xs |
Zoro ezo | Na-ahụ anya | Na-ahụ anya | Na-ahụ anya |
.hidden-sm |
Na-ahụ anya | Zoro ezo | Na-ahụ anya | Na-ahụ anya |
.hidden-md |
Na-ahụ anya | Na-ahụ anya | Zoro ezo | Na-ahụ anya |
.hidden-lg |
Na-ahụ anya | Na-ahụ anya | Na-ahụ anya | Zoro ezo |
Dị ka nke v3.2.0, .visible-*-*klaasị maka nkwụsịtụ ọ bụla na-abịa n'ụdị atọ, otu maka displayuru ihe onwunwe CSS ọ bụla edepụtara n'okpuru.
| Otu klas | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Ya mere, maka mgbakwunye obere xsihuenyo ( ) dịka ọmụmaatụ, .visible-*-*klaasị dị bụ: .visible-xs-block, .visible-xs-inline, na .visible-xs-inline-block.
Klas .visible-xs, .visible-sm, .visible-md, na .visible-lgdịkwa adị, mana emebiela ka nke v3.2.0 . Ha ruru ihe dịka .visible-*-block, belụsọ nwere ikpe pụrụiche agbakwunyere maka <table>ihe ndị metụtara ngbanwe.
Bipụta klas
Yiri klaasị na-anabata mgbe niile, jiri ndị a maka ịtụgharị ọdịnaya maka mbipụta.
| Klas | Ihe nchọgharị | Bipụta |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Zoro ezo | Na-ahụ anya |
.hidden-print |
Na-ahụ anya | Zoro ezo |
Klas .visible-printahụ dịkwa mana ọ kwụsịrị ka nke v3.2.0 . Ọ fọrọ nke nta ka ọ bụrụ .visible-print-block, ma e wezụga na agbakwunyere ihe pụrụ iche maka <table>ihe ndị metụtara.
Nnwale ikpe
Hagharịa nha ihe nchọgharị gị ma ọ bụ buru ibu na ngwaọrụ dị iche iche iji nwalee klaasị ịba uru na-anabata.
A na-ahụ anya na...
Akara akwụkwọ ndụ akwụkwọ ndụ na-egosi na a na-ahụ mmewere ahụ n'ebe nlele gị ugbu a.
Obere obere
✔ A na-ahụ anya na x-obere
Obere
✔ A na-ahụ anya na obere
Ọkara
✔ A na-ahụ anya na ọkara
Nnukwu
✔ A na-ahụ anya na nnukwu
✔ A na-ahụ anya na x-obere na obere
✔ A na-ahụ anya na ọkara na nnukwu
✔ A na-ahụ anya na x-obere na ọkara
✔ A na-ahụ anya na obere na nnukwu
✔ A na-ahụ anya na x-obere na nnukwu
✔ A na-ahụ anya na obere na ọkara
Ezoro na...
N'ebe a, akara akwụkwọ ndụ akwụkwọ ndụ na-egosikwa na ezoro ezo ihe ahụ n'ebe nlele gị ugbu a.
Iji Obere
Ewubere CSS Bootstrap na obere ihe, onye na-ebu ụzọ nwere ọrụ ndị ọzọ dị ka mgbanwe, mixins, na ọrụ maka ịchịkọta CSS. Ndị na-achọ iji isi mmalite faịlụ dị obere kama faịlụ CSS anyị achịkọtara nwere ike iji ọtụtụ mgbanwe na mixins anyị na-eji n'ime usoro niile.
A na-ekpuchi mgbanwe grid na mixins n'ime ngalaba usoro Grid .
Na-achịkọta Bootstrap
Enwere ike iji bootstrap mee ihe ma ọ dịkarịa ala ụzọ abụọ: site na CSS achịkọtara ma ọ bụ site na isi iyi Faịlụ obere. Iji chịkọta faịlụ ndị pere mpe, gaa na ngalaba mmalite maka otu esi edobe gburugburu mmepe gị iji mee iwu ndị dị mkpa.
Ngwa nchịkọta ndị ọzọ nwere ike iji Bootstrap rụọ ọrụ, mana ndị otu anyị anaghị akwado ha.
Mgbanwe
A na-eji mgbanwe dị iche iche eme ihe n'oge dum ọrụ dị ka ụzọ isi kesaa ma kesaa ụkpụrụ ndị a na-ejikarị eme ihe dị ka agba, oghere, ma ọ bụ nchịkọta font. Maka ndakpọ zuru oke, biko hụ Customizer .
Agba
Jiri atụmatụ agba abụọ dị mfe: grayscale na semantic. Agba grayscale na-enye ohere ngwa ngwa na ndo ojii a na-ejikarị eme ihe ebe semantic gụnyere agba dị iche iche ekenyere ụkpụrụ ọnọdụ ọnọdụ bara uru.
@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;Jiri nke ọ bụla n'ime mgbanwe agba ndị a ka ọ dị ma ọ bụ kenye ha na mgbanwe ndị bara uru karịa maka ọrụ gị.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Ihe mkpuchi
Ọnụ ọgụgụ dị nta nke mgbanwe maka ịhazi ngwa ngwa isi ihe dị na skeleton saịtị gị.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Njikọ
Jiri naanị otu uru hazie njikọ gị ngwa ngwa.
// 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;
}
}Rịba ama na ọ na @link-hover-color-eji ọrụ, ngwá ọrụ ọzọ dị egwu sitere na Obere, na-akpaghị aka na-emepụta ụcha hover ziri ezi. Ị nwere ike iji darken, lighten, saturate, na desaturate.
Ederede
Hazie ụdịdị ederede gị n'ụzọ dị mfe, nha ederede, onye ndu na ndị ọzọ site na iji mgbanwe ole na ole ngwa ngwa. Bootstrap na-eji ndị a yana inye mixins ederede dị mfe.
@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;Akara ngosi
Ụdị mgbanwe abụọ dị ngwa maka ịhazi ọnọdụ na aha faịlụ nke akara ngosi gị.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Ngwa
Ngwa ndị dị na Bootstrap na-eji ụfọdụ mgbanwe ndabara maka ịtọ ụkpụrụ nkịtị. Nke a bụ ndị a na-ejikarị eme ihe.
@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;Ngwakọta ndị na-ere ahịa
Ngwakọta ndị na-ere ahịa bụ ngwakọta iji nyere aka kwado ọtụtụ ihe nchọgharị site na itinye prefixes ndị ahịa niile dị mkpa na CSS gị achịkọtara.
Nhazi igbe
Tọgharịa ụdị igbe akụrụngwa gị site na iji otu mixin. Maka ihe gbara ya gburugburu, lee akụkọ a na -enyere aka sitere na Mozilla .
Akwụsịla mixin dị ka nke v3.2.0 , na ntinye nke Autoprefixer. Iji chekwaa ndakọrịta azụ, Bootstrap ga-aga n'ihu iji mixin n'ime ruo mgbe Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}Nkuku gbara okirikiri
Taa ihe nchọgharị ọgbara ọhụrụ niile na-akwado akụrụngwa enweghị prefixed border-radius. Dị ka nke a, ọ nweghị .border-radius()mixin, mana Bootstrap gụnyere ụzọ mkpirisi maka ịgbakọ akụkụ abụọ ngwa ngwa n'otu akụkụ nke ihe.
.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;
}Igbe (dobe) onyinyo
Ọ bụrụ na ndị na-ege gị ntị na-eji ihe nchọgharị na ngwaọrụ kachasị ọhụrụ na nke kachasị, jide n'aka na ị ga-eji ya naanị box-shadowya. Ọ bụrụ na ịchọrọ nkwado maka ngwa gam akporo gam akporo (tupu-v4) na iOS (tupu iOS 5), jiri mixin deprecated iji bulie -webkitprefix achọrọ.
Akwụsịla mixin dị ka nke v3.1.0 , ebe Bootstrap anaghị akwado usoro ikpo okwu ochie nke na-akwadoghị ihe onwunwe ọkọlọtọ. Iji chekwaa ndakọrịta azụ, Bootstrap ga-aga n'ihu iji mixin n'ime ruo mgbe Bootstrap v4.
Jide n'aka na ị na-eji rgba()agba na ndò igbe gị ka ha na-ejikọta n'enweghị nsogbu dị ka o kwere mee na ndabere.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Mgbanwe
Ọtụtụ mixins maka mgbanwe. Tọọ ozi mgbanwe niile na otu, ma ọ bụ kọwaa igbu oge na oge dị iche dịka achọrọ.
Akwụsịla mixins dị ka nke v3.2.0 , na ntinye nke Autoprefixer. Iji chekwaa ndakọrịta azụ-azụ, Bootstrap ga-aga n'ihu iji mixins n'ime ruo mgbe 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;
}Mgbanwe
Tụgharịa, nha, tụgharịa (bugharịa), ma ọ bụ tụgharịa ihe ọ bụla.
Akwụsịla mixins dị ka nke v3.2.0 , na ntinye nke Autoprefixer. Iji chekwaa ndakọrịta azụ-azụ, Bootstrap ga-aga n'ihu iji mixins n'ime ruo mgbe 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;
}Ihe ngosi
Otu mixin maka iji ihe omume animation CSS3 niile n'otu nkwupụta yana ngwakọta ndị ọzọ maka akụrụngwa nke ọ bụla.
Akwụsịla mixins dị ka nke v3.2.0 , na ntinye nke Autoprefixer. Iji chekwaa ndakọrịta azụ-azụ, Bootstrap ga-aga n'ihu iji mixins n'ime ruo mgbe 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;
}Opekempe
Tọọ oghere maka ihe nchọgharị niile wee weta ndaghachi azụ filtermaka IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Ederede ebe nchekwa
Nye ọnọdụ maka njikwa ụdị n'ime mpaghara ọ bụla.
.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
}Ogidi
Mepụta kọlụm site na CSS n'ime otu mmewere.
.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;
}Gradients
Jiri nwayọ tụgharịa agba abụọ ọ bụla ka ọ bụrụ gradient ndabere. Mee elu karịa ma tọọ ntụzịaka, jiri agba atọ, ma ọ bụ jiri gradient radial. Site na otu mixin ị ga-enweta syntaxes prefixed niile ị ga-achọ.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Ị nwekwara ike ịkọwa akụkụ nke ọkọlọtọ agba abụọ, linear gradient:
#gradient > .directional(#333; #000; 45deg);Ọ bụrụ na ịchọrọ gradient ụdị ntutu isi, nke ahụ dịkwa mfe, kwa. Naanị ezipụta otu agba na anyị ga-ekpuchi eriri ọcha na-agafe agafe.
#gradient > .striped(#333; 45deg);Mee elu ma jiri agba atọ kama. Tọọ agba nke mbụ, agba nke abụọ, nkwụsị agba nke abụọ (uru pasentị dị ka 25%), yana agba nke atọ nwere ngwakọta ndị a:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Welie isi elu! Ọ bụrụ na ịchọrọ iwepụ gradient, jide n'aka na ị ga-ewepụ ihe ọ bụla IE-kpọmkwem filterị nwere ike tinyeworo. Ị nwere ike ime nke ahụ site na iji .reset-filter()mixin n'akụkụ background-image: none;.
Ngwakọta bara uru
Ngwakọta bara uru bụ ngwakọta na-ejikọta akụrụngwa CSS na-enweghị njikọ iji nweta ebumnuche ma ọ bụ ọrụ akọwapụtara.
Clearfix
Echefula ịgbakwunye class="clearfix"na mmewere ọ bụla kama tinye .clearfix()mixin ebe kwesịrị ekwesị. Na-eji micro clearfix si Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}N'etiti kwụ ọtọ
Mee ngwa ngwa ihe ọ bụla n'ime nne na nna ya. Achọrọ widthma ọ bụ max-widthka ịtọọ ya.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Ndị na-enyere aka nha nha
Kọwaa akụkụ nke ihe n'ụzọ dị mfe karị.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Mpaghara ederede enwere ike ịgbanwe
Hazie nhọrọ resize ngwa ngwa maka mpaghara ederede ọ bụla, ma ọ bụ ihe ọ bụla ọzọ. Emejọ omume nchọgharị nkịtị ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Ederede nbibi
Jiri ellipsis were otu mixin gbubie ederede n'ụzọ dị mfe. Chọrọ mmewere ịbụ blockma ọ bụ inline-blockọkwa.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Foto retina
Ezipụta ụzọ onyonyo abụọ yana akụkụ onyonyo @1x, na Bootstrap ga-eweta ajụjụ mgbasa ozi @2x. Ọ bụrụ na ị nwere ọtụtụ onyonyo ị ga-eje ozi, tụlee iji aka dee ihe oyiyi retina gị n'otu ajụjụ mgbasa ozi.
.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);
}Iji Sass
Ọ bụ ezie na e wuru Bootstrap na obere, ọ nwekwara ọdụ ụgbọ mmiri Sass gọọmentị . Anyị na-edobe ya na ebe nchekwa GitHub dị iche ma jiri edemede ntụgharị jikwaa mmelite.
Kedu ihe gụnyere
Ebe ọdụ ụgbọ mmiri Sass nwere repo dị iche ma na-eje ozi dịtụ iche ndị na-ege ntị, ọdịnaya nke ọrụ ahụ dị iche na isi ọrụ Bootstrap. Nke a na-eme ka ọdụ ụgbọ mmiri Sass dakọtara na ọtụtụ sistemụ dabere na Sass dịka enwere ike.
| Ụzọ | Nkọwa |
|---|---|
lib/ |
Koodu bara nnukwu uru Ruby (Nhazi Sass, Rails na Compass integrations) |
tasks/ |
Ederede ntụgharị (na-atụgharị elu na-erughị obere ka Sass) |
test/ |
Nnwale mkpokọta |
templates/ |
Ihe ngosi ngwugwu kompas |
vendor/assets/ |
Sass, Javascript na faịlụ font |
Rakefile |
Ihe aga-eme dị n'ime, dị ka ịza na ịtụgharị |
Gaa na ebe nchekwa GitHub nke ọdụ ụgbọ mmiri Sass ka ịhụ faịlụ ndị a na-arụ ọrụ.
Nwụnye
Maka ozi gbasara otu esi etinye na iji Bootstrap maka Sass, gaa na GitHub repository readme . Ọ bụ isi mmalite kachasị ọhụrụ yana gụnye ozi maka ojiji na Rails, Compass, na ọkọlọtọ Sass.