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 mobaylada ee ikhtiyaarka ah, waxaa lagu dubay isla markiiba gudaha. Dhab ahaantii, Bootstrap waa mobile marka hore . Qaababka 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 waxoogaa ka sii badan codsi hooyo. 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>

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

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

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

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

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

.col-xs-6 Tiirarrada
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 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

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 fasalladayada utility ee ka jawaabaya .

.col-xs-6 .col-sm-3
Wax ka beddel aragtidaada ama ka eeg talefankaaga tusaale ahaan.

.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 ee meelaha jabinta jawaabaha leh, waxa laga yaabaa inaad u baahato inaad dib u dejiso dib u dhigista, riixida, ama jiidida . 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>

Ka saar jeexjeexyada

Ka saar marinnada safka ah oo waa tiirar la leh .row-no-guttersfasalka.

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

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

.col-xs-6

<div class="row row-no-gutters">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

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

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]

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

Qof caan ku ah Ciwaanka Isha

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer-ka ayaa si toos ah u eegaya.

Qof caan ku ah Ciwaanka Isha

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

Inline

Ku duub godadka koodka gudaha <code>.

Tusaale ahaan, <section>waa in lagu duuduubaa sida khadadka.

For example, <code>&lt;section&gt;</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 + ,

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>&lt;p&gt;Sample text here...&lt;/p&gt;</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>

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.

Qoraalka miiska ikhtiyaariga ah.
#	Magaca koowaad	Magaca Dambe	Magaca isticmaale
1	Calaamadee	Otto	@mdo
2	Yacquub	Thornton	@ buuran
3	Larry	Shimbirka	@twitter

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

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

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

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

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

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 . Bedelkeeda, 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 gudaha daawashada kuwaas oo ah ugu yaraan 768px ballac ah.

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&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

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.

`:focus`Gobolka 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 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 keliya xubno qoraal <input class="form-control">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 agabyada la geli karo sababo la xiriira gelitaanka. Haddii aad rabto inaad ka hortagto in calaamadaha la soo bandhigo, ku qari .sr-onlyfasalka. Haddii ay tahay inaad sameyso calaamad la'aan, hagaaji topqiimaha summada-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-only`Astaamo 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.

<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 dhig balaca adoo isticmaalaya fasalada tiirarka 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-horizontaladoo 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>

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.

Xiriirinta aasaasiga ah Xiriirinta

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

Xiriirinta aasaasiga ah Xiriirinta

<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 waxa uu isticmaalaa pointer-events: nonein uu isku dayo in uu joojiyo shaqada isku xidhka ee <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 wali awood u yeelan doonaan inay dhaqaajiyaan xiriiriyeyaashan. Markaa si aad badbaado u hesho, isticmaal JavaScript-ka caadiga ah si aad u damiso xidhiidhyadaas.

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 khusaysaa 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. Ka eeg qaybta casharada caawiye si aad u hesho tafaasiil dheeraad ah oo ku saabsan .center-blockisticmaalka.

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

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">&times;</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 caanka ku yahay 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();
}

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.

	Qalab yaryar oo dheeraad ahTelefoonada (<768px)	Qalabka yaryarKiniinnada (≥768px)	Qalabka dhexdhexaadka ahKombiyuutarrada (≥992px)	Qalabka waaweynKombiyuutarrada (≥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	CSS`display`
`.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

Dhexdhexaad ✔ Ka dhex muuqda

Weyn ✔ Ka muuqda dusha sare

Aad u yar iyo yar ✔ Ka muuqda x-yar iyo yarba

Dhexdhexaad iyo weyn ✔ Ka muuqda dhex dhexaad iyo weyn

Dheeraad ah oo yaryar iyo dhexdhexaad ah ✔ Ka muuqda x-yar iyo dhexdhexaad

Yar iyo weyn ✔ Ka muuqda mid yar iyo mid weyn

Aad u yar iyo weyn ✔ Ka muuqda x-yar iyo weynba

Yar iyo dhexdhexaad ✔ Ka muuqda mid yar iyo mid dhexe

Qarsoon...

Halkan, calamadaha cagaarka ah waxay kaloo muujinayaan in curiyaha uu ku qarsoon yahay aragtidaada hadda.

Aad u yar ✔ Ku qarsoon x-yar

Yar ✔ Qarsoon on yar

Dhexdhexaad ✔ Qarsoon on dhexdhexaad ah

Weyn ✔ Ku qarsoon

Aad u yar iyo yar ✔ Ku qarsoon x-yar iyo yar

Dhexdhexaad iyo weyn ✔ Qarsoon xagga dhexe iyo weynba

Dheeraad ah oo yaryar iyo dhexdhexaad ah ✔ Qarsoon x-yar iyo dhexdhexaad

Yar iyo weyn ✔ Ku qarsoon yar iyo weyn

Aad u yar iyo weyn ✔ Qarsoon on x-yar iyo weyn

Yar iyo dhexdhexaad ✔ Qarsoon kuwa yar iyo kuwa dhexe

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 Bilaabashada sida loo habeeyo deegaankaaga horumarineed si aad u socodsiiso amarada lagama maarmaanka ah.

Aaladaha kooxda saddexaad ee ururinta ayaa laga yaabaa inay la shaqeeyaan Bootstrap, laakiin ma taageeraan kooxdayada xudunta 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 dhakhso 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.

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

.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 cayimi 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 xariijin 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 waxyaabahan:

#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 isku-darka 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 beddelkeeda 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);
}

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.

Bootstrap ee Sass

CSS

Dulmar

HTML5 docture

Mobile marka hore

Qoraalka qoraalka iyo isku xirka

Caadiye.css

Konteenarada

Nidaamka grid

Hordhac

Weydiimaha warbaahinta

Ikhtiyaarada grid

Tusaale: Is dulsaar-ilaa-horizontal

Tusaale: weelka dareeraha ah

Tusaale: Mobile iyo desktop

Tusaale: Mobile, tablet, desktop

Tusaale: duubista tiirka

Tiirka jawaab celinta ayaa dib u dejinaya

Ka saar jeexjeexyada

Tiirarka dib u dejinta

Tiirarka buulka

Dalbashada safafka

Isku darka yar iyo doorsoomayaasha

Kala duwanaansho

Isku qas

Tusaale ahaan isticmaalka

Qoraalka qoraalka

Ciwaanka

h1. Bootstrap cinwaanka

h2. Bootstrap cinwaanka

h3. Bootstrap cinwaanka

h4. Bootstrap cinwaanka

h5. Bootstrap cinwaanka

h6. Bootstrap cinwaanka

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

nuqul jirka ah

Nuqulka jirka ledhka

Lagu dhisay wax ka yar

Qodobbada qoraalka khadka

Qoraal calaamadeysan

Qoraalka la tirtiray

Qoraal ka soo bax

Qoraal la galiyay

Qoraal hoosta laga xarriiqay

Qoraal yar

Dhiirran

Farta farcan

Walxaha beddelka ah

Fasalada toosinta

Fasalada isbeddelka

Soo gaabinta

Soo gaabinta aasaasiga ah

Bilawga

Cinwaanada

Xigashooyinka

blockquote ee caadiga ah

Ikhtiyaarada Blockquote

Magacaabida isha

Bandhigyo kale

Liisaska

Aan la dalban

Dalbaday

Aan habayn

Inline

Sharaxaada

Sharaxaad toosan

Toos u gooyn

Koodhka

Inline

Gelitaanka isticmaalaha

block aasaasiga ah

Kala duwanaansho

Tusaalaha wax soo saarka

Miisaska

Tusaalaha aasaasiga ah

Safafka la jeexay

`:focus`Gobolka demo

Digniin ku saabsan shaqeynta isku xirka`<a>`

`.sr-only`Astaamo ikhtiyaari ah oo leh calaamado qarsoon