બુટસ્ટ્રેપ

પાલખ

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

CSS રીસેટ, ટાઇપોગ્રાફી અને લિંક્સ માટે વૈશ્વિક શૈલીઓ

HTML5 doctype જરૂરી છે

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

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

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

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

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

બુટસ્ટ્રેપ 2 મુજબ, પરંપરાગત CSS રીસેટ Normalize.css માંથી તત્વોનો ઉપયોગ કરવા માટે વિકસિત થયું છે , જે નિકોલસ ગેલાઘર દ્વારા એક પ્રોજેક્ટ છે જે HTML5 બોઈલરપ્લેટને પણ શક્તિ આપે છે .

નવું રીસેટ હજુ પણ reset.less માં મળી શકે છે , પરંતુ સંક્ષિપ્તતા અને ચોકસાઈ માટે ઘણા ઘટકો દૂર કરવામાં આવ્યા છે.

રિસ્પોન્સિવ ટ્વિસ્ટ સાથે ડિફૉલ્ટ ગ્રીડ સિસ્ટમ 12 કૉલમ

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

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


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

4
4 ઓફસેટ 4
3 ઓફસેટ 3
3 ઓફસેટ 3
8 ઓફસેટ 4 
  1. <div વર્ગ = "પંક્તિ" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

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

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

ઉદાહરણ

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

કૉલમનું સ્તર 1
સ્તર 2
સ્તર 2 
  1. <div વર્ગ = "પંક્તિ" > 
  2.   <div class = "span6" > 
  3.     સ્તર 1 કૉલમ
  4.     <div વર્ગ = "પંક્તિ" > 
  5.       <div class = "span3" > સ્તર 2 </div> 
  6.       <div class = "span3" > સ્તર 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

પ્રવાહી ગ્રીડ સિસ્ટમ 12 પ્રતિભાવ, ટકા આધારિત કૉલમ

પ્રવાહી કૉલમ

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

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

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

માર્કઅપ

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

પ્રવાહી માળો

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

પ્રવાહી 12
પ્રવાહી 6
પ્રવાહી 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     કૉલમનું સ્તર 1
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > સ્તર 2 </div> 
  6.       <div class = "span6" > સ્તર 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ગ્રીડ કસ્ટમાઇઝેશન

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

ઓછા માં ચલ

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

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

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

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

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

વેબપૃષ્ઠો બનાવવા માટે લેઆઉટ મૂળભૂત નમૂનાઓ

સ્થિર લેઆઉટ

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

  1. <body>
  2.   <div વર્ગ = "કન્ટેનર" > 
  3.     ...
  4.   </div>
  5. </body>

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

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

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--સાઇડબાર સામગ્રી-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--શરીર સામગ્રી-->
  8.     </div>
  9.   </div>
  10. </div>

રિસ્પોન્સિવ ડિઝાઇન વિવિધ ઉપકરણો અને રિઝોલ્યુશન માટે મીડિયા પ્રશ્નો

રિસ્પોન્સિવ ઉપકરણો

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

તેઓ શું છે

ઝડપી મોબાઇલ-મૈત્રીપૂર્ણ વિકાસ માટે, ઉપકરણ દ્વારા સામગ્રી બતાવવા અને છુપાવવા માટે આ મૂળભૂત ઉપયોગિતા વર્ગોનો ઉપયોગ કરો.

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

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

ઉદાહરણ તરીકે, તમે મોબાઇલ લેઆઉટ પર nav માટે તત્વ બતાવી શકો છો <select>, પરંતુ ટેબ્લેટ અથવા ડેસ્કટોપ પર નહીં.

સપોર્ટ વર્ગો

અમે જે વર્ગોને સમર્થન આપીએ છીએ તેનું કોષ્ટક અને આપેલ મીડિયા ક્વેરી લેઆઉટ (ઉપકરણ દ્વારા લેબલ થયેલ) પર તેમની અસર અહીં બતાવવામાં આવી છે. તેઓ માં મળી શકે છે responsive.less.

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

ટેસ્ટ કેસ

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

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

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

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

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

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

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