CSS
Izilungiselelo ze-Global CSS, izakhi ze-HTML ezibalulekile zenziwe isitayela futhi zathuthukiswa ngamakilasi andayo, kanye nesistimu yegridi ethuthukisiwe.
Izilungiselelo ze-Global CSS, izakhi ze-HTML ezibalulekile zenziwe isitayela futhi zathuthukiswa ngamakilasi andayo, kanye nesistimu yegridi ethuthukisiwe.
Thola ukwehla kwezingcezu ezibalulekile zengqalasizinda ye-Bootstrap, okuhlanganisa nendlela yethu yokuthuthukiswa kwewebhu okungcono, okusheshayo, okuqinile.
I-Bootstrap isebenzisa izici ezithile ze-HTML kanye nezakhiwo ze-CSS ezidinga ukusetshenziswa kwe-HTML5 doctype. Ifake ekuqaleni kwawo wonke amaphrojekthi akho.
<!DOCTYPE html>
<html lang="en">
...
</html>
Nge-Bootstrap 2, sengeze izitayela ezinobungane zomakhalekhukhwini ezingakhethwa kuzici ezibalulekile zohlaka. Nge-Bootstrap 3, sibhale kabusha iphrojekthi ukuthi ihambisane neselula kusukela ekuqaleni. Esikhundleni sokwengeza izitayela zeselula ozikhethela zona, zibhakwa khona phakathi. Eqinisweni, i-Bootstrap iselula kuqala . Izitayela zokuqala zamaselula zingatholakala kuwo wonke umtapo wolwazi esikhundleni samafayela ahlukene.
Ukuqinisekisa ukunikezela okulungile nokusondeza ngokuthinta, engeza i-meta tag yembobo yokubuka ku- <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Ungakhubaza amandla okusondeza kumadivayisi eselula ngokwengeza user-scalable=no
ku-meta tag yembobo yokubuka. Lokhu kukhubaza ukusondeza, okusho ukuthi abasebenzisi bayakwazi ukuskrola kuphela, futhi kuholela ekutheni isayithi lakho lizizwe lifana nohlelo lokusebenza lwendabuko. Sekukonke, asikuncomi lokhu kuwo wonke amasayithi, ngakho-ke qaphela!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
I-Bootstrap isetha isibonisi somhlaba jikelele esiyisisekelo, i-typography, nezitayela zokuxhumanisa. Ngokukhethekile, thina:
background-color: #fff;
kubody
@font-family-base
, @font-size-base
, kanye @line-height-base
nezibaluli njengesisekelo sethu se-typographic@link-color
futhi usebenzise isixhumanisi esidwebelayo kuphela:hover
Lezi zitayela zingatholakala ngaphakathi scaffolding.less
.
Ukuze uthole ukunikezwa okuthuthukisiwe kwesiphequluli, sisebenzisa i - Normalize.css , iphrojekthi ka- Nicolas Gallagher kanye no- Jonathan Neal .
I-Bootstrap idinga into equkethe ukusonga okuqukethwe kwesayithi nokufaka isistimu yethu yegridi. Ungakhetha esinye seziqukathi ezimbili ongazisebenzisa kumaphrojekthi akho. Qaphela ukuthi, ngenxa padding
nokunye okwengeziwe, asikho isiqukathi esidleka.
Sebenzisa .container
okwesitsha esisabelayo esinobubanzi obugxilile.
<div class="container">
...
</div>
Sebenzisa .container-fluid
isiqukathi esinobubanzi obugcwele, esihlanganisa bonke ububanzi bembobo yokubuka yakho.
<div class="container-fluid">
...
</div>
I-Bootstrap ihlanganisa isistimu ephendulayo, yeselula yokuqala ewuketshezi ekala ngokufanelekile kufika kumakholomu angu-12 njengoba idivayisi noma usayizi wembobo yokubuka ukhula. Kuhlanganisa amakilasi achazwe ngaphambilini ukuze uthole izinketho ezilula zesakhiwo, kanye nezingxube ezinamandla zokukhiqiza izakhiwo ze-semantic ezengeziwe .
Amasistimu egridi asetshenziselwa ukudala izakhiwo zekhasi ngochungechunge lwemigqa namakholomu agcina okuqukethwe kwakho. Nansi indlela isistimu yegridi ye-Bootstrap esebenza ngayo:
.container
(ububanzi obulungisiwe) noma .container-fluid
(ububanzi obugcwele) ukuze kumiswe ngendlela efanele kanye nokugxunyekwa..row
futhi .col-xs-4
ayatholakala ukuze kwenziwe ngokushesha izakhiwo zegridi. Amamiksi amancane nawo angasetshenziswa ekwakhiweni okwengeziwe kwe-semantic.padding
. Lokho kuphedi kususwa emigqeni yekholomu yokuqala neyokugcina kusetshenziswa imajini eyinegethivu ku- .row
s..col-xs-4
..col-md-*
isigaba kusici ngeke kuthinte kuphela isitayela saso kumadivayisi aphakathi nendawo kodwa nakumadivayisi amakhulu uma .col-lg-*
ikilasi lingekho.Bheka izibonelo zokusebenzisa lezi zimiso kukhodi yakho.
Sisebenzisa imibuzo yemidiya elandelayo kumafayela ethu Amancane ukuze sakhe izindawo zokunqamuka eziyinhloko kusistimu yethu yegridi.
/* 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) { ... }
Kwesinye isikhathi sinweba kule mibuzo yemidiya ukuze ifake i- max-width
CSS yokukhawulela kusethi emincane yamadivayisi.
@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) { ... }
Bona ukuthi izici zesistimu yegridi ye-Bootstrap zisebenza kanjani kuwo wonke amadivayisi anetafula eliwusizo.
Amadivayisi amancane angeziwe Amafoni (<768px) | Amathebulethi Amadivayisi Amancane (≥768px) | Amadeskithophu wedivayisi amaphakathi (≥992px) | Amadeskithophu amakhulu wamadivayisi (≥1200px) | |
---|---|---|---|---|
Ukuziphatha kwegridi | Ivundlile ngaso sonke isikhathi | Igoqwe ukuze kuqale, evundlile ngenhla kwama-breakpoint | ||
Ububanzi besiqukathi | Lutho (okuzenzakalelayo) | 750px | 970px | 1170px |
Isiqalo sekilasi | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# wamakholomu | 12 | |||
Ububanzi bekholomu | Okuzenzakalelayo | ~62px | ~81px | ~97px |
Ububanzi be-Gutter | 30px (15px ohlangothini ngalunye lwekholomu) | |||
I-Nestable | Yebo | |||
Ama-Offsets | Yebo | |||
Ukuhleleka kwekholomu | Yebo |
Usebenzisa isethi eyodwa .col-md-*
yamakilasi egridi, ungakha isistimu yegridi eyisisekelo eqala ngokunqwabelaniswa kumadivayisi eselula nakumadivayisi ethebhulethi (ububanzi obuncane kakhulu ukuya kwabancane) ngaphambi kokuba ibe evundlile kumadivayisi edeskithophu (amaphakathi). Beka amakholomu egridi kunoma iyiphi .row
.
<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>
Guqula noma yisiphi isakhiwo segridi enobubanzi obugxilile sibe isakhiwo esinobubanzi obugcwele ngokushintsha ingaphandle lakho .container
libe yi- .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Awufuni ukuthi amakholomu akho avele anqwabelene kumadivayisi amancane? Sebenzisa amakilasi egridi yedivayisi encane namaphakathi ngokwengeza .col-xs-*
.col-md-*
kumakholomu akho. Bheka isibonelo esingezansi ukuze uthole umbono ongcono wokuthi konke kusebenza kanjani.
<!-- 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>
Yakha esibonelweni sangaphambilini ngokudala izakhiwo eziguqukayo nezinamandla kakhulu .col-sm-*
ngamakilasi ethebhulethi.
<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>
Uma amakholomu angaphezu kuka-12 ebekwe phakathi komugqa owodwa, iqembu ngalinye lamakholomu engeziwe, njengeyunithi eyodwa, lizogoqa emugqeni omusha.
<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>
Njengoba kunezigaba ezine zamagridi ezitholakalayo uzobhekana nezinkinga lapho, ezindaweni ezithile zokunqamuka, amakholomu akho angacaci kahle njengoba eyodwa iyinde kunenye. Ukuze ulungise lokho, sebenzisa inhlanganisela ye-a .clearfix
kanye nezigaba zethu zosizo eziphendulayo .
<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>
Ngokungeziwe ekususeni amakholomu ezindaweni ezisabelayo, ungase udinge ukusetha kabusha ama-offset, ama-push, noma ama-donsa . Bona lokhu kusebenza esibonelweni segridi .
<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>
Hambisa amakholomu kwesokudla usebenzisa .col-md-offset-*
amakilasi. Lezi zigaba zandisa umkhawulo wesokunxele wekholomu *
ngamakholomu. Isibonelo, .col-md-offset-4
ihamba .col-md-4
phezu kwamakholomu amane.
<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>
Ungaphinda ubhale ngaphezulu ama-offsets asuka kuma-grid tiers aphansi .col-*-offset-0
ngamakilasi.
<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>
Ukuze uhlanganise okuqukethwe kwakho ngegridi ezenzakalelayo, engeza entsha .row
nesethi .col-sm-*
yamakholomu ngaphakathi kwekholomu ekhona .col-sm-*
. Imigqa efakwe kusidleke kufanele ifake isethi yamakholomu ahlanganisa kufika ku-12 noma ngaphansi (akudingekile ukuthi usebenzise wonke amakholomu angu-12 atholakalayo).
<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>
Shintsha kalula ukuhleleka kwamakholomu ethu egridi akhelwe ngaphakathi .col-md-push-*
ngamakilasi .col-md-pull-*
okulungisa.
<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>
Ngokungeziwe kumakilasi egridi akhiwe kusengaphambili ezakhiwo ezisheshayo, i-Bootstrap ihlanganisa okuguquguqukayo Okuncane nezingxube zokukhiqiza ngokushesha izakhiwo zakho ezilula, ze-semantic.
Okuguquguqukayo kunquma inani lamakholomu, ububanzi be-gutter, kanye nendawo yombuzo wemidiya okufanele kuqalwe kuyo amakholomu antantayo. Sisebenzisa lezi ukuze sikhiqize amakilasi egridi achazwe ngaphambilini abhalwe ngenhla, kanye nezingxube zangokwezifiso ezibalwe ngezansi.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
Imiksi isetshenziswa ngokuhambisana neziguquko zegridi ukuze kukhiqizwe i-CSS ye-semantic yamakholomu egridi ngayinye.
// 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));
}
}
Ungakwazi ukuguqula okuguquguqukayo kube ngamavelu akho angokwezifiso, noma usebenzise nje ama-mixins ngamavelu awo azenzakalelayo. Nasi isibonelo sokusebenzisa izilungiselelo ezizenzakalelayo ukuze udale isakhiwo samakholomu amabili esinegebe phakathi.
.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>
Zonke izihloko ze-HTML, <h1>
ukuya ku- <h6>
, ziyatholakala. .h1
ngamakilasi .h6
nawo ayatholakala, uma ufuna ukufanisa isitayela sefonti yesihloko kodwa usafuna ukuthi umbhalo wakho uboniswe emgqeni.
h1. Isihloko se-Bootstrap |
I-Semibold 36px |
h2. Isihloko se-Bootstrap |
I-Semibold 30px |
h3. Isihloko se-Bootstrap |
I-Semibold 24px |
h4. Isihloko se-Bootstrap |
I-Semibold 18px |
h5. Isihloko se-Bootstrap |
I-Semibold 14px |
h6. Isihloko se-Bootstrap |
I-semibold engu-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>
Dala umbhalo olula, wesibili kunoma isiphi isihloko onomaka ojwayelekile <small>
noma .small
ikilasi.
h1. Isihloko se-Bootstrap Umbhalo wesibili |
h2. Isihloko se-Bootstrap Umbhalo wesibili |
h3. Isihloko se-Bootstrap Umbhalo wesibili |
h4. Isihloko se-Bootstrap Umbhalo wesibili |
h5. Isihloko se-Bootstrap Umbhalo wesibili |
h6. Isihloko se-Bootstrap Umbhalo wesibili |
<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>
Okuzenzakalelayo komhlaba wonke kwe-Bootstrap font-size
kungu- 14px , ene line-height
- 1.428 . Lokhu kusetshenziswe kuzo <body>
zonke izigaba. Ngaphezu kwalokho, <p>
(izigaba) zithola imajini engezansi yohhafu ubude bomugqa womugqa ohlanganisiwe (10px ngokuzenzakalelayo).
I-Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. I-Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. I-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 at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Yenza isigaba sigqame ngokungeza .lead
.
I-Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. I-Duis mollis, ayiyona i-commodo luctus.
<p class="lead">...</p>
Isilinganiso se-typographic sisekelwe kokuhlukahluka okubili Okuncane kokuguquguqukayo.kancane : @font-size-base
kanye @line-height-base
. Esokuqala siwusayizi wefonti eyisisekelo osetshenziswa kuyo yonke indawo kanti eyesibili ubude bomugqa oyisisekelo. Sisebenzisa lezo ziguquguqukayo kanye nezibalo ezithile ezilula ukuze sakhe amamajini, ama-paddings, nobude bomugqa balo lonke uhlobo lwethu nokunye. Enze ngendlela oyifisayo kanye nezimo ze-Bootstrap.
Ukuze ugqamise ukugijima kombhalo ngenxa yokuhambisana kwawo komunye umongo, sebenzisa <mark>
umaka.
Ungasebenzisa umaki wokumaka ukuzegqamisaumbhalo.
You can use the mark tag to <mark>highlight</mark> text.
Ukuze ubonise amabhlogo ombhalo asusiwe sebenzisa <del>
ithegi.
Lo mugqa wombhalo uhloselwe ukuthathwa njengombhalo osusiwe.
<del>This line of text is meant to be treated as deleted text.</del>
Ukuze ubonise amabhlogo ombhalo angasabalulekile sebenzisa <s>
ithegi.
Lo mugqa wombhalo uhloselwe ukuthi uthathwe njengongasanembile.
<s>This line of text is meant to be treated as no longer accurate.</s>
Ukuze ubonise izengezo kudokhumenti sebenzisa <ins>
ithegi.
Lo mugqa wombhalo uhloselwe ukuthi uthathwe njengesengezo kudokhumenti.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
Ukudwebela umbhalo sebenzisa <u>
ithegi.
Lo mugqa wombhalo uzosebenza njengokudwetshelwe
<u>This line of text will render as underlined</u>
Sebenzisa omaka bokugcizelela be-HTML abazenzakalelayo abanezitayela ezingasindi.
Ukuze ungagcizeleli emgqeni noma emabhuloki wombhalo, sebenzisa <small>
umaka ukuze usethe umbhalo kusayizi ongu-85% womzali. Ama-elementi esihloko athola font-size
okwawo kuma-elementi afakwe isidleke <small>
.
Okunye ungasebenzisa i-elementi esemgqeni .small
esikhundleni sanoma iyiphi <small>
.
Lo mugqa wombhalo uhloselwe ukuthathwa njengokuphrinta kahle.
<small>This line of text is meant to be treated as fine print.</small>
Ukuze ugcizelele amazwibela ombhalo onesisindo sefonti esindayo.
Amazwibela alandelayo ombhalo ahunyushwa njengombhalo ogqamile .
<strong>rendered as bold text</strong>
Ukuze ugcizelele amazwibela ombhalo omalukeke.
Amazwibela alandelayo ombhalo ahunyushwa njengombhalo omalukeke .
<em>rendered as italicized text</em>
Zizwe ukhululekile ukusebenzisa <b>
futhi <i>
ku-HTML5. <b>
ihloselwe ukugqamisa amagama noma imishwana ngaphandle kokudlulisa ukubaluleka okwengeziwe kuyilapho <i>
ngokuvamile kungokwezwi, amagama obuchwepheshe, njll.
Hlela kabusha umbhalo kalula ube izingxenye ezinamakilasi okuqondanisa umbhalo.
Umbhalo oqondaniswe kwesokunxele.
Umbhalo oqondaniswe namaphakathi.
Umbhalo oqondaniswe kwesokudla.
Umbhalo olungisiwe.
Awukho umbhalo wokugoqa.
<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>
Guqula umbhalo ube izingxenye ngamakilasi osonhlamvukazi bombhalo.
Umbhalo onezinhlamvu eziphansi.
Umbhalo onezinhlamvu ezinkulu.
Umbhalo obhalwe ngosonhlamvukazi.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Ukuqaliswa okunesitayela kwe- <abbr>
elementi ye-HTML yezifinyezo nama-akhronimi ukuze kuboniswe inguqulo enwetshiwe kukuhambisa phezulu. Izifinyezo ezinesibaluli title
zinomngcele ongezansi onamachashazi akhanyayo kanye nekhesa yosizo ekuhambiseni phezulu, okuhlinzeka ngomongo owengeziwe ekuhambiseni phezulu kanye nakubasebenzisi bobuchwepheshe obusizayo.
Isifinyezo segama lesichasiso sithi attr .
<abbr title="attribute">attr</abbr>
Engeza .initialism
kusifinyezo sosayizi wefonti omncane kancane.
I- HTML iyinto engcono kakhulu kusukela kusinkwa esisikiwe.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Yethula imininingwane yokuxhumana yedlozi eliseduze noma wonke umsebenzi. Londoloza ukufometha ngokuqeda yonke imigqa nge- <br>
.
<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>
Ngokucaphuna amabhlogo wokuqukethwe komunye umthombo ngaphakathi kwedokhumenti yakho.
Goqa <blockquote>
noma iyiphi i- HTML njengengcaphuno. Ukuze uthole izingcaphuno eziqondile, sincoma a <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Isitayela nokuqukethwe kuyashintsha ukuze kube nokuhlukahluka okulula kokujwayelekile <blockquote>
.
Engeza u-a <footer>
ukuze uthole umthombo. Gcoba igama lomsebenzi womthombo ngesi- <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere ilingana ne-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>
Engeza .blockquote-reverse
i-blockquote enokuqukethwe okuqondaniswe kwesokudla.
<blockquote class="blockquote-reverse">
...
</blockquote>
Uhlu lwezinto lapho i-oda lingenandaba khona ngokusobala.
<ul>
<li>...</li>
</ul>
Uhlu lwezinto lapho i-oda libaluleke ngokusobala.
<ol>
<li>...</li>
</ol>
Susa list-style
imajini ezenzakalelayo nengakwesokunxele ezintweni zohlu (izingane eziseduze kuphela). Lokhu kusebenza kuphela ezintweni ezisheshayo zohlu lwezingane , okusho ukuthi uzodinga ukungeza ikilasi kunoma yiluphi uhlu olufakwe esidlekeni.
<ul class="list-unstyled">
<li>...</li>
</ul>
Beka zonke izinto zohlu emugqeni owodwa display: inline-block;
onamaphedi alula.
<ul class="list-inline">
<li>...</li>
</ul>
Uhlu lwamagama anezincazelo ezihambisana nawo.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Yenza imigomo nezincazelo <dl>
zilandelane. Iqala isitakikhi njengo- <dl>
s okuzenzakalelayo, kodwa uma ibha ye-navbar ikhula, yenza kanjalo nalokhu.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Uhlu lwezincazelo ezivundlile luzonciphisa amagama amade kakhulu ukuthi angangena kukholamu yesokunxele ngokuthi text-overflow
. Ezingobeni zokubuka ezinciphile, zizoshintshela kusakhiwo esistakiwe esizenzakalelayo.
Goqa amazwibela ekhodi nge- <code>
.
<section>
kufanele isongwe njenge-inline.
For example, <code><section></code> should be wrapped as inline.
Sebenzisa <kbd>
ukukhombisa okokufaka okuvamise ukufakwa ngekhibhodi.
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>
Sebenzisa <pre>
emigqeni eminingi yekhodi. Qiniseka ukuthi ubalekela noma yibaphi abakaki be-engeli kukhodi ukuze unikezwe ngendlela efanele.
<p>Isampula yombhalo lapha...</p>
<pre><p>Sample text here...</p></pre>
Ungakhetha ngokukhetha .pre-scrollable
iklasi, elizosetha ubude bobude obungu-350px futhi linikeze ibha yokuskrola ye-y-axis.
Ukuze ubonise okuguquguqukayo sebenzisa <var>
ithegi.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Ukuze ubonise ukuphuma kwesampula yamabhulokhi kuhlelo sebenzisa <samp>
ithegi.
Lo mbhalo uhloselwe ukuthi uthathwe njengesampula ephuma ohlelweni lwekhompyutha.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Ukuze uthole isitayela esiyisisekelo—i-padding ekhanyayo nezihlukanisi ezivundlile kuphela—engeza isigaba sesisekelo .table
kunoma iyiphi <table>
. Kungase kubonakale kungenasidingo kakhulu, kodwa uma kubhekwa ukusetshenziswa kabanzi kwamathebula kwamanye ama-plugin afana namakhalenda nezikhethi zezinsuku, sikhethe ukuhlukanisa izitayela zethu zetafula ngokwezifiso.
# | Igama | Isibongo | Igama lomsebenzisi |
---|---|---|---|
1 | Maka | Otto | @mdo |
2 | uJakobe | Thornton | @amafutha |
3 | Larry | uNyoni |
<table class="table">
...
</table>
Sebenzisa .table-striped
ukwengeza i-zebra-striping kunoma yimuphi umugqa wethebula ngaphakathi kwe- <tbody>
.
Amathebula anemigqa enziwe isitayela ngesikhethi se- :nth-child
CSS, esingatholakali ku-Internet Explorer 8.
# | Igama | Isibongo | Igama lomsebenzisi |
---|---|---|---|
1 | Maka | Otto | @mdo |
2 | uJakobe | Thornton | @amafutha |
3 | Larry | uNyoni |
<table class="table table-striped">
...
</table>
Engeza .table-bordered
imingcele kuzo zonke izinhlangothi zetafula namaseli.
# | Igama | Isibongo | Igama lomsebenzisi |
---|---|---|---|
1 | Maka | Otto | @mdo |
2 | uJakobe | Thornton | @amafutha |
3 | Larry | uNyoni |
<table class="table table-bordered">
...
</table>
Engeza .table-hover
ukuze unike amandla isimo sokuhambisa phezulu emigqeni yethebula ngaphakathi kwe- <tbody>
.
# | Igama | Isibongo | Igama lomsebenzisi |
---|---|---|---|
1 | Maka | Otto | @mdo |
2 | uJakobe | Thornton | @amafutha |
3 | Larry | uNyoni |
<table class="table table-hover">
...
</table>
Engeza .table-condensed
ukuze wenze amatafula ahlangane kakhudlwana ngokusika ama-cell padding phakathi.
# | Igama | Isibongo | Igama lomsebenzisi |
---|---|---|---|
1 | Maka | Otto | @mdo |
2 | uJakobe | Thornton | @amafutha |
3 | Larry Inyoni |
<table class="table table-condensed">
...
</table>
Sebenzisa amakilasi anomongo ukuze ufake imibala yemigqa yethebula noma amaseli ngamanye.
Ikilasi | Incazelo |
---|---|
.active |
Ifaka umbala ohambisa phezulu kumugqa othile noma iseli |
.success |
Ibonisa isenzo esiyimpumelelo noma esihle |
.info |
Ibonisa ushintsho olunolwazi olungathathi hlangothi noma isenzo |
.warning |
Ikhombisa isexwayiso esingase sidinge ukunakwa |
.danger |
Ibonisa isenzo esiyingozi noma okungenzeka sibe sibi |
# | Isihloko sekholomu | Isihloko sekholomu | Isihloko sekholomu |
---|---|---|---|
1 | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu |
2 | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu |
3 | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu |
4 | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu |
5 | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu |
6 | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu |
7 | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu |
8 | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu |
9 | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu | Okuqukethwe kwekholomu |
<!-- 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>
Ukusebenzisa umbala ukwengeza incazelo kumugqa wethebula noma iseli ngalinye kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (umbhalo obonakalayo kumugqa/iseli yethebula efanele), noma ufakiwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .sr-only
nekilasi.
Dala amathebula asabelayo ngokugoqa noma yimaphi .table
ukuze .table-responsive
uwenze apheqe avundlile kumadivayisi amancane (ngaphansi kuka-768px). Uma ubuka kunoma yini enkulu kuno-768px ububanzi, ngeke ubone umehluko kulawa mathebula.
Amathebula aphendulayo asebenzisa overflow-y: hidden
okuthi , okusika noma yikuphi okuqukethwe okudlulela ngale kwangaphansi noma imiphetho ephezulu yethebula. Ikakhulukazi, lokhu kunganqamula amamenyu okwehlayo namanye amawijethi ezinkampani zangaphandle.
IFirefox inesitayela sesethi yasensimini esingesihle esibandakanya width
esiphazamisa ithebula eliphendulayo. Lokhu akukwazi ukukhishwa ngaphandle kokugebenga okuqondile kweFirefox esingakuhlinzeki ku -Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
Ukuze uthole ulwazi olwengeziwe, funda le mpendulo yokuchichima kwesitaki .
# | Isihloko sethebula | Isihloko sethebula | Isihloko sethebula | Isihloko sethebula | Isihloko sethebula | Isihloko sethebula |
---|---|---|---|---|---|---|
1 | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula |
2 | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula |
3 | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula |
# | Isihloko sethebula | Isihloko sethebula | Isihloko sethebula | Isihloko sethebula | Isihloko sethebula | Isihloko sethebula |
---|---|---|---|---|---|---|
1 | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula |
2 | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula |
3 | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula | Iseli yethebula |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Izilawuli zefomu ngazinye zithola ngokuzenzakalelayo isitayela esithile somhlaba wonke. Yonke imibhalo <input>
, <textarea>
, kanye <select>
nezakhi ezinazo .form-control
zisethwa width: 100%;
ngokuzenzakalelayo. Goqa amalebula nezilawuli .form-group
ukuze uthole isikhala esiphezulu.
<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>
Ungahlanganisi amaqembu efomu ngqo namaqembu okokufaka . Esikhundleni salokho, misa iqembu lokokufaka ngaphakathi kweqembu lefomu.
Engeza .form-inline
efomini lakho (okungadingeki kube a <form>
) ukuze uthole izilawuli eziqondaniswe kwesokunxele kanye ne-inline-block. Lokhu kusebenza kuphela kumafomu angaphakathi kwezindawo zokubuka ezinobubanzi okungenani obungu-768px.
Okokufaka nokukhethiwe width: 100%;
kusetshenziswe ngokuzenzakalelayo ku-Bootstrap. Ngaphakathi kwamafomu asemgqeni, sisetha kabusha lokho width: auto;
kuzilawuli eziningi ukuze zihlale emugqeni ofanayo. Kuye ngesakhiwo sakho, ububanzi bangokwezifiso obungeziwe bungase budingeke.
Izifundi zesikrini zizoba nenkinga ngamafomu akho uma ungafaki ilebula yakho konke okokufaka. Kulawa mafomu asemgqeni, ungafihla amalebula usebenzisa .sr-only
ikilasi. Kukhona ezinye izindlela zokuhlinzeka ngelebula lobuchwepheshe obusizayo, obufana ne- aria-label
, aria-labelledby
noma title
isibaluli. Uma kungekho kulokhu okukhona, abafundi besikrini bangaphendukela ekusebenziseni placeholder
isibaluli, uma sikhona, kodwa qaphela ukuthi ukusetshenziswa placeholder
njengokumiselela ezinye izindlela zokulebula akwelulekwa.
<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>
Sebenzisa amakilasi egridi achazwe ngaphambilini e-Bootstrap ukuze uqondanise amalebula namaqembu ezilawuli zefomu ngesakhiwo esivundlile ngokwengeza .form-horizontal
efomini (okungadingeki libe yi- <form>
). Ukwenza kanjalo kushintsha .form-group
s ukuziphatha njengemigqa yegridi, ngakho-ke asikho isidingo se- .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>
Izibonelo zezilawuli zefomu ezijwayelekile ezisekelwa kusakhiwo sefomu lesibonelo.
Ukulawulwa kwefomu okuvame kakhulu, izinkambu zokufaka ezisuselwe embhalweni. Kufaka usekelo lwazo zonke izinhlobo ze-HTML5: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, kanye color
.
Okufakwayo kuzokwenziwa isitayela ngokugcwele kuphela uma type
kumenyezelwe kahle.
<input type="text" class="form-control" placeholder="Text input">
Ukwengeza umbhalo ohlanganisiwe noma izinkinobho ngaphambi kanye/noma ngemva kwanoma yimuphi umbhalo osuselwe <input>
, hlola ingxenye yeqembu lokufaka .
Ukulawula kwefomu okusekela imigqa eminingi yombhalo. Shintsha rows
isibaluli njengoba kudingeka.
<textarea class="form-control" rows="3"></textarea>
Amabhokisi okuhlola awokukhetha inketho eyodwa noma ezimbalwa ohlwini, kuyilapho imisakazo ingeyokukhetha inketho eyodwa kweziningi.
Amabhokisi okuhlola akhubazekile namarediyo asekelwe, kodwa ukuze unikeze ikhesa "engavunyelwe" ekuhambeni komzali <label>
, uzodinga ukungeza .disabled
iklasi kumzali .radio
, .radio-inline
, .checkbox
, noma .checkbox-inline
.
<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>
Sebenzisa i- .checkbox-inline
noma .radio-inline
amakilasi ochungechungeni lwamabhokisi okuhlola noma imisakazo ngezilawuli ezivela emugqeni ofanayo.
<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>
Uma ungenawo umbhalo ngaphakathi kwe- <label>
, okokufaka kumiswa ngendlela obungayilindela. Okwamanje isebenza kuphela kumabhokisi okuhlola angekho ku-inthanethi nemisakazo. Khumbula ukuthi usanikeze uhlobo oluthile lwelebula lobuchwepheshe obusizayo (ngokwesibonelo, ukusebenzisa 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>
Qaphela ukuthi amamenyu amaningi omdabu akhethiwe—okuyi-Safari ne-Chrome—anamakhona ayindingilizi angakwazi ukuguqulwa border-radius
ngezinto.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Ezilawulweni <select>
ezinesibaluli multiple
, izinketho eziningi ziboniswa ngokuzenzakalelayo.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Uma udinga ukubeka umbhalo ongenalutho eduze kwelebula yefomu ngaphakathi kwefomu, sebenzisa .form-control-static
ikilasi ku- <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>
Sisusa izitayela ezizenzakalelayo outline
kwezinye izilawuli zefomu futhi sisebenzise u-a box-shadow
endaweni yazo :focus
.
:focus
sedemoIsibonelo esingenhla sisebenzisa izitayela zangokwezifiso kumadokhumenti ethu ukubonisa :focus
isimo ku- .form-control
.
Engeza disabled
isibaluli se-boolean kokokufaka ukuze uvimbele ukusebenzisana komsebenzisi. Okokufaka okukhubazekile kubonakala kulula futhi kwengeza not-allowed
ikhesa.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Engeza disabled
isibaluli kokuthi a <fieldset>
ukuze ukhubaze zonke izilawuli ngaphakathi <fieldset>
ngesikhathi esisodwa.
<a>
Ngokuzenzakalela, iziphequluli zizophatha zonke izilawuli zefomu lomdabu ( <input>
, <select>
nezici <button>
) ngaphakathi <fieldset disabled>
njengokukhutshaziwe, ukuvimbela kokubili ukusebenzisana kwekhibhodi negundane kuzo. Kodwa-ke, uma ifomu lakho lihlanganisa <a ... class="btn btn-*">
nezakhi, lezi zizonikezwa kuphela isitayela se- pointer-events: none
. Njengoba kuphawuliwe esigabeni esimayelana nezinkinobho ezikhubaziwe (futhi ikakhulukazi esigatshaneni sezinto zokuhlanganisa ihange), lesi sakhiwo se-CSS asikakamiswa futhi asisekelwe ngokugcwele ku-Opera 18 nangaphansi, noma ku-Internet Explorer 11, futhi iwiniwe. vimbela abasebenzisi bekhibhodi ukuthi bangakwazi ukugxila noma ukwenza lezi zixhumanisi zisebenze. Ngakho ukuze uphephe, sebenzisa i-JavaScript yangokwezifiso ukuze ukhubaze izixhumanisi ezinjalo.
Nakuba i-Bootstrap izosebenzisa lezi zitayela kuzo zonke iziphequluli, i-Internet Explorer 11 nangaphansi ayisekeli ngokugcwele disabled
isici ku- <fieldset>
. Sebenzisa i-JavaScript yangokwezifiso ukuze ukhubaze isethi yasensimini kulezi ziphequluli.
<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>
Engeza readonly
isibaluli se-boolean kokokufaka ukuze uvimbele ukuguqulwa kwevelu yokokufaka. Okokufaka kokufunda kuphela kubonakala kulula (njengokokufaka okukhutshaziwe), kodwa gcina ikhesa evamile.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Umbhalo wosizo weleveli yokuvimba ukuze uthole izilawuli zefomu.
Umbhalo wosizo kufanele uhlotshaniswe ngokusobala nokulawula kwefomu ohlobene nokusebenzisa aria-describedby
isibaluli. Lokhu kuzoqinisekisa ukuthi ubuchwepheshe obusizayo - njengezifundi zesikrini - buzomemezela lo mbhalo wosizo lapho umsebenzisi egxile noma engena ekulawuleni.
<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>
I-Bootstrap ihlanganisa izitayela zokuqinisekisa zephutha, isexwayiso, kanye nezimo zempumelelo kuzilawuli zefomu. Ukusebenzisa, ukwengeza .has-warning
, .has-error
, noma .has-success
into engumzali. Noma iyiphi .control-label
, .form-control
, futhi .help-block
ngaphakathi kwaleyo elementi izothola izitayela zokuqinisekisa.
Ukusebenzisa lezi zitayela zokuqinisekisa ukukhombisa isimo sokulawula kwefomu kunikeza kuphela inkomba ebonakalayo, esekelwe kumbala, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini - noma kubasebenzisi abangaboni umbala.
Qinisekisa ukuthi enye inkomba yombuso nayo inikeziwe. Ngokwesibonelo, ungafaka iseluleko mayelana nesimo embhalweni wokulawula wefomu <label>
ngokwawo (njengoba kunjalo esibonelweni sekhodi esilandelayo), faka i- Glyphicon (nombhalo ohlukile ofanele usebenzisa .sr-only
ikilasi - bheka izibonelo ze- Glyphicon ), noma ngokunikeza usizo olwengeziwe block yombhalo . Ngokukhethekile kubuchwepheshe obusizayo, izilawuli zefomu ezingavumelekile nazo zinganikezwa aria-invalid="true"
isibaluli.
<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>
Ungakwazi futhi ukwengeza izithonjana zempendulo ozikhethela yona ngokungezwa .has-feedback
kanye nesithonjana esifanele.
Izithonjana zempendulo zisebenza <input class="form-control">
ngezakhi zombhalo kuphela.
Ukuma mathupha kwezithonjana zempendulo kuyadingeka kokokufaka ngaphandle kwelebula nasemaqenjini okokufaka anesengezo kwesokudla. Ukhuthazwa kakhulu ukuthi unikeze amalebula akho konke okokufaka ngezizathu zokufinyeleleka. Uma ufisa ukuvimbela amalebula ukuthi angavezwa, wafihle .sr-only
nekilasi. Uma kufanele wenze ngaphandle kwamalebula, lungisa top
inani lesithonjana sempendulo. Kumaqembu okokufaka, lungisa right
inani libe inani lephikseli elifanele kuye ngobubanzi be-addon yakho.
Ukuqinisekisa ukuthi ubuchwepheshe obusizayo - njengezifundi zesikrini - budlulisela ngendlela efanele incazelo yesithonjana, umbhalo ofihliwe owengeziwe kufanele ufakwe .sr-only
nekilasi futhi uhlotshaniswe ngokusobala nokulawula kwefomu elihlobene nokusebenzisa aria-describedby
. Okunye, qinisekisa ukuthi incazelo (isibonelo, iqiniso lokuthi kunesexwayiso senkambu ethile yokufaka umbhalo) idluliswa ngenye indlela, njengokushintsha umbhalo wangempela <label>
ohlotshaniswa nokulawulwa kwefomu.
Nakuba izibonelo ezilandelayo sezivele zisisho isimo sokuqinisekisa sokulawulwa kwazo kwefomu ngokulandelana kwazo <label>
embhalweni ngokwawo, le nqubo engenhla (ukusebenzisa .sr-only
umbhalo kanye aria-describedby
) ifakiwe ngokwezinjongo zemifanekiso.
<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>
<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
Izithonjana ozikhethela zona ezinamalebula afihliweUma usebenzisa .sr-only
ikilasi ukufihla isilawuli sefomu <label>
(kunokusebenzisa ezinye izinketho zokulebula, njengesibaluli aria-label
), i-Bootstrap izolungisa ngokuzenzakalelayo indawo yesithonjana uma seyengeziwe.
<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>
Setha ubude usebenzisa amakilasi afana nokuthi .input-lg
, futhi usethe ububanzi usebenzisa amakilasi ekholomu yegridi .col-lg-*
.
Dala izilawuli zefomu ezinde noma ezifushane ezifana nosayizi bezinkinobho.
<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>
Ngokushesha usayizi wamalebula kanye nezilawuli zefomu ngaphakathi .form-horizontal
ngokungeza .form-group-lg
noma .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>
Goqa okokufaka kumakholomu egridi, nanoma iyiphi ingxenye yangokwezifiso yomzali, ukuze usebenzise kalula ububanzi obufunekayo.
<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>
Sebenzisa amakilasi enkinobho kokuthi <a>
, <button>
, noma <input>
isici.
<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">
Nakuba amakilasi ezinkinobho angasetshenziswa kuwo <a>
kanye nama - <button>
elementi, ama- <button>
elementi kuphela asekelwayo ngaphakathi kwezingxenye zethu ze-nav ne-navbar.
Uma <a>
izakhi zisetshenziselwa ukusebenza njengezinkinobho - ukuqala ukusebenza kwekhasi, kunokuzulazula uye kwenye idokhumenti noma isigaba esingaphakathi kwekhasi lamanje - kufanele futhi zinikezwe ezifanele role="button"
.
Njengomkhuba ongcono kakhulu, sincoma kakhulu ukusebenzisa i- <button>
elementi noma nini lapho kunokwenzeka ukuze uqinisekise ukunikezwa okufanayo kwesiphequluli.
Phakathi kwezinye izinto, kunesiphazamisi kuFirefox <30 esivimbela ekusetheni izinkinobho line-height
ze-- <input>
based, okubangela ukuthi zingafani ncamashi nobude bezinye izinkinobho kuFirefox.
Sebenzisa noma yimaphi amakilasi enkinobho atholakalayo ukuze udale ngokushesha inkinobho enesitayela.
<!-- 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>
Ukusebenzisa umbala ukwengeza incazelo enkinobho kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (umbhalo obonakalayo wenkinobho), noma ufakiwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .sr-only
nekilasi.
Uyathanda izinkinobho ezinkulu noma ezincane? Engeza .btn-lg
, .btn-sm
, noma .btn-xs
osayizi abengeziwe.
<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>
Dala izinkinobho zeleveli yebhulokhi—lezo ezinobubanzi obugcwele bomzali— ngokungeza .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>
Izinkinobho zizovela zicindezelwe (ezinengemuva elimnyama, umngcele omnyama, nesithunzi esifakiwe) uma isebenza. Ngezakhi <button>
, lokhu kwenziwa nge- :active
. Okwezakhi <a>
, kwenziwa nge- .active
. Nokho, ungasebenzisa .active
kokuthi <button>
s (futhi ufake aria-pressed="true"
isibaluli) uma udinga ukuphindaphinda isimo esisebenzayo ngokohlelo.
Asikho isidingo sokwengeza :active
njengoba kuyisigaba-mbumbulu, kodwa uma udinga ukuphoqa ukubukeka okufanayo, qhubeka futhi wengeze .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>
Engeza .active
ikilasi <a>
ezinkinobho.
Isixhumanisi esiyinhloko Isixhumanisi
<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>
Yenza izinkinobho zibukeke zingachofozeki ngokuzifiphala ngokuthi opacity
.
Engeza disabled
isibaluli <button>
ezinkinobho.
<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>
Uma ungeza disabled
isibaluli ku- <button>
, Internet Explorer 9 nangezansi kuzonikeza umbhalo ompunga ngesithunzi sombhalo esibi esingeke sikwazi ukusilungisa.
Engeza .disabled
ikilasi <a>
ezinkinobho.
Isixhumanisi esiyinhloko Isixhumanisi
<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>
Sisebenzisa .disabled
njengesigaba sokusetshenziswa lapha, esifana nesigaba esivamile .active
, ngakho-ke asikho isiqalo esidingekayo.
Leli klasi lisebenzisa pointer-events: none
ukuzama ukukhubaza ukusebenza kwesixhumanisi kwe- <a>
s, kodwa leso sakhiwo se-CSS asikakamiswa futhi asisekelwa ngokugcwele ku-Opera 18 nangaphansi, noma ku-Internet Explorer 11. Ngaphezu kwalokho, ngisho nasezipheqululini ezisekela pointer-events: none
, ikhibhodi ukuzulazula kuhlala kungathinteki, okusho ukuthi abasebenzisi bekhibhodi ababonayo nabasebenzisi bobuchwepheshe obusizayo basazokwazi ukwenza lezi zixhumanisi zisebenze. Ngakho ukuze uphephe, sebenzisa i-JavaScript yangokwezifiso ukuze ukhubaze izixhumanisi ezinjalo.
Izithombe eziku-Bootstrap 3 zingenziwa ziphenduleke kalula ngokungezwa .img-responsive
kwekilasi. Lokhu kuyasebenza max-width: 100%;
, height: auto;
nasesithombeni display: block;
ukuze sikhule kahle kusici esingumzali.
Ukuze ubeke phakathi izithombe ezisebenzisa .img-responsive
ikilasi, sebenzisa .center-block
esikhundleni se- .text-center
. Bona isigaba samakilasi omsizi ukuze uthole imininingwane eyengeziwe mayelana .center-block
nokusetshenziswa.
Ku-Internet Explorer 8-10, izithombe ze-SVG ezinamasayizi .img-responsive
alinganisiwe. Ukuze ulungise lokhu, engeza width: 100% \9;
lapho kudingeka khona. I-Bootstrap ayikusebenzisi lokhu ngokuzenzakalelayo njengoba idala izinkinga kwamanye amafomethi wesithombe.
<img src="..." class="img-responsive" alt="Responsive image">
Engeza amakilasi <img>
entweni ukuze wenze isitayela kalula izithombe kunoma iyiphi iphrojekthi.
Khumbula ukuthi i-Internet Explorer 8 ayinalo usekelo lwamakhona ayindilinga.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Dlulisa incazelo ngombala ngedlanzana lezinsiza zokugcizelela. Lezi zingaphinda zisetshenziswe kuzixhumanisi futhi zizoba mnyama ngokuhambisa phezulu njengezitayela zethu zokuxhuma ezizenzakalelayo.
Fusce dapibus, tellus ac cursus commodo, tor 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.
I-Etiam porta sem malesuada magna mollis euismod.
I-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>
Kwesinye isikhathi amakilasi okugcizelela awakwazi ukusetshenziswa ngenxa yokucaciswa kwesinye isikhethi. Ezimweni eziningi, i-workaround eyanele ukusonga umbhalo wakho <span>
ngeklasi.
Ukusebenzisa umbala ukwengeza incazelo kunikeza kuphela inkomba ebonakalayo, engeke idluliselwe kubasebenzisi bobuchwepheshe obusizayo - njengezifundi zesikrini. Qinisekisa ukuthi ulwazi olushiwo umbala lusobala kokuqukethwe ngokwako (imibala yomongo isetshenziselwa kuphela ukuqinisa incazelo esivele ikhona embhalweni/emakhakheni), noma ifakiwe ngezinye izindlela, njengombhalo owengeziwe ofihliwe .sr-only
neklasi. .
Ngokufana nezigaba zombala wombhalo womongo, setha kalula ingemuva lesici kunoma yisiphi isigaba somongo. Izingxenye zehange zizoba mnyama ngokuhambisa phezulu, njengamakilasi ombhalo.
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.
I-Etiam porta sem malesuada magna mollis euismod.
I-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>
Kwesinye isikhathi amakilasi angemuva komongo awakwazi ukusetshenziswa ngenxa yokucaciswa kwesinye isikhethi. Kwezinye izimo, i-workaround eyanele ukusonga okuqukethwe kwe-elementi yakho <div>
ngeklasi.
Njengemibala yomongo , qiniseka ukuthi noma iyiphi incazelo edluliswa ngombala iphinde idluliselwe ngefomethi engeyona eyethulo kuphela.
Sebenzisa isithonjana sokuvala esijwayelekile ukuze uchithe okuqukethwe okufana namamodeli nezixwayiso.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
Sebenzisa ama-carets ukukhombisa ukusebenza kokwehla kanye nesiqondiso. Qaphela ukuthi i-caret ezenzakalelayo izohlehla ngokuzenzakalelayo kumamenyu okwehlayo .
<span class="caret"></span>
Nntanta i-elementi kwesokunxele noma kwesokudla ngeklasi. !important
ifakiwe ukugwema izinkinga ezithile. Amakilasi angasetshenziswa futhi njengama-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();
}
Misa i-elementi ukuze uyibeke display: block
phakathi margin
. Itholakala njenge-mixin neklasi.
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
Sula kalula float
s ngokungeza .clearfix
isici esingumzali . Isebenzisa i-micro clearfix njengoba idume nguNicolas Gallagher. Ingasetshenziswa futhi njenge-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();
}
Phoqa into ukuthi iboniswe noma ifihlwe ( okuhlanganisa nezifundi zesikrini ) ngokusetshenziswa .show
kanye .hidden
namakilasi. Lezi zigaba zisebenzisa !important
ukugwema ukungqubuzana okuthile, njengokuntanta okusheshayo . Atholakala kuphela ekuguquleni izinga lebhulokhi. Zingasetshenziswa futhi njengama-mixins.
.hide
iyatholakala, kodwa ayizithinti njalo izifundi zesikrini futhi iyahoxiswa kusukela ku-v3.0.1. Sebenzisa .hidden
noma .sr-only
esikhundleni salokho.
Ngaphezu kwalokho, .invisible
ingasetshenziswa ukuguqula ukubonakala kwe-elementi kuphela, okusho ukuthi display
ayilungiswanga futhi isici sisengaphazamisa ukuhamba kwedokhumenti.
<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();
}
Fihla i-elementi kuwo wonke amadivayisi ngaphandle kwezifundi zesikrini ezine- .sr-only
. Hlanganisa nokukhombisa isici .sr-only
futhi .sr-only-focusable
uma sigxilile (isb ngumsebenzisi wekhibhodi kuphela). Kuyadingeka ukuze ulandele izinqubo ezingcono kakhulu zokufinyelela . Ingasetshenziswa futhi njengama-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();
}
Sebenzisa .text-hide
ikilasi noma i-mixin ukuze usize esikhundleni sokuqukethwe kombhalo we-elementi ngesithombe sangemuva.
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
Ukuze uthole intuthuko esheshayo yeselula, sebenzisa lezi zigaba zensiza ukuze ubonise futhi ufihle okuqukethwe ngedivayisi ngombuzo wemidiya. Kufakwe futhi amakilasi okusebenza okuguqula okuqukethwe uma kuphrintiwe.
Zama ukusebenzisa lezi ngesisekelo esilinganiselwe futhi ugweme ukudala izinguqulo ezihluke ngokuphelele zesayithi elifanayo. Kunalokho, zisebenzise ukuze zigcwalise isethulo sedivayisi ngayinye.
Sebenzisa eyodwa noma inhlanganisela yamakilasi atholakalayo ukuze uguqule okuqukethwe kuzo zonke izinqamuleli zembobo yokubuka.
Imishini emincane eyengeziweAmafoni (<768px) | Amadivayisi amancaneAmathebulethi (≥768px) | Amadivayisi aphakathiAmadeskithophu (≥992px) | Amadivayisi amakhuluAmadeskithophu (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
Kubonakala | Kufihliwe | Kufihliwe | Kufihliwe |
.visible-sm-* |
Kufihliwe | Kubonakala | Kufihliwe | Kufihliwe |
.visible-md-* |
Kufihliwe | Kufihliwe | Kubonakala | Kufihliwe |
.visible-lg-* |
Kufihliwe | Kufihliwe | Kufihliwe | Kubonakala |
.hidden-xs |
Kufihliwe | Kubonakala | Kubonakala | Kubonakala |
.hidden-sm |
Kubonakala | Kufihliwe | Kubonakala | Kubonakala |
.hidden-md |
Kubonakala | Kubonakala | Kufihliwe | Kubonakala |
.hidden-lg |
Kubonakala | Kubonakala | Kubonakala | Kufihliwe |
Kusukela ku-v3.2.0, .visible-*-*
amakilasi ephoyinti ngalinye lokuhlukana afika ngezinhlobonhlobo ezintathu, okukodwa display
kwenani lesakhiwo ngasinye se-CSS esohlwini olungezansi.
Iqembu lamakilasi | CSSdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Ngakho, ngezikrini ( ) ezincane ezengeziwe xs
ngokwesibonelo, .visible-*-*
amakilasi atholakalayo yilawa: .visible-xs-block
, .visible-xs-inline
, kanye .visible-xs-inline-block
.
Amakilasi .visible-xs
, .visible-sm
, .visible-md
, .visible-lg
futhi akhona, kodwa ahoxisiwe kusukela ku-v3.2.0 . Cishe zilingana no- .visible-*-block
, ngaphandle kwezimo ezikhethekile ezengeziwe <table>
zokuguqula izici ezihlobene.
Ngokufanayo namakilasi avamile aphendulayo, sebenzisa lokhu ukuze uguqule okuqukethwe ukuze uphrinte.
Amakilasi | Isiphequluli | Phrinta |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
Kufihliwe | Kubonakala |
.hidden-print |
Kubonakala | Kufihliwe |
Ikilasi .visible-print
nalo likhona kodwa liyehliswa kusukela ku- v3.2.0 . Cishe ilingana no- .visible-print-block
, ngaphandle kwamacala akhethekile angeziwe <table>
wezinto ezihlobene.
Shintsha usayizi wesiphequluli sakho noma ulayishe kumadivayisi ahlukene ukuze uhlole amakilasi ensiza esabelayo.
Omaka abaluhlaza bakhombisa ukuthi i-elementi iyabonakala endaweni yakho yokubuka yamanje.
Lapha, omaka abaluhlaza baphinde babonise ukuthi isici sifihliwe endaweni yakho yokubuka yamanje.
I-CSS ye-Bootstrap yakhelwe kokuthi Okuncane, i-preprocessor enokusebenza okwengeziwe okufana nokuguquguqukayo, imiksi, nemisebenzi yokuhlanganisa i-CSS. Labo abafuna ukusebenzisa umthombo Amafayela Ancane esikhundleni samafayela ethu e-CSS ahlanganisiwe bangasebenzisa okuguquguqukayo okuningi namamiksi esiwasebenzisa kulo lonke uhlaka.
Okuguquguqukayo kwegridi nezixube kufakwe ngaphakathi kwesigaba sesistimu yeGridi .
I-Bootstrap ingasetshenziswa okungenani ngezindlela ezimbili: nge-CSS ehlanganisiwe noma ngomthombo Amafayela amancane. Ukuze uhlanganise Amafayela Amancane, bheka ingxenye ethi Ukuqalisa ukuze uthole ukuthi ungasetha kanjani indawo yakho yokuthuthukisa ukuze usebenzise imiyalo edingekayo.
Amathuluzi okuhlanganiswa ezinkampani zangaphandle angase asebenze ne-Bootstrap, kodwa awasekelwe ithimba lethu eliyinhloko.
Okuguquguqukayo kusetshenziswa kuyo yonke iphrojekthi njengendlela yokuhlanganisa nokwabelana ngamavelu asetshenziswa kakhulu njengemibala, isikhala, noma izitaki zefonti. Ukuze uthole ukwaziswa okwengeziwe, sicela ubone i-Customizer .
Sebenzisa kalula izikimu zemibala ezimbili: i-grayscale ne-semantic. Imibala engwevu inikeza ukufinyelela okusheshayo kumathunzi avamile amnyama kuyilapho i-semantiki ihlanganisa imibala ehlukahlukene eyabelwe amanani onomongo anenjongo.
@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;
Sebenzisa noma yikuphi kwalokhu okuguquguqukayo kwemibala njengoba kunjalo noma ukwabele kabusha kokuguquguqukayo okunengqondo kwephrojekthi yakho.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
Idlanzana lezinto eziguquguqukayo zokwenza ngokwezifiso izici ezibalulekile zohlaka lwamathambo esayithi lakho.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
Yenza isitayela kalula izixhumanisi zakho ngombala olungile onevelu eyodwa kuphela.
// 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;
}
}
Qaphela ukuthi @link-hover-color
isebenzisa umsebenzi, elinye ithuluzi elimangalisayo elivela kokuncane, ukuze lidale ngokuzenzakalelayo umbala olungile ohambisa phezulu. Ungasebenzisa darken
, lighten
, saturate
, futhi desaturate
.
Setha kalula uhlobo lwakho lokubhala, usayizi wombhalo, okuholayo, nokuningi ngeziguquko ezimbalwa ezisheshayo. I-Bootstrap isebenzisa lezi futhi ukuze inikeze imiksi ye-typographic elula.
@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;
Izinguquko ezimbili ezisheshayo zokwenza ngokwezifiso indawo negama lefayela lezithonjana zakho.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
Izingxenye kuyo yonke i-Bootstrap zisebenzisa okuguquguqukayo okuzenzakalelayo ukusetha amanani avamile. Nazi ezisetshenziswa kakhulu.
@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;
Izingxube zabathengisi ziyimiksi ukusiza ukusekela iziphequluli eziningi ngokufaka zonke iziqalo zomthengisi ezifanele ku-CSS yakho ehlanganisiwe.
Setha kabusha imodeli yebhokisi lezingxenye zakho nge-mixin eyodwa. Ukuze uthole umongo, bona lesi sihloko esiwusizo esivela ku-Mozilla .
I-mixin yehlisiwe kusukela ku-v3.2.0, ngokwethulwa kwe-Autoprefixer. Ukuze ulondoloze ukuhambisana nokubuyela emuva, i-Bootstrap izoqhubeka nokusebenzisa i-mixin ngaphakathi kuze kube i-Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
Namuhla zonke iziphequluli zesimanje zisekela isici esingenasiqalo border-radius
. Kanjalo, ayikho i- .border-radius()
mixin, kodwa i-Bootstrap ihlanganisa izinqamuleli zokuzungeza ngokushesha amakhona amabili ohlangothini oluthile lwento.
.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;
}
Uma izethameli zakho eziqondisiwe zisebenzisa iziphequluli zakamuva nezinkulu kakhulu namadivayisi, qiniseka ukuthi usebenzisa box-shadow
isakhiwo sodwa. Uma udinga ukusekelwa kwamadivayisi amadala e-Android (pre-v4) kanye ne-iOS (pre-iOS 5), sebenzisa imiksi ehoxisiwe ukuze uthathe -webkit
isiqalo esidingekayo.
I-mixin ihoxisiwe kusukela ku-v3.1.0, njengoba i-Bootstrap ingasekeli ngokusemthethweni izinkundla eziphelelwe yisikhathi ezingasisekeli isakhiwo esijwayelekile. Ukuze ulondoloze ukuhambisana nokubuyela emuva, i-Bootstrap izoqhubeka nokusebenzisa i-mixin ngaphakathi kuze kube i-Bootstrap v4.
Qiniseka ukuthi usebenzisa rgba()
imibala emabhokisini akho ezithunzi ukuze ahlangane ngokuphumelelayo nezingemuva.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
Izingxube eziningi zokuguquguquka. Setha lonke ulwazi loshintsho ngalolodwa, noma ucacise ukubambezeleka okuhlukile nobude besikhathi njengoba kudingeka.
Amamiksi ahoxisiwe kusukela ku-v3.2.0, ngokwethulwa kwe-Autoprefixer. Ukuze ulondoloze ukuhambisana nokubuyela emuva, i-Bootstrap izoqhubeka nokusebenzisa imiksi ngaphakathi kuze kube i-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;
}
Zungezisa, sikala, humusha (susa), noma tshekisa noma iyiphi into.
Amamiksi ahoxisiwe kusukela ku-v3.2.0, ngokwethulwa kwe-Autoprefixer. Ukuze ulondoloze ukuhambisana nokubuyela emuva, i-Bootstrap izoqhubeka nokusebenzisa imiksi ngaphakathi kuze kube i-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;
}
I-mixin eyodwa yokusebenzisa zonke izici zokugqwayiza ze-CSS3 kusimemezelo esisodwa kanye nezinye izingxube zezakhiwo ezingazodwana.
Amamiksi ahoxisiwe kusukela ku-v3.2.0, ngokwethulwa kwe-Autoprefixer. Ukuze ulondoloze ukuhambisana nokubuyela emuva, i-Bootstrap izoqhubeka nokusebenzisa imiksi ngaphakathi kuze kube i-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;
}
Setha ukufiphala kwazo zonke iziphequluli futhi unikeze isiphetho filter
se-IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
Nikeza umongo wezilawuli zefomu ngaphakathi kwenkambu ngayinye.
.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
}
Khiqiza amakholomu nge-CSS ngaphakathi kwento eyodwa.
.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;
}
Shintsha kalula noma yimiphi imibala emibili wenze igradient yangemuva. Thuthukela kakhulu futhi usethe isiqondiso, sebenzisa imibala emithathu, noma sebenzisa i-radial gradient. Nge-mixin eyodwa uthola wonke ama-syntaxes anesiqalo ozowadinga.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
Ungaphinda ucacise i-engeli yemibala emibili ejwayelekile, i-gradient yomugqa:
#gradient > .directional(#333; #000; 45deg);
Uma udinga i-gradient yesitayela se-barber-stripe, kulula lokho, futhi. Vele ucacise umbala owodwa futhi sizomboza umugqa omhlophe ocwebezelayo.
#gradient > .striped(#333; 45deg);
Phakamisa i-ante futhi usebenzise imibala emithathu esikhundleni salokho. Setha umbala wokuqala, umbala wesibili, ukuma kombala wombala wesibili (inani eliyiphesenti elifana no-25%), nombala wesithathu ngale miksi:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Amakhanda phezulu! Uma kwenzeka udinga ukususa i-gradient, qiniseka ukuthi ususa noma iyiphi i-IE-specific filter
okungenzeka ukuthi uyingezile. Ungakwenza lokho ngokusebenzisa i- .reset-filter()
mixin eceleni background-image: none;
.
Izingxube zezinsiza ziyingxube ehlanganisa izakhiwo ze-CSS ezingahlobene ukuze kuzuzwe umgomo othile noma umsebenzi.
Khohlwa ukwengeza class="clearfix"
kunoma iyiphi into futhi esikhundleni salokho wengeze .clearfix()
imiksi lapho kufanele khona. Isebenzisa i- micro clearfix evela ku- Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
Ngokushesha beka phakathi noma iyiphi into ngaphakathi komzali wayo. Idinga width
noma max-width
ukusethwa.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Cacisa ubukhulu bento kalula.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Lungiselela kalula izinketho zokushintsha usayizi wanoma iyiphi indawo yombhalo, nanoma iyiphi enye into. Okuzenzakalelayo ekuziphatheni kwesiphequluli okujwayelekile ( both
).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Nciphisa kalula umbhalo nge-ellipsis nge-mixin eyodwa. Idinga into ukuthi ibe block
noma inline-block
ileveli.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
Cacisa izindlela ezimbili zesithombe kanye nobukhulu besithombe esingu-@1x, futhi i-Bootstrap izohlinzeka ngombuzo we-@2x wemidiya. Uma unezithombe eziningi ongazisebenzisa, cabanga ukubhala isithombe sakho se-retina i-CSS mathupha embuzweni owodwa wemidiya.
.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);
}
Ngenkathi i-Bootstrap yakhelwe kokuthi Okuncane, futhi inechweba elisemthethweni le-Sass . Siyigcina endaweni ehlukile ye-GitHub futhi siphatha izibuyekezo ngombhalo wokuguqula.
Njengoba ichweba le-Sass linerepo ehlukile futhi lisebenzela izethameli ezihluke kancane, okuqukethwe kwephrojekthi kuhluke kakhulu kuphrojekthi enkulu ye-Bootstrap. Lokhu kuqinisekisa ukuthi ichweba lakwa-Sass lihambisana nezinhlelo eziningi ezisekelwe kwa-Sass ngangokunokwenzeka.
Indlela | Incazelo |
---|---|
lib/ |
Ikhodi ye-Ruby gem (ukulungiswa kwe-Sass, ukuhlanganiswa kwe-Rails ne-Compass) |
tasks/ |
Imibhalo yokuguqula (ukuguqula umfula ukhuphuke Kancane kuye ku-Sass) |
test/ |
Ukuhlolwa kokuhlanganiswa |
templates/ |
I-manifest yephakheji yekhampasi |
vendor/assets/ |
I-Sass, i-JavaScript, namafayela efonti |
Rakefile |
Imisebenzi yangaphakathi, efana ne-rake nokuguqula |
Vakashela inqolobane ye-GitHub yembobo ye-Sass ukuze ubone lawa mafayela esebenza.
Ukuze uthole ulwazi mayelana nendlela yokufaka nokusebenzisa i-Bootstrap ye-Sass, thintana ne- GitHub repository readme . Iwumthombo osesikhathini samanje futhi ihlanganisa ulwazi oluzosetshenziswa ne-Rails, Compass, namaphrojekthi ajwayelekile akwa-Sass.