I-Bootstrap

I-scaffolding

I-Bootstrap yakhelwe phezu kwamagridi wamakholomu angu-12 aphendulayo, izakhiwo, nezingxenye.

Amakhanda phezulu! Lawa madokhumenti awe-v2.3.2, engasasekelwa ngokusemthethweni. Hlola inguqulo yakamuva ye-Bootstrap!

Izilungiselelo zomhlaba jikelele

Idinga i-HTML5 doctype

I-Bootstrap isebenzisa izici ezithile ze-HTML kanye nezakhiwo ze-CSS ezidinga ukusetshenziswa kwe-HTML5 doctype. Ifake ekuqaleni kwawo wonke amaphrojekthi akho.

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

Ukuthayipha kanye nezixhumanisi

I-Bootstrap isetha isibonisi somhlaba jikelele esiyisisekelo, i-typography, nezitayela zokuxhumanisa. Ngokukhethekile, thina:

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

Lezi zitayela zingatholakala ngaphakathi kwe -scaffolding.less .

Setha kabusha usebenzisa okuthi Normalize

Nge-Bootstrap 2, ibhulokhi yokusetha kabusha endala yehlisiwe kwavuna i- Normalize.css , iphrojekthi ka- Nicolas Gallagher kanye no- Jonathan Neal ephinde enike amandla i- HTML5 Boilerplate . Nakuba sisebenzisa okuningi kwe-Normalize ngaphakathi kwe- reset.less yethu , sisuse ezinye izici ze-Bootstrap.

Isistimu yegridi ezenzakalelayo

Isibonelo segridi ebukhoma

Isistimu yegridi ye-Bootstrap ezenzakalelayo isebenzisa amakholomu angu-12 , okwenza isiqukathi esibanzi esingu-940px ngaphandle kwezici eziphendulayo ezinikwe amandla. Ngefayela le-CSS eliphendulayo lengeziwe, igridi ijwayela ukuba ngu-724px kanye no-1170px ububanzi kuye ngembobo yakho yokubuka. Ngaphansi kwezimbobo zokubuka ezingu-767px, amakholomu aba uketshezi futhi anqwabelene ngokuqondile.

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

I-HTML yegridi eyisisekelo

Ukuze uthole isakhiwo esilula samakholomu amabili, yakha u-a .rowbese wengeza inombolo efanele .span*yamakholomu. Njengoba lena kuyigridi yamakholomu angu-12, ngayinye .span*ihlanganisa inombolo yalawo makholomu angu-12, futhi kufanele njalo ihlanganise kufika ku-12 kumugqa ngamunye (noma inani lamakholomu kumzali).

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

Uma kunikezwe lesi sibonelo, sine .span4futhi .span8, okwenza amakholomu ayi-12 esewonke kanye nomugqa ophelele.

Ukusetha amakholomu

Hambisa amakholomu kwesokudla usebenzisa .offset*amakilasi. Ikilasi ngalinye linyusa umkhawulo wesokunxele wekholomu ngekholomu yonke. Isibonelo, .offset4ihamba .span4phezu kwamakholomu amane.

4
3 susa 2
3 ukudlula 1
3 susa 2
6 isiqephu 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

Amakholomu enza isidleke

Ukuze uhlanganise okuqukethwe kwakho ngegridi ezenzakalelayo, engeza entsha .rownesethi .span*yamakholomu ngaphakathi kwekholomu ekhona .span*. Imigqa efakwe kusidleke kufanele ifake isethi yamakholomu ahlanganisa inani lamakholomu omzali wayo.

Ikholomu yeleveli 1
Ileveli 2
Ileveli 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     Ikholomu yeleveli 1
  4.     <div class = "row" > 
  5.       <div class = "span6" > Izinga 2 </div> 
  6.       <div class = "span3" > Izinga 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Isistimu yegridi ye-Fluid

Isibonelo segridi ye-fluid ephilayo

Isistimu yegridi ewuketshezi isebenzisa amaphesenti esikhundleni samaphikseli kububanzi bekholomu. Inamandla okusabela afanayo nesistimu yethu yegridi engaguquki, iqinisekisa izilinganiso ezifanele zesinqumo esibalulekile sesikrini namadivayisi.

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

I-HTML yegridi ye-fluid eyisisekelo

Yenza noma yimuphi umugqa "uketshezi" ngokushintsha .rowube ngu- .row-fluid. Amakilasi ekholomu ahlala efana ncamashi, okwenza kube lula ukushintshanisa phakathi kwamagridi angashintshi namanzi.

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

Ukunciphisa uketshezi

Isebenza ngendlela efanayo nokulungiswa kwesistimu yegridi engashintshi: engeza .offset*kunoma iyiphi ikholomu ukuze unciphise ngamakholomu amaningi.

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

Isidleke samanzi

Amagridi asetshenziswayo asebenzisa isidleke ngendlela ehlukile: ileveli ngayinye ebekwe isidleke yamakholomu kufanele ihlanganise amakholomu angu-12. Lokhu kungenxa yokuthi igridi yoketshezi isebenzisa amaphesenti, hhayi amaphikseli, ukuze imise ububanzi.

Uketshezi 12
Uketshezi 6
Uketshezi 6
Uketshezi 6
Uketshezi 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Uketshezi 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Uketshezi 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>

Izakhiwo

Isakhiwo esilungisiwe

Ihlinzeka ngesakhiwo esivamile sobubanzi obugxilile (futhi esisabela ngokuzithandela) <div class="container">esidingeka kuphela.

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

Isakhiwo samanzi

Dala uketshezi, ikhasi elinamakholomu amabili— <div class="container-fluid">elilungele 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

Inika amandla izici eziphendulayo

Vula i-CSS ephendulayo kuphrojekthi yakho ngokufaka i-meta tag efanele neshidi lesitayela elengeziwe ngaphakathi <head>kwedokhumenti yakho. Uma uhlanganise i-Bootstrap kusuka ekhasini elithi Enza ngendlela oyifisayo, udinga ukufaka kuphela i-meta tag.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

Amakhanda phezulu!I-Bootstrap ayifaki izici eziphendulayo ngokuzenzakalelayo ngalesi sikhathi njengoba kungeyona yonke into edinga ukusabela. Esikhundleni sokukhuthaza onjiniyela ukuthi basuse lesi sici, sikubona kungcono kakhulu ukusinika amandla njengoba kudingeka.

Mayelana ne-Bootstrap esabelayo

Amadivayisi asabelayo

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
Isibonisi esikhulu 1200px nangaphezulu 70px 30px
Okuzenzakalelayo 980px nangaphezulu 60px 20px
Amathebulethi esithombe 768px nangaphezulu 42px 20px
Amafoni kumathebulethi 767px nangaphansi Amakholomu anoketshezi, abukho ububanzi obungashintshi
Amafoni 480px nangaphansi Amakholomu anoketshezi, abukho ububanzi obungashintshi 
  1. /* Ideskithophu enkulu */
  2. @media ( iminithi - ububanzi : 1200px ) { ... }     
  3.  
  4. /* Ithebhulethi ye-Portrait ibe yizwe kanye nedeskithophu */
  5. @media ( iminithi - ububanzi : 768px ) kanye ( ubuningi - ububanzi : 979px ) { ... }        
  6.  
  7. /* Ifoni ye-landscape ukuze ifane nethebhulethi */
  8. @media ( ubuningi - ububanzi : 767px ) { ... }     
  9.  
  10. /* Amafoni we-landscape naphansi */
  11. @media ( ubuningi - ububanzi : 480px ) { ... }

Amakilasi ezinsiza ezisabelayo

Ukuze uthole intuthuko esheshayo yeselula, sebenzisa lezi zigaba zensiza ukuze ubonise futhi ufihle okuqukethwe ngedivayisi. Ngezansi kunethebula lamakilasi atholakalayo kanye nomthelela wawo esakhiweni sombuzo wemidiya esinikeziwe (okulebulwe idivayisi). Angatholakala ku responsive.less.

Ikilasi Amafoni767px nangaphansi Izibhebhe979px kuya ku-768px AmadeskithophuOkuzenzakalelayo
.visible-phone Kubonakala
.visible-tablet Kubonakala
.visible-desktop Kubonakala
.hidden-phone Kubonakala Kubonakala
.hidden-tablet Kubonakala Kubonakala
.hidden-desktop Kubonakala Kubonakala

Isetshenziswa nini

Sebenzisa ngokulinganiselwe futhi ugweme ukudala izinguqulo ezihluke ngokuphelele zesayithi elifanayo. Kunalokho, zisebenzise ukuze zigcwalise isethulo sedivayisi ngayinye. Izinsiza ezisabelayo akufanele zisetshenziswe namathebula, futhi ngenxa yalokho azisekelwa.

Ikesi lokuhlola izinsiza ezisabelayo

Shintsha usayizi wesiphequluli sakho noma ulayishe kumadivayisi ahlukene ukuze uhlole amakilasi angenhla.

Ibonakala ku...

Omaka abaluhlaza babonisa ukuthi ikilasi liyabonakala endaweni yakho yokubuka yamanje.

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

Kufihliwe ku...

Lapha, omaka abaluhlaza bakhombisa ukuthi ikilasi lifihliwe endaweni yakho yokubuka yamanje.

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