પાલખ

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*

સ્તર 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>

પ્રવાહી માળો

ફ્લુઇડ ગ્રીડ માળખાનો અલગ રીતે ઉપયોગ કરે છે: દરેક નેસ્ટેડ સ્તરના કૉલમમાં 12 કૉલમ્સ ઉમેરવા જોઈએ. આ એટલા માટે છે કારણ કે પ્રવાહી ગ્રીડ પહોળાઈ સેટ કરવા માટે પિક્સેલ નહીં પણ ટકાવારીનો ઉપયોગ કરે છે.

પ્રવાહી 12

પ્રવાહી 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    પ્રવાહી 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        પ્રવાહી 6
        <div class = "row-fluid" > 
          <div class = "span6" > પ્રવાહી 6 </div> 
          <div class = "span6" > પ્રવાહી 6 </div> 
        </div>
      </div>
      <div class = "span6" > પ્રવાહી 6 </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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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