CSS
Goobaha caalamiga ah ee CSS, curiyeyaasha HTML ee aasaasiga ah ayaa qaabaysan oo lagu xoojiyey fasallo la fidin karo, iyo nidaam heersare ah.
Dulmar
Hoos ka hel qaybaha muhiimka ah ee kaabayaasha Bootstrap, oo ay ku jiraan habkayaga horumarinta shabakadaha ka sii wanaagsan, degdega ah.
HTML5 docture
Bootstrap waxay isticmaashaa walxaha HTML qaarkood iyo sifooyinka CSS ee u baahan isticmaalka HTML5 doctype. Ku dar bilawga dhammaan mashaariicdaada.
<!DOCTYPE html>
<html lang="en">
...
</html>Mobile marka hore
Iyada oo la adeegsanayo Bootstrap 2, waxaan ku darnay qaabab saaxiibtinimo mobilada ikhtiyaariga ah ee dhinacyada muhiimka ah ee qaabka. Iyadoo Bootstrap 3, waxaan dib u qornay mashruuca si uu u noqdo saaxiibtimo mobilada bilawgii. Halkii lagu dari lahaa qaababka mobilada ee ikhtiyaariga ah, waxaa lagu dubay isla markiiba gudaha. Dhab ahaantii, Bootstrap waa mobile marka hore . Hababka ugu horreeya ee mobilada ayaa laga heli karaa dhammaan maktabadda halkii laga heli lahaa faylal kala duwan.
Si aad u hubiso samaynta saxda ah iyo taabashada soo dhawaynta, ku dar summada meta ee aragtida kaaga <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Waxaad ka joojin kartaa awoodaha soo dhawaynta ee aaladaha moobaylka adiga oo ku daraya user-scalable=nocalaamada meta ee daawashada. Tani waxay curyaamisaa soo-dhowaynta, taasoo la macno ah isticmaalayaashu inay awoodaan inay duuduubaan oo keliya, oo waxay keentaa in goobtaada ay dareemaan xoogaa codsi ah. Guud ahaan, kuma talineyno tan goob kasta, markaa isticmaal taxaddar!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Qoraalka qoraalka iyo isku xirka
Bootstrap wuxuu dejiyaa bandhig caalami ah oo aasaasi ah, sawir-qoris, iyo qaababka isku xirka. Gaar ahaan, waxaanu:
- Ku
background-color: #fff;dhejibody - Isticmaal
@font-family-base,@font-size-base, iyo@line-height-basesifooyinka sida saldhigga qoraalladayada - Deji midabka isku xirka caalamiga ah
@link-coloroo mari xariiqyada hoose oo keliya:hover
Qaababkaan waxaa laga heli karaa gudaha scaffolding.less.
Caadiye.css
Si loo horumariyo samaynta iskutallaabtu, waxaanu isticmaalnaa Normalize.css , mashruuc ay sameeyeen Nicolas Gallagher iyo Jonathan Neal .
Konteenarada
Bootstrap wuxuu u baahan yahay shay ka kooban si uu u duubo waxa ku jira goobta oo uu u dejiyo nidaamka xariijinta. Waxaad dooran kartaa mid ka mid ah labada weel si aad ugu isticmaasho mashaariicdaada. Ogsoonow, in paddingka badan iyo in ka badan, labada weel midna lama degi karo.
U isticmaal .containerweel ballac go'an oo jawaaba.
<div class="container">
...
</div>U isticmaal .container-fluidweel ballac buuxa ah, oo ku dhereran balladhka muuqaalkaaga.
<div class="container-fluid">
...
</div>Nidaamka grid
Bootstrap-ka waxa ku jira ka jawaab celin, nidaamka shabagga dareeraha ugu horreeya ee wareega kaas oo si habboon u miisaama ilaa 12 tiir marka uu qalabku ama cabbirka daawashada kordho. Waxaa ku jira fasallo horay loo sii qeexay oo loogu talagalay ikhtiyaarrada qaabeynta fudud, iyo sidoo kale isku-dhafka xoogga leh ee soo saarista qaab-dhismeedyo badan .
Hordhac
Nidaamyada xayndaabyada waxaa loo isticmaalaa abuurista qaabaynta bogga iyada oo loo marayo taxane taxane ah iyo tiirar kuwaas oo dejinaya macluumaadkaaga. Waa kan sida nidaamka xadhkaha Bootstrap u shaqeeyo:
- Safafka waa in lagu dhejiyaa gudaha
.container(ballac go'an) ama.container-fluid(ballac buuxa) si loo toosiyo iyo suufka habboon. - Isticmaal safafka si aad u abuurto kooxo toosan oo tiirar ah.
- Waxa ku jira waa in lagu dhejiyaa tiirarka dhexdooda, oo tiirar kaliya ayaa laga yaabaa inay noqdaan carruurta safafka ah.
- Fasalada grid ee horay loo sii qeexay waxay jecel yihiin
.rowoo.col-xs-4diyaar u yihiin samaynta qaabaynta shabakada. Isku darka yar ayaa sidoo kale loo isticmaali karaa qaabab badan oo semantic ah. - Tiirarku waxay abuuraan godad (faraqyo u dhexeeya nuxurka tiirka) iyada oo loo marayo
padding. suufkaas waxaa lagu dhimayaa safafka kowaad iyo kan u dambeeya iyadoo loo sii marayo marin taban ee.rows. - Margin taban ayaa ah sababta tusaalayaasha hoose ay uga baxeen. Waa in waxa ku jira tiirarka shabagga ay la jaanqaadaan nuxurka aan xidhidh ahayn.
- Tiirarka xayndaabku waxa la abuuray iyadoo la tilmaamayo tirada laba iyo tobanka tiir ee la heli karo ee aad rabto inaad ballaadhiso. Tusaale ahaan, saddex tiir oo siman ayaa isticmaali doona saddex
.col-xs-4. - Haddii in ka badan 12 tiir la dhigo hal saf, koox kasta oo tiirar dheeraad ah ayaa, hal unug ahaan, ku duubi doona khad cusub.
- Fasallada grid waxay khuseeyaan aaladaha leh ballaca shaashadda ee ka weyn ama la mid ah cabbirrada barta goynta, oo waxay meesha ka saaraan fasallada khadka ee lagu bartilmaameedsado aaladaha yaryar. Sidaa darteed, tusaale ahaan ku dabaqida
.col-md-*fasal kasta curiye kaliya saamayn kuma yeelanayso qaabaynta aaladaha dhexdhexaadka ah laakiin sidoo kale waxay saamaynaysaa aaladaha waaweyn haddii.col-lg-*fasalku aanu joogin.
U fiirso tusaalooyinka ku dabaqa mabaadi'dan xeerkaaga.
Weydiimaha warbaahinta
Waxaan u isticmaalnaa su'aalaha warbaahinta soo socda ee galalkayaga yar si aan u abuurno meelaha furaha ah ee nidaamkayaga khadka.
/* 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) { ... }Waxaan mararka qaarkood ku balaadhinaa weydiimahan warbaahinta si aan ugu darno max-widthsi loo xaddido CSS-ga aaladaha cidhiidhiga ah.
@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) { ... }Ikhtiyaarada grid
Eeg sida qaybaha nidaamka xadhkaha Bootstrap uga shaqeeyo qalabyo badan oo leh miis anfacaya.
| Aalado yaryar oo dheeraad ah oo telefoonada ah (<768px) | Aaladaha yaryar ee kiniiniyada (≥768px) | Qalab dhexdhexaad ah Desktops (≥992px) | Aaladaha waaweyn ee Desktops (≥1200px) | |
|---|---|---|---|---|
| Habdhaqanka qulqulka | Horizontal mar walba | Burburtay si loo bilaabo, toosan oo ka sarreeya meelaha jabinta | ||
| Ballaca weelka | Midna (oto) | 750px | 970px | 1170px |
| Horgalayaasha fasalka | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # tiirarka | 12 | |||
| Ballaca tiirka | Baabuur | ~ 62px | ~ 81px | ~ 97px |
| Ballaca godka | 30px (15px dhinac kasta ee tiirka) | |||
| Nstable | Haa | |||
| Deminta | Haa | |||
| Dalbashada safafka | Haa | |||
Tusaale: Is dulsaar-ilaa-horizontal
Adiga oo isticmaalaya hal fasal oo .col-md-*shabaq ah, waxaad abuuri kartaa nidaam qafiif ah oo aasaasi ah kaas oo ka bilaabma qalabyada moobilka iyo aaladaha tablet-ka ah (kuwa yar iyo kuwa yarba) ka hor inta aanad toos u noqon qalabka miiska (dhexdhexaadka ah). Dhig tiirarka shabagga ah mid kasta .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>Tusaale: weelka dareeraha ah
U rog qaab kasta oo qaab-balleed go'an qaab-dhismeedka ballac buuxa adiga oo u beddelaya meesha ugu .containersarreysa .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>Tusaale: Mobile iyo desktop
Ma doonaysaa in tiirarkaagu ay si fudud ugu xidhaan aaladaha yaryar? Isticmaal qalabka dheeraadka ah ee yaryar iyo kuwa dhexdhexaadka ah ee fasalada qalabka adigoo ku daraya .col-xs-* .col-md-*tiirarkaaga. Fiiri tusaalaha hoose si aad fikrad wanaagsan u hesho sida ay dhammaan u shaqeeyaan.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>Tusaale: Mobile, tablet, desktop
Ku dhis tusaalihii hore adiga oo abuuraya qaabayn aad u firfircoon oo awood badan leh oo leh fasalo tablet .col-sm-*ah.
.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>Tusaale: duubista tiirka
Haddii in ka badan 12 tiir la dhigo hal saf, koox kasta oo tiirar dheeraad ah ayaa, hal unug ahaan, ku duubi doona khad cusub.
.col-xs-9
.col-xs-4
Laga soo bilaabo 9 + 4 = 13> 12, 4-column-ball div waxa lagu duuduubay xariiq cusub sidii hal unug oo isku xidhan.
Laga soo bilaabo 9 + 4 = 13> 12, 4-column-ball div waxa lagu duuduubay xariiq cusub sidii hal unug oo isku xidhan.
.col-xs-6 Tiirarrada
xiga waxay ku sii socdaan khadka cusub.
xiga waxay ku sii socdaan khadka cusub.
<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>Tiirka jawaab celinta ayaa dib u dejinaya
Iyada oo afarta heer ee xajmigu diyaar yihiin waxaad ku xidhan tahay inaad la kulanto arrimo halkaas, meelaha goynta qaarkood, tiirarkaagu si sax ah uma cadda sida mid ka dheer yahay kan kale. Si taas loo hagaajiyo, isticmaal isku darka a .clearfixiyo fasaladayada utility ee ka jawaabaya .
.col-xs-6 .col-sm-3
Wax ka beddel aragtidaada ama ka eeg talefankaaga tusaale ahaan.
Wax ka beddel aragtidaada ama ka eeg talefankaaga tusaale ahaan.
.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>Marka lagu daro nadiifinta tiirka meelaha jabinta jawaabaha leh, waxa laga yaabaa inaad u baahato inaad dib u dajin u samayso, riixdo, ama jiido . Fiiri tan ficil ahaan tusaalaha shabkada .
<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>Tiirarka dib u dejinta
Tiirarka u dhaqaaq dhanka midig adigoo isticmaalaya .col-md-offset-*fasalo. Fasaladani waxay kordhiyaan soohdinta bidix ee tiirarka iyagoo *tiirar ah. Tusaale ahaan, waxa .col-md-offset-4uu .col-md-4ka wareegayaa afar tiir.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>Waxa kale oo aad ka saari kartaa deminta heerarka hoose ee .col-*-offset-0fasalada.
<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>Tiirarka buulka
Si aad macluumaadkaaga ugu dhejiso shabagga caadiga ah, ku dar tiirar cusub .rowiyo set oo ah .col-sm-*tiir jira .col-sm-*. Safka buulka leh waa in ay ku jiraan tiro tiirar ah oo isku geynaya 12 ama ka yar (looma baahna in aad isticmaasho dhammaan 12 tiir ee la heli karo).
Nivå 1: .col-sm-9
Nivå 2: .col-xs-8 .col-sm-6
Nivå 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>Dalbashada safafka
Si sahal ah u beddel nidaamka tiirarkayada shabagga ah ee ku dhex dhisan oo leh fasallada wax ka beddelaha .col-md-push-*..col-md-pull-*
.col-md-9 .col-md-push-3
.col-md-3 .col-md-jiid-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>Isku darka yar iyo doorsoomayaasha
Marka laga soo tago fasallada jaranjarada ee horay loo dhisay ee qaabaynta degdega ah, Bootstrap waxa ku jira doorsoomayaal yar iyo isku-dar si aad si dhakhso leh u dhaliso qaab-dhismeedyadaada fudud, ee semantic.
Kala duwanaansho
Kala duwanaanshuhu waxay go'aamiyaan tirada tiirarka, ballaca maroodiga, iyo barta weydiinta warbaahinta ee laga bilaabayo tiirarka sabeynaya. Waxaan u isticmaalnaa kuwan si aan u soo saarno fasallada jaranjarada horay loo sii qeexay ee kor ku xusan, iyo sidoo kale isku darka caadiga ah ee hoos ku taxan.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;Isku qas
Isku-darka waxa loo istcimaalaa iyada oo lala kaashanayo doorsoomayaasha xadhkaha goosha si loo soo saaro semantic CSS ee tiirarka shabaqyada gaarka ah.
// 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));
}
}Tusaale ahaan isticmaalka
Waxaad u beddeli kartaa doorsoomayaasha qiyamkaaga gaarka ah, ama waxaad isticmaali kartaa isku darka qiimahooda caadiga ah. Halkan waxaa ah tusaale isticmaalka goobaha caadiga ah si aad u abuurto qaabaynta laba-geesood oo farqiga u dhexeeya.
.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>Qoraalka qoraalka
Ciwaanka
Dhammaan cinwaannada HTML, <h1>iyada oo loo marayo <h6>, waa la heli karaa. .h1iyada oo loo marayo .h6fasallo sidoo kale waa la heli karaa, marka aad rabto in aad ku habboonaato qaabka xarfaha cinwaanka laakiin weli aad rabto in qoraalkaaga lagu muujiyo khadka.
h1. Bootstrap cinwaanka |
Semibold 36px |
h2. Bootstrap cinwaanka |
Semibold 30px |
h3. Bootstrap cinwaanka |
Semibold 24px |
h4. Bootstrap cinwaanka |
Semibold 18px |
h5. Bootstrap cinwaanka |
Semibold 14px |
h6. Bootstrap cinwaanka |
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>Ku samee qoraal fudud, qoraal sare ciwaan kasta oo leh <small>sumad guud ama .smallfasalka.
h1. Ciwaanka Bootstrap qoraalka sare |
h2. Ciwaanka Bootstrap qoraalka sare |
h3. Ciwaanka Bootstrap qoraalka sare |
h4. Ciwaanka Bootstrap qoraalka sare |
h5. Ciwaanka Bootstrap qoraalka sare |
h6. Ciwaanka Bootstrap qoraalka sare |
<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>nuqul jirka ah
Bootstrap's default default font-sizewaa 14px , oo line-heightleh 1.428 . Tani waxay khusaysaa <body>dhammaan cutubyada. Intaa waxaa dheer, <p>(paragraphs) waxay helayaan dhexda hoose ee kala bar dhererkooda la xisaabiyay (10px sida caadiga ah).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies baabuurta.
Cum sociis natoque penatibus iyo magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id un mi porta gravida iyo eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>Nuqulka jirka ledhka
Ka dhig cutubka mid taagan adiga oo ku daraya .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor actor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>Lagu dhisay wax ka yar
Miisaanka qoraalku wuxuu ku salaysan yahay laba doorsoomayaal ka yar doorsoomayaal . yar : @font-size-baseiyo @line-height-base. Midka koowaad waa cabbirka font-saldhigga ee la isticmaalo oo dhan kan labaadna waa dhererka xarriiqda saldhigga. Waxaan isticmaalnaa doorsoomayaashaas iyo xisaab fudud si aan u abuurno xad-dhaafka, suufka, iyo dhererka xariiqyada nooceena oo dhan iyo in ka badan. Habee iyaga oo Bootstrap la qabsiga
Qodobbada qoraalka khadka
Qoraal calaamadeysan
Si aad u muujiso socodsiinta qoraalka ay ugu wacan tahay ku habboonaantiisa xaalad kale, isticmaal <mark>summada.
Waxaad u isticmaali kartaa sumadda sumaddaiftiiminqoraal.
You can use the mark tag to <mark>highlight</mark> text.Qoraalka la tirtiray
Si aad u muujiso baloogyada qoraalka ee la tirtiray isticmaal <del>summada.
Sadarka qoraalka waxaa loola jeedaa in loola dhaqmo sidii qoraal la tirtiray.
<del>This line of text is meant to be treated as deleted text.</del>Qoraal ka soo bax
Si aad u muujiso baloogyada qoraalka ee aan hadda khusayn isticmaal <s>summada.
Sadar qoraalkan waxa loola jeedaa in loola dhaqmo si aan sax ahayn.
<s>This line of text is meant to be treated as no longer accurate.</s>Qoraal la galiyay
Si aad u muujiso ku-darka dukumeentiga isticmaal <ins>summada
Sadar qoraalkan waxaa loola jeedaa in loola dhaqmo sidii wax lagu kordhinayo dukumeentiga.
<ins>This line of text is meant to be treated as an addition to the document.</ins>Qoraal hoosta laga xarriiqay
Si aad qoraalka hoosta uga xariiqdo adeegso <u>summada
Sadarka qoraalkani wuxuu u dhigi doonaa sida hoosta laga xarriiqay
<u>This line of text will render as underlined</u>Isticmaal calaamadaha xoogga saara ee HTML oo leh qaabab khafiif ah.
Qoraal yar
Si aad xoogga uga saarto layn ama blocks qoraalka, isticmaal <small>summada si aad qoraalka ugu dejiso 85% cabbirka waalidka. Cutubyada madaxdu waxay helayaan iyaga u gaar ah oo font-sizeloogu talagalay <small>curiyayaasha buulka leh.
Waxa kale oo aad isticmaali kartaa curiye khadka ah oo .smallku jira meel kasta <small>.
Sadar qoraalkan waxaa loola jeedaa in loola dhaqmo sidii far wanaagsan.
<small>This line of text is meant to be treated as fine print.</small>Dhiirran
Si loo xoojiyo qayb-qodob qoraal ah oo miisaan culus leh.
Qaybtan soo socota ee qoraalka waxa loo tarjumay qoraal geesinimo leh .
<strong>rendered as bold text</strong>Farta farcan
Si aad xoogga u saarto qayb yar oo qoraal ah oo leh fartaag.
Qaybtan soo socota ee qoraalka waxa loo turjumay sidii qoraal farta lagu fiiqay .
<em>rendered as italicized text</em>Walxaha beddelka ah
Dareen xor u ah isticmaalka <b>iyo <i>HTML5. <b>waxaa loola jeedaa in lagu muujiyo ereyada ama odhaahyada iyada oo aan la gudbin muhiimad dheeraad ah halka <i>ay u badan tahay cod, ereyo farsamo, iwm.
Fasalada toosinta
Si fudud qoraalka ugu toosi qaybaha leh fasalada toosinta qoraalka.
Qoraalka bidix ku toosan.
Qoraalka dhexda toosan.
Qoraal toosan.
Qoraal xaq ah
Qoraal duuban ma jiro.
<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>Fasalada isbeddelka
U beddelo qoraalka qaybo ka mid ah fasalo weynaynta qoraalka.
Qoraal hoose
Qoraal sare
Qoraal weyn
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>Soo gaabinta
Hirgelinta habaysan ee curiyaha HTML ee <abbr>soo gaabinta iyo gaabinnada si loo muujiyo nooca la fidiyay ee dul heehaabaya. Soo gaabinta sifada leh titleayaa leh xudduud hoose oo dhibco khafiif ah iyo calaamad caawimo dul heehaabaysa, taasoo siinaysa macnaha dheeraadka ah ee dullidda iyo isticmaalayaasha tignoolajiyada caawinta.
Soo gaabinta aasaasiga ah
Soo gaabinta ereyga sifo waa attr .
<abbr title="attribute">attr</abbr>Bilawga
Ku dar .initialismsoo gaabinta cabbirka farta wax yar ka yar.
HTML waa waxa ugu wanaagsan tan iyo rootiga la jarjaray.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>Cinwaanada
U soo bandhig macluumaadka xiriirka awoowaha kuugu dhow ama dhammaan shaqada oo dhan. Ku ilaali qaabaynta adiga oo ku dhameeya dhammaan sadarrada <br>.
Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Magaca buuxa
[email protected]
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Magaca buuxa
[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>Xigashooyinka
Si aad u soo xiganayso blocks of content ka il kale oo ka mid ah dukumeentigaaga.
blockquote ee caadiga ah
Ku duub HTML<blockquote> kasta sida xigashada. Xigashooyinka tooska ah, waxaan kugula talineynaa a .<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si toos ah u eegaya.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>Ikhtiyaarada Blockquote
Qaabka iyo nuxurka ayaa isbeddela ee kala duwanaanshiyaha fudud ee heerka <blockquote>.
Magacaabida isha
Ku dar si aad <footer>u aqoonsato isha. Ku duub magaca isha shaqada <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si toos ah u eegaya.
<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>Bandhigyo kale
Ku dar .blockquote-reverseblockquote oo leh nuxur sax ah.
<blockquote class="blockquote-reverse">
...
</blockquote>Liisaska
Aan la dalban
Liiska walxaha aanu amarku si cad u khusayn.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>Dalbaday
Liiska alaabta uu dalabku si cad u khuseeya.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>Aan habayn
Ka saar meesha caadiga ah list-styleiyo bidixda bidix ee alaabta liiska (carruurta degdega ah oo keliya). Tani waxay khusaysaa oo kaliya alaabta liiska carruurta ee dhow , taasoo la macno ah inaad u baahan doonto inaad ku darto fasalka liis kasta oo buul ah sidoo kale.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>Inline
Geli dhammaan shayada liiska hal xariiq oo leh display: inline-block;suuf khafiif ah.
- Lorem ipsum
- Phasellus iaculus
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
</ul>Sharaxaada
Liiska ereyada leh sharraxaaddooda la xidhiidha.
- Liiska sharraxaadda
- Liiska sharraxaadda ayaa ku habboon qeexida ereyada.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id un mi porta gravida iyo eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>Sharaxaad toosan
U samee shuruudaha iyo sharraxaadaha <dl>safka dhinac-dhinac ah. Wuxuu ku bilaabmaa isagoo isku dhejisan sida default <dl>s, laakiin marka navbarku balaadhiyo, sidaas oo kale samee kuwan.
- Liiska sharraxaadda
- Liiska sharraxaadda ayaa ku habboon qeexida ereyada.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id un mi porta gravida iyo 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>Toos u gooyn
Liisaska sharraxaadda tooska ah waxay gooyn doonaan ereyada aad u dheer ee ku habboon tiirka bidix ee leh text-overflow. Goobaha daawashada ee dhuuban, waxay u bedeli doonaan qaabka la isku dhejiyay ee caadiga ah.
Koodhka
Inline
Ku duub godadka koodka gudaha <code>.
Tusaale ahaan,
<section>waa in lagu duuduubaa sida khadadka.
For example, <code><section></code> should be wrapped as inline.Gelitaanka isticmaalaha
Isticmaal <kbd>si aad u muujiso gelinta sida caadiga ah lagu galo kiiboodhka.
Si aad u bedesho hagaha, ku qor
cdoo ku xiga magaca hagaha.
Si aad wax uga beddesho goobaha, taabo ctrl + ,
Si aad wax uga beddesho goobaha, taabo 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>block aasaasiga ah
U isticmaal <pre>khadadka koodka badan. Hubi inaad ka baxsato xagal kasta oo ku jira koodka si sax ah loo sameeyo.
<p> Tusaalaha qoraalka halkan...</p>
<pre><p>Sample text here...</p></pre>Waxaad si ikhtiyaari ah ugu dari kartaa .pre-scrollablefasalka, kaas oo dejin doona dhererka ugu badan ee 350px oo bixin doona y- dhidibka duuban.
Kala duwanaansho
Si aad u muujiso doorsoomayaasha isticmaal <var>tag.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>Tusaalaha wax soo saarka
Si aad u muujiso baloogyada muunada ka soo baxa barnaamijka isticmaal <samp>sumadda.
Qoraalkan waxaa loola jeedaa in loola dhaqmo sidii muunad ka soo baxay barnaamijka kombuyuutarka.
<samp>This text is meant to be treated as sample output from a computer program.</samp>Miisaska
Tusaalaha aasaasiga ah
Habaynta aasaasiga ah — suufka iftiinka iyo kala qaybinta tooska ah - ku dar fasalka saldhiga .tablemid kasta <table>. Waxa laga yaabaa inay u muuqato mid aad u adag, laakiin marka la eego isticmaalka baahsan ee miisaska loogu talagalay pluginsyada kale sida jadwalka iyo taariikhda, waxaan dooranay inaan ka soocno qaababka miiskayada caadada u ah.
| # | Magaca koowaad | Magaca Dambe | Magaca isticmaale |
|---|---|---|---|
| 1 | Calaamadee | Otto | @mdo |
| 2 | Yacquub | Thornton | @ buuran |
| 3 | Larry | Shimbirka |
<table class="table">
...
</table>Safafka la jeexay
Isticmaal .table-stripedsi aad ugu darto xariijimo zebra saf kasta oo ku dhex jira <tbody>.
Waafaqsanaanta browser-ka
Miisaska xariifsan waxaa lagu qaabeeyey :nth-childxulashada CSS, kaas oo aan laga heli karin Internet Explorer 8.
| # | Magaca koowaad | Magaca Dambe | Magaca isticmaale |
|---|---|---|---|
| 1 | Calaamadee | Otto | @mdo |
| 2 | Yacquub | Thornton | @ buuran |
| 3 | Larry | Shimbirka |
<table class="table table-striped">
...
</table>Miis xuduudeed
Ku dar .table-borderedsoohdimaha dhammaan dhinacyada miiska iyo unugyada.
| # | Magaca koowaad | Magaca Dambe | Magaca isticmaale |
|---|---|---|---|
| 1 | Calaamadee | Otto | @mdo |
| 2 | Yacquub | Thornton | @ buuran |
| 3 | Larry | Shimbirka |
<table class="table table-bordered">
...
</table>Lullaab safafka
Ku dar .table-hoversi aad awood ugu yeelatid heerka duleelka ee safafka miiska gudaha a <tbody>.
| # | Magaca koowaad | Magaca Dambe | Magaca isticmaale |
|---|---|---|---|
| 1 | Calaamadee | Otto | @mdo |
| 2 | Yacquub | Thornton | @ buuran |
| 3 | Larry | Shimbirka |
<table class="table table-hover">
...
</table>Miis cufan
Ku dar .table-condensedsi aad miisaska uga dhigto kuwo is haysta adiga oo gooyay suufka unugga kala badh.
| # | Magaca koowaad | Magaca Dambe | Magaca isticmaale |
|---|---|---|---|
| 1 | Calaamadee | Otto | @mdo |
| 2 | Yacquub | Thornton | @ buuran |
| 3 | Larry the Bird | ||
<table class="table table-condensed">
...
</table>Fasalada macnaha guud
Isticmaal fasallada macnaha guud si aad u midabayso safafka miiska ama unugyada gaarka ah.
| Fasalka | Sharaxaada |
|---|---|
.active |
Ku dabaqa midabka duleelka saf ama unug gaar ah |
.success |
Waxay tuseysaa fal guul ah ama mid togan |
.info |
Waxay muujinaysaa isbeddel ama ficil dhexdhexaad ah oo wargelin ah |
.warning |
Waxay tuseysaa digniin u baahan in laga fiirsado |
.danger |
Waxay muujinaysaa fal xun ama khatar ah |
| # | Tiirka ciwaanka | Tiirka ciwaanka | Tiirka ciwaanka |
|---|---|---|---|
| 1 | Nuxurka safafka | Nuxurka safafka | Nuxurka safafka |
| 2 | Nuxurka safafka | Nuxurka safafka | Nuxurka safafka |
| 3 | Nuxurka safafka | Nuxurka safafka | Nuxurka safafka |
| 4 | Nuxurka safafka | Nuxurka safafka | Nuxurka safafka |
| 5 | Nuxurka safafka | Nuxurka safafka | Nuxurka safafka |
| 6 | Nuxurka safafka | Nuxurka safafka | Nuxurka safafka |
| 7 | Nuxurka safafka | Nuxurka safafka | Nuxurka safafka |
| 8 | Nuxurka safafka | Nuxurka safafka | Nuxurka safafka |
| 9 | Nuxurka safafka | Nuxurka safafka | Nuxurka safafka |
<!-- 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>U gudbinta macnaha tignoolajiyada caawinta
Isticmaalka midabka si loogu daro macnaha safka miiska ama unugyada gaarka ah ayaa bixiya kaliya tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (qoraalka muuqda ee safka/unugga miiska ee khuseeya), ama lagu daro habab kale, sida qoraal dheeraad ah oo ku qarsoon .sr-onlyfasalka.
Miisaska jawaab celinta
Samee miisas jawaab celin ah adigoo ku duubaya mid kasta .tablesi .table-responsiveaad uga dhigto inay si toos ah ugu rogrogmadaan aaladaha yaryar (ka hooseeya 768px). Markaad ku aragto wax kasta oo ka weyn 768px ballaaran, ma arki doontid wax farqi ah oo miisaskan ah.
Goyn toosan/goyn
Miisaska ka jawaaba ayaa isticmaala overflow-y: hidden, kaas oo gooya wax kasta oo ka baxsan cidhifyada hoose ama sare ee miiska. Gaar ahaan, tani waxay gooyn kartaa liiska hoos-u-dhaca iyo aaladaha kale ee qolo saddexaad.
Firefox iyo goobaha shaqada
Firefox waxa ay leedahay habayn gaddoon oo qallafsan oo ku lug leh widthtaas oo faragelinaysa miiska wax ka qabashada. Tan lama tirtiri karo la'aanteed jabsiga gaarka ah ee Firefox-ka oo aynaan ku bixin Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}Macluumaad intaas ka badan, akhri jawaabtan Stack Overflow .
| # | Cinwaanka shaxda | Cinwaanka shaxda | Cinwaanka shaxda | Cinwaanka shaxda | Cinwaanka shaxda | Cinwaanka shaxda |
|---|---|---|---|---|---|---|
| 1 | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska |
| 2 | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska |
| 3 | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska |
| # | Cinwaanka shaxda | Cinwaanka shaxda | Cinwaanka shaxda | Cinwaanka shaxda | Cinwaanka shaxda | Cinwaanka shaxda |
|---|---|---|---|---|---|---|
| 1 | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska |
| 2 | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska |
| 3 | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska |
<div class="table-responsive">
<table class="table">
...
</table>
</div>Foomamka
Tusaalaha aasaasiga ah
Koontaroolada foomka shakhsi ahaaneed waxay si toos ah u helaan qaar ka mid ah habaynta caalamiga ah. Dhammaan qoraallada <input>, <textarea>, iyo <select>curiyeyaasha leh .form-controlwaxaa loo dejiyay si width: 100%;default. Ku duub calaamadaha iyo kontaroolada .form-groupkala fogeynta ugu wanaagsan.
<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>Ha isku darin kooxaha foom iyo kooxaha wax gelinta
Ha isku darin kooxaha qaab toos ah iyo kooxaha wax soo galinta . Taa beddelkeeda, buul kooxda galitaanka gudaha kooxda foomka.
Foomka khadka
Ku dar .form-inlinefoomkaaga (kaas oo aan ahayn inuu noqdo a <form>) ee kontaroolada xannibaadda bidix-la toosan. Tani waxay khusaysaa oo keliya foomamka ku jira goobaha daawashada kuwaas oo ah ugu yaraan 768px ballaaran.
Waxa laga yaabaa inay u baahdaan ballaadhka gaarka ah
Wax-soo-gelinta iyo xulashada waxay width: 100%;si toos ah ugu codsadeen Bootstrap. Foomamka khadka dhexdiisa, waxaan dib u dejineynaa width: auto;si kontaroolo badan ay ugu noolaan karaan isla xariiq isku mid ah. Iyada oo ku xidhan qaabkaaga, ballaadhka caadada ah ee dheeraadka ah ayaa loo baahan karaa.
Had iyo jeer ku dar calaamadaha
Akhristayaasha shaashadda waxay dhib kala kulmi doonaan foomamkaaga haddii aadan ku darin calaamadda wax kasta oo la geli karo. Foomamkaan khadka tooska ah, waxaad qarin kartaa summada adigoo isticmaalaya .sr-onlyfasalka. Waxaa jira habab kale oo kale oo lagu bixiyo summada tignoolajiyada caawinta, sida aria-label, aria-labelledbyama titlesifada. Haddii kuwan midkoodna aanu jirin, akhristayaasha shaashadda waxa laga yaabaa inay adeegsadaan placeholdersifada, haddii ay jiraan, laakiin ogow isticmaalka placeholderbeddelka hababka calaamadaynta kale aan lagula talin.
<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>Qaab toosan
Isticmaal Bootstrap's fasalada jaranjarada horay loo sii qeexay si aad isku waafajiso sumadaha iyo kooxaha kontaroolada qaab qaabayn toosan adoo ku daraya .form-horizontalfoomka (kaas oo aan ahayn inuu noqdo a <form>). Samaynta sidaas waxay u beddeshaa .form-groupinay u dhaqanto sida safafka xajmiyeedka, markaa looma baahna .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>Koontaroolada la taageeray
Tusaalooyinka kontaroolada qaabka caadiga ah ee lagu taageeray qaabaynta qaabka tusaalaha.
Gelida
Kantaroolka foomka ugu caansan, meelaha wax gelinta ku salaysan. Waxaa ku jira taageerada dhammaan noocyada HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, iyo color.
Nooca cadeynta ayaa loo baahan yahay
Wax-soo-gelinta waxa kaliya oo si buuxda loo qaabayn doonaa haddii typesi habboon loo sheego.
<input type="text" class="form-control" placeholder="Text input">Kooxaha wax gelinta
Si aad ugu darto qoraal ama badhamada isku dhafan ka hor iyo/ama ka dib qoraal kasta oo ku salaysan <input>, hubi qaybta kooxda galinta .
Meesha qoraalka
Kontoroolka foomka kaas oo taageeraya khadadka badan ee qoraalka. Beddel rowssifada marka loo baahdo.
<textarea class="form-control" rows="3"></textarea>Sanduuqyada hubinta iyo raadiyaha
Sanduuqyada hubinta waxaa loogu talagalay in lagu xusho hal ama dhowr ikhtiyaar oo liiska ku jira, halka raadiyayaashu ay yihiin kuwa badan oo laga dooranayo hal doorasho.
Sanduuqyada hubinta ee naafada ah iyo raadiyaha waa la taageerayaa, laakiin si loo bixiyo "aan la oggolayn" cursor kor u qaadida waalidka <label>, waxaad u baahan doontaa inaad .disabledfasalka ku darto waalidka .radio, .radio-inline, .checkbox, ama .checkbox-inline.
Default (la dulsaaray)
<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>Sanduuqyada jeeg-garaynta iyo raadiyaha
Isticmaal .checkbox-inlineama .radio-inlinefasalada sanduuqyada hubinta ama raadiyaha si aad u hesho kontaroolada ka soo muuqda isla xariiqda.
<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>Sanduuqyada hubinta iyo raadiyaha oo aan lahayn qoraal sumadeedka
Haddii aanad qoraal ku lahayn gudaha <label>, gelinta waxa loo dhigay sidaad filayso. Hadda waxa kaliya oo uu ka shaqeeyaa sanduuqyada jeeg-garaynta iyo raadiyaha. Xusuusnow inaad weli bixiso nooc ka mid ah calaamadaynta tignoolajiyada caawinta (tusaale ahaan, adigoo isticmaalaya 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>Dooro
Ogsoonow in qaar badan oo ka mid ah menus-ka-doorashada ee Safari iyo Chrome-waxay leeyihiin geeso wareegsan oo aan lagu beddeli karin border-radiusguryaha.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><select>Koontaroolada sifada leh , multiplexulashooyin badan ayaa lagu muujiyaa sida caadiga ah.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Xakamaynta taagan
Markaad u baahato inaad qoraal cad ku ag dhigto calaamada foomka gudaha foomka, isticmaal .form-control-staticfasalka a <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>Xaaladda diiradda
Waxaan meesha ka saarna outlinehababka caadiga ah ee kontaroolada foomamka oo aan box-shadowku dabaqno booskeeda :focus.
:focusGobolka demo
Tusaalaha kor ku xusan wuxuu isticmaalaa qaabab gaar ah dukumeentigeena si aan u muujino :focusgobolka a .form-control.
Gobolka naafada
Ku dar disabledsifada boolean gelinta si aad uga hortagto isdhexgalka isticmaalaha. Gelida naafada waxay u muuqdaan kuwo fudud oo ku dara not-allowedcursor.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>Goobaha naafada ah
Ku dar disabledsifada a <fieldset>si aad u joojiso dhammaan kontaroolada gudaha <fieldset>hal mar.
Digniin ku saabsan shaqeynta isku xirka<a>
Sida caadiga ah, daalacayaashu waxay ula dhaqmi doonaan dhammaan kontaroolada qaabka asalka ah ( <input>, <select>iyo <button>walxaha) gudaha <fieldset disabled>sida naafada, iyaga oo ka hortagaya isdhexgalka kiiboodhka iyo jiirka labadaba. Si kastaba ha ahaatee, haddii foomkaaga sidoo kale ay ku jiraan <a ... class="btn btn-*">xubno, kuwan waxaa la siin doonaa oo kaliya qaabka pointer-events: none. Sida lagu xusay qaybta ku saabsan gobolka naafada ah ee badhamada (iyo gaar ahaan qaybta-hoosaadka walxaha barroosinka), hantida CSS weli lama jaan qaadin oo si buuxda looguma taageero Opera 18 iyo wixii ka hooseeya, ama Internet Explorer 11, waana ku guulaystay. Kahortag isticmaalayaasha kiiboodhka inay awood u yeeshaan inay diiradda saaraan ama dhaqaajiyaan xiriiriyeyaashan. Markaa si aad badbaado u hesho, isticmaal JavaScript-ka caadiga ah si aad u damiso xidhiidhyadaas.
Waafaqsanaanta browser-ka
Iyadoo Bootstrap ay ku dabaqi doonto qaababkan dhammaan daalacashada, Internet Explorer 11 iyo kuwa hoose si buuxda uma taageeraan disabledsifada <fieldset>. Adeegso JavaScript-ka caadiga ah si aad u damiso goobta daalacashadan.
<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>Kaliya sheeg
Ku dar readonlysifada booleenka wax gelinta si aad uga hortagto wax ka beddelka qiimaha gelinta. Wax galinta akhri-kaliya waxay u muuqdaan kuwo fudud (sida kuwa naafada ah), laakiin waxay hayaan cursorka caadiga ah.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>Qoraalka caawinta
Qoraalka caawinta heerka xannibista ee xakamaynta foomka.
Ku xidhidhiyaha qoraalka caawimada kontaroolada foomka
Qoraalka caawimada waa in si cad loola xidhiidhiyaa xakamaynta foomka ee la xidhiidha isticmaalka aria-describedbysifada. Tani waxay hubin doontaa in tignoolajiyada caawinta - sida akhristayaasha shaashadda - ay ku dhawaaqi doonaan qoraalkan caawinta marka isticmaaluhu diiradda saaro ama galo kantaroolka.
<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>Gobolada ansaxinta
Bootstrap waxaa ka mid ah qaababka ansaxinta qaladka, digniinta, iyo gobolada guusha ee xakameynta foomka. Si aad u isticmaasho, ku dar .has-warning, .has-error, ama .has-successqaybta waalidka Mid kasta .control-label, .form-control, iyo .help-blockcutubkaas dhexdiisa ayaa heli doona qaababka ansaxinta.
U gudbinta xaaladda xaqiijinta tignoolajiyada caawinta iyo isticmaalayaasha indho-la'aanta ah
Isticmaalka qaababkan xaqiijinta si loo muujiyo xaaladda xakamaynta foom kaliya waxay bixisaa tilmaamo muuqaal ah, midab ku salaysan, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda - ama isticmaalayaasha indhoolayaasha ah.
Hubi in tilmaam kale oo dawladeed la bixiyay. Tusaale ahaan, waxaad ku dari kartaa tilmaamo ku saabsan gobolka <label>qoraalka xakamaynta foomka laftiisa (sida kiiska tusaalaha soo socda ee koodka), ku dar Glyphicon (oo leh qoraal kale oo habboon oo isticmaalaya .sr-onlyfasalka - eeg tusaalooyinka Glyphicon ), ama bixinta xannibaad qoraal ah oo dheeraad ah. Gaar ahaan tignoolajiyada caawinta, kontaroolada foomka aan ansax ahayn ayaa sidoo kale loo qoondayn karaa aria-invalid="true"sifo.
<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>Iyada oo leh astaamo ikhtiyaari ah
Waxa kale oo aad ku dari kartaa summada ra'yi-celinta ikhtiyaariga ah oo ay weheliso .has-feedbackiyo summada saxda ah.
Astaamaha jawaab celinta waxay la shaqeeyaan oo kaliya <input class="form-control">walxaha qoraalka ah.
Astaamaha, sumadaha, iyo kooxaha wax gelinta
Meelaynta gacanta ee summada jawaab-celinta ayaa looga baahan yahay soo-gelinta aan lahayn summada iyo kooxaha wax-gelinta ee leh wax-ku-darka dhanka midig. Waxaa si xoog leh lagugu dhiirigelinayaa inaad bixiso summada dhammaan agabka la geli karo sababo gelitaanka awgood. Haddi aad rabto in aad ka hortagto in calaamadaha la soo bandhigo, ku qari .sr-onlyfasalka. Haddii ay tahay inaad samayso calaamad la'aan, hagaaji topqiimaha summada jawaab-celinta. Kooxaha wax gelinta, ku hagaaji rightqiimaha ku habboon qiimaha pixel taas oo ku xidhan ballaca addonkaaga.
U gudbinta macnaha astaanta ee tignoolajiyada caawinta
Si loo hubiyo in tignoolajiyada caawinta - sida akhristayaasha shaashadda - ay si sax ah u gudbiyaan macnaha astaanta, qoraalka qarsoon ee dheeraadka ah waa in lagu daraa .sr-onlyfasalka oo si cad loola xiriiriyaa xakamaynta foomka ee la xidhiidha isticmaalka aria-describedby. Haddii kale, hubi in macnaha (tusaale ahaan, xaqiiqda ah in ay jirto digniin meel qoraal ah oo gaar ah) lagu gudbiyo qaab kale, sida beddelka qoraalka dhabta ah ee <label>la xidhiidha xakamaynta foomka.
In kasta oo tusaalooyinka soo socda ay hore u sheegeen xaaladda ansaxinta ee qaabkooda kontaroolada <label>qoraalka laftiisa, farsamada kor ku xusan (adeegsiga .sr-onlyqoraalka iyo aria-describedby) ayaa lagu daray ujeeddooyin tusaaleyn ah.
<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>Astaamo Ikhtiyaar ah oo ku jira foomamka jiifka iyo tooska ah
<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-onlyAstaamo ikhtiyaari ah oo leh calaamado qarsoon
Haddii aad .sr-onlyfasalka u isticmaasho si aad u qariso kontoroolka foomka <label>(halkii aad isticmaali lahayd xulashooyinka calaamadaynta, sida aria-labelsifada), Bootstrap wuxuu si toos ah u hagaajin doonaa booska astaanta marka lagu daro.
(guul)
@
(guul)
<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>Xakamaynta cabbirka
Deji dhererka adoo isticmaalaya fasalo sida .input-lg, oo deji ballaadhka adoo isticmaalaya fasalada safafka sida .col-lg-*.
Cabbirka dhererka
Samee kontaroolo foom ka dheer ama ka gaaban oo u dhigma cabbirrada badhanka.
<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>Qaabka tooska ah cabbirrada kooxda
Si dhakhso leh u cabbir calaamadaha oo samee kontaroolada gudaha .form-horizontaladiga oo ku daraya .form-group-lgama .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>Cabbirka tiirka
Ku duub agabka tiirarka xadhkaha, ama shay kasta oo waalidka caadada u ah, si aad si fudud u dhaqangeliso ballaadhka la rabo.
<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>Badhamada
badhanka tags
Isticmaal casharrada badhanka ee <a>, <button>, ama <input>element.
<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">Isticmaalka gaarka ah ee macnaha guud
Iyadoo fasalada badhanka la isticmaali karo <a>iyo <button>canaasirta, kaliya <button>canaasiirta ayaa lagu taageeraa qaybahayaga nav iyo navbar.
Xidhiidhada u shaqeeya sidii badhamada
Haddii <a>canaasiirta loo isticmaalo in ay u dhaqmaan sida badhamada - kicinta shaqada bogga, halkii aad u socon lahayd dukumeenti kale ama qayb ka mid ah bogga hadda - waa in sidoo kale la siiyaa ku habboon role="button".
Samaynta browser-ka gudubka
Sida ku dhaqanka ugu wanaagsan, waxaanu aad ugu talinaynaa in la isticmaalo <button>curiyaha mar kasta oo ay suurtogal tahay si loo hubiyo in la isu waafajiyo samaynta browser-ka.
Waxyaabaha kale, waxaa ka mid ah cilad ku jirta Firefox <30 oo naga diidaysa in aan dejino badhamada line-heightku <input>salaysan, taasoo keenaysa in aanay si sax ah u dhigmin dhererka badhamada kale ee Firefox.
Ikhtiyaarada
Isticmaal mid kasta oo ka mid ah fasallada badhanka la heli karo si aad dhaqso u abuurto badhan qaabaysan.
<!-- 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>U gudbinta macnaha tignoolajiyada caawinta
Isticmaalka midabka si loogu daro macnaha badhanka kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (qoraalka muuqda ee badhanka), ama lagu daro habab kale, sida qoraal dheeraad ah oo ku qarsoon .sr-onlyfasalka.
Cabbirrada
Ma jeceshahay badhamada waaweyn ama ka yar? Ku dar .btn-lg, .btn-sm, ama .btn-xscabbirro dheeraad ah.
<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>Abuur badhamada heerka xannibaadda—kuwa ballaca buuxa ee waalidka—adigoo ku daraya .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>Xaalad firfircoon
Badhamada waxay u muuqan doonaan la riixo (oo leh asal madow, xuduud madow, iyo hooska gudaha) marka ay firfircoon yihiin. Cunsurrada <button>, tan waxaa lagu sameeyaa :active. Curiyayaasha , <a>waxa lagu sameeyay .active. Si kastaba ha ahaatee, waxaad isticmaali .activekartaa <button>s (oo aad ku dari kartaa aria-pressed="true"sifada) haddii aad u baahan tahay inaad ku celceliso gobolka firfircoon barnaamij ahaan.
Qaybta badhanka
Looma baahna in lagu daro :activemaadaama ay tahay fasalka been abuurka ah, laakiin haddii aad u baahan tahay inaad ku qasabto muuqaal isku mid ah, horay u soco oo ku dar .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>Curiyaha barroosinka
Ku dar .activefasalka <a>badhamada.
<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>Gobolka naafada
Ka dhig badhamada kuwo aan la gujin karin adiga oo dib ugu luminaya opacity.
Qaybta badhanka
Ku dar disabledsifada <button>badhamada
<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>Waafaqsanaanta browser-ka
Haddii aad ku darto disabledsifada a <button>, Internet Explorer 9 iyo kuwa hoose waxay qoraalka ka dhigi doonaan cawl oo leh hadh-qoraal xun oo aynaan hagaajin karin.
Curiyaha barroosinka
Ku dar .disabledfasalka <a>badhamada.
<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>Waxaan u isticmaalnaa .disabledsida fasalka utility halkan, oo la mid ah .activefasalka caadiga ah, sidaas darteed horgale looma baahna.
Tilmaamaha shaqeynta isku xirka
Fasalkani wuxuu isticmaalaa pointer-events: noneinuu isku dayo inuu joojiyo shaqada isku xirka<a> s, laakiin hantida CSS weli lama jaan qaadin oo si buuxda loogama taageero Opera 18 iyo wixii ka hooseeya, ama Internet Explorer 11. Intaa waxa dheer, xataa daalacashada taageera pointer-events: none, kiiboodhka navigation-ka ayaa weli ah mid aan saameyn ku yeelan, taasoo la micno ah in isticmaalayaasha kiiboodhka ee arka iyo isticmaalayaasha tignoolajiyada caawinta ay weli awood u yeelan doonaan inay dhaqaajiyaan xiriiriyeyaashan. Markaa si aad badbaado u hesho, isticmaal JavaScript-ka caadiga ah si aad u damiso xidhiidhyadaas.
Sawirada
Sawirro jawaab celin ah
Sawirada ku jira Bootstrap 3 waxaa laga dhigi karaa mid saaxiibtinimo leh iyada oo loo marayo kordhinta .img-responsivefasalka. Tani waxay khuseysaa max-width: 100%;,height: auto; iyo display: block;sawirka si ay si fiican ugu miisaanto xubinta waalidka.
Si aad u dhex dhigto sawirada isticmaala .img-responsivefasalka, isticmaal .center-blockbedelka .text-center. Faahfaahin dheeraad ah ka eeg qaybta casharada caawiye.center-block isticmaalka.
Sawirada SVG iyo IE 8-10
Gudaha Internet Explorer 8-10, sawirada SVG ee wata .img-responsiveayaa si aan qiyaas lahayn loo cabbiray. Si tan loo hagaajiyo, ku dar width: 100% \9;meelaha lagama maarmaanka ah. Bootstrap si toos ah uma dabaqdo tan maadaama ay dhib ku keento qaababka kale ee sawirka.
<img src="..." class="img-responsive" alt="Responsive image">Qaababka sawirka
Ku dar xiisado <img>curiye si aad si fudud ugu qaabisid sawirada mashruuc kasta.
Waafaqsanaanta browser-ka
Maskaxda ku hay in Internet Explorer 8 uu ka maqan yahay geesaha wareegsan.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">Fasalada caawiyaha
Midabada macnaha guud
U gudbi macnaha midab leh oo muggeed oo xooga saaraya fasalada utility. Kuwan waxa kale oo laga yaabaa in lagu dabaqo isku-xireyaasha oo waxay u madoobayaan dul heehaabsiga si la mid ah hababka isku xidhkayada caadiga ah.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>Wax ka qabashada gaar ahaaneed
Mararka qaarkood xiisadaha xoogga la saaray lama dabaqi karo sababtoo ah xulashada gaarka ah ee kale. Inta badan, xalin kugu filan waa inaad qoraalkaaga ku duubto <span>fasalka.
U gudbinta macnaha tignoolajiyada caawinta
Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku yahay mid ka muuqda nuxurka laftiisa (midabada macnaha waxa kaliya loo isticmaalaa in lagu xoojiyo macnaha hore ugu jiray qoraalka/calaamadaynta), ama lagu soo daray habab kale, sida qoraal dheeraad ah oo ku qarsoon .sr-onlyfasalka .
Sooyaalka macnaha guud
Si la mid ah fasallada midabka qoraalka ee macnaha guud, si fudud u deji asalka curiyaha fasalka kasta. Qaybaha barroosinku waxay ku madoobayaan duleelka, sida fasallada qoraalka.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>Wax ka qabashada gaar ahaaneed
Mararka qaarkood xiisadaha asalka ah lama dabaqi karo sababtoo ah xulashada gaarka ah ee kale. Xaaladaha qaarkood, ka-hortag ku filan ayaa ah in lagu duubo nuxurka maaddooyinkaaga <div>fasalka.
U gudbinta macnaha tignoolajiyada caawinta
Sida midabada macnaha leh , hubi in macne kasta oo lagu gudbiyo midabka sidoo kale loo gudbiyo qaab aan ahayn mid soo jeedin ah.
Xir astaanta
U isticmaal astaanta guud ee u dhow si aad meesha uga saarto waxyaabaha sida moodalka iyo digniinaha.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>Daryeel
Isticmaal daryeel si aad u muujiso shaqada hoos u dhaca iyo jihada. Ogsoonow in daryeelka caadiga ahi uu si toos ah u rogi doono menu -yada hoos u dhaca .
<span class="caret"></span>Si degdeg ah sabayn
Ku sabbayso qayb bidix ama midig fasal. !importantwaxaa lagu daraa si looga fogaado arrimaha gaarka ah. Fasallada waxaa sidoo kale loo isticmaali karaa isku-dhafka.
<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();
}blocks content blocks
U dhig curiyaha display: blockdhexda iyo margin. Loo heli karo sida isku darka iyo fasalka.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}Clearfix
Si fudud u caddeyso floatadigoo ku daraya .clearfix xubinta waalidka . Wuxuu adeegsadaa nadiifinta yar yar sida uu u caan baxay Nicolas Gallagher. Waxa kale oo loo isticmaali karaa isku-dhafka.
<!-- 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();
}Muujinaya oo qarinaya waxa ku jira
Ku qasbee shay in la muujiyo ama la qariyo ( oo ay ku jiraan akhristayaasha shaashadda ) iyadoo la adeegsanayo .showiyo .hiddenfasallo. Fasaladani waxay isticmaalaan !importantsi ay uga fogaadaan isku dhacyada gaarka ah, sida kuwa degdega ah . Waxay diyaar u yihiin oo kaliya leexinta heerka block. Waxa kale oo loo isticmaali karaa sida isku-dhafka.
.hidewaa la heli karaa, laakiin had iyo jeer ma saamayso akhristayaasha shaashadda oo waa laga saaray ilaa v3.0.1 . Isticmaal .hiddenama .sr-onlybeddelkeeda.
Intaa waxaa dheer, .invisiblewaxaa loo isticmaali karaa in lagu beddelo muuqaalka curiyaha, taasoo la macno ah in displayaan la beddelin oo curiyuhu uu weli saamayn ku yeelan karo socodka dukumeentiga.
<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();
}Akhristaha shaashada iyo waxa ku jira kiiboodhka
Qari shay dhammaan aaladaha marka laga reebo akhristayaasha shaashadda leh .sr-only. Ku darso .sr-onlysi .sr-only-focusableaad u tusto curiyaha mar kale marka ay diirada saarto (tusaale isticmaale kiiboodhka-kaliya). Lagama maarmaan u ah raacitaanka hababka ugu wanaagsan ee gelitaanka . Waxa kale oo loo isticmaali karaa sida isku-dhafka.
<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();
}Beddelka sawirka
Ka faa'iidayso .text-hidefasalka ama isku darka si aad kaaga caawiso ku beddelashada qoraalka curiyaha oo leh sawir asal ah.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}Utility ka jawaabaya
Horumarka saaxiibtinimo ee moobilka dhaqsaha badan, u isticmaal fasaladan utility si aad u muujiso oo aad ugu qariso waxa ku jira aaladda adoo adeegsanaya weydiinta warbaahinta. Waxa kale oo ku jira fasallada utility ee loogu beddelayo nuxurka marka la daabaco.
Isku day inaad kuwan u isticmaasho si xaddidan oo iska ilaali abuurista noocyo kala duwan oo isla goobta ah. Taa beddelkeeda, u isticmaal si aad u dhammaystirto soo bandhigida qalab kasta.
Fasallada la heli karo
U isticmaal hal ama isku darka fasallada la heli karo si aad ugu rogato nuxurka guud ahaan meelaha goynta ee aragtida.
| Aalado yaryar oo dheeraad ah oo telefoonada ah (<768px) | Aaladaha yaryar ee kiniiniyada (≥768px) | Qalab dhexdhexaad ah Desktops (≥992px) | Aaladaha waaweyn ee Desktops (≥1200px) | |
|---|---|---|---|---|
.visible-xs-* |
Muuqda | Qarsoon | Qarsoon | Qarsoon |
.visible-sm-* |
Qarsoon | Muuqda | Qarsoon | Qarsoon |
.visible-md-* |
Qarsoon | Qarsoon | Muuqda | Qarsoon |
.visible-lg-* |
Qarsoon | Qarsoon | Qarsoon | Muuqda |
.hidden-xs |
Qarsoon | Muuqda | Muuqda | Muuqda |
.hidden-sm |
Muuqda | Qarsoon | Muuqda | Muuqda |
.hidden-md |
Muuqda | Muuqda | Qarsoon | Muuqda |
.hidden-lg |
Muuqda | Muuqda | Muuqda | Qarsoon |
Sida v3.2.0, .visible-*-*fasalada goob kasta oo nasasho ah waxay ku yimaadaan saddex nooc, mid kasta oo displayqiimaha hantida CSS ee hoos ku taxan.
| Kooxda fasallada | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Marka, xstusaale ahaan shaashadaha yaryar ee dheeraadka ah, .visible-*-*fasallada la heli karo waa: .visible-xs-block, .visible-xs-inline, iyo .visible-xs-inline-block.
Fasallada .visible-xs, .visible-sm, .visible-mdiyo .visible-lgsidoo kale waa jiraan, laakiin waa la baabi'iyay ilaa v3.2.0 . Waxay qiyaastii u dhigmaan .visible-*-block, marka laga reebo kiisas dheeraad ah oo gaar ah oo ku saabsan leexinta <table>walxaha la xidhiidha.
Fasalada daabac
Si la mid ah fasallada jawaab-celinta caadiga ah, u isticmaal kuwan ku beddelashada nuxurka daabacaadda.
| Fasallada | Browser | Daabac |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
Qarsoon | Muuqda |
.hidden-print |
Muuqda | Qarsoon |
Fasalka .visible-printsidoo kale wuu jiraa laakiin wuu go'ay ilaa v3.2.0 . Waxay u dhigantaa qiyaastii .visible-print-block, marka laga reebo kiisas dheeraad ah oo gaar ah oo ku saabsan <table>walxaha la xiriira.
Kiisaska tijaabada
Dib u qiyaas biraawsarkaaga ama ku shub qalabyo kala duwan si aad u tijaabiso fasalada utility ee ka jawaabaya.
Ka muuqda...
Calaamadaha cagaarka ah waxay muujinayaan curiyaha inuu ka muuqanayo aragtidaada hadda.
Aad u yar
✔ Ka muuqda x-yar
Yar
✔ Ka muuqda dusha yar
Dhex
dhexaad ✔ Ka dhex muuqada
Weyn
✔ Ka muuqda dusha sare
✔ Ka muuqda x-yar iyo yar
✔ Ka muuqda dhex dhexaad iyo weyn
✔ Ka muuqda x-yar iyo dhexdhexaad
✔ Ka muuqda mid yar iyo mid weyn
✔ Ka muuqda x-yar iyo weyn
✔ Ka muuqda mid yar iyo mid dhexe
Qarsoon...
Halkan, calamadaha cagaarka ah waxay kaloo muujinayaan in curiyaha uu ku qarsoon yahay aragtidaada hadda.
Isticmaalka Yar
Bootstrap's CSS waxa lagu dhisay wax ka yar, horudhac leh hawlo dheeraad ah sida doorsoomayaasha, isku darka, iyo hawlaha ururinta CSS. Kuwa doonaya inay isticmaalaan isha Faylasha yar halkii ay ka ahaan lahaayeen faylalkayada CSS ee la soo ururiyey waxay isticmaali karaan doorsoomayaal badan iyo iskudhafyo aan isticmaalno inta lagu jiro qaabka.
Doorsoomayaasha xayndaabyada iyo isku darka waxay ku daboolan yihiin qaybta nidaamka Grid .
Ururinta Bootstrap
Bootstrap waxaa loo isticmaali karaa ugu yaraan laba siyaabood: iyadoo la adeegsanayo CSS-ga la soo ururiyey ama isha laga helo faylal yar. Si aad u ururiso faylalka Yar, la tasho qaybta Bilaabidda sida loo habeeyo deegaankaaga horumarinta si aad u socodsiiso amarada lagama maarmaanka ah.
Aaladaha kooxda saddexaad ee ururinta ayaa laga yaabaa inay la shaqeeyaan Bootstrap, laakiin ma taageeraan kooxdayada asaasiga ah.
Kala duwanaansho
Doorsoomayaasha ayaa loo isticmaalaa dhammaan mashruuca oo dhan si ay u dhexeyaan oo loo wadaago qiyamka sida caadiga ah loo isticmaalo sida midabada, kala dheeraynta, ama xirmooyinka xarfaha. Si aad u hesho burbur dhammaystiran, fadlan eeg Customizer-ka .
Midabada
Si fudud u isticmaal laba nidaam midab: cabbir cawl iyo semantic. Midabada Grayscale waxay si degdeg ah u helaan hadhka madow ee sida caadiga ah loo isticmaalo halka semantic ay ku jiraan midabyo kala duwan oo loo qoondeeyay qiyamka macnaha leh.
@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;Isticmaal mid kasta oo ka mid ah doorsoomayaasha midabka sida ay yihiin ama ku beddel doorsoomayaal macno badan mashruucaaga.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}Sharaxaad
Wax yar oo doorsoomayaal ah oo si degdeg ah u habeynaya walxaha muhiimka ah ee qalfoofka goobtaada.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;Xiriirinta
Si sahal ah u habayso isku xirkaaga midabka saxda ah oo leh hal qiime oo kaliya.
// 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;
}
}Ogsoonow in uu @link-hover-coloristicmaalo shaqo, qalab kale oo cajiib ah oo ka yar, si uu si otomaatig ah u abuuro midabka qulqulka saxda ah. Waxaad isticmaali kartaa darken, lighten, saturateiyo desaturate.
Qoraalka qoraalka
Si fudud u deji wejigaaga, cabbirka qoraalka, hoggaaminta, iyo wax ka badan oo leh doorsoomayaal degdeg ah. Bootstrap waxay isticmaashaa kuwan sidoo kale si ay u bixiso isku darka qoraallada fudud.
@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;Astaamo
Laba doorsoomayaal degdeg ah oo loogu talagalay habaynta goobta iyo magaca faylka ee astaantaada.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";Qaybaha
Qaybaha Bootstrap oo dhan waxay isticmaalaan doorsoomayaal aan caadi ahayn si loo dejiyo qiyamka guud. Halkan waxaa ah kuwa ugu badan ee la isticmaalo.
@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;Isku darka iibiyaha
Isku-darka iibiyayaashu waa isku-dhafan si ay u taageeraan daalacashada badan iyaga oo ku daraya dhammaan horgalayaasha iibiyaha ee ku jira CSS-gaaga la soo ururiyey.
Cabbirka sanduuqa
Ku celi qaabka sanduuqa qaybahaaga oo leh hal iskudar. Macnaha guud, ka eeg maqaalkan waxtarka leh ee Mozilla .
Isku-darka waxaa laga dhigay v3.2.0, iyadoo la hirgelinayo Autoprefixer. Si loo ilaaliyo iswaafajinta gadaal, Bootstrap waxay sii wadi doontaa isticmaalka isku dhafka gudaha ilaa Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}geeso wareegsan
Maanta dhammaan daalacashada casriga ah waxay taageeraan border-radiushantida aan horay loo sii shaacin. Sidan oo kale, ma jiro wax .border-radius()isku dhafan, laakiin Bootstrap waxa ku jira jid-gaabyo si degdeg ah loogu soo koobo laba geesood oo dhinac gaar ah shay ah.
.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;
}Sanduuqa (Drop) hadhyada
Haddii dhageystayaasha aad beegsaneyso ay isticmaalayaan daalacayaasha iyo aaladaha ugu dambeeyay iyo kuwa ugu waaweyn, hubi inaad kaliya isticmaasho box-shadowhantida. Haddii aad u baahan tahay taageerada aaladaha Android ka hore (pre-v4) iyo iOS (ka hor-iOS 5), isticmaal isku- dhafka go'ay si aad u soo qaadato horgalayaasha loo baahan yahay -webkit.
Isku-darka waa la jaray sida v3.1.0 , maadaama Bootstrap uusan si rasmi ah u taageerin aaladaha duugoobay ee aan taageerin hantida caadiga ah. Si loo ilaaliyo iswaafajinta gadaal, Bootstrap waxay sii wadi doontaa isticmaalka isku dhafka gudaha ilaa Bootstrap v4.
U hubso inaad isticmaasho rgba()midabada hooska sanduuqaaga si ay ugu milmaan sida ugu macquulsan ee asalka ah.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}Kala-guurka
Isku darka badan ee dabacsanaanta. Deji dhammaan macluumaadka kala-guurka mid, ama cadee daahitaan gooni ah iyo muddada hadba loo baahdo.
Isku-darka ayaa hoos u dhacay ilaa v3.2.0, iyadoo la hirgelinayo Autoprefixer. Si loo ilaaliyo iswaafajinta gadaal-dambe, Bootstrap waxay sii wadi doontaa adeegsiga isku-darka gudaha ilaa 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;
}Isbadalada
Wareeg, cabbir, tarjum (dhaqdhaqaaq), ama qallooci shay kasta.
Isku-darka ayaa hoos u dhacay ilaa v3.2.0, iyadoo la hirgelinayo Autoprefixer. Si loo ilaaliyo iswaafajinta gadaal-dambe, Bootstrap waxay sii wadi doontaa adeegsiga isku-darka gudaha ilaa 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;
}animations
Hal iskudhaf ah oo loogu talagalay isticmaalka dhammaan sifooyinka animation CSS3 ee hal caddayn iyo isku darka kale ee guryaha gaarka ah.
Isku-darka ayaa hoos u dhacay ilaa v3.2.0, iyadoo la hirgelinayo Autoprefixer. Si loo ilaaliyo iswaafajinta gadaal-dambe, Bootstrap waxay sii wadi doontaa adeegsiga isku-darka gudaha ilaa 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;
}Daahfurnaanta
Deji mugdiga dhammaan daalacashada oo bixi filterdib u dhac IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}Qoraalka boos-haye
Bixi macnaha guud ee kontaroolada foomka gudaha goob kasta.
.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
}Tiirarka
Ku samee tiirar CSS gudaheeda hal shay.
.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
Si sahal ah u rogo mid kasta oo ka mid ah labada midab oo u beddel jaan-gooyada dambe. Sare u qaad oo deji jihada, isticmaal saddex midab, ama isticmaal jaan-jaraha shucaaca. Hal isku-dar ah waxaad ku helaysaa dhammaan eray-bixinnada hor-galayaasha ah ee aad u baahan doonto.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);Waxa kale oo aad qeexi kartaa xagasha laba midab ee caadiga ah, jaanis toosan:
#gradient > .directional(#333; #000; 45deg);Haddii aad u baahan tahay qaabka tima-jaraha jaranjarada, taasi waa sahlan tahay, sidoo kale. Kaliya cadee hal midab oo waxaan ku dabooshan doonaa xariijimo cad oo hufan.
#gradient > .striped(#333; 45deg);Kor u qaad oo isticmaal saddex midab. Deji midabka koowaad, midabka labaad, midabka labaad ee joogsiga (qiimaha boqolkiiba sida 25%), iyo midabka saddexaad oo leh kuwan:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);Madaxa kor u qaad! Haddi aad waligaa u baahato in aad iska saarto gradient, iska hubi in aad ka saarto IE-gaar ah oo filteraad ku dartay. Waxaad taas samayn kartaa adiga oo isticmaalaya isku - .reset-filter()dhafkabackground-image: none;
Isku darka utility
Isku darka utility waa iskudhafyo isku dara guryaha CSS ee aan xidhiidh la lahayn si loo gaadho yool ama hawl gaar ah.
Clearfix
Iska ilaali inaad ku darto class="clearfix"shay kasta oo beddelka ku dar .clearfix()qaska halka ku habboon. Wuxuu isticmaalaa nadiifiyaha yar ee Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}Dhexdhexaadinta
Si degdeg ah u dhexda shay kasta oo ku jira waalidkeed. Waxay u baahan tahay widthama max-widthin la dejiyo.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}Caawinayaasha cabbirka
Si fudud u qeex cabbirka shayga.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }Meelaha qoraalka la bedeli karo
Si fudud u habbee ikhtiyaarada cabbirka ee meel kasta oo qoraalka ah, ama shay kasta oo kale. Cilladaha dhaqanka browserka caadiga ah ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}Qoraal gooyn
Si sahal ah ugu goog qoraalka ellipsis leh hal qas. Wuxuu u baahan yahay curiyaha inuu noqdo blockama inline-blockheer.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}Sawirada retina
Sheeg laba dariiqo sawir iyo cabbirka sawirka @1x, Bootstrap-na waxa uu bixin doonaa @2x weydiinta warbaahinta. Haddii aad hayso sawiro badan oo aad u adeegto, ka fiirso inaad gacanta ku qorto sawirkaaga CSS ee hal cod oo warbaahin ah.
.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);
}Isticmaalka Sass
Halka Bootstrap lagu dhisay wax ka yar, waxay sidoo kale leedahay deked Sass oo rasmi ah . Waxaan ku haynaa meel gooni ah oo GitHub ah waxaanan ku qabanaa cusboonaysiinta qoraal beddelaad.
Maxaa ka mid ah
Mar haddii dekedda Sass ay leedahay dib-u-celin gaar ah oo ay u adeegto dhegeystayaal xoogaa kala duwan, waxa ku jira mashruucu si weyn uga duwan yahay mashruuca Bootstrap-ka ugu weyn. Tani waxay hubinaysaa in dekedda Sass ay la jaanqaadi karto inta ugu badan ee nidaamyada Sass-ku-salaysan ee suurtogalka ah.
| Jidka | Sharaxaada |
|---|---|
lib/ |
Koodhka dahabka ah ee Ruby (qaabaynta Sass, biraha iyo isku dhafka Compass) |
tasks/ |
Qoraalada beddelka (oo kor u rogaya In ka yar Sass) |
test/ |
Tijaabooyin isku-dubarid |
templates/ |
Muujinta xirmada Compass |
vendor/assets/ |
Sass, JavaScript, iyo faylasha font |
Rakefile |
Hawlaha gudaha, sida ruugista iyo beddelidda |
Booqo kaydka GitHub ee dekeda Sass si aad u aragto faylashan oo shaqaynaya.
Rakibaadda
Macluumaad ku saabsan sida loo rakibo oo loo isticmaalo Bootstrap ee Sass, la tasho akhrinta kaydka GitHub . Waa isha ugu casrisan oo ay ku jirto macluumaadka loo isticmaalo Rails, Compass, iyo mashaariicda Sass caadiga ah.