ബൂട്ട്സ്ട്രാപ്പ്

സ്കാർഫോൾഡിംഗ്

പ്രതികരിക്കുന്ന 12-കോളം ഗ്രിഡുകൾ, ലേഔട്ടുകൾ, ഘടകങ്ങൾ എന്നിവയിലാണ് ബൂട്ട്സ്ട്രാപ്പ് നിർമ്മിച്ചിരിക്കുന്നത്.

ആഗോള ക്രമീകരണങ്ങൾ

HTML5 ഡോക്‌ടൈപ്പ് ആവശ്യമാണ്

ബൂട്ട്‌സ്‌ട്രാപ്പ് ചില HTML ഘടകങ്ങളും HTML5 ഡോക്‌ടൈപ്പിന്റെ ഉപയോഗം ആവശ്യമായ CSS പ്രോപ്പർട്ടികളും ഉപയോഗിക്കുന്നു. നിങ്ങളുടെ എല്ലാ പ്രോജക്റ്റുകളുടെയും തുടക്കത്തിൽ ഇത് ഉൾപ്പെടുത്തുക.

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

ടൈപ്പോഗ്രാഫിയും ലിങ്കുകളും

ബൂട്ട്സ്ട്രാപ്പ് അടിസ്ഥാന ആഗോള ഡിസ്പ്ലേ, ടൈപ്പോഗ്രാഫി, ലിങ്ക് ശൈലികൾ എന്നിവ സജ്ജമാക്കുന്നു. പ്രത്യേകമായി, ഞങ്ങൾ:

  • marginശരീരത്തിൽ നീക്കം ചെയ്യുക
  • background-color: white;ന് സജ്ജമാക്കുകbody
  • @baseFontFamilyഞങ്ങളുടെ ടൈപ്പോഗ്രാഫിക് അടിസ്ഥാനമായി , @baseFontSize, @baseLineHeightആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക
  • വഴി ആഗോള ലിങ്ക് വർണ്ണം സജ്ജീകരിക്കുക, @linkColorലിങ്ക് അടിവരയിടുക എന്നതിൽ മാത്രം പ്രയോഗിക്കുക:hover

ഈ ശൈലികൾ സ്കാർഫോൾഡിംഗിൽ കാണാവുന്നതാണ്. 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 class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

ഈ ഉദാഹരണം കണക്കിലെടുക്കുമ്പോൾ, ഞങ്ങൾക്ക് ആകെ 12 നിരകളും പൂർണ്ണമായ ഒരു വരിയും ഉണ്ടാക്കുന്നു .span4..span8

നിരകൾ ഓഫ്‌സെറ്റ് ചെയ്യുന്നു

.offset*ക്ലാസുകൾ ഉപയോഗിച്ച് നിരകൾ ഇടത്തേക്ക് നീക്കുക . ഓരോ ക്ലാസും ഒരു നിരയുടെ ഇടത് മാർജിൻ ഒരു മുഴുവൻ കോളം കൊണ്ട് വർദ്ധിപ്പിക്കുന്നു. ഉദാഹരണത്തിന്, നാല് നിരകളിലൂടെ .offset4നീങ്ങുന്നു .span4.

4
3 ഓഫ്സെറ്റ് 2
3 ഓഫ്സെറ്റ് 1
3 ഓഫ്സെറ്റ് 2
6 ഓഫ്സെറ്റ് 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

നെസ്റ്റിംഗ് നിരകൾ

ഡിഫോൾട്ട് ഗ്രിഡിനൊപ്പം നിങ്ങളുടെ ഉള്ളടക്കം നെസ്റ്റ് ചെയ്യാൻ, നിലവിലുള്ള കോളത്തിനുള്ളിൽ പുതിയതും ഒരു .rowകൂട്ടം നിരകളും ചേർക്കുക. നെസ്റ്റഡ് വരികളിൽ അതിന്റെ രക്ഷിതാവിന്റെ നിരകളുടെ എണ്ണം കൂട്ടിച്ചേർക്കുന്ന ഒരു കൂട്ടം നിരകൾ ഉൾപ്പെടുത്തണം..span*.span*

ഉദാഹരണം

ഇവിടെ രണ്ട് നെസ്റ്റഡ് .span4കോളങ്ങൾ a ഉള്ളിൽ സ്ഥാപിച്ചിരിക്കുന്നു .span8.

നിരയുടെ ലെവൽ 1
ലെവൽ 2
ലെവൽ 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     ലെവൽ 1 കോളം
  4.     <div class = "row" > 
  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. <ശരീരം>
  2.   <div class = "container" > 
  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. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

ഹെഡ്സ് അപ്പുകൾ! ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ഇപ്പോൾ ഡിഫോൾട്ടായി പ്രതികരിക്കുന്ന ഫീച്ചറുകൾ ഉൾപ്പെടുന്നില്ല, കാരണം എല്ലാം പ്രതികരിക്കേണ്ടതില്ല. ഈ ഫീച്ചർ നീക്കം ചെയ്യാൻ ഡവലപ്പർമാരെ പ്രോത്സാഹിപ്പിക്കുന്നതിനുപകരം, ആവശ്യാനുസരണം ഇത് പ്രവർത്തനക്ഷമമാക്കുന്നതാണ് നല്ലത്.

പ്രതികരിക്കുന്ന ബൂട്ട്‌സ്‌ട്രാപ്പിനെക്കുറിച്ച്

പ്രതികരിക്കുന്ന ഉപകരണങ്ങൾ

മീഡിയ അന്വേഷണങ്ങൾ നിരവധി വ്യവസ്ഥകൾ-അനുപാതങ്ങൾ, വീതികൾ, ഡിസ്പ്ലേ തരം മുതലായവയെ അടിസ്ഥാനമാക്കി ഇഷ്‌ടാനുസൃത CSS-നെ അനുവദിക്കുന്നു, എന്നാൽ സാധാരണയായി ചുറ്റും ഫോക്കസ് min-widthചെയ്യുന്നു max-width.

  • ഞങ്ങളുടെ ഗ്രിഡിലെ നിരയുടെ വീതി പരിഷ്കരിക്കുക
  • ആവശ്യമുള്ളിടത്ത് ഫ്ലോട്ടിന് പകരം ഘടകങ്ങൾ അടുക്കുക
  • ഉപകരണങ്ങൾക്ക് കൂടുതൽ അനുയോജ്യമാകുന്ന തരത്തിൽ തലക്കെട്ടുകളുടെയും വാചകങ്ങളുടെയും വലുപ്പം മാറ്റുക

മീഡിയ അന്വേഷണങ്ങൾ ഉത്തരവാദിത്തത്തോടെയും നിങ്ങളുടെ മൊബൈൽ പ്രേക്ഷകർക്കുള്ള തുടക്കമായി മാത്രം ഉപയോഗിക്കുക. വലിയ പ്രോജക്റ്റുകൾക്കായി, സമർപ്പിത കോഡ് ബേസുകൾ പരിഗണിക്കുക, മീഡിയ അന്വേഷണങ്ങളുടെ പാളികളല്ല.

പിന്തുണയ്ക്കുന്ന ഉപകരണങ്ങൾ

വ്യത്യസ്‌ത ഉപകരണങ്ങളിലും സ്‌ക്രീൻ റെസല്യൂഷനുകളിലും നിങ്ങളുടെ പ്രോജക്‌റ്റുകൾ കൂടുതൽ ഉചിതമാക്കാൻ സഹായിക്കുന്നതിന് ഒരൊറ്റ ഫയലിലെ ഒരുപിടി മീഡിയ അന്വേഷണങ്ങളെ ബൂട്ട്‌സ്‌ട്രാപ്പ് പിന്തുണയ്‌ക്കുന്നു. ഉൾപ്പെടുത്തിയിരിക്കുന്നത് ഇതാ:

ലേബൽ ലേഔട്ട് വീതി നിരയുടെ വീതി ഗട്ടർ വീതി
ഫോണുകൾ 480px ഉം അതിൽ താഴെയും ദ്രാവക നിരകൾ, നിശ്ചിത വീതിയില്ല
ഫോണുകൾ മുതൽ ടാബ്‌ലെറ്റുകൾ വരെ 767px ഉം അതിൽ താഴെയും ദ്രാവക നിരകൾ, നിശ്ചിത വീതിയില്ല
പോർട്രെയ്റ്റ് ഗുളികകൾ 768px ഉം അതിനുമുകളിലും 42px 20px
സ്ഥിരസ്ഥിതി 980px ഉം അതിനുമുകളിലും 60px 20px
വലിയ ഡിസ്പ്ലേ 1200px ഉം അതിനുമുകളിലും 70px 30px 
  1. /* ലാൻഡ്‌സ്‌കേപ്പ് ഫോണുകളും താഴേക്കും */
  2. @media ( പരമാവധി - വീതി : 480px ) {     ... } 
  3.  
  4. /* ലാൻഡ്‌സ്‌കേപ്പ് ഫോൺ മുതൽ പോർട്രെയ്റ്റ് ടാബ്‌ലെറ്റ് */
  5. @media ( പരമാവധി - വീതി : 767px ) {     ... } 
  6.  
  7. /* പോർട്രെയ്റ്റ് ടാബ്‌ലെറ്റ് ലാൻഡ്‌സ്‌കേപ്പിലേക്കും ഡെസ്‌ക്‌ടോപ്പിലേക്കും */
  8. @media ( മിനിറ്റ് - വീതി : 768px ) കൂടാതെ ( പരമാവധി - വീതി : 979px ) { ...         }
  9.  
  10. /* വലിയ പണിയിടം */
  11. @media ( മിനിറ്റ് - വീതി : 1200px ) {     ... }

പ്രതികരിക്കുന്ന യൂട്ടിലിറ്റി ക്ലാസുകൾ

വേഗത്തിലുള്ള മൊബൈൽ-സൗഹൃദ വികസനത്തിന്, ഉപകരണം ഉപയോഗിച്ച് ഉള്ളടക്കം കാണിക്കുന്നതിനും മറയ്ക്കുന്നതിനും ഈ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുക. ലഭ്യമായ ക്ലാസുകളുടെ ഒരു പട്ടികയും തന്നിരിക്കുന്ന മീഡിയ അന്വേഷണ ലേഔട്ടിൽ (ഉപകരണം പ്രകാരം ലേബൽ ചെയ്‌തത്) അവയുടെ ഫലവും ചുവടെയുണ്ട്. അവയിൽ കണ്ടെത്താനാകും responsive.less.

ക്ലാസ് ഫോണുകൾ767px ഉം അതിൽ താഴെയും ഗുളികകൾ979px മുതൽ 768px വരെ ഡെസ്ക്ടോപ്പുകൾസ്ഥിരസ്ഥിതി
.visible-phone ദൃശ്യമാണ്
.visible-tablet ദൃശ്യമാണ്
.visible-desktop ദൃശ്യമാണ്
.hidden-phone ദൃശ്യമാണ് ദൃശ്യമാണ്
.hidden-tablet ദൃശ്യമാണ് ദൃശ്യമാണ്
.hidden-desktop ദൃശ്യമാണ് ദൃശ്യമാണ്

എപ്പോൾ ഉപയോഗിക്കണം

പരിമിതമായ അടിസ്ഥാനത്തിൽ ഉപയോഗിക്കുക, ഒരേ സൈറ്റിന്റെ തികച്ചും വ്യത്യസ്തമായ പതിപ്പുകൾ സൃഷ്ടിക്കുന്നത് ഒഴിവാക്കുക. പകരം, ഓരോ ഉപകരണത്തിന്റെയും അവതരണത്തിന് അനുബന്ധമായി അവ ഉപയോഗിക്കുക.

റെസ്‌പോൺസീവ് യൂട്ടിലിറ്റി ടെസ്റ്റ് കേസ്

മുകളിലെ ക്ലാസുകൾ പരിശോധിക്കുന്നതിന് നിങ്ങളുടെ ബ്രൗസറിന്റെ വലുപ്പം മാറ്റുക അല്ലെങ്കിൽ വ്യത്യസ്ത ഉപകരണങ്ങളിൽ ലോഡ് ചെയ്യുക.

ഇതിൽ ദൃശ്യമാണ്...

നിങ്ങളുടെ നിലവിലെ വ്യൂപോർട്ടിൽ ക്ലാസ് ദൃശ്യമാണെന്ന് പച്ച ചെക്ക്മാർക്കുകൾ സൂചിപ്പിക്കുന്നു.

  • ഫോൺ✔ ഫോൺ
  • ടാബ്ലെറ്റ്✔ ടാബ്ലെറ്റ്
  • ഡെസ്ക്ടോപ്പ്✔ ഡെസ്ക്ടോപ്പ്

മറഞ്ഞിരിക്കുന്നു...

ഇവിടെ, നിങ്ങളുടെ നിലവിലെ വ്യൂപോർട്ടിൽ ക്ലാസ് മറച്ചിട്ടുണ്ടെന്ന് പച്ച ചെക്ക്മാർക്കുകൾ സൂചിപ്പിക്കുന്നു.

  • ഫോൺ✔ ഫോൺ
  • ടാബ്ലെറ്റ്✔ ടാബ്ലെറ്റ്
  • ഡെസ്ക്ടോപ്പ്✔ ഡെസ്ക്ടോപ്പ്