પાલખ

બુટસ્ટ્રેપ પ્રતિભાવ 12-કૉલમ ગ્રીડ પર બનેલ છે. અમે તે સિસ્ટમના આધારે નિશ્ચિત- અને પ્રવાહી-પહોળાઈના લેઆઉટનો પણ સમાવેશ કર્યો છે.

બુટસ્ટ્રેપના ભાગ રૂપે પૂરી પાડવામાં આવેલ ડિફૉલ્ટ ગ્રીડ સિસ્ટમ 940px-વાઇડ, 12-કૉલમ ગ્રીડ છે.

તે વિવિધ ઉપકરણો અને રીઝોલ્યુશન માટે ચાર પ્રતિભાવશીલ ભિન્નતા પણ ધરાવે છે: ફોન, ટેબ્લેટ પોટ્રેટ, ટેબલ લેન્ડસ્કેપ અને નાના ડેસ્કટોપ્સ અને મોટા વાઇડસ્ક્રીન ડેસ્કટોપ્સ.

<div વર્ગ = "પંક્તિ" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

અહીં બતાવ્યા પ્રમાણે, બે "કૉલમ્સ" વડે મૂળભૂત લેઆઉટ બનાવી શકાય છે, જે પ્રત્યેક 12 પાયાના કૉલમ્સની સંખ્યાને ફેલાવે છે જે અમે અમારી ગ્રીડ સિસ્ટમના ભાગ તરીકે વ્યાખ્યાયિત કરી છે.

કૉલમ ઑફસેટિંગ

4 ઓફસેટ 4

3 ઓફસેટ 3

8 ઓફસેટ 4

<div વર્ગ = "પંક્તિ" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

નેસ્ટિંગ કૉલમ

બુટસ્ટ્રેપમાં સ્થિર (બિન-પ્રવાહી) ગ્રીડ સિસ્ટમ સાથે, માળો બાંધવાનું સરળ છે. તમારી સામગ્રીને નેસ્ટ કરવા માટે, હાલની કૉલમમાં ફક્ત એક નવો .rowઅને કૉલમનો સેટ ઉમેરો ..span*.span*

ઉદાહરણ

નેસ્ટેડ પંક્તિઓમાં કૉલમનો સમૂહ શામેલ હોવો જોઈએ જે તેના પેરેંટની કૉલમ્સની સંખ્યાને ઉમેરે છે. ઉદાહરણ તરીકે, બે નેસ્ટેડ .span3કૉલમ એક ની અંદર મૂકવા જોઈએ .span6.

કૉલમનું સ્તર 1

સ્તર 2

<div વર્ગ = "પંક્તિ" > 
  <div class = "span12" > 
    કૉલમનું સ્તર 1
    <div વર્ગ = "પંક્તિ" > 
      <div class = "span6" > સ્તર 2 </div> 
      <div class = "span6" > સ્તર 2 </div> 
    </div>
  </div>
</div>

પ્રવાહી કૉલમ

ટકા, પિક્સેલ્સ નહીં

પ્રવાહી ગ્રીડ સિસ્ટમ નિશ્ચિત પિક્સેલને બદલે કૉલમની પહોળાઈ માટે ટકાનો ઉપયોગ કરે છે. તે અમારી ફિક્સ્ડ ગ્રીડ સિસ્ટમની જેમ જ પ્રતિભાવશીલ ભિન્નતા ધરાવે છે, જે કી સ્ક્રીન રીઝોલ્યુશન અને ઉપકરણો માટે યોગ્ય પ્રમાણને સુનિશ્ચિત કરે છે.

પ્રવાહી પંક્તિઓ

માં બદલીને કોઈપણ પંક્તિ પ્રવાહી .rowબનાવો .row-fluid. સ્તંભો ચોક્કસ સમાન રહે છે, તેને નિશ્ચિત અને પ્રવાહી લેઆઉટ વચ્ચે ફ્લિપ કરવા માટે ખૂબ જ સરળ બનાવે છે.

માર્કઅપ

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

પ્રવાહી માળો

ફ્લુઇડ ગ્રીડ સાથે નેસ્ટિંગ થોડું અલગ છે: નેસ્ટેડ કૉલમની સંખ્યા પિતૃ સાથે મેળ ખાતી હોય તે જરૂરી નથી. તેના બદલે, તમારી કૉલમ દરેક સ્તરે રીસેટ થાય છે કારણ કે દરેક પંક્તિ પેરેંટ કૉલમના 100% ભાગ લે છે.

પ્રવાહી 12

પ્રવાહી 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    કૉલમનું સ્તર 1
    <div class = "row-fluid" > 
      <div class = "span6" > સ્તર 2 </div> 
      <div class = "span6" > સ્તર 2 </div> 
    </div>
  </div>
</div>

ચલ	ડિફૉલ્ટ મૂલ્ય	વર્ણન
`@gridColumns`	12	કૉલમની સંખ્યા
`@gridColumnWidth`	60px	દરેક સ્તંભની પહોળાઈ
`@gridGutterWidth`	20px	કૉલમ વચ્ચે નકારાત્મક જગ્યા
`@siteWidth`	તમામ કૉલમ અને ગટરનો ગણતરી કરેલ સરવાળો	`.container-fixed()`મિક્સિનની પહોળાઈ સેટ કરવા માટે કૉલમ અને ગટરની સંખ્યા ગણે છે

ઓછા માં ચલ

બુટસ્ટ્રેપમાં બિલ્ટ ઇન ડિફૉલ્ટ 940px ગ્રીડ સિસ્ટમને કસ્ટમાઇઝ કરવા માટે મુઠ્ઠીભર ચલો છે, જે ઉપર દસ્તાવેજીકૃત છે. ગ્રીડ માટેના તમામ ચલો variables.less માં સંગ્રહિત છે.

કેવી રીતે કસ્ટમાઇઝ કરવું

ગ્રીડને સંશોધિત કરવાનો અર્થ છે ત્રણ @grid*ચલોને બદલવું અને બુટસ્ટ્રેપને ફરીથી કમ્પાઇલ કરવું. variables.less માં ગ્રીડ ચલોને બદલો અને પુનઃસંકલન કરવા માટે દસ્તાવેજીકૃત ચાર રીતોમાંથી એકનો ઉપયોગ કરો . જો તમે વધુ કૉલમ ઉમેરી રહ્યાં છો, તો grid.less માં રહેલા લોકો માટે CSS ઉમેરવાની ખાતરી કરો.

પ્રતિભાવશીલ રહેવું

ગ્રીડનું કસ્ટમાઇઝેશન માત્ર ડિફોલ્ટ સ્તર, 940px ગ્રીડ પર કામ કરે છે. બુટસ્ટ્રેપના પ્રતિભાવશીલ પાસાઓને જાળવવા માટે, તમારે ગ્રીડને રિસ્પોન્સિવ.લેસમાં કસ્ટમાઇઝ પણ કરવી પડશે.

સ્થિર લેઆઉટ

ડિફૉલ્ટ અને સરળ 940px-વાઇડ, એકલ દ્વારા પૂરી પાડવામાં આવેલ લગભગ કોઈપણ વેબસાઇટ અથવા પૃષ્ઠ માટે કેન્દ્રિત લેઆઉટ <div class="container">.

<body>
  <div વર્ગ = "કન્ટેનર" > 
    ...
  </div>
</body>

પ્રવાહી લેઆઉટ

<div class="container-fluid">લવચીક પૃષ્ઠ માળખું, ન્યૂનતમ અને મહત્તમ પહોળાઈ અને ડાબી બાજુની સાઇડબાર આપે છે. તે એપ્લિકેશન્સ અને દસ્તાવેજો માટે સરસ છે.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--સાઇડબાર સામગ્રી-->
    </div>
    <div class = "span10" > 
      <!--શરીર સામગ્રી-->
    </div>
  </div>
</div>

સમર્થિત ઉપકરણો

બુટસ્ટ્રેપ વિવિધ ઉપકરણો અને સ્ક્રીન રીઝોલ્યુશન પર તમારા પ્રોજેક્ટ્સને વધુ યોગ્ય બનાવવામાં મદદ કરવા માટે એક ફાઇલમાં કેટલીક મીડિયા ક્વેરીઝને સપોર્ટ કરે છે. અહીં શું શામેલ છે તે છે:

લેબલ	લેઆઉટ પહોળાઈ	કૉલમની પહોળાઈ	ગટરની પહોળાઈ
સ્માર્ટફોન	480px અને નીચે	પ્રવાહી કૉલમ, કોઈ નિશ્ચિત પહોળાઈ નથી
પોટ્રેટ ગોળીઓ	480px થી 768px	પ્રવાહી કૉલમ, કોઈ નિશ્ચિત પહોળાઈ નથી
લેન્ડસ્કેપ ગોળીઓ	768px થી 979px	42px	20px
ડિફૉલ્ટ	980px અને તેથી વધુ	60px	20px
વિશાળ પ્રદર્શન	1210px અને તેથી વધુ	70px	30px

મેટા ટેગની જરૂર છે

ઉપકરણો પ્રતિભાવશીલ પૃષ્ઠોને યોગ્ય રીતે પ્રદર્શિત કરે છે તેની ખાતરી કરવા માટે, વ્યૂપોર્ટ મેટા ટેગનો સમાવેશ કરો.

<મેટા નામ = "વ્યુપોર્ટ" સામગ્રી = "પહોળાઈ=ઉપકરણ-પહોળાઈ, પ્રારંભિક-સ્કેલ=1.0" >

એ લોકો શું કરશે

મીડિયા ક્વેરીઝ સંખ્યાબંધ શરતોના આધારે કસ્ટમ CSS માટે પરવાનગી આપે છે—ગુણોત્તર, પહોળાઈ, ડિસ્પ્લે પ્રકાર, વગેરે—પરંતુ સામાન્ય રીતે આસપાસ min-widthઅને max-width.

અમારા ગ્રીડમાં કૉલમની પહોળાઈમાં ફેરફાર કરો
જ્યાં જરૂરી હોય ત્યાં ફ્લોટને બદલે તત્વોને સ્ટેક કરો
ઉપકરણો માટે વધુ યોગ્ય બનવા માટે હેડિંગ અને ટેક્સ્ટનું કદ બદલો

મીડિયા પ્રશ્નોનો ઉપયોગ કરીને

બુટસ્ટ્રેપ આ મીડિયા ક્વેરીઝને આપમેળે સમાવતું નથી, પરંતુ તેમને સમજવું અને ઉમેરવું ખૂબ જ સરળ છે અને ન્યૂનતમ સેટઅપની જરૂર છે. તમારી પાસે બુટસ્ટ્રેપની પ્રતિભાવશીલ સુવિધાઓનો સમાવેશ કરવા માટે થોડા વિકલ્પો છે:

સંકલિત પ્રતિભાવ સંસ્કરણ, bootstrap-responsive.css નો ઉપયોગ કરો
@import "responsive.less" ઉમેરો અને બુટસ્ટ્રેપ ફરીથી કમ્પાઇલ કરો
રિસ્પોન્સિવ.લેસને અલગ ફાઇલ તરીકે સંશોધિત કરો અને ફરીથી કમ્પાઇલ કરો

શા માટે માત્ર તે શામેલ નથી? સાચું કહું, દરેક વસ્તુ પ્રતિભાવશીલ હોવી જરૂરી નથી. વિકાસકર્તાઓને આ સુવિધા દૂર કરવા માટે પ્રોત્સાહિત કરવાને બદલે, અમે તેને સક્ષમ કરવાનું શ્રેષ્ઠ ગણીએ છીએ.

  // લેન્ડસ્કેપ ફોન અને નીચે
  @મીડિયા ( મહત્તમ - પહોળાઈ : 480px ) { ... }     
 
  // લેન્ડસ્કેપ ફોનથી પોટ્રેટ ટેબ્લેટ
  @મીડિયા ( મહત્તમ - પહોળાઈ : 768px ) { ... }     
 
  // લેન્ડસ્કેપ અને ડેસ્કટોપ પર પોટ્રેટ ટેબ્લેટ
  @મીડિયા ( ન્યૂનતમ - પહોળાઈ : 768px ) અને ( મહત્તમ - પહોળાઈ : 980px ) { ... }        
 
  // મોટું ડેસ્કટોપ
  @મીડિયા ( મિનિટ - પહોળાઈ : 1200px ) { .. }