I-Bootstrap

Isikafula

I-Bootstrap yakhiwe kwigridi yekholamu ye-12 ephendulayo. Sikwaquke i-fixed- kunye ne-fluid-width layouts ngokusekelwe kuloo nkqubo.

Izimbo zehlabathi zokuseta ngokutsha i-CSS, ukuchwetheza, kunye namakhonkco

Ifuna HTML5 doctype

I-Bootstrap isebenzisa izinto ze-HTML kunye neempawu zeCSS ezifuna ukusetyenziswa kwe-HTML5 doctype. Qiniseka ukuba uyayibandakanya ekuqaleni kwephepha ngalinye le-Bootstrapped kwiprojekthi yakho.

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

Ukuchwetheza kunye namakhonkco

Ngaphakathi kwefayile ye- scaffolding.less , siseta umboniso osisiseko wehlabathi, ukuchwetheza, kunye nezimbo zekhonkco. Ngokukodwa, thina:

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

Phinda umisele ngokuQinisekisa

Ukususela kwi-Bootstrap 2, ukusetha ngokutsha kwe-CSS yemveli kuye kwavela ukuze kusetyenziswe izinto ezivela kwi- Normalize.css , iprojekthi kaNicolas Gallagher ekwanika amandla i- HTML5 Boilerplate .

Ukusetha kwakhona okutsha kusengafunyanwa kwi- reset.less , kodwa ngezinto ezininzi ezisusiweyo ngenxa yobufutshane kunye nokuchaneka.

Inkqubo yegridi ehlala ikho iikholamu ezili-12 ezine-twist ephendulayo

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

Inkqubo yegridi engagqibekanga ebonelelweyo njengenxalenye yeBootstrap yi- 940px-wide, 12-column grid .

Ikwanazo neenguqu ezine eziphendulayo kwizixhobo ezahlukeneyo kunye nezisombululo: ifowuni, umfanekiso wethebhulethi, imbonakalo yomhlaba wetafile kunye needesktops ezincinci, kunye nedesktop enkulu ebanzi.

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

Njengoko kubonisiwe apha, uyilo olusisiseko lunokwenziwa "ngeekholamu" ezimbini, nganye ithatha inani leekholamu ezili-12 ezisisiseko esizichaze njengenxalenye yenkqubo yethu yegridi.


Imihlathi yokumisela

4
4 ukulinganisa 4
3 ukulinganisa 3
3 ukulinganisa 3
8 ukulinganisa 4 
  1. <div class = "umqolo" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </ div>

Imihlathi yokufuya

Ngenkqubo yegridi engatshintshiyo (engeyiyo eyolwelo) kwiBootstrap, ukwenza indlwane kulula. Ukwakha umxholo wakho, yongeza nje entsha .rowkunye neseti yeekholamu ngaphakathi kwekholamu .span*ekhoyo ..span*

Umzekelo

Imiqolo ebekwe kwindlwane kufuneka ibandakanye uluhlu lwemiqolo edibanisa inani lemiqolo yomzali wayo. Umzekelo, .span3iikholamu ezimbini ezifakwe kwindlwane kufuneka zibekwe ngaphakathi kwe .span6.

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

Inkqubo yegridi ye -Fluid 12 ephendulayo, iikholomu ezisekelwe kwipesenti

Iikholamu zolwelo

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

Iipesenti, hayi ipixels

Inkqubo yegridi yamanzi isebenzisa iipesenti kububanzi bekholomu endaweni yeepikseli ezisisigxina. Ikwanayo nokwahluka okuphendulayo okufanayo njengenkqubo yethu yegridi ezinzileyo, iqinisekisa ubungakanani obufanelekileyo bezisombululo eziphambili zesikrini kunye nezixhobo.

Imiqolo yolwelo

Yenza nawuphi na umqolo ube ulwelo ngokulula ngokutshintshela .rowku- .row-fluid. Iikholamu zihlala zifana ncakasana, nto leyo eyenza kube lula ukujika phakathi koyilo olusisigxina kunye nolwelo.

IMarkup

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

Ukuzalela ulwelo

Ukuzalela ngeegridi ezilulwelo kukwahluka kancinane: inani leentsika ezifakwe kwindlwane akuyomfuneko ukuba lihambelane nomzali. Endaweni yoko, iikholamu zakho zisetwa kwakhona kwinqanaba ngalinye 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>

Ukulungiswa kwegridi

Iyaguquguquka Ixabiso elimiselweyo Inkcazo
@gridColumns 12 Inani leekholamu
@gridColumnWidth 60px Ububanzi bekholamu nganye
@gridGutterWidth 20px Isithuba esibi phakathi kweekholamu
@siteWidth Isimbuku esibaliweyo kuzo zonke iikholamu kunye neegutha Ubala inani leekholomu kunye neegutter ukuseta ububanzi .container-fixed()bomxube

Izinto eziguquguqukayo kwi-LESS

Eyakhelwe kwiBootstrap zimbalwa zezinto eziguquguqukayo zokwenza ngokwezifiso inkqubo yegridi ye-940px, ebhalwe ngasentla. Zonke iinguqu zegridi zigcinwa kwi-variables.less.

Indlela yokwenza ngokwezifiso

Ukuguqula igridi kuthetha ukutshintsha izinto ezintathu @grid*eziguquguqukayo kunye nokubuyisela kwakhona i-Bootstrap. Guqula igridi eguquguqukayo kwizinto eziguquguqukayo.ngaphantsi kwaye usebenzise enye yeendlela ezine ezibhalwe ukuqokelela kwakhona . Ukuba wongeza iikholamu ezininzi, qiniseka ukuba wongeza i-CSS kwabo bakwigridi.less.

Ukuhlala uphendula

Ukwenziwa ngokwezifiso kwegridi kusebenza kuphela kwinqanaba elimiselweyo, igridi ye-940px. Ukugcina imiba ephendulayo ye-Bootstrap, kuya kufuneka ukuba wenze ngokusesikweni iigridi kwi-responsive.less.

Uyilo Iitemplate ezisisiseko ukwenza amaphepha ewebhu

Uyilo oluzinzileyo

Uyilo olungagqibekanga nolulula lwe-940px-ebanzi, olusembindini malunga nayo nayiphi na iwebhusayithi okanye iphepha elinikezelweyo <div class="container">.

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

Uyilo lolwelo

<div class="container-fluid">inika ulwakhiwo lwephepha oluguquguqukayo, min- kunye nobubanzi obukhulu, kunye nebar yecala lasekhohlo. Ilungile 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 imibuzo yeMedia yezixhobo ezahlukeneyo kunye nezisombululo

Izixhobo eziphendulayo

Into abayenzayo

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
Ii-smartphones 480px nangaphantsi Iikholamu zolwelo, akukho bubanzi busisigxina
Ii-smartphones 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

Ifuna imeta tag

Ukuqinisekisa ukuba izixhobo zibonakalisa amaphepha aphendulayo ngokufanelekileyo, quka i-meta tag ye-viewport.

  1. <meta name = "viewport" content = "width=device-width, first-scale=1.0" >

Ukusebenzisa imibuzo yemidiya

I-Bootstrap ayibandakanyi ngokuzenzekelayo le mibuzo yemidiya, kodwa ukuqonda kunye nokuzongeza kulula kakhulu kwaye kufuna ukuseta okuncinci. Unokukhetha okumbalwa kokubandakanya iimpawu eziphendulayo zeBootstrap:

  1. Sebenzisa inguqulelo ehlanganisiweyo ephendulayo, i-bootstrap-responsive.css
  2. Yongeza @import "responsive.less" kwaye uqokelele iBootstrap
  3. Guqula kwaye uqokelele i-responsive.less njengefayile eyahlukileyo

Kutheni ungayifaki nje? Inyaniso mayithethwe, ayizizo zonke izinto ezifuna ukuphendulwa. Endaweni yokukhuthaza abaphuhlisi ukuba balisuse eli nqaku, sibona ukuba yeyona nto ilungileyo ukuyenza.

  1.   // Iifowuni zeLandscape kunye nezantsi
  2.   @media ( max - wide : 480px ) { ... }     
  3.  
  4.   // Ifowuni yokujonga umhlaba kwithebhulethi ye-portrait
  5.   @media ( max - wide : 768px ) { ... }     
  6.  
  7.   // Umfanekiso wethebhulethi kwimbonakalo yomhlaba kunye nedesktop
  8.   @media ( min - ububanzi : 768px ) kunye ( max - ububanzi : 980px ) { ... }        
  9.  
  10.   // Idesktop enkulu
  11.   @media ( min - ububanzi : 1200px ) { .. }

Iiklasi eziluncedo eziphendulayo

Bazintoni

Kuphuhliso olukhawulezayo lweselula, sebenzisa ezi klasi ziluncedo ezisisiseko zokubonisa kunye nokufihla umxholo ngesixhobo.

Ukusetyenziswa nini

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

Umzekelo, ungabonisa i <select>element ye nav kuyilo lwemfonomfono, kodwa hayi kwiitafile okanye iidesktop.

Iiklasi zenkxaso

Iboniswe apha yitheyibhile yeeklasi esizixhasayo kunye nesiphumo sazo kuyilo lombuzo wemidiya enikiweyo (ebhalwe ngesixhobo). Zinokufumaneka kwi responsive.less.

Iklasi Iifowuni480px nangaphantsi Amacwecwe767px nangaphantsi Iideskithophu768px nangaphezulu
.visible-phone Iyabonakala
.visible-tablet Iyabonakala
.visible-desktop Iyabonakala
.hidden-phone Iyabonakala Iyabonakala
.hidden-tablet Iyabonakala Iyabonakala
.hidden-desktop Iyabonakala Iyabonakala

Ityala lovavanyo

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

Ibonakala kwi...

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

Ifihlwe kwi...

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