પાલખ

HTML5 doctype જરૂરી છે

બુટસ્ટ્રેપ અમુક HTML તત્વો અને CSS ગુણધર્મોનો ઉપયોગ કરે છે જેને HTML5 doctypeનો ઉપયોગ કરવાની જરૂર હોય છે. તમારા બધા પ્રોજેક્ટ્સની શરૂઆતમાં તેને શામેલ કરો.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

ટાઇપોગ્રાફી અને લિંક્સ

બુટસ્ટ્રેપ મૂળભૂત વૈશ્વિક પ્રદર્શન, ટાઇપોગ્રાફી અને લિંક શૈલીઓ સેટ કરે છે. ખાસ કરીને, અમે:

marginશરીર પર દૂર કરો
પર સેટ background-color: white;કરોbody
@baseFontFamilyઅમારા ટાઇપોગ્રાફિક આધાર તરીકે , @baseFontSize, અને @baseLineHeightવિશેષતાઓનો ઉપયોગ કરો
દ્વારા વૈશ્વિક લિંક રંગ સેટ કરો @linkColorઅને ફક્ત તેના પર જ લિંક અન્ડરલાઇન્સ લાગુ કરો:hover

આ શૈલીઓ scaffolding.less માં મળી શકે છે .

નોર્મલાઈઝ દ્વારા રીસેટ કરો

બુટસ્ટ્રેપ 2 સાથે, જૂનો રીસેટ બ્લોક Normalize.css ની તરફેણમાં છોડી દેવામાં આવ્યો છે , જે નિકોલસ ગેલાઘરનો પ્રોજેક્ટ છે જે HTML5 બોઈલરપ્લેટને પણ પાવર કરે છે . જ્યારે અમે અમારા reset.less માં નોર્મલાઈઝનો મોટા ભાગનો ઉપયોગ કરીએ છીએ, અમે ખાસ કરીને બુટસ્ટ્રેપ માટે કેટલાક ઘટકોને દૂર કર્યા છે.

જીવંત ગ્રીડ ઉદાહરણ

ડિફૉલ્ટ બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમ 12 કૉલમનો ઉપયોગ કરે છે, જે પ્રતિભાવાત્મક સુવિધાઓ સક્ષમ કર્યા વિના 940px પહોળા કન્ટેનર માટે બનાવે છે . રિસ્પોન્સિવ CSS ફાઇલ ઉમેરવા સાથે, ગ્રીડ તમારા વ્યૂપોર્ટના આધારે 724px અને 1170px પહોળી બનવા માટે અનુકૂળ થાય છે. 767px વ્યુપોર્ટની નીચે, કૉલમ પ્રવાહી બની જાય છે અને ઊભી રીતે સ્ટેક થાય છે.

મૂળભૂત ગ્રીડ HTML

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

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

આ ઉદાહરણને જોતાં, અમારી પાસે છે .span4અને .span8, કુલ 12 કૉલમ અને એક સંપૂર્ણ પંક્તિ બનાવે છે.

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

.offset*વર્ગોનો ઉપયોગ કરીને કૉલમને ડાબી બાજુએ ખસેડો . દરેક વર્ગ કૉલમના ડાબા માર્જિનને સમગ્ર કૉલમ વડે વધારે છે. ઉદાહરણ તરીકે, ચાર કૉલમ પર .offset4ખસે છે..span4

3 ઓફસેટ 2

3 ઓફસેટ 1

3 ઓફસેટ 2

6 ઓફસેટ 3

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

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

તમારી સામગ્રીને ડિફોલ્ટ ગ્રીડ સાથે નેસ્ટ કરવા માટે, હાલની કૉલમમાં એક નવો .rowઅને કૉલમનો સેટ ઉમેરો . નેસ્ટેડ પંક્તિઓમાં કૉલમનો સમૂહ શામેલ હોવો જોઈએ જે તેના પેરેન્ટની કૉલમ્સની સંખ્યામાં ઉમેરે છે..span*.span*

ઉદાહરણ

અહીં બે નેસ્ટેડ .span4કૉલમ એક ની અંદર મૂકવામાં આવે છે .span8.

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

સ્તર 2

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

જીવંત પ્રવાહી ગ્રીડ ઉદાહરણ

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

મૂળભૂત પ્રવાહી ગ્રીડ HTML

માં બદલીને કોઈપણ પંક્તિને "પ્રવાહી" .rowબનાવો .row-fluid. કૉલમ વર્ગો એકસરખા જ રહે છે, જે તેને સ્થિર અને પ્રવાહી ગ્રીડ વચ્ચે ફ્લિપ કરવાનું સરળ બનાવે છે.

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

પ્રવાહી ઓફસેટિંગ

ફિક્સ્ડ ગ્રીડ સિસ્ટમ ઑફસેટિંગની જેમ જ કાર્ય કરે છે: .offset*તે ઘણા કૉલમ્સ દ્વારા ઑફસેટ કરવા માટે કોઈપણ કૉલમમાં ઉમેરો.

4 ઓફસેટ 4

3 ઓફસેટ 3

6 ઓફસેટ 6

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </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>

સ્થિર લેઆઉટ

<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>

પ્રતિભાવાત્મક સુવિધાઓને સક્ષમ કરી રહ્યું છે

<head>તમારા દસ્તાવેજની અંદર યોગ્ય મેટા ટેગ અને વધારાની સ્ટાઈલશીટનો સમાવેશ કરીને તમારા પ્રોજેક્ટમાં રિસ્પોન્સિવ CSS ચાલુ કરો . જો તમે કસ્ટમાઇઝ પેજ પરથી બુટસ્ટ્રેપ કમ્પાઇલ કર્યું છે, તો તમારે ફક્ત મેટા ટેગનો સમાવેશ કરવાની જરૂર છે.

<મેટા નામ = "વ્યુપોર્ટ" સામગ્રી = "પહોળાઈ=ઉપકરણ-પહોળાઈ, પ્રારંભિક-સ્કેલ=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "સ્ટાઈલશીટ" >

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

પ્રતિભાવ બુટસ્ટ્રેપ વિશે

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

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

મીડિયા ક્વેરીઝનો ઉપયોગ જવાબદારીપૂર્વક કરો અને ફક્ત તમારા મોબાઇલ પ્રેક્ષકો માટે શરૂઆત તરીકે કરો. મોટા પ્રોજેક્ટ્સ માટે, સમર્પિત કોડ બેઝને ધ્યાનમાં લો અને મીડિયા પ્રશ્નોના સ્તરોને નહીં.

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

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

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

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

રિસ્પોન્સિવ ઉપયોગિતા વર્ગો

ઝડપી મોબાઇલ-મૈત્રીપૂર્ણ વિકાસ માટે, ઉપકરણ દ્વારા સામગ્રી બતાવવા અને છુપાવવા માટે આ ઉપયોગિતા વર્ગોનો ઉપયોગ કરો. નીચે ઉપલબ્ધ વર્ગોનું કોષ્ટક અને આપેલ મીડિયા ક્વેરી લેઆઉટ પર તેમની અસર (ઉપકરણ દ્વારા લેબલ કરેલ) છે. તેઓ માં મળી શકે છે responsive.less.

વર્ગ	ફોન767px અને નીચે	ગોળીઓ979px થી 768px	ડેસ્કટોપ્સડિફૉલ્ટ
`.visible-phone`	દૃશ્યમાન	છુપાયેલ	છુપાયેલ
`.visible-tablet`	છુપાયેલ	દૃશ્યમાન	છુપાયેલ
`.visible-desktop`	છુપાયેલ	છુપાયેલ	દૃશ્યમાન
`.hidden-phone`	છુપાયેલ	દૃશ્યમાન	દૃશ્યમાન
`.hidden-tablet`	દૃશ્યમાન	છુપાયેલ	દૃશ્યમાન
`.hidden-desktop`	દૃશ્યમાન	દૃશ્યમાન	છુપાયેલ

ક્યારે વાપરવું

મર્યાદિત ધોરણે ઉપયોગ કરો અને એક જ સાઇટના સંપૂર્ણપણે અલગ વર્ઝન બનાવવાનું ટાળો. તેના બદલે, દરેક ઉપકરણની પ્રસ્તુતિને પૂરક બનાવવા માટે તેનો ઉપયોગ કરો.

રિસ્પોન્સિવ યુટિલિટી ટેસ્ટ કેસ

ઉપરોક્ત વર્ગોને ચકાસવા માટે તમારા બ્રાઉઝરનું કદ બદલો અથવા વિવિધ ઉપકરણો પર લોડ કરો.

આના પર દૃશ્યક્ષમ...

લીલા ચેકમાર્ક્સ સૂચવે છે કે વર્ગ તમારા વર્તમાન વ્યુપોર્ટમાં દૃશ્યમાન છે.

ફોન✔ ફોન
ટેબ્લેટ✔ ટેબ્લેટ
ડેસ્કટોપ✔ ડેસ્કટોપ

પર છુપાયેલ...

અહીં, લીલા ચેકમાર્ક સૂચવે છે કે વર્ગ તમારા વર્તમાન વ્યુપોર્ટમાં છુપાયેલ છે.

ફોન✔ ફોન
ટેબ્લેટ✔ ટેબ્લેટ
ડેસ્કટોપ✔ ડેસ્કટોપ

વૈશ્વિક સેટિંગ્સ