Bootstrap

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.

Hababka caalamiga ah ee dib u dajinta CSS, qoraal-qorista, iyo isku xidhka

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.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </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 qoraaleedkayaga
  • 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 grid-ka caadiga ah 12 tiir oo leh qallooc ka jawaabaya

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Nidaamka grid-ka caadiga ah ee lagu bixiyo Bootstrap wuxuu isticmaalaa 12 tiir oo bixiya ballaca 724px, 940px (sida caadiga ah iyada oo aan CSS jawaab celin ah lagu darin), iyo 1170px. Ka hooseeya 767px daawashada, tiiraryadu waxay noqonayaan dareere oo si toos ah u dul saaran.

  1. <div class = " saf" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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 xariijinta.


Tiirarka dib u dejinta

4
4 dib u dhac 4
3 xabo 3
3 xabo 3
8 dib u dhac 4 
  1. <div class = " saf" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Tiirarka buulka

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

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
Heerka 2 
  1. <div class = " saf" > 
  2.   <div class = "span6" > 
  3.     Heerka 1 tiirka
  4.     <div class = " saf" > 
  5.       <div class = "span3" > Heerka 2 </div> 
  6.       <div class = "span3" > Heerka 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Nidaamka dareeraha dareeraha ah 12 jawaab celin ah, tiirar boqolkiiba ku salaysan

Tiirarka dareeraha ah

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

Samee dareere kasta adigoo si fudud u .rowbeddelaya .row-fluid. Tiirarku waa isku mid, taas oo ka dhigaysa mid toos ah in la isku rogo inta u dhaxaysa qaababka go'an iyo dareeraha.

Calaamadayn

  1. <div class = "dareere-dheecaan" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </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
Dheecaan 6 
  1. <div class = "dareere-dheecaan" > 
  2.   <div class = "span12" > 
  3.     Heerka 1 ee tiirka
  4.     <div class = "dareere-dheecaan" > 
  5.       <div class = "span6" > Heerka 2 </div> 
  6.       <div class = "span6" > Heerka 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Habaynta grid

La beddeli karo Qiimaha caadiga ah Sharaxaada
@gridColumns 12 Tirada tiirarka
@gridColumnWidth 60px Ballaca tiir kasta
@gridGutterWidth 20px Meel xun oo u dhaxaysa tiirarka

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

Layouts Qaababka aasaasiga ah si loo abuuro boggaga internetka

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

  1. <jir>
  2.   <div class = "konteenar" > 
  3.     ...
  4.   </div>
  5. </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

  1. <div class = "container-fluid" > 
  2.   <div class = "dareere-dheecaan" > 
  3.     <div class = "span2" > 
  4.       <!--Content sidebar-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Qoddobka Jidhka-->
  8.     </div>
  9.   </div>
  10. </div>

Naqshad jawaab celin leh Weydiimaha warbaahinta ee aaladaha iyo xallinta kala duwan

Aaladaha ka jawaaba

Waxa ay sameeyaan

Weydiimaha warbaahintu waxay u oggolaanayaan CSS caado ah oo ku salaysan tiro shuruudo ah - saamiyo, ballaca, nooca bandhigga, iwm - laakiin badanaa waxay diiradda saaraan hareeraha 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. Mashruucyada waaweyn, ka fiirso saldhigyada koodka ee ha u eegin 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 daawashada.

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

  1. Isticmaal nooca jawaabta la isku duba riday, bootstrap-responsive.css
  2. Kudar @import "wax jawaab ah.less" oo dib u soo celi Bootstrap
  3. 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.

  1.   /* Taleefannada muuqaalka iyo hoos */
  2.   @media ( ugu badnaan - ballac : 480px ) { ... }     
  3.  
  4.   /* Taleefan muuqaal ah oo loogu talagalay kiniinka sawirka */
  5.   @media ( ugu badnaan - ballac : 767px ) { ... }     
  6.  
  7.   /* Kiniin sawir leh oo ku socda muuqaalka iyo miiska */
  8.   @media ( daq - ballac : 768px ) iyo ( ugu badnaan - ballac : 979px ) { ... }        
  9.  
  10.   /* desktop weyn */
  11.   @media ( daq - balac : 1200px ) { ... }

Fasallada utility ee ka jawaabaya

Maxay yihiin

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

Marka la isticmaalo

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

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 fasalada aanu taageerno iyo saamaynta ay ku leeyihiin qaabka su'aal warbaahineed ee la bixiyay (ku calaamadeeyay qalab). Waxa laga heli karaa responsive.less.

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

Kiis tijaabo ah

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

Ka muuqda...

Calaamadaha cagaarka ah waxay muujinayaan in fasalka uu ka muuqanayo aragtidaada hadda.

  • Taleefanka✔ Taleefanka
  • Kiniinka✔ Tablet
  • Desktop✔ Desktop

Qarsoon...

Halkan, calaamadaha cagaarka ah waxay muujinayaan in fasalka uu ku qarsoon yahay aragtidaada hadda.

  • Taleefanka✔ Taleefanka
  • Kiniinka✔ Tablet
  • Desktop✔ Desktop