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.

<div class = "umqolo" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

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

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.

<div class = "umqolo" > 
  <div class = "span12" > 
    Inqanaba loku-1 lekholamu
    <div class = "umqolo" > 
      <div class = "span6" > Inqanaba lesi-2 </div> 
      <div class = "span6" > Inqanaba lesi-2 </div> 
    </ div>
  </ div>
</ div>

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

<div class = "Row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</ div>

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.

<div class = "Row-fluid" > 
  <div class = "span12" > 
    Inqanaba loku-1 lekholamu
    <div class = "Row-fluid" > 
      <div class = "span6" > Inqanaba lesi-2 </div> 
      <div class = "span6" > Inqanaba lesi-2 </div> 
    </ div>
  </ div>
</ div>

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 ezibhaliweyo 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 ngokwezifiso iigridi kwi-responsive.less.

Uyilo oluzinzileyo

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

<umzimba>
  <div class = "container" > 
    ...
  </ div>
</ umzimba>

Uyilo lolwelo

<div class="container-fluid">inika ulwakhiwo lwephepha oluguquguqukayo, min- kunye nobubanzi obukhulu, kunye nebar yecala lasekhohlo. Ilungile kusetyenziso kunye namaxwebhu.

<div class = "container-fluid" > 
  <div class = "Row-fluid" > 
    <div class = "span2" > 
      <!--Umxholo wesixwexwe esisecaleni-->
    </ div>
    <div class = "span10" > 
      <!--Umxholo womzimba-->
    </ div>
  </ div>
</ div>

Izixhobo ezixhaswayo

I-Bootstrap ixhasa iqela lemibuzo yemidiya kwifayile enye ukunceda ukwenza iiprojekthi zakho zifaneleke ngakumbi kwizixhobo ezahlukeneyo kunye nezisombululo zesikrini. Nantsi into ebandakanyiweyo:

Ifuna imeta tag

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

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

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

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.

  // Iifowuni zeLandscape kunye nezantsi
  @media ( max - wide : 480px ) { ... }     
 
  // Ifowuni yokujonga umhlaba kwithebhulethi ye-portrait
  @media ( max - wide : 768px ) { ... }     
 
  // Umfanekiso wethebhulethi kwimbonakalo yomhlaba kunye nedesktop
  @media ( min - ububanzi : 768px ) kunye ( max - ububanzi : 980px ) { ... }        
 
  // Idesktop enkulu
  @media ( min - ububanzi : 1200px ) { .. }