I-Bootstrap

Isikafula

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

Iintloko phezulu! La maxwebhu ngawe-v2.3.2, engasaxhaswanga ngokusemthethweni. Jonga inguqulelo yamva nje yeBootstrap!

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 yokusetha kwakhona iye yalahlwa ngokuthanda i- Normalize.css , iprojekthi kaNicolas Gallagher kunye no- Jonathan Neal 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 ekunene 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>

Imihlathi yokufuya

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.

Inqanaba loku-1 ikholamu
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 yolwelo 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

Iigridi zolwelo zisebenzisa indlwane ngokwahlukileyo: umgangatho ngamnye wendlwane kufuneka udibanise ukuya kutsho kwiikholamu ezili-12. Oku kungenxa yokuba igridi yolwelo isebenzisa iipesenti, hayi ipixels, ukuseta ububanzi.

Ulwelo 12
Ulwelo 6
Ulwelo 6
Ulwelo 6
Ulwelo 6 
  1. <div class = "Row-fluid" > 
  2.   <div class = "span12" > 
  3.     Ulwelo 12
  4.     <div class = "Row-fluid" > 
  5.       <div class = "span6" > 
  6.         Ulwelo 6
  7.         <div class = "Row-fluid" > 
  8.           <div class = "span6" > Fluid 6 </div> 
  9.           <div class = "span6" > Fluid 6 </div> 
  10.         </ div>
  11.       </ div>
  12.       <div class = "span6" > Fluid 6 </div> 
  13.     </ div>
  14.   </ div>
  15. </ 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 ngokuthembekileyo kwaye kuphela njengesiqalo kubaphulaphuli bakho beselula. Kwiiprojekthi ezinkulu, qwalasela iziseko zekhowudi ezinikezelweyo kwaye hayi iileyibhile 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
Umboniso omkhulu 1200px nangaphezulu 70px 30px
Ukuhlala kukho 980px kwaye phezulu 60px 20px
Portrait tablets 768px nangaphezulu 42px 20px
Iifowuni kwiitafile 767px nangaphantsi Iikholamu zolwelo, akukho bubanzi busisigxina
Iifowuni 480px nangaphantsi Iikholamu zolwelo, akukho bubanzi busisigxina 
  1. /* Idesktop enkulu */
  2. @media ( min - ububanzi : 1200px ) { ... }     
  3.  
  4. /* Umfanekiso wethebhulethi kwimbonakalo yomhlaba kunye nedesktop */
  5. @media ( min - ububanzi : 768px ) kunye ( max - ububanzi : 979px ) { ... }        
  6.  
  7. /* Ifowuni yokujonga umhlaba kwithebhulethi yokubonisa */
  8. @media ( max - wide : 767px ) { ... }     
  9.  
  10. /* Iifowuni zokujonga umhlaba kunye nezantsi */
  11. @media ( max - wide : 480px ) { ... }

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. Izixhobo eziphendulayo akufuneki zisetyenziswe kunye neetafile, kwaye ngenxa yoko azixhaswa.

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