I-Bootstrap

Isikafula

I-Bootstrap yakhelwe kwiigridi zekholamu ezili-12 eziphendulayo, uyilo, kunye namacandelo.

Iisetingi zehlabathi

Ifuna HTML5 doctype

I-Bootstrap isebenzisa izinto ezithile ze-HTML kunye neempawu zeCSS ezifuna ukusetyenziswa kwe-HTML5 doctype. Yifake ekuqaleni kwazo zonke iiprojekthi zakho.

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

Ukuchwetheza kunye namakhonkco

I-Bootstrap iseta umboniso osisiseko wehlabathi jikelele, ukuchwetheza, kunye nezimbo zekhonkco. Ngokukodwa, thina:

  • Susa marginemzimbeni
  • Misela background-color: white;kwibody
  • Sebenzisa i- @baseFontFamily,, @baseFontSizekunye @baseLineHeightneempawu njengesiseko sethu sokuchwetheza
  • Cwangcisa umbala wekhonkco wehlabathi ngokusebenzisa @linkColorkwaye usebenzise ikhonkco elikrwelelayo kuphela:hover

Ezi ndlela zinokufumaneka ngaphakathi kwe - scaffolding.less .

Phinda umisele ngokuQinisekisa

NgeBootstrap 2, ibhlokhi endala yokuseta ngokutsha iye yalahlwa ithanda Normalize.css , iprojekthi kaNicolas Gallagher ekwanika amandla i HTML5 Boilerplate . Ngelixa sisebenzisa okuninzi kokuQinisekisa ngaphakathi kokusetha kwakhona kwethu.less , sisuse ezinye izinto ezikhethekileyo zeBootstrap.

Inkqubo yegridi ehlala ikho

Umzekelo wegridi ephilayo

Inkqubo yegridi yeBootstrap engagqibekanga isebenzisa iikholamu ezili -12 , yenzela i-940px isikhongozeli esibanzi ngaphandle kweempawu eziphendulayo ezenziweyo . Ngefayile ye-CSS ephendulayo yongeziweyo, igridi iqhelana ne-724px kunye ne-1170px ububanzi ngokuxhomekeke kwindawo yakho yokujonga. Ngaphantsi kwe-767px izibuko zokujonga, iikholamu ziba lulwelo kwaye zipakishwe ngokuthe nkqo.

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

I-HTML yegridi esisiseko

Kuluhlu olulula lwekholamu ezimbini, yenza a .rowkwaye wongeze inani elifanelekileyo .span*leekholamu. Njengoko oku kuyigridi yekholamu ezili-12, nganye .span*idlula inani laloo miqolo ili-12, kwaye kufuneka isoloko idibanisa ukuya kutsho ku-12 kumqolo ngamnye (okanye inani leekholamu kumzali).

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

Sinikwe lo mzekelo, sinayo .span4kwaye .span8, senze iikholamu ezili-12 zizonke kunye nomqolo opheleleyo.

Imihlathi yokumisela

Hambisa iikholamu ekhohlo usebenzisa .offset*iiklasi. Iklasi nganye yongeza umda wasekhohlo wekholamu ngekholamu epheleleyo. Umzekelo, .offset4uhamba .span4ngaphaya kweekholamu ezine.

4
3 ukulinganisa 2
3 ukulinganisa 1
3 ukulinganisa 2
6 ukulinganisa 3 
  1. <div class = "umqolo" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </ div>

Iikholamu zokuzalela

Ukuxhoma umxholo wakho ngegridi engagqibekanga, yongeza entsha .rowkunye neseti .span*yeekholamu ngaphakathi koluhlu olukhoyo .span*. Imiqolo ebekwe kwindlwane kufuneka ibandakanye uluhlu lwemiqolo edibanisa inani leekholamu zomzali wayo.

Umzekelo

Apha .span4iikholamu ezimbini ezifakwe kwindlwane zibekwe ngaphakathi kwe .span8.

Inqanaba loku-1 lekholamu
Inqanaba lesi-2
Inqanaba lesi-2 
  1. <div class = "umqolo" > 
  2.   <div class = "span9" > 
  3.     Inqanaba loku-1 ikholamu
  4.     <div class = "umqolo" > 
  5.       <div class = "span6" > Inqanaba lesi-2 </div> 
  6.       <div class = "span3" > Inqanaba lesi-2 </div> 
  7.     </ div>
  8.   </ div>
  9. </ div>

Inkqubo yegridi yolwelo

Umzekelo wegridi yolwelo ephilayo

Inkqubo yegridi yamanzi isebenzisa iipesenti endaweni yeepikseli kububanzi bekholamu. Inamandla okuphendula afanayo njengenkqubo yethu yegridi esisigxina, iqinisekisa ubungakanani obufanelekileyo bezisombululo eziphambili zesikrini kunye nezixhobo.

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

Ulwelo olusisiseko lwe-HTML yegridi

Yenza nawuphi na umqolo "ulwelo" ngokutshintshela .rowku- .row-fluid. Iiklasi zekholomu zihlala zifana ngokuchanekileyo, okwenza kube lula ukuzulazula phakathi kweegridi ezisisigxina kunye nezamanzi.

  1. <div class = "Row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </ div>

Ukutshatyalaliswa kolwelo

Isebenza ngendlela efanayo nesixokelelwano sothungelwano lwegridi esisigxina: yongeza .offset*nakweyiphi na ikholamu ukulungisa loo miqolo mininzi.

4
4 ukulinganisa 4
3 ukulinganisa 3
3 ukulinganisa 3
6 ukulinganisa 6 
  1. <div class = "Row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </ div>

Ukuzalela ulwelo

Ukuzalela ngeegridi ezilulwelo kukwahluka kancinane: inani leentsika ezibekwe kwindlwane akufanelekanga ukuba lihambelane nenani leekholamu zomzali. Endaweni yoko, inqanaba ngalinye leekholamu ezifakwe kwindlwane zisetwa ngokutsha kuba umqolo ngamnye uthatha i-100% yekholamu yomzali.

Ulwelo 12
Ulwelo 6
Ulwelo 6 
  1. <div class = "Row-fluid" > 
  2.   <div class = "span12" > 
  3.     Inqanaba loku-1 lekholamu
  4.     <div class = "Row-fluid" > 
  5.       <div class = "span6" > Inqanaba lesi-2 </div> 
  6.       <div class = "span6" > Inqanaba lesi-2 </div> 
  7.     </ div>
  8.   </ div>
  9. </ div>

Uyilo

Uyilo oluzinzileyo

Ibonelela ngobubanzi obusisigxina obuqhelekileyo (kunye nokhetho lokuphendula) <div class="container">olufunekayo kuphela.

  1. <umzimba>
  2.   <div class = "container" > 
  3.     ...
  4.   </ div>
  5. </ umzimba>

Uyilo lolwelo

Yenza ulwelo, iphepha <div class="container-fluid">elinezikholamu ezimbini nge-enkulu kusetyenziso kunye namaxwebhu.

  1. <div class = "container-fluid" > 
  2.   <div class = "Row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Umxholo wesixwexwe esisecaleni-->
  5.     </ div>
  6.     <div class = "span10" > 
  7.       <!--Umxholo womzimba-->
  8.     </ div>
  9.   </ div>
  10. </ div>

Uyilo oluphendulayo

Ukuvumela iimpawu zokuphendula

Vula i-CSS ephendulayo kwiprojekthi yakho ngokubandakanya i-meta tag efanelekileyo kunye necwecwe lesimbo elongezelelweyo ngaphakathi <head>koxwebhu lwakho. Ukuba uqokelele i-Bootstrap kwiphepha le-Lungisa, kufuneka ubandakanye kuphela i-meta tag.

  1. <meta name = "viewport" content = "width=device-width, first-scale=1.0" >  
  2. <link href = "impahla/css/bootstrap-responsive.css" rel = "icwecwe lesimbo" >

Iintloko phezulu! I-Bootstrap ayibandakanyi iimpawu eziphendulayo ngokuzenzekela ngeli xesha njengoko ingeyiyo yonke into ekufuneka iphendule. Endaweni yokukhuthaza abaphuhlisi ukuba balisuse eli nqaku, sibona ukuba kungcono ukulenza njengoko lifuneka.

Malunga ne-Bootstrap ephendulayo

Izixhobo eziphendulayo

Imibuzo yemidiya ivumela i-CSS yesiko ngokusekelwe kwinani leemeko-imilinganiselo, ububanzi, uhlobo lokubonisa, njl njl-kodwa ngokuqhelekileyo kugxininise min-widthkwaye max-width.

  • Guqula ububanzi bekholomu kwigridi yethu
  • Zipakishe izinto endaweni yokudada apho kuyimfuneko
  • Hlaziya izihloko kunye nokubhaliweyo ukuze kulunge ngakumbi kwizixhobo

Sebenzisa imibuzo yemidiya ngentembeko kwaye kuphela njengesiqalo kubaphulaphuli bakho beselula. Kwiiprojekthi ezinkulu, qwalasela iziseko zekhowudi ezinikezelweyo kwaye hayi iileya zemibuzo yemidiya.

Izixhobo ezixhaswayo

I-Bootstrap ixhasa iqela lemibuzo yemidiya kwifayile enye ukunceda ukwenza iiprojekthi zakho zifaneleke ngakumbi kwizixhobo ezahlukeneyo kunye nezisombululo zesikrini. Nantsi into ebandakanyiweyo:

Ileyibhile Ububanzi bobeko Ububanzi bekholamu Ububanzi bomsele
Iifowuni 480px nangaphantsi Iikholamu zolwelo, akukho bubanzi busisigxina
Iifowuni kwiitafile 767px nangaphantsi Iikholamu zolwelo, akukho bubanzi busisigxina
Portrait tablets 768px nangaphezulu 42px 20px
Ukuhlala kukho 980px kwaye phezulu 60px 20px
Umboniso omkhulu 1200px nangaphezulu 70px 30px 
  1. /* Iifowuni zokujonga umhlaba kunye nezantsi */
  2. @media ( max - wide : 480px ) { ... }     
  3.  
  4. /* Ifowuni yokujonga umhlaba kwithebhulethi yokubonisa */
  5. @media ( max - wide : 767px ) { ... }     
  6.  
  7. /* Umfanekiso wethebhulethi kwimbonakalo yomhlaba kunye nedesktop */
  8. @media ( min - ububanzi : 768px ) kunye ( max - ububanzi : 979px ) { ... }        
  9.  
  10. /* Idesktop enkulu */
  11. @media ( min - ububanzi : 1200px ) { ... }

Iiklasi eziluncedo eziphendulayo

Kuphuhliso olukhawulezayo lweselula, sebenzisa ezi klasi ziluncedo ekuboniseni nasekufihleni umxholo ngesixhobo. Apha ngezantsi kukho itheyibhile yeeklasi ezikhoyo kunye nesiphumo sazo kwindlela yombuzo wemidiya enikiweyo (ebhalwe ngesixhobo). Zinokufumaneka kwi responsive.less.

Iklasi Iifowuni767px nangaphantsi Amacwecwe979px ukuya 768px IideskithophuUkuhlala kukho
.visible-phone Iyabonakala
.visible-tablet Iyabonakala
.visible-desktop Iyabonakala
.hidden-phone Iyabonakala Iyabonakala
.hidden-tablet Iyabonakala Iyabonakala
.hidden-desktop Iyabonakala Iyabonakala

Ukusetyenziswa nini

Sebenzisa ngokulinganiselweyo kwaye ugweme ukwenza iinguqulelo ezahlukeneyo ngokupheleleyo kwindawo enye. Endaweni yoko, zisebenzise ukuncedisana neprizenteyishini yesixhobo ngasinye.

Imeko yovavanyo lwezixhobo eziphendulayo

Yenza ubungakanani kwakhona kwisikhangeli sakho okanye ulayishe kwizixhobo ezahlukeneyo ukuvavanya ezi klasi zingentla.

Ibonakala kwi...

Iimpawu eziluhlaza zibonisa ukuba iklasi iyabonakala kwindawo yakho yokujonga yangoku.

  • Ifowuni✔ Ifowuni
  • Icwecwe✔ Icwecwe
  • Idesktop✔ Idesktop

Ifihlwe kwi...

Apha, amanqaku okukhangela aluhlaza abonisa ukuba udidi lufihliwe kwindawo yakho yokujonga yangoku.

  • Ifowuni✔ Ifowuni
  • Icwecwe✔ Icwecwe
  • Idesktop✔ Idesktop