બુટસ્ટ્રેપ

પાલખ

બુટસ્ટ્રેપ પ્રતિભાવશીલ 12-કૉલમ ગ્રીડ, લેઆઉટ અને ઘટકો પર બનેલ છે.

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

HTML5 doctype જરૂરી છે

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </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 વ્યુપોર્ટની નીચે, કૉલમ પ્રવાહી બની જાય છે અને ઊભી રીતે સ્ટેક થાય છે.

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

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

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

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

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

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

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

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

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

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

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

પ્રવાહી ગ્રીડ સિસ્ટમ

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

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

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

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

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

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

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

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

4
4 ઓફસેટ 4
3 ઓફસેટ 3
3 ઓફસેટ 3
6 ઓફસેટ 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </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>

લેઆઉટ

સ્થિર લેઆઉટ

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

રિસ્પોન્સિવ ડિઝાઇન

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

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

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

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

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

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

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

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

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

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

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

લેબલ લેઆઉટ પહોળાઈ કૉલમની પહોળાઈ ગટરની પહોળાઈ
વિશાળ પ્રદર્શન 1200px અને વધુ 70px 30px
ડિફૉલ્ટ 980px અને તેથી વધુ 60px 20px
પોટ્રેટ ગોળીઓ 768px અને તેથી વધુ 42px 20px
ફોનથી ટેબ્લેટ 767px અને નીચે પ્રવાહી કૉલમ, કોઈ નિશ્ચિત પહોળાઈ નથી
ફોન 480px અને નીચે પ્રવાહી કૉલમ, કોઈ નિશ્ચિત પહોળાઈ નથી 
  1. /* મોટું ડેસ્કટોપ */
  2. @મીડિયા ( મિનિટ - પહોળાઈ : 1200px ) { ... }     
  3.  
  4. /* લેન્ડસ્કેપ અને ડેસ્કટોપ માટે પોટ્રેટ ટેબ્લેટ */
  5. @મીડિયા ( ન્યૂનતમ - પહોળાઈ : 768px ) અને ( મહત્તમ - પહોળાઈ : 979px ) { ... }        
  6.  
  7. /* લેન્ડસ્કેપ ફોનથી પોટ્રેટ ટેબ્લેટ */
  8. @મીડિયા ( મહત્તમ - પહોળાઈ : 767px ) { ... }     
  9.  
  10. /* લેન્ડસ્કેપ ફોન અને ડાઉન */
  11. @media (max-width: 480px) { ... }

Responsive utility classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Responsive utilities test case

Resize your browser or load on different devices to test the above classes.

Visible on...

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

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

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

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

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