Sharaxaad

Bootstrap wuxuu ku dhisan yahay shabag 12-column ah oo ka jawaabaya. Waxa kale oo aanu ku darnay qaabayn go'an iyo ballac dareere ah oo ku salaysan nidaamkaas.

Wuxuu u baahan yahay HTML5 doctype

Bootstrap waxay isticmaashaa walxaha HTML iyo sifooyinka CSS ee u baahan isticmaalka HTML5 doctype. Hubi inaad ku darto bilawga bog kasta oo Bootstrapped ee mashruucaaga.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Qoraalka qoraalka iyo isku xirka

Gudaha faylka scaffolding.less , waxaanu dejinay bandhig caalami ah oo aasaasi ah, qoraal qoraal ah, iyo qaababka isku xidhka. Gaar ahaan, waxaanu:

Ka saar margin ee jirka
Ku background-color: white;dhejibody
U isticmaal @baseFontFamily, @baseFontSize, iyo @baseLineHeightsifooyinka sida saldhigga qoraalkayaga
Deji midabka isku xirka caalamiga ah @linkColoroo mari xariiqyada hoose oo keliya:hover

Dib u deji iyada oo loo marayo Normalize

Sida Bootstrap 2, dib-u-dejinta dhaqanka ee CSS ayaa u kobcay si ay u isticmaasho walxaha Normalize.css , mashruuca Nicolas Gallagher kaas oo sidoo kale awood u leh HTML5 Boilerplate .

Dib u habeynta cusub ayaa weli laga heli karaa reset.less , laakiin leh waxyaabo badan oo laga saaray si kooban iyo saxsanaan.

Nidaamka shabagga caadiga ah ee lagu bixiyo qayb ka mid ah Bootstrap waa 940px-ballaaran, 12-column grid .

Waxa kale oo ay leedahay afar nooc oo jawaab celin ah oo loogu talagalay qalabyo kala duwan iyo xallinta: telefoonka, sawirka tablet-ka, muuqaalka miiska iyo miisaska yaryar, iyo miisaska waaweyn ee muraayadaha.

<div class = " saf" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Sida halkan ku cad, qaabayn aasaasi ah ayaa lagu abuuri karaa laba "tiir", mid kastaa wuxuu ka kooban yahay tiro ka mid ah 12 tiirar ee aasaaska ah ee aan ku qeexnay qayb ka mid ah nidaamka xuddunta.

Tiirarka dib u dejinta

4 dib u dhac 4

3 xabo 3

8 dib u dhac 4

<div class = " saf" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Tiirarka buulka

Iyada oo la raacayo nidaamka shabagga static (aan dareere ahayn) ee ku yaala Bootstrap, buul-dhigiddu waa sahlan tahay. Si aad buulka ugu dhejiso macluumaadkaaga, kaliya ku dar tiirar cusub .rowiyo set oo ah .span*tiir dhexda tiirka jira .span*.

Tusaale

Safafka buulka leh waa in ay ku jiraan tiro tiirar ah oo isku geynaya tirada tiirarka waalidkiisa. Tusaale ahaan, laba .span3tiir oo buul ah waa in lagu dhejiyaa gudaha a .span6.

Heerka 1 ee tiirka

Heerka 2

<div class = " saf" > 
  <div class = "span12" > 
    Heerka 1 ee tiirka
    <div class = " saf" > 
      <div class = "span6" > Heerka 2 </div> 
      <div class = "span6" > Heerka 2 </div> 
    </div>
  </div>
</div>

Tiirarka dareeraha ah

Boqolkiiba, maaha pixels

Nidaamka xadhkaha dareeraha ah wuxuu isticmaalaa boqolleyda ballaca tiirka halkii uu ka isticmaali lahaa pixels go'an. Waxa kale oo ay leedahay kala duwanaansho jawaab celin ah oo la mid ah nidaamkayaga qulqulka go'an, iyada oo hubinaysa saamiga saxda ah ee xallinta shaashadda muhiimka ah iyo qalabka.

Safka dareeraha ah

Si fudud u samee dareere kasta adiga oo u .rowbeddelaya .row-fluid. Tiirarku waa isku mid, taasoo ka dhigaysa mid toos ah in la isku rogo inta u dhaxaysa qaababka go'an iyo dareeraha.

Calaamadayn

<div class = "dareere-dheecaan" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Buul dareere ah

Buulka leh shabaqyada dareeraha ah ayaa xoogaa kala duwan: tirada tiirarka buulka ah uma baahna inay u dhigmaan waalidka. Taa baddalkeeda, tiirarkaaga dib ayaa loo dejiyay heer kasta sababtoo ah saf kastaa wuxuu qaataa 100% tiirka waalidka.

Dheecaan 12

Dheecaan 6

<div class = "dareere-dheecaan" > 
  <div class = "span12" > 
    Heerka 1 ee tiirka
    <div class = "dareere-dheecaan" > 
      <div class = "span6" > Heerka 2 </div> 
      <div class = "span6" > Heerka 2 </div> 
    </div>
  </div>
</div>

La beddeli karo	Qiimaha caadiga ah	Sharaxaada
`@gridColumns`	12	Tirada tiirarka
`@gridColumnWidth`	60px	Ballaca tiir kasta
`@gridGutterWidth`	20px	Meel xun oo u dhaxaysa tiirarka
`@siteWidth`	Wadarta la xisaabiyay ee dhammaan tiirarka iyo majaraha	Waxay tirisaa tirada tiirarka iyo majaraha si ay u dejiso ballaca `.container-fixed()`isku dhafka

Kala duwanaansho yar

Lagu dhisay Bootstrap waa tiro doorsoomayaal ah oo loogu talagalay habaynta nidaamka grid-ka caadiga ah ee 940px, ee kor lagu diiwaangeliyay. Dhammaan doorsoomayaasha shabkada waxa lagu kaydiyaa doorsoomayaal.less.

Sida loo habeeyo

Wax ka beddelka shabkada macneheedu waa beddelka saddexda @grid*doorsoome iyo dib-u-ururinta Bootstrap. Beddel doorsoomayaasha sharoobada doorsoomayaal.wax yar oo isticmaal mid ka mid ah afarta siyaabood ee la diiwaan galiyay si dib loo ururiyo . Haddii aad ku darayso tiirar badan, hubi inaad ku darto CSS kuwa ku jira grid.less.

Joogista ka jawaab celinta

Habaynta shabakadu waxay ku shaqaysaa kaliya heerka caadiga ah, 940px grid. Si aad u ilaaliso dhinacyada ka jawaabaya Bootstrap, waa inaad sidoo kale u habayn kartaa shabaqyada si ka jawaab celin ah.

Qaab go'an

Qaabka caadiga ah oo fudud ee 940px-ballaaran, qaabaynta xuddun u ah kaliya degel kasta ama bog uu bixiyo hal <div class="container">.

<jir>
  <div class = "konteenar" > 
    ...
  </div>
</body>

Qaabka dareeraha

<div class="container-fluid">wuxuu siinayaa qaab-dhismeedka bogga dabacsan, min- iyo ballac-xareed, iyo dhinaca bidix ee bidix. Way ku fiican tahay abka iyo dukumentiyada

<div class = "container-fluid" > 
  <div class = "dareere-dheecaan" > 
    <div class = "span2" > 
      <!--Content sidebar-->
    </div>
    <div class = "span10" > 
      <!--Qoddobka Jidhka-->
    </div>
  </div>
</div>

Aaladaha ka jawaaba

Waxa ay sameeyaan

Weydiimaha warbaahintu waxay u oggolaanayaan CSS caado ah oo ku salaysan tiro shuruudo ah - saamiyo, ballac, nooca bandhiga, iwm - laakiin badanaa waxay diiradda saaraan agagaarka min-widthiyo max-width.

Wax ka beddel ballaca tiirka ee shabaggayaga
Isku dheji walxaha halkii aad sabayn lahayd meel kasta oo lagama maarmaan ah
Wax ka beddel cinwaannada iyo qoraalka si aad ugu habboonaato aaladaha

U isticmaal su'aalaha warbaahinta si mas'uuliyadi ku jirto oo kaliya sida bilawga dhagaystayaashaada mobaylka. Mashaariicda waaweyn, ka fiirsada saldhigyada koodka ee ha ka fiirsan lakabyada weydiimaha warbaahinta.

Qalabka la taageeray

Bootstrap waxay taageertaa su'aalo yar oo warbaahin ah oo ku jira hal fayl si ay uga caawiso inay mashaariicdaada ka dhigaan kuwo ku habboon aaladaha kala duwan iyo xallinta shaashadda. Waa kuwan waxa ku jira:

Summada	Balaadhka qaabaynta	Ballaca tiirka	Ballaca godka
Taleefannada casriga ah	480px iyo ka hooseeya	Tiirar dareere ah, oo aan lahayn ballac go'an
Taleefanka casriga ah ee loo yaqaan tablets	767px iyo ka hooseeya	Tiirar dareere ah, oo aan lahayn ballac go'an
Kiniinnada sawirka	768px iyo wixii ka sareeya	42px	20px
Asal ahaan	980px iyo in ka badan	60px	20px
Bandhig weyn	1200px iyo in ka badan	70px	30px

Waxay u baahan tahay meta tag

Si loo hubiyo in qalabku u soo bandhigo bogag jawaab celin ah si sax ah, ku dar calaamadda meta ee aragtida.

<meta name = "viewport" content = "ballad=qalabka-ballaadhka, bilowga-miisaanka=1.0" >

Isticmaalka su'aalaha warbaahinta

Bootstrap si toos ah kuma jiraan weydiimahan warbaahinta, laakiin fahamka iyo ku darida iyaga aad ayay u fududahay waxayna u baahan tahay habayn yar. Waxaad haysataa dhawr ikhtiyaar oo aad ku dari karto sifooyinka ka jawaabaya Bootstrap:

Isticmaal nooca jawaabta la isku duba riday, bootstrap-responsive.css
Kudar @import "wax jawaab ah.less" oo dib u soo celi Bootstrap
Wax ka beddel oo dib u ururi jawaab celin.less sidii fayl gaar ah

Maxaa loogu dari waayay? Run ahaantii, wax walba uma baahna inay noqdaan kuwo ka jawaabaya. Halkii aan ku dhiirigelin lahayn horumariyayaasha inay ka saaraan sifadan, waxaan ogaanay sida ugu wanaagsan ee aan awood u yeelan karno.

  // Taleefannada muuqaalka iyo hoos
  @media ( ugu badnaan - ballac : 480px ) { ... }     
 
  // Taleefan muuqaal ah oo loo beddelo tablet-ka sawir
  @media ( ugu badnaan - ballac : 768px ) { ... }     
 
  // Kiniin sawir leh oo ku socda muuqaalka iyo miiska
  @media ( daq - ballac : 768px ) iyo ( ugu badnaan - ballac : 980px ) { ... }        
 
  // desktop weyn
  @media ( daq - balac : 1200px ) { .. }

Fasallada utility ee ka jawaabaya

Maxay yihiin

Horumarka saaxiibtinimo ee moobilka dhaqsaha badan, u isticmaal fasaladan isticmaalka aasaasiga ah si aad u muujiso oo ugu qariso waxa ku jira aalad.

Marka la isticmaalo

U isticmaal si xaddidan oo iska ilaali abuurista gebi ahaanba noocyo kala duwan oo isla goobta ah. Taa beddelkeeda, u isticmaal si aad u dhammaystirto soo bandhigida qalab kasta.

Tusaale ahaan, waxa laga yaabaa inaad tusto <select>curiye nav qaab-dhismeedka moobaylka, laakiin maaha tablatooyinka ama miisaska.

Fasalada taageerada

Halkan waxaa lagu muujiyey shaxda fasallada aanu taageerno iyo saamaynta ay ku leeyihiin qaabaynta su'aalaha warbaahinta la siiyay (oo lagu calaamadeeyay qalab). Waxa laga heli karaa responsive.less.

Fasalka	Telefoonada480px iyo ka hooseeya	Kiniinnada767px iyo ka hooseeya	Kombiyuutarrada768px iyo wixii ka sareeya
`.visible-phone`	Muuqda	Qarsoon	Qarsoon
`.visible-tablet`	Qarsoon	Muuqda	Qarsoon
`.visible-desktop`	Qarsoon	Qarsoon	Muuqda
`.hidden-phone`	Qarsoon	Muuqda	Muuqda
`.hidden-tablet`	Muuqda	Qarsoon	Muuqda
`.hidden-desktop`	Muuqda	Muuqda	Qarsoon

Kiis tijaabo ah

Dib u qiyaas biraawsarkaaga ama ku shub aaladaha kala duwan si aad u tijaabiso fasalada sare

Ka muuqda...

Taleefanka✔ Taleefanka
Kiniiniga✔ Tablet
Desktop✔ Desktop

Qarsoon...

Taleefanka✔ Taleefanka
Kiniiniga✔ Tablet
Desktop✔ Desktop