Bootstrap

Sharaxaad

Bootstrap wuxuu ku dhisan yahay 12-column xayndaabyo jawaab celin leh, qaabayn, iyo qaybo.

Goobaha caalamiga ah

Wuxuu u baahan yahay HTML5 doctype

Bootstrap waxay isticmaashaa walxaha HTML qaarkood iyo sifooyinka CSS ee u baahan isticmaalka HTML5 doctype. Ku dar bilawga dhammaan mashaariicdaada.

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

Qoraalka qoraalka iyo isku xirka

Bootstrap wuxuu dejiyaa bandhig caalami ah oo aasaasi ah, sawir-qoris, iyo qaababka isku xirka. Gaar ahaan, waxaanu:

  • Ka saar marginjirka
  • Ku background-color: white;dhejibody
  • Isticmaal @baseFontFamily, @baseFontSize, iyo @baseLineHeightsifooyinka sida saldhigga qoraalladayada
  • Deji midabka isku xirka caalamiga ah @linkColoroo mari xariiqyada hoose oo keliya:hover

Qaababkaan waxaa laga heli karaa gudaha qashinka . ka yar .

Dib u deji iyada oo loo marayo Normalize

Iyadoo Bootstrap 2, dib-u-dejinta hore ee dib-u-dejinta ayaa hoos loo dhigay iyada oo loo eegayo Normalize.css , mashruuca Nicolas Gallagher iyo Jonathan Neal oo sidoo kale awood u leh HTML5 Boilerplate . In kasta oo aan isticmaalno wax badan oo ka mid ah Normalize gudaha dib-u -dejinteena.less , waxaan ka saarnay waxyaabo gaar ah Bootstrap.

Nidaamka grid-ka caadiga ah

Tusaalaha khadka tooska ah

Nidaamka iskuxiran ee Bootstrap-ka caadiga ah wuxuu isticmaalaa 12 tiir , samaynta weel ballaaran oo 940px ah iyada oo aan sifooyin jawaab celin ah la siin. Iyada oo lagu daray faylka CSS ee jawaabta leh, shabaggu wuxuu la qabsanayaa inuu noqdo 724px iyo 1170px ballaaran iyadoo ku xiran aragtidaada. Ka hooseeya 767px daawashada, tiiraryadu waxay noqonayaan dareere oo si toos ah u dul saaran.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

HTML grid aasaasiga ah

Qaabka laba tiir ee fudud, samee a .rowoo ku dar tirada saxda ah ee .span*tiirarka. Maaddaama kani yahay 12-column shabag, mid kastaa .span*wuxuu gaarayaa tiro ka mid ah 12 tiir, waana in had iyo jeer lagu daro ilaa 12 saf kasta (ama tirada tiirarka ee waalidka).

  1. <div class = " saf" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Marka la eego tusaalahan, waxaanu haynaa .span4iyo .span8, samaynta 12 tiirar oo dhan iyo saf dhamaystiran.

Tiirarka dib u dejinta

Tiirarka u dhaqaaq dhanka midig adigoo isticmaalaya .offset*fasalo. Fasal kastaa wuxuu ku kordhiyaa darafyada bidix ee tiirarka oo dhan. Tusaale ahaan, waxa .offset4uu .span4ka wareegayaa afar tiir.

4
3 ka mid ah 2
3 ka mid ah 1
3 ka mid ah 2
6 ka mid ah 3 
  1. <div class = " saf" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Tiirarka buulka

Si aad macluumaadkaaga ugu dhejiso shabagga caadiga ah, ku dar tiirar cusub .rowiyo set oo ah .span*tiir jira .span*. Safafka buulka leh waa in ay ku jiraan tiro tiirar ah oo isku geynaya tirada tiirarka waalidkeed.

Heerka 1 tiirka
Heerka 2
Heerka 2 
  1. <div class = " saf" > 
  2.   <div class = "span9" > 
  3.     Heerka 1 tiirka
  4.     <div class = " saf" > 
  5.       <div class = "span6" > Heerka 2 </div> 
  6.       <div class = "span3" > Heerka 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Nidaamka shabagga dareeraha ah

Tusaalaha shabakada dareeraha nool

Nidaamka shabagga dareeraha ah wuxuu isticmaalaa boqolleyda halkii pixels ee ballaadhka tiirka. Waxay leedahay awood isku mid ah oo ka jawaab celin ah sida nidaamkayaga qulqulka go'an, hubinta saamiga saxda ah ee xallinta shaashadda muhiimka ah iyo qalabka.

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

Shabakadda dareeraha aasaasiga ah ee HTML

Samee saf kasta "dareere" adigoo u .rowbeddelaya .row-fluid. Fasallada tiirarku waa isku mid, taas oo sahlaysa in la isku rogo inta u dhaxaysa xargaha go'an iyo kuwa dareeraha ah.

  1. <div class = "dareere-dheecaan" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Dejinta dareeraha

Waxa uu u shaqeeyaa si la mid ah sida nidaamka grid-ka go'an uu u dejiyo: ku dar .offset*tiir kasta si aad u damiso tiirarkaas badan.

4
4 dib u dhac 4
3 xabo 3
3 xabo 3
6 guul 6 
  1. <div class = "dareere-dheecaan" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Buul dareere ah

Shabaqyada dareeraha ah waxay u isticmaalaan buul si kala duwan: heer kasta oo buul ah oo tiirar ah waa inuu ku daraa ilaa 12 tiir. Tani waa sababta oo ah shabagga dareeraha wuxuu isticmaalaa boqolleyda, ma aha pixels, dejinta ballaca.

Dheecaan 12
Dheecaan 6
Dheecaan 6
Dheecaan 6
Dheecaan 6 
  1. <div class = "dareere-dheecaan" > 
  2.   <div class = "span12" > 
  3.     Dheecaan 12
  4.     <div class = "dareere-dheecaan" > 
  5.       <div class = "span6" > 
  6.         Dheecaan 6
  7.         <div class = "dareere-dheecaan" > 
  8.           <div class = "span6" > dareeraha 6 </div> 
  9.           <div class = "span6" > dareeraha 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > dareeraha 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Qaababka

Qaab go'an

Wuxuu bixiyaa qaab-ballac go'an (iyo ikhtiyaari ahaan ka jawaabaya) nashqadaynta oo kaliya <div class="container">loo baahan yahay.

  1. <jir>
  2.   <div class = "konteenar" > 
  3.     ...
  4.   </div>
  5. </body>

Qaabka dareeraha

Abuur dareere, bog laba ka kooban oo leh <div class="container-fluid">— ku fiican codsiyada 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

Awood u yeelashada sifooyinka ka jawaabaya

Daar CSS ka jawaabaya mashruucaaga adiga oo ku dara astaanta meta ee saxda ah iyo xaashida qaab oo dheeraad ah oo ku dhex jirta <head>dukumeentigaaga. Haddii aad ka soo ururisay Bootstrap bogga Customize, waxaad u baahan tahay oo kaliya in aad ku darto summada meta.

  1. <meta name = "viewport" content = "ballad=qalabka-ballaadhka, bilowga-miisaanka=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Madaxa kor u qaad!Bootstrap kuma jiraan sifooyin ka jawaabaya si caadi ah wakhtigan sababtoo ah wax walba uma baahna inay noqdaan kuwo ka jawaabaya. Halkii aan ku dhiirigelin lahayn horumarinta si ay meeshan uga saaraan, waxaan ogaanay inay ugu fiican tahay inaan awoodno marka loo baahdo.

Ku saabsan Bootstrap ka jawaabaya

Aaladaha ka jawaaba

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
Bandhig weyn 1200px iyo in ka badan 70px 30px
Asal ahaan 980px iyo in ka badan 60px 20px
Kiniinnada sawirka 768px iyo wixii ka sareeya 42px 20px
Taleefannada ku jira tablet-ka 767px iyo ka hooseeya Tiirar dareere ah, oo aan lahayn ballac go'an
Telefoonada 480px iyo ka hooseeya Tiirar dareere ah, oo aan lahayn ballac go'an 
  1. /* desktop weyn */
  2. @media ( daq - balac : 1200px ) { ... }     
  3.  
  4. /* Kiniin sawir leh oo ku socda muuqaalka iyo miiska */
  5. @media ( daq - ballac : 768px ) iyo ( ugu badnaan - ballac : 979px ) { ... }        
  6.  
  7. /* Taleefan muuqaal ah oo loogu talagalay kiniinka sawirka */
  8. @media ( ugu badnaan - ballac : 767px ) { ... }     
  9.  
  10. /* Taleefannada muuqaalka iyo hoos */
  11. @media ( ugu badnaan - ballac : 480px ) { ... }

Fasallada utility ee ka jawaabaya

Horumarka saaxiibtinimo ee moobilka dhaqsaha badan, u isticmaal fasaladan utility muujinta iyo qarinta waxyaabaha ku jira aaladda. Hoos waxaa ku yaal shax fasallada la heli karo iyo saamaynta ay ku leeyihiin qaabka su'aalaha warbaahinta la siiyay (oo lagu calaamadeeyay qalab). Waxa laga heli karaa responsive.less.

Fasalka Telefoonada767px iyo ka hooseeya Kiniinnada979px ilaa 768px MiisaankaAsal ahaan
.visible-phone Muuqda
.visible-tablet Muuqda
.visible-desktop Muuqda
.hidden-phone Muuqda Muuqda
.hidden-tablet Muuqda Muuqda
.hidden-desktop Muuqda Muuqda

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. Utility ka jawaabaya waa in aan lagu isticmaalin miisaska, sidaas darteedna lama taageero.

Kiis tijaabo ah oo utility ah oo ka jawaabaya

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