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 ku-Bootstrap isebenzisa amakholomu angu-12 anikezela ngobubanzi obungu-724px, 940px (okuzenzakalelayo ngaphandle kwe-CSS ephendulayo efakiwe), kanye no-1170px. Ngaphansi kwezimbobo zokubuka ezingu-767px, amakholomu aba uketshezi futhi anqwabelene ngokuqondile.

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

Njengoba kuboniswe lapha, ukwakheka okuyisisekelo kungadalwa “namakholomu” amabili, ngalinye lihlanganisa inani lamakholomu 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 = "span6" > 
  3.     Ikholomu yeleveli 1
  4.     <div class = "row" > 
  5.       <div class = "span3" > Izinga 2 </div> 
  6.       <div class = "span3" > 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

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 ifane nethebhulethi */
  5.   @media ( ubuningi - ububanzi : 767px ) { ... }     
  6.  
  7.   /* Ithebhulethi ye-Portrait ibe yizwe kanye nedeskithophu */
  8.   @media ( iminithi - ububanzi : 768px ) kanye ( ubuningi - ububanzi : 979px ) { ... }        
  9.  
  10.   /* Ideskithophu enkulu */
  11.   @media ( iminithi - ububanzi : 1200px ) { ... }

Amakilasi ezinsiza ezisabelayo

What are they

For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 480px and below Tablets 767px and below Desktops 768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Test case

Resize your browser or load on different devices to test the above classes.

Visible on...

Green checkmarks indicate that class is visible in your current viewport.

  • Phone✔ Ifoni
  • Tablet✔ Ithebhulethi
  • Desktop✔ Ideskithophu

Kufihliwe ku...

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

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