I-Bootstrap

I-scaffolding

I-Bootstrap yakhelwe kugridi yamakholomu angu-12 ephendulayo. Siphinde safaka nezakhiwo ezingaguquki- kanye nobubanzi be-fluid-width ngokusekelwe kuleyo sistimu.

Izitayela zomhlaba wonke zokusetha kabusha i-CSS, ukuthayipha, nezixhumanisi

Idinga i-HTML5 doctype

I-Bootstrap isebenzisa izakhi ze-HTML kanye nezakhiwo ze-CSS ezidinga ukusetshenziswa kwe-HTML5 doctype. Qiniseka ukuthi uyayifaka ekuqaleni kwawo wonke amakhasi ane-Bootstrapped kuphrojekthi yakho.

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

Ukuthayipha kanye nezixhumanisi

Ngaphakathi kwefayela le- scaffolding.less , sibeka isibonisi somhlaba esiyisisekelo, i-typography, nezitayela zokuxhumanisa. Ngokukhethekile, thina:

  • Susa imajini emzimbeni
  • Setha background-color: white;kubody
  • Sebenzisa @baseFontFamily, @baseFontSize, kanye @baseLineHeightnezibaluli njengesisekelo sethu se-typography
  • Setha umbala wesixhumanisi somhlaba wonke ngokusebenzisa @linkColorfuthi usebenzise isixhumanisi esidwebelayo kuphela:hover

Setha kabusha usebenzisa okuthi Normalize

Kusukela nge-Bootstrap 2, ukusetha kabusha kwe-CSS okungokwesiko kuthuthukile ukuze kusetshenziswe izici ezisuka ku- Normalize.css , iphrojekthi ka- Nicolas Gallagher ephinde enike amandla i- HTML5 Boilerplate .

Ukusetha kabusha okusha kusengatholakala kokuthi reset.less , kodwa kunezici eziningi ezikhishiwe ukuze kube mfushane nokunemba.

Isistimu yegridi ezenzakalelayo amakholomu angu-12 ane-twist esabelayo

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

Isistimu yegridi ezenzakalelayo enikezwe njengengxenye ye-Bootstrap iyigridi engu-940px-wide, 12-column grid .

Iphinde ibe nokuhlukahluka okune okusabelayo kumadivayisi ahlukahlukene nezinqumo: ifoni, isithombe sethebhulethi, indawo yetafula namadeskithophu amancane, namadeskithophu amakhulu wesikrini esibanzi.

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

Njengoba kuboniswe lapha, ukwakheka okuyisisekelo kungadalwa “ngamakholomu” amabili, ngalinye lihlanganisa inombolo yamakholomu ayisisekelo angu-12 esiwachaze njengengxenye yesistimu yethu yegridi.


Ukusetha amakholomu

4
4 isiqephu 4
3 isiqephu 3
3 isiqephu 3
8 isiqephu 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

Amakholomu enza isidleke

Ngesistimu yegridi emile (engenamanzi) ku-Bootstrap, ukwenza isidleke kulula. Ukuze uhlanganise okuqukethwe kwakho, vele wengeze okusha .rownesethi .span*yamakholomu ngaphakathi kwekholomu ekhona .span*.

Isibonelo

Imigqa efakwe kusidleke kufanele ifake isethi yamakholomu ahlanganisa inani lamakholomu omzali wayo. Isibonelo, .span3amakholomu amabili anesidleke kufanele abekwe ngaphakathi kwe- .span6.

Ileveli 1 yekholomu
Ileveli 2
Ileveli 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     Ileveli 1 yekholomu
  4.     <div class = "row" > 
  5.       <div class = "span6" > Izinga 2 </div> 
  6.       <div class = "span6" > Izinga 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Isistimu yegridi ye-Fluid 12 amakholomu asabelayo, asekelwe kumaphesenti

Amakholomu aketshezi

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

Amaphesenti, hhayi amaphikseli

Isistimu yegridi ewuketshezi isebenzisa amaphesenti obubanzi bekholomu esikhundleni samaphikseli angashintshi. Iphinde ibe nokuhlukahluka okusabelayo okufanayo njengesistimu yethu yegridi engashintshi, iqinisekisa izilinganiso ezifanele zesinqumo esibalulekile sesikrini namadivayisi.

Imigqa yoketshezi

Yenza noma yimuphi umugqa ube uketshezi ngokushintsha .rowube ngu- .row-fluid. Amakholomu ahlala efana ncamashi, okwenza kube lula kakhulu ukupheqa phakathi kwezakhiwo ezingaguquki neziwuketshezi.

Imakhaphu

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

Isidleke samanzi

Ukwenza isidleke ngamagridi awuketshezi kuhluke kancane: inani lamakholomu afakwe isidleke alidingi ukufana nomzali. Kunalokho, amakholomu akho asethwa kabusha kuleveli ngayinye ngenxa yokuthi umugqa ngamunye uthatha u-100% wekholomu yomzali.

Uketshezi 12
Uketshezi 6
Uketshezi 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Ileveli 1 yekholomu
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Izinga 2 </div> 
  6.       <div class = "span6" > Izinga 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Ukwenza ngokwezifiso igridi

Iyaguquguquka Inani elizenzakalelayo Incazelo
@gridColumns 12 Inombolo yamakholomu
@gridColumnWidth 60px Ububanzi bekholomu ngayinye
@gridGutterWidth 20px Isikhala esingesihle phakathi kwamakholomu
@siteWidth Isamba esibaliwe sawo wonke amakholomu nama-gutters Ibala inani lamakholomu namagutha ukusetha ububanzi be- .container-fixed()mixin

Okuguquguqukayo kokuthi LESS

Okwakhelwe ku-Bootstrap yidlanzana lezinto eziguquguqukayo zokwenza ngokwezifiso isistimu yegridi engu-940px, ebhalwe ngenhla. Zonke eziguquguqukayo zegridi zigcinwa kuma-variables.less.

Indlela yokwenza ngendlela oyifisayo

Ukushintsha igridi kusho ukushintsha @grid*okuguquguqukayo okuthathu nokubuyisela kabusha i-Bootstrap. Shintsha okuguquguqukayo kwegridi kokuguquguqukayo.kancane futhi usebenzise enye yezindlela ezine ezibhalwe phansi ukuze uhlanganise . Uma wengeza amakholomu engeziwe, qiniseka ukuthi ungeza i-CSS yalawo aku-grid.less.

Ukuhlala uphendula

Ukwenza ngendlela oyifisayo igridi kusebenza kuphela ezingeni elimisiwe, igridi engu-940px. Ukuze ulondoloze izici ezisabelayo ze-Bootstrap, kuzodingeka futhi wenze ngendlela oyifisayo amagridi ngokusabela.less.

Izakhiwo Izifanekiso Eziyisisekelo zokudala amakhasi ewebhu

Isakhiwo esilungisiwe

Isakhiwo esimisiwe nesilula esibanzi esingu-940px-wide, esimaphakathi sanoma iyiphi iwebhusayithi noma ikhasi elihlinzekwe ngomunye <div class="container">.

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

Isakhiwo samanzi

<div class="container-fluid">inikeza ukwakheka kwekhasi okuguquguqukayo, ububanzi obuncane kanye nobukhulu obukhulu, kanye nebha eseceleni engakwesobunxele. Ilungele izinhlelo zokusebenza namadokhumenti.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Okuqukethwe kwebha eseceleni-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Okuqukethwe komzimba-->
  8.     </div>
  9.   </div>
  10. </div>

Idizayini ephendulayo Imibuzo yemidiya yamadivayisi ahlukahlukene nezinqumo

Amadivayisi asabelayo

Abakwenzayo

Imibuzo yemidiya ivumela i-CSS yangokwezifiso ngokususelwe kwinani lemibandela—izilinganiso, ububanzi, uhlobo lokubonisa, njll—kodwa ngokuvamile igxila eduze min-widthfuthi max-width.

  • Shintsha ububanzi bekholomu kugridi yethu
  • Staki izici esikhundleni sokuntanta lapho kudingeka khona
  • Shintsha usayizi wezihloko nombhalo ukuze ulungele amadivayisi

Sebenzisa imibuzo yemidiya ngokuzibophezela futhi njengesiqalo kuphela ezithamelini zakho zeselula. Kumaphrojekthi amakhulu, cabanga izisekelo zekhodi ezizinikele hhayi izendlalelo zemibuzo yemidiya.

Amadivayisi asekelwe

I-Bootstrap isekela imibuzo embalwa yemidiya efayeleni elilodwa ukuze isize ukwenza amaphrojekthi akho afaneleke kakhudlwana kumadivayisi ahlukene nezinqumo zesikrini. Nakhu okufakiwe:

Ilebula Ububanzi besakhiwo Ububanzi bekholomu Ububanzi be-Gutter
Ama-Smartphones 480px nangaphansi Amakholomu anoketshezi, abukho ububanzi obungashintshi
Ama-Smartphones kumathebulethi 767px nangaphansi Amakholomu anoketshezi, abukho ububanzi obungashintshi
Amathebulethi esithombe 768px nangaphezulu 42px 20px
Okuzenzakalelayo 980px nangaphezulu 60px 20px
Isibonisi esikhulu 1200px nangaphezulu 70px 30px

Idinga i-meta tag

Ukuqinisekisa ukuthi amadivayisi abonisa amakhasi asabelayo ngendlela efanele, faka i-meta tag yembobo yokubuka.

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

Ukusebenzisa imibuzo yabezindaba

I-Bootstrap ayifaki le mibuzo yemidiya ngokuzenzakalelayo, kodwa ukuqonda nokuyengeza kulula kakhulu futhi kudinga ukusetha okuncane. Unezinketho ezimbalwa zokufaka izici eziphendulayo ze-Bootstrap:

  1. Sebenzisa inguqulo ehlanganisiwe ephendulayo, i-bootstrap-responsive.css
  2. Engeza i-@import "responsive.less" bese uhlanganisa kabusha i-Bootstrap
  3. Lungisa futhi uphinde uhlanganise i-responsive.less njengefayela elihlukile

Kungani ungavele uyifake? Iqiniso liyakhulunywa, akuzona zonke izinto ezidinga ukusabela. Esikhundleni sokukhuthaza onjiniyela ukuthi basuse lesi sici, sikubona kungcono kakhulu ukusivumela.

  1.   // Amafoni we-Landscape naphansi
  2.   @media ( ubuningi - ububanzi : 480px ) { ... }     
  3.  
  4.   // Ifoni ye-Landscape ukuze i-portrait tablet
  5.   @media ( ubuningi - ububanzi : 768px ) { ... }     
  6.  
  7.   // Ithebulethi ye-Portrait ku-landscape nedeskithophu
  8.   @media ( iminithi - ububanzi : 768px ) kanye ( ubuningi - ububanzi : 980px ) { ... }        
  9.  
  10.   // Ideskithophu enkulu
  11.   @media ( iminithi - ububanzi : 1200px ) { .. }

Amakilasi ezinsiza ezisabelayo

Bayini

Ukuze uthole intuthuko esheshayo yeselula, sebenzisa lezi zigaba zensiza eziyisisekelo ukuze ubonise futhi ufihle okuqukethwe ngedivayisi.

Isetshenziswa nini

Sebenzisa ngokulinganiselwe futhi ugweme ukudala izinguqulo ezihluke ngokuphelele zesayithi elifanayo. Kunalokho, zisebenzise ukuze zigcwalise isethulo sedivayisi ngayinye.

Isibonelo, ungase ubonise i- <select>elementi ye-nav ezakhiweni zeselula, kodwa hhayi kumathebulethi noma amadeskithophu.

Amakilasi okusekela

Kuboniswe lapha ithebula lamakilasi esiwasekelayo kanye nomthelela wawo esakhiweni sombuzo wemidiya (esibhalwe idivayisi). Angatholakala ku responsive.less.

Ikilasi Amafoni480px nangaphansi Izibhebhe767px nangaphansi Amadeskithophu768px nangaphezulu
.visible-phone Kubonakala
.visible-tablet Kubonakala
.visible-desktop Kubonakala
.hidden-phone Kubonakala Kubonakala
.hidden-tablet Kubonakala Kubonakala
.hidden-desktop Kubonakala Kubonakala

Icala lokuhlola

Shintsha usayizi wesiphequluli sakho noma ulayishe kumadivayisi ahlukene ukuze uhlole izigaba ezingenhla.

Ibonakala ku...

  • Ucingo✔ Ifoni
  • Ithebhulethi✔ Ithebhulethi
  • Ideskithophu✔ Ideskithophu

Kufihliwe ku...

  • Ucingo✔ Ifoni
  • Ithebhulethi✔ Ithebhulethi
  • Ideskithophu✔ Ideskithophu