પાલખ

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

ડિફૉલ્ટ 940px ગ્રીડ

બુટસ્ટ્રેપના ભાગ રૂપે પૂરી પાડવામાં આવેલ ડિફૉલ્ટ ગ્રીડ સિસ્ટમ 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*

ઉદાહરણ

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

સ્તર 2

<div વર્ગ = "પંક્તિ" > 
  <div class = "span12" > 
    કૉલમનું સ્તર 1
    <div વર્ગ = "પંક્તિ" > 
      <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 થી 940px	44px	20px
ડિફૉલ્ટ	940px અને વધુ	60px	20px
વિશાળ પ્રદર્શન	1210px અને તેથી વધુ	70px	30px

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

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

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

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

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

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

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

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