ആമുഖം
ബൂട്ട്സ്ട്രാപ്പിന്റെ ഒരു അവലോകനം, എങ്ങനെ ഡൗൺലോഡ് ചെയ്യുകയും ഉപയോഗിക്കുകയും ചെയ്യാം, അടിസ്ഥാന ടെംപ്ലേറ്റുകളും ഉദാഹരണങ്ങളും മറ്റും.
ബൂട്ട്സ്ട്രാപ്പിന്റെ ഒരു അവലോകനം, എങ്ങനെ ഡൗൺലോഡ് ചെയ്യുകയും ഉപയോഗിക്കുകയും ചെയ്യാം, അടിസ്ഥാന ടെംപ്ലേറ്റുകളും ഉദാഹരണങ്ങളും മറ്റും.
ബൂട്ട്സ്ട്രാപ്പിന് (നിലവിൽ v3.3.7) വേഗത്തിൽ ആരംഭിക്കാൻ കുറച്ച് എളുപ്പവഴികളുണ്ട്, ഓരോന്നും വ്യത്യസ്തമായ നൈപുണ്യ നിലയിലേക്കും ഉപയോഗ സാഹചര്യത്തിലേക്കും ആകർഷിക്കുന്നു. നിങ്ങളുടെ പ്രത്യേക ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായത് എന്താണെന്ന് കാണാൻ വായിക്കുക.
CSS, JavaScript, ഫോണ്ടുകൾ എന്നിവ സമാഹരിച്ച് ചെറുതാക്കി. ഡോക്സോ യഥാർത്ഥ ഉറവിട ഫയലുകളോ ഉൾപ്പെടുത്തിയിട്ടില്ല.
ഞങ്ങളുടെ ഡോക്സിനൊപ്പം സോഴ്സ് ലെസ്, ജാവാസ്ക്രിപ്റ്റ്, ഫോണ്ട് ഫയലുകൾ. കുറച്ച് കംപൈലറും കുറച്ച് സജ്ജീകരണവും ആവശ്യമാണ്.
റെയിലുകൾ, കോമ്പസ് അല്ലെങ്കിൽ സാസ്-ഒൺലി പ്രോജക്റ്റുകളിൽ എളുപ്പത്തിൽ ഉൾപ്പെടുത്തുന്നതിനായി ബൂട്ട്സ്ട്രാപ്പ് Less-ൽ നിന്ന് Sass-ലേക്ക് പോർട്ട് ചെയ്തു .
jsDelivr- ലെ ആളുകൾ ബൂട്ട്സ്ട്രാപ്പിന്റെ CSS-നും JavaScript-നും CDN പിന്തുണ നൽകുന്നു. ഈ ബൂട്ട്സ്ട്രാപ്പ് CDN ലിങ്കുകൾ ഉപയോഗിക്കുക.
Bower ഉപയോഗിച്ച് നിങ്ങൾക്ക് Bootstrap-ന്റെ Less, CSS, JavaScript, ഫോണ്ടുകൾ എന്നിവ ഇൻസ്റ്റാൾ ചെയ്യാനും നിയന്ത്രിക്കാനും കഴിയും :
നിങ്ങൾക്ക് npm ഉപയോഗിച്ച് ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യാനും കഴിയും :
require('bootstrap')
ബൂട്ട്സ്ട്രാപ്പിന്റെ എല്ലാ jQuery പ്ലഗിനുകളും jQuery ഒബ്ജക്റ്റിലേക്ക് ലോഡ് ചെയ്യും. bootstrap
മൊഡ്യൂൾ തന്നെ ഒന്നും കയറ്റുമതി ചെയ്യുന്നില്ല . /js/*.js
പാക്കേജിന്റെ ഉയർന്ന തലത്തിലുള്ള ഡയറക്ടറിക്ക് കീഴിലുള്ള ഫയലുകൾ ലോഡുചെയ്യുന്നതിലൂടെ നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പിന്റെ jQuery പ്ലഗിനുകൾ സ്വമേധയാ ലോഡ് ചെയ്യാൻ കഴിയും .
ബൂട്ട്സ്ട്രാപ്പിൽ package.json
ഇനിപ്പറയുന്ന കീകൾക്ക് കീഴിൽ ചില അധിക മെറ്റാഡാറ്റ അടങ്ങിയിരിക്കുന്നു:
less
- ബൂട്ട്സ്ട്രാപ്പിന്റെ പ്രധാന ലെസ് സോഴ്സ് ഫയലിലേക്കുള്ള പാതstyle
- സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങൾ ഉപയോഗിച്ച് മുൻകൂട്ടി കംപൈൽ ചെയ്ത ബൂട്ട്സ്ട്രാപ്പിന്റെ ചെറുതല്ലാത്ത CSS-ലേക്കുള്ള പാത (ഇഷ്ടാനുസൃതമാക്കൽ ഇല്ല)കമ്പോസർ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പിന്റെ ലെസ്, സിഎസ്എസ്, ജാവാസ്ക്രിപ്റ്റ്, ഫോണ്ടുകൾ എന്നിവ ഇൻസ്റ്റാൾ ചെയ്യാനും നിയന്ത്രിക്കാനും കഴിയും :
CSS വെണ്ടർ പ്രിഫിക്സുകൾ കൈകാര്യം ചെയ്യാൻ ബൂട്ട്സ്ട്രാപ്പ് Autoprefixer ഉപയോഗിക്കുന്നു . നിങ്ങൾ ബൂട്ട്സ്ട്രാപ്പ് അതിന്റെ Less/Sass ഉറവിടത്തിൽ നിന്നാണ് കംപൈൽ ചെയ്യുന്നതെങ്കിൽ ഞങ്ങളുടെ Gruntfile ഉപയോഗിക്കുന്നില്ലെങ്കിൽ, നിങ്ങൾ സ്വയം നിങ്ങളുടെ ബിൽഡ് പ്രോസസിലേക്ക് Autoprefixer സംയോജിപ്പിക്കേണ്ടതുണ്ട്. നിങ്ങൾ പ്രീ കംപൈൽ ചെയ്ത ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിക്കുകയാണെങ്കിൽ അല്ലെങ്കിൽ ഞങ്ങളുടെ Gruntfile ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങൾ ഇതിനെക്കുറിച്ച് വിഷമിക്കേണ്ടതില്ല, കാരണം Autoprefixer ഇതിനകം തന്നെ ഞങ്ങളുടെ Gruntfile-ൽ സംയോജിപ്പിച്ചിരിക്കുന്നു.
ബൂട്ട്സ്ട്രാപ്പ് രണ്ട് രൂപങ്ങളിൽ ഡൗൺലോഡ് ചെയ്യാവുന്നതാണ്, അതിനുള്ളിൽ നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന ഡയറക്ടറികളും ഫയലുകളും കാണാം, പൊതുവായ ഉറവിടങ്ങളെ യുക്തിപരമായി ഗ്രൂപ്പുചെയ്യുകയും കംപൈൽ ചെയ്തതും ചെറുതാക്കിയതുമായ വ്യതിയാനങ്ങൾ നൽകുകയും ചെയ്യുന്നു.
സ്റ്റാർട്ടർ ടെംപ്ലേറ്റിൽ കാണിച്ചിരിക്കുന്നതുപോലെ എല്ലാ JavaScript പ്ലഗിന്നുകളിലും jQuery ഉൾപ്പെടുത്തണമെന്ന് ദയവായി ശ്രദ്ധിക്കുക . jQuery- യുടെ ഏത് പതിപ്പുകളാണ് പിന്തുണയ്ക്കുന്നതെന്ന് കാണാൻ ഞങ്ങളുമായി ബന്ധപ്പെടുക.bower.json
ഡൗൺലോഡ് ചെയ്തുകഴിഞ്ഞാൽ, (കംപൈൽ ചെയ്ത) ബൂട്ട്സ്ട്രാപ്പിന്റെ ഘടന കാണുന്നതിന് കംപ്രസ് ചെയ്ത ഫോൾഡർ അൺസിപ്പ് ചെയ്യുക. ഇതുപോലുള്ള ഒന്ന് നിങ്ങൾ കാണും:
ബൂട്ട്സ്ട്രാപ്പിന്റെ ഏറ്റവും അടിസ്ഥാന രൂപമാണിത്: മിക്കവാറും എല്ലാ വെബ് പ്രോജക്റ്റുകളിലും ദ്രുത ഡ്രോപ്പ്-ഇൻ ഉപയോഗത്തിനായി മുൻകൂട്ടി തയ്യാറാക്കിയ ഫയലുകൾ. ഞങ്ങൾ സമാഹരിച്ച CSS ഉം JS ഉം നൽകുന്നു ( bootstrap.*
), അതുപോലെ സമാഹരിച്ചതും ചെറുതാക്കിയതുമായ CSS, JS ( bootstrap.min.*
) എന്നിവയും. ചില ബ്രൗസറുകളുടെ ഡെവലപ്പർ ടൂളുകൾക്കൊപ്പം ഉപയോഗിക്കുന്നതിന് CSS ഉറവിട മാപ്പുകൾ ( bootstrap.*.map
) ലഭ്യമാണ്. ഓപ്ഷണൽ ബൂട്ട്സ്ട്രാപ്പ് തീം പോലെ ഗ്ലിഫിക്കോണുകളിൽ നിന്നുള്ള ഫോണ്ടുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.
ബൂട്ട്സ്ട്രാപ്പ് സോഴ്സ് കോഡ് ഡൗൺലോഡിൽ, സോഴ്സ് ലെസ്, ജാവാസ്ക്രിപ്റ്റ്, ഡോക്യുമെന്റേഷൻ എന്നിവയ്ക്കൊപ്പം പ്രീ കംപൈൽ ചെയ്ത CSS, JavaScript, ഫോണ്ട് അസറ്റുകൾ എന്നിവ ഉൾപ്പെടുന്നു. കൂടുതൽ വ്യക്തമായി പറഞ്ഞാൽ, അതിൽ ഇനിപ്പറയുന്നവയും അതിലേറെയും ഉൾപ്പെടുന്നു:
ഞങ്ങളുടെ CSS, JS, ഐക്കൺ ഫോണ്ടുകൾ (യഥാക്രമം) എന്നിവയുടെ സോഴ്സ് കോഡാണ് , , less/
എന്നിവ js/
. fonts/
മുകളിൽ dist/
മുൻകൂട്ടി തയ്യാറാക്കിയ ഡൗൺലോഡ് വിഭാഗത്തിൽ ലിസ്റ്റ് ചെയ്തിരിക്കുന്നതെല്ലാം ഫോൾഡറിൽ ഉൾപ്പെടുന്നു. ഫോൾഡറിൽ ഞങ്ങളുടെ docs/
ഡോക്യുമെന്റേഷന്റെയും examples/
ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗത്തിന്റെയും സോഴ്സ് കോഡ് ഉൾപ്പെടുന്നു. അതിനപ്പുറം, ഉൾപ്പെടുത്തിയിരിക്കുന്ന മറ്റേതെങ്കിലും ഫയലുകൾ പാക്കേജുകൾക്കും ലൈസൻസ് വിവരങ്ങൾക്കും വികസനത്തിനും പിന്തുണ നൽകുന്നു.
ബൂട്ട്സ്ട്രാപ്പ് അതിന്റെ ബിൽഡ് സിസ്റ്റത്തിനായി ഗ്രണ്ട് ഉപയോഗിക്കുന്നു , ചട്ടക്കൂടിനൊപ്പം പ്രവർത്തിക്കുന്നതിനുള്ള സൗകര്യപ്രദമായ രീതികൾ. ഞങ്ങളുടെ കോഡ് കംപൈൽ ചെയ്യുന്നതും ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുന്നതും മറ്റും ഇങ്ങനെയാണ്.
Grunt ഇൻസ്റ്റാൾ ചെയ്യാൻ, നിങ്ങൾ ആദ്യം node.js (npm ഉൾപ്പെടുന്ന) ഡൗൺലോഡ് ചെയ്ത് ഇൻസ്റ്റാൾ ചെയ്യണം. npm എന്നത് നോഡ് പാക്കേജ്ഡ് മൊഡ്യൂളുകളെ സൂചിപ്പിക്കുന്നു , ഇത് node.js വഴി ഡെവലപ്മെന്റ് ഡിപൻഡൻസികൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഒരു മാർഗമാണ്.
തുടർന്ന്, കമാൻഡ് ലൈനിൽ നിന്ന്:grunt-cli
ഉപയോഗിച്ച് ആഗോളതലത്തിൽ ഇൻസ്റ്റാൾ ചെയ്യുക npm install -g grunt-cli
./bootstrap/
, തുടർന്ന് പ്രവർത്തിപ്പിക്കുക npm install
. npm ഫയൽ നോക്കുകയും package.json
അവിടെ ലിസ്റ്റുചെയ്തിരിക്കുന്ന ആവശ്യമായ പ്രാദേശിക ഡിപൻഡൻസികൾ സ്വയമേവ ഇൻസ്റ്റാൾ ചെയ്യുകയും ചെയ്യും.പൂർത്തിയാകുമ്പോൾ, കമാൻഡ് ലൈനിൽ നിന്ന് നൽകിയിരിക്കുന്ന വിവിധ ഗ്രന്റ് കമാൻഡുകൾ നിങ്ങൾക്ക് പ്രവർത്തിപ്പിക്കാൻ കഴിയും.
grunt dist
(സിഎസ്എസും ജാവാസ്ക്രിപ്റ്റും കംപൈൽ ചെയ്യുക)/dist/
സമാഹരിച്ചതും ചെറുതാക്കിയതുമായ CSS, JavaScript ഫയലുകൾ ഉപയോഗിച്ച് ഡയറക്ടറി പുനഃസൃഷ്ടിക്കുന്നു . ഒരു ബൂട്ട്സ്ട്രാപ്പ് ഉപയോക്താവ് എന്ന നിലയിൽ, ഇത് സാധാരണയായി നിങ്ങൾ ആഗ്രഹിക്കുന്ന കമാൻഡ് ആണ്.
grunt watch
(കാവൽ)നിങ്ങൾ ഒരു മാറ്റം സംരക്ഷിക്കുമ്പോഴെല്ലാം കുറഞ്ഞ ഉറവിട ഫയലുകൾ കാണുകയും അവ സ്വയമേവ CSS-ലേക്ക് വീണ്ടും കംപൈൽ ചെയ്യുകയും ചെയ്യുന്നു.
grunt test
(ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുക)JSHint പ്രവർത്തിപ്പിക്കുകയും PhantomJS- ൽ തലയില്ലാതെ ക്യുണിറ്റ് ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുകയും ചെയ്യുന്നു .
grunt docs
(ഡോക്സ് അസറ്റുകൾ നിർമ്മിക്കുകയും പരിശോധിക്കുകയും ചെയ്യുക)വഴി പ്രാദേശികമായി ഡോക്യുമെന്റേഷൻ പ്രവർത്തിപ്പിക്കുമ്പോൾ ഉപയോഗിക്കുന്ന CSS, JavaScript, മറ്റ് അസറ്റുകൾ എന്നിവ നിർമ്മിക്കുകയും പരിശോധിക്കുകയും ചെയ്യുന്നു bundle exec jekyll serve
.
grunt
(എല്ലാം നിർമ്മിക്കുകയും പരിശോധനകൾ നടത്തുകയും ചെയ്യുക)CSS ഉം JavaScript ഉം കംപൈൽ ചെയ്യുകയും ചെറുതാക്കുകയും ചെയ്യുന്നു, ഡോക്യുമെന്റേഷൻ വെബ്സൈറ്റ് നിർമ്മിക്കുന്നു, ഡോക്സിനെതിരെ HTML5 വാലിഡേറ്റർ പ്രവർത്തിപ്പിക്കുന്നു, കസ്റ്റമൈസർ അസറ്റുകൾ പുനഃസൃഷ്ടിക്കുന്നു, കൂടാതെ മറ്റു പലതും. ജെക്കിൽ ആവശ്യമാണ് . നിങ്ങൾ ബൂട്ട്സ്ട്രാപ്പിൽ തന്നെ ഹാക്ക് ചെയ്യുകയാണെങ്കിൽ മാത്രമേ സാധാരണയായി ആവശ്യമുള്ളൂ.
ഡിപൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യുന്നതിനോ ഗ്രന്റ് കമാൻഡുകൾ പ്രവർത്തിപ്പിക്കുന്നതിനോ നിങ്ങൾക്ക് പ്രശ്നങ്ങൾ നേരിടുകയാണെങ്കിൽ, ആദ്യം /node_modules/
npm സൃഷ്ടിച്ച ഡയറക്ടറി ഇല്ലാതാക്കുക. തുടർന്ന്, വീണ്ടും പ്രവർത്തിപ്പിക്കുക npm install
.
ഈ അടിസ്ഥാന HTML ടെംപ്ലേറ്റ് ഉപയോഗിച്ച് ആരംഭിക്കുക, അല്ലെങ്കിൽ ഈ ഉദാഹരണങ്ങൾ പരിഷ്ക്കരിക്കുക . ഞങ്ങളുടെ ടെംപ്ലേറ്റുകളും ഉദാഹരണങ്ങളും നിങ്ങൾ ഇഷ്ടാനുസൃതമാക്കുമെന്ന് ഞങ്ങൾ പ്രതീക്ഷിക്കുന്നു, അവ നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമാക്കും.
കുറഞ്ഞ ബൂട്ട്സ്ട്രാപ്പ് ഡോക്യുമെന്റ് ഉപയോഗിച്ച് പ്രവർത്തിക്കാൻ താഴെയുള്ള HTML പകർത്തുക.
ബൂട്ട്സ്ട്രാപ്പിന്റെ നിരവധി ഘടകങ്ങൾ ഉപയോഗിച്ച് മുകളിലുള്ള അടിസ്ഥാന ടെംപ്ലേറ്റിൽ നിർമ്മിക്കുക. നിങ്ങളുടെ വ്യക്തിഗത പ്രോജക്റ്റിന്റെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ബൂട്ട്സ്ട്രാപ്പ് ഇഷ്ടാനുസൃതമാക്കാനും പൊരുത്തപ്പെടുത്താനും ഞങ്ങൾ നിങ്ങളെ പ്രോത്സാഹിപ്പിക്കുന്നു.
ബൂട്ട്സ്ട്രാപ്പ് ശേഖരം ഡൗൺലോഡ് ചെയ്ത് ചുവടെയുള്ള എല്ലാ ഉദാഹരണങ്ങളുടെയും സോഴ്സ് കോഡ് നേടുക . ഉദാഹരണങ്ങൾ docs/examples/
ഡയറക്ടറിയിൽ കാണാം.
അടിസ്ഥാനകാര്യങ്ങളല്ലാതെ മറ്റൊന്നുമില്ല: ഒരു കണ്ടെയ്നറിനൊപ്പം CSS ഉം JavaScript ഉം സമാഹരിച്ചു.
ഇഷ്ടാനുസൃത നാവിഗേഷൻ, തലക്കെട്ട്, തരം എന്നിവയ്ക്കൊപ്പം ലളിതമായ രണ്ട് കോളമുള്ള ബ്ലോഗ് ലേഔട്ട്.
ന്യായീകരിക്കപ്പെട്ട ലിങ്കുകൾ ഉപയോഗിച്ച് ഒരു ഇഷ്ടാനുസൃത നാവ്ബാർ സൃഷ്ടിക്കുക. ഹെഡ്സ് അപ്പുകൾ! വളരെ സഫാരി സൗഹൃദമല്ല.
ഞങ്ങളുടെ ഡോക്സിന് അനുസരിച്ച് ബൂട്ട്സ്ട്രാപ്പിന്റെ പ്രതികരണം എളുപ്പത്തിൽ പ്രവർത്തനരഹിതമാക്കുക .
ബൂട്ട്ലിന്റ് ഔദ്യോഗിക ബൂട്ട്സ്ട്രാപ്പ് HTML ലിന്റർ ടൂളാണ്. തികച്ചും "വാനില" രീതിയിൽ ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗിക്കുന്ന വെബ്പേജുകളിലെ പൊതുവായ നിരവധി HTML തെറ്റുകൾ ഇത് യാന്ത്രികമായി പരിശോധിക്കുന്നു. വാനില ബൂട്ട്സ്ട്രാപ്പിന്റെ ഘടകങ്ങൾ/വിജറ്റുകൾക്ക് അവയുടെ DOM-ന്റെ ഭാഗങ്ങൾ ചില ഘടനകൾക്ക് അനുസൃതമായി പ്രവർത്തിക്കേണ്ടതുണ്ട്. ബൂട്ട്സ്ട്രാപ്പ് ഘടകങ്ങളുടെ ഉദാഹരണങ്ങൾ എച്ച്ടിഎംഎൽ ശരിയായി ക്രമീകരിച്ചിട്ടുണ്ടോയെന്ന് ബൂട്ട്ലിന്റ് പരിശോധിക്കുന്നു. നിങ്ങളുടെ ബൂട്ട്സ്ട്രാപ്പ് വെബ് ഡെവലപ്മെന്റ് ടൂൾചെയിനിലേക്ക് ബൂട്ട്ലിന്റ് ചേർക്കുന്നത് പരിഗണിക്കുക, അതുവഴി പൊതുവായ തെറ്റുകളൊന്നും നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ വികസനം മന്ദഗതിയിലാക്കില്ല.
ബൂട്ട്സ്ട്രാപ്പിന്റെ വികസനത്തെക്കുറിച്ച് കാലികമായി തുടരുക, ഈ സഹായകരമായ ഉറവിടങ്ങൾ ഉപയോഗിച്ച് കമ്മ്യൂണിറ്റിയിലേക്ക് എത്തിച്ചേരുക.
irc.freenode.net
സെർവറിൽ IRC ഉപയോഗിച്ച് സഹ ബൂട്ട്സ്ട്രാപ്പർമാരുമായി ചാറ്റ് ചെയ്യുക .twitter-bootstrap-3
ൽ ചോദിക്കുക .bootstrap
വഴി വിതരണം ചെയ്യുമ്പോൾ, ബൂട്ട്സ്ട്രാപ്പിന്റെ പ്രവർത്തനക്ഷമത പരിഷ്ക്കരിക്കുന്നതോ കൂട്ടിച്ചേർക്കുന്നതോ ആയ പാക്കേജുകളിൽ ഡവലപ്പർമാർ കീവേഡ് ഉപയോഗിക്കണം .ഏറ്റവും പുതിയ ഗോസിപ്പുകൾക്കും ആകർഷകമായ സംഗീത വീഡിയോകൾക്കുമായി നിങ്ങൾക്ക് @getbootstrap Twitter- ൽ പിന്തുടരാനും കഴിയും .
ബൂട്ട്സ്ട്രാപ്പ് നിങ്ങളുടെ പേജുകളെ വിവിധ സ്ക്രീൻ വലുപ്പങ്ങൾക്കായി സ്വയമേവ പൊരുത്തപ്പെടുത്തുന്നു. ഈ സവിശേഷത പ്രവർത്തനരഹിതമാക്കുന്നത് എങ്ങനെയെന്നത് ഇവിടെയുണ്ട്, അതിനാൽ നിങ്ങളുടെ പേജ് ഇത് പോലെ പ്രവർത്തിക്കുന്നു .
<meta>
ഡോക്സിൽ പറഞ്ഞിരിക്കുന്ന വ്യൂപോർട്ട് ഒഴിവാക്കുകwidth
ഒരു വീതിയുള്ള ഓരോ ഗ്രിഡ് ടയറിനുമുള്ള ഓൺ അസാധുവാക്കുക, .container
ഉദാഹരണത്തിന് width: 970px !important;
ഇത് സ്ഥിരസ്ഥിതി ബൂട്ട്സ്ട്രാപ്പ് CSS-ന് ശേഷമാണെന്ന് ഉറപ്പാക്കുക. !important
മീഡിയാ ചോദ്യങ്ങൾ അല്ലെങ്കിൽ ചില സെലക്ടർ-ഫു ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഓപ്ഷണലായി ഒഴിവാക്കാം ..col-xs-*
ഇടത്തരം/വലിയ ക്ലാസുകൾക്ക് പുറമെയോ പകരം ക്ലാസുകൾ ഉപയോഗിക്കുക. വിഷമിക്കേണ്ട, അധിക-ചെറിയ ഉപകരണ ഗ്രിഡ് എല്ലാ റെസല്യൂഷനുകളിലേക്കും സ്കെയിൽ ചെയ്യുന്നു.IE8-നായി നിങ്ങൾക്ക് തുടർന്നും Respond.js ആവശ്യമാണ് (ഞങ്ങളുടെ മീഡിയ അന്വേഷണങ്ങൾ ഇപ്പോഴും ഉള്ളതിനാൽ പ്രോസസ്സ് ചെയ്യേണ്ടതുണ്ട്). ഇത് ബൂട്ട്സ്ട്രാപ്പിന്റെ "മൊബൈൽ സൈറ്റ്" വശങ്ങൾ പ്രവർത്തനരഹിതമാക്കുന്നു.
ഞങ്ങൾ ഈ ഘട്ടങ്ങൾ ഒരു ഉദാഹരണത്തിലേക്ക് പ്രയോഗിച്ചു. നടപ്പിലാക്കിയ നിർദ്ദിഷ്ട മാറ്റങ്ങൾ കാണുന്നതിന് അതിന്റെ സോഴ്സ് കോഡ് വായിക്കുക.
ബൂട്ട്സ്ട്രാപ്പിന്റെ പഴയ പതിപ്പിൽ നിന്ന് v3.x-ലേക്ക് മൈഗ്രേറ്റ് ചെയ്യാൻ നോക്കുകയാണോ? ഞങ്ങളുടെ മൈഗ്രേഷൻ ഗൈഡ് പരിശോധിക്കുക .
ഏറ്റവും പുതിയ ഡെസ്ക്ടോപ്പിലും മൊബൈൽ ബ്രൗസറുകളിലും മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നതിനാണ് ബൂട്ട്സ്ട്രാപ്പ് നിർമ്മിച്ചിരിക്കുന്നത്, അതായത് പഴയ ബ്രൗസറുകൾ പൂർണ്ണമായി പ്രവർത്തനക്ഷമമാണെങ്കിലും ചില ഘടകങ്ങളുടെ റെൻഡറിംഗുകൾ വ്യത്യസ്ത ശൈലിയിൽ പ്രദർശിപ്പിക്കും.
പ്രത്യേകിച്ചും, ഇനിപ്പറയുന്ന ബ്രൗസറുകളുടെയും പ്ലാറ്റ്ഫോമുകളുടെയും ഏറ്റവും പുതിയ പതിപ്പുകളെ ഞങ്ങൾ പിന്തുണയ്ക്കുന്നു .
WebKit, Blink അല്ലെങ്കിൽ Gecko എന്നിവയുടെ ഏറ്റവും പുതിയ പതിപ്പ് ഉപയോഗിക്കുന്ന ഇതര ബ്രൗസറുകൾ നേരിട്ടോ അല്ലെങ്കിൽ പ്ലാറ്റ്ഫോമിന്റെ വെബ് വ്യൂ API വഴിയോ, വ്യക്തമായി പിന്തുണയ്ക്കുന്നില്ല. എന്നിരുന്നാലും, ഈ ബ്രൗസറുകളിലും ബൂട്ട്സ്ട്രാപ്പ് (മിക്ക കേസുകളിലും) പ്രദർശിപ്പിക്കുകയും ശരിയായി പ്രവർത്തിക്കുകയും വേണം. കൂടുതൽ നിർദ്ദിഷ്ട പിന്തുണാ വിവരങ്ങൾ ചുവടെ നൽകിയിരിക്കുന്നു.
പൊതുവായി പറഞ്ഞാൽ, ഓരോ പ്രധാന പ്ലാറ്റ്ഫോമിന്റെയും ഡിഫോൾട്ട് ബ്രൗസറുകളുടെ ഏറ്റവും പുതിയ പതിപ്പുകളെ ബൂട്ട്സ്ട്രാപ്പ് പിന്തുണയ്ക്കുന്നു. പ്രോക്സി ബ്രൗസറുകൾ (ഓപ്പറ മിനി, ഓപ്പറ മൊബൈലിന്റെ ടർബോ മോഡ്, യുസി ബ്രൗസർ മിനി, ആമസോൺ സിൽക്ക് പോലുള്ളവ) പിന്തുണയ്ക്കുന്നില്ലെന്ന കാര്യം ശ്രദ്ധിക്കുക.
ക്രോം | ഫയർഫോക്സ് | സഫാരി | |
---|---|---|---|
ആൻഡ്രോയിഡ് | പിന്തുണച്ചു | പിന്തുണച്ചു | N/A |
ഐഒഎസ് | പിന്തുണച്ചു | പിന്തുണച്ചു | പിന്തുണച്ചു |
അതുപോലെ, മിക്ക ഡെസ്ക്ടോപ്പ് ബ്രൗസറുകളുടെയും ഏറ്റവും പുതിയ പതിപ്പുകൾ പിന്തുണയ്ക്കുന്നു.
ക്രോം | ഫയർഫോക്സ് | ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ | ഓപ്പറ | സഫാരി | |
---|---|---|---|---|---|
മാക് | പിന്തുണച്ചു | പിന്തുണച്ചു | N/A | പിന്തുണച്ചു | പിന്തുണച്ചു |
വിൻഡോസ് | പിന്തുണച്ചു | പിന്തുണച്ചു | പിന്തുണച്ചു | പിന്തുണച്ചു | പിന്തുണയ്ക്കുന്നില്ല |
വിൻഡോസിൽ, ഞങ്ങൾ Internet Explorer 8-11 പിന്തുണയ്ക്കുന്നു .
Firefox-ന്, ഏറ്റവും പുതിയ സാധാരണ സ്ഥിരതയുള്ള റിലീസിന് പുറമേ, Firefox-ന്റെ ഏറ്റവും പുതിയ എക്സ്റ്റെൻഡഡ് സപ്പോർട്ട് റിലീസ് (ESR) പതിപ്പിനെയും ഞങ്ങൾ പിന്തുണയ്ക്കുന്നു.
അനൗദ്യോഗികമായി, ബൂട്ട്സ്ട്രാപ്പ് ലിനക്സിനുള്ള Chromium, Chrome, Linux-നുള്ള Firefox, Internet Explorer 7, Microsoft Edge എന്നിവയിൽ വേണ്ടത്ര നന്നായി കാണുകയും പെരുമാറുകയും വേണം, അവയ്ക്ക് ഔദ്യോഗികമായി പിന്തുണയില്ലെങ്കിലും.
ബൂട്ട്സ്ട്രാപ്പ് കൈകാര്യം ചെയ്യേണ്ട ചില ബ്രൗസർ ബഗുകളുടെ ഒരു ലിസ്റ്റിനായി, ബ്രൗസർ ബഗുകളുടെ മതിൽ കാണുക .
Internet Explorer 8, 9 എന്നിവയും പിന്തുണയ്ക്കുന്നു, എന്നിരുന്നാലും, ചില CSS3 പ്രോപ്പർട്ടികളും HTML5 ഘടകങ്ങളും ഈ ബ്രൗസറുകൾ പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നില്ലെന്ന് ദയവായി ശ്രദ്ധിക്കുക. കൂടാതെ, Internet Explorer 8-ന് മീഡിയ അന്വേഷണ പിന്തുണ പ്രവർത്തനക്ഷമമാക്കാൻ Respond.js- ന്റെ ഉപയോഗം ആവശ്യമാണ് .
സവിശേഷത | ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 8 | ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 9 |
---|---|---|
border-radius |
പിന്തുണയ്ക്കുന്നില്ല | പിന്തുണച്ചു |
box-shadow |
പിന്തുണയ്ക്കുന്നില്ല | പിന്തുണച്ചു |
transform |
പിന്തുണയ്ക്കുന്നില്ല | -ms പ്രിഫിക്സിനൊപ്പം പിന്തുണയ്ക്കുന്നു |
transition |
പിന്തുണയ്ക്കുന്നില്ല | |
placeholder |
പിന്തുണയ്ക്കുന്നില്ല |
CSS3, HTML5 ഫീച്ചറുകളുടെ ബ്രൗസർ പിന്തുണയെക്കുറിച്ചുള്ള വിശദാംശങ്ങൾക്ക് എനിക്ക് ഉപയോഗിക്കാനാകുമോ... സന്ദർശിക്കുക .
Internet Explorer 8-നുള്ള നിങ്ങളുടെ വികസനത്തിലും പ്രൊഡക്ഷൻ പരിതസ്ഥിതികളിലും Respond.js ഉപയോഗിക്കുമ്പോൾ ഇനിപ്പറയുന്ന മുന്നറിയിപ്പുകൾ സൂക്ഷിക്കുക.
മറ്റൊരു (സബ്)ഡൊമെയ്നിൽ (ഉദാഹരണത്തിന്, ഒരു CDN-ൽ) ഹോസ്റ്റ് ചെയ്തിരിക്കുന്ന CSS-നൊപ്പം Respond.js ഉപയോഗിക്കുന്നതിന് കുറച്ച് അധിക സജ്ജീകരണം ആവശ്യമാണ്. വിശദാംശങ്ങൾക്ക് Respond.js ഡോക്സ് കാണുക.
file://
ബ്രൗസർ സുരക്ഷാ നിയമങ്ങൾ കാരണം, പ്രോട്ടോക്കോൾ വഴി കാണുന്ന പേജുകളിൽ Respond.js പ്രവർത്തിക്കില്ല file://
(ഒരു പ്രാദേശിക HTML ഫയൽ തുറക്കുമ്പോൾ പോലെ). IE8-ൽ പ്രതികരിക്കുന്ന സവിശേഷതകൾ പരിശോധിക്കുന്നതിന്, HTTP(S) വഴി നിങ്ങളുടെ പേജുകൾ കാണുക. വിശദാംശങ്ങൾക്ക് Respond.js ഡോക്സ് കാണുക.
@import
വഴി പരാമർശിച്ചിരിക്കുന്ന CSS-ൽ Respond.js പ്രവർത്തിക്കുന്നില്ല @import
. പ്രത്യേകിച്ചും, ചില Drupal കോൺഫിഗറേഷനുകൾ ഉപയോഗിക്കുന്നത് അറിയപ്പെടുന്നു @import
. വിശദാംശങ്ങൾക്ക് Respond.js ഡോക്സ് കാണുക.
, , അല്ലെങ്കിൽ box-sizing: border-box;
എന്നിവയുമായി സംയോജിപ്പിക്കുമ്പോൾ IE8 പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നില്ല . ഇക്കാരണത്താൽ, v3.0.1 മുതൽ, ഞങ്ങൾ മേലിൽ s- ൽ ഉപയോഗിക്കില്ല .min-width
max-width
min-height
max-height
max-width
.container
@font-face
യുമായി സംയോജിപ്പിക്കുമ്പോൾ IE8-ന് ചില പ്രശ്നങ്ങളുണ്ട് :before
. ബൂട്ട്സ്ട്രാപ്പ് അതിന്റെ ഗ്ലിഫിക്കോണുകൾക്കൊപ്പം ആ കോമ്പിനേഷൻ ഉപയോഗിക്കുന്നു. ഒരു പേജ് കാഷെ ചെയ്യുകയും വിൻഡോയിൽ മൗസ് ഇല്ലാതെ ലോഡ് ചെയ്യുകയും ചെയ്താൽ (അതായത് പുതുക്കുക ബട്ടൺ അമർത്തുക അല്ലെങ്കിൽ ഒരു iframe-ൽ എന്തെങ്കിലും ലോഡ് ചെയ്യുക) തുടർന്ന് ഫോണ്ട് ലോഡുചെയ്യുന്നതിന് മുമ്പ് പേജ് റെൻഡർ ചെയ്യപ്പെടും. പേജിൽ (ബോഡി) ഹോവർ ചെയ്യുന്നത് ചില ഐക്കണുകൾ കാണിക്കും, ശേഷിക്കുന്ന ഐക്കണുകളിൽ ഹോവർ ചെയ്യുന്നത് അവയും കാണിക്കും. വിശദാംശങ്ങൾക്ക് #13863 ലക്കം കാണുക.
പഴയ ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ കോംപാറ്റിബിലിറ്റി മോഡുകളിൽ ബൂട്ട്സ്ട്രാപ്പ് പിന്തുണയ്ക്കുന്നില്ല. നിങ്ങൾ IE-യ്ക്കായി ഏറ്റവും പുതിയ റെൻഡറിംഗ് മോഡ് ഉപയോഗിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ, <meta>
നിങ്ങളുടെ പേജുകളിൽ ഉചിതമായ ടാഗ് ഉൾപ്പെടുത്തുന്നത് പരിഗണിക്കുക:
ഡീബഗ്ഗിംഗ് ടൂളുകൾ തുറന്ന് ഡോക്യുമെന്റ് മോഡ് സ്ഥിരീകരിക്കുക: F12"ഡോക്യുമെന്റ് മോഡ്" അമർത്തി പരിശോധിക്കുക.
Internet Explorer-ന്റെ പിന്തുണയ്ക്കുന്ന ഓരോ പതിപ്പിലും സാധ്യമായ ഏറ്റവും മികച്ച റെൻഡറിംഗ് ഉറപ്പാക്കാൻ ബൂട്ട്സ്ട്രാപ്പിന്റെ എല്ലാ ഡോക്യുമെന്റേഷനുകളിലും ഉദാഹരണങ്ങളിലും ഈ ടാഗ് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.
കൂടുതൽ വിവരങ്ങൾക്ക് ഈ StackOverflow ചോദ്യം കാണുക .
Internet Explorer 10 ഉപകരണത്തിന്റെ വീതിയെ വ്യൂപോർട്ട് വീതിയിൽ നിന്ന് വേർതിരിക്കുന്നില്ല , അതിനാൽ ബൂട്ട്സ്ട്രാപ്പിന്റെ CSS-ൽ മീഡിയ അന്വേഷണങ്ങൾ ശരിയായി പ്രയോഗിക്കുന്നില്ല. ഇത് പരിഹരിക്കാൻ സാധാരണയായി നിങ്ങൾ CSS-ന്റെ ഒരു ദ്രുത സ്നിപ്പെറ്റ് ചേർക്കും:
എന്നിരുന്നാലും, അപ്ഡേറ്റ് 3 (അതായത് GDR3) എന്നതിനേക്കാൾ പഴയ വിൻഡോസ് ഫോൺ 8 പതിപ്പുകൾ പ്രവർത്തിക്കുന്ന ഉപകരണങ്ങൾക്ക് ഇത് പ്രവർത്തിക്കില്ല , കാരണം അത്തരം ഉപകരണങ്ങൾ ഇടുങ്ങിയ "ഫോൺ" കാഴ്ചയ്ക്ക് പകരം ഡെസ്ക്ടോപ്പ് കാഴ്ച കാണിക്കുന്നതിന് കാരണമാകുന്നു. ഇത് പരിഹരിക്കുന്നതിന്, ബഗിന് ചുറ്റും പ്രവർത്തിക്കാൻ നിങ്ങൾ ഇനിപ്പറയുന്ന CSS ഉം JavaScript ഉം ഉൾപ്പെടുത്തേണ്ടതുണ്ട് .
കൂടുതൽ വിവരങ്ങൾക്കും ഉപയോഗ മാർഗ്ഗനിർദ്ദേശങ്ങൾക്കും, Windows Phone 8, Device-Width എന്നിവ വായിക്കുക .
ഒരു മുൻകരുതൽ എന്ന നിലയിൽ, ബൂട്ട്സ്ട്രാപ്പിന്റെ എല്ലാ ഡോക്യുമെന്റേഷനുകളിലും ഉദാഹരണങ്ങളിലും ഞങ്ങൾ ഇത് ഒരു പ്രകടനമായി ഉൾപ്പെടുത്തുന്നു.
OS X-നുള്ള v7.1-നും iOS v8.0-നുള്ള Safari-നും മുമ്പുള്ള സഫാരിയുടെ പതിപ്പുകളുടെ റെൻഡറിംഗ് എഞ്ചിന് ഞങ്ങളുടെ .col-*-1
ഗ്രിഡ് ക്ലാസുകളിൽ ഉപയോഗിക്കുന്ന ദശാംശ സ്ഥാനങ്ങളുടെ എണ്ണത്തിൽ ചില പ്രശ്നങ്ങളുണ്ടായിരുന്നു. അതിനാൽ നിങ്ങൾക്ക് 12 വ്യക്തിഗത ഗ്രിഡ് കോളങ്ങൾ ഉണ്ടെങ്കിൽ, മറ്റ് നിരകളുടെ നിരകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ അവ കുറവാണെന്ന് നിങ്ങൾ ശ്രദ്ധിക്കും. Safari/iOS അപ്ഗ്രേഡ് ചെയ്യുന്നതിനു പുറമേ, പരിഹാരങ്ങൾക്കായി നിങ്ങൾക്ക് ചില ഓപ്ഷനുകൾ ഉണ്ട്:
.pull-right
ഹാർഡ്-വലത് വിന്യാസം ലഭിക്കുന്നതിന് നിങ്ങളുടെ അവസാന ഗ്രിഡ് കോളത്തിലേക്ക് ചേർക്കുകഘടകത്തിനായുള്ള പിന്തുണ overflow: hidden
iOS <body>
, Android എന്നിവയിൽ വളരെ പരിമിതമാണ്. അതിനായി, ആ ഉപകരണങ്ങളുടെ ഏതെങ്കിലും ബ്രൗസറുകളിൽ നിങ്ങൾ ഒരു മോഡലിന്റെ മുകളിലോ താഴെയോ സ്ക്രോൾ ചെയ്യുമ്പോൾ, <body>
ഉള്ളടക്കം സ്ക്രോൾ ചെയ്യാൻ തുടങ്ങും. Chrome ബഗ് #175502 (Chrome v40-ൽ പരിഹരിച്ചിരിക്കുന്നു), WebKit ബഗ് #153852 എന്നിവ കാണുക .
<input>
iOS 9.3 പോലെ, ഒരു മോഡൽ തുറന്നിരിക്കുമ്പോൾ, ഒരു സ്ക്രോൾ ആംഗ്യത്തിന്റെ പ്രാരംഭ സ്പർശനം ഒരു ടെക്സ്ച്വൽ അല്ലെങ്കിൽ a എന്നതിന്റെ പരിധിക്കുള്ളിലാണെങ്കിൽ, <textarea>
മോഡലിന്റെ <body>
കീഴിലുള്ള ഉള്ളടക്കം മോഡലിന് പകരം സ്ക്രോൾ ചെയ്യപ്പെടും. WebKit ബഗ് #153856 കാണുക .
കൂടാതെ, നിങ്ങൾ ഒരു ഫിക്സഡ് നാവ്ബാർ ഉപയോഗിക്കുകയാണെങ്കിൽ അല്ലെങ്കിൽ ഒരു മോഡലിനുള്ളിൽ ഇൻപുട്ടുകൾ ഉപയോഗിക്കുകയാണെങ്കിൽ, വെർച്വൽ കീബോർഡ് പ്രവർത്തനക്ഷമമാക്കുമ്പോൾ നിശ്ചിത ഘടകങ്ങളുടെ സ്ഥാനം അപ്ഡേറ്റ് ചെയ്യാത്ത ഒരു റെൻഡറിംഗ് ബഗ് iOS-നുണ്ട്. ഇതിനുള്ള ചില പരിഹാരങ്ങളിൽ നിങ്ങളുടെ ഘടകങ്ങളെ രൂപാന്തരപ്പെടുത്തുകയോ position: absolute
അല്ലെങ്കിൽ പൊസിഷനിംഗ് സ്വമേധയാ ശരിയാക്കാൻ ശ്രമിക്കുന്നതിന് ഫോക്കസിൽ ഒരു ടൈമർ അഭ്യർത്ഥിക്കുകയോ ഉൾപ്പെടുന്നു. ഇത് ബൂട്ട്സ്ട്രാപ്പ് കൈകാര്യം ചെയ്യുന്നില്ല, അതിനാൽ നിങ്ങളുടെ ആപ്ലിക്കേഷന് ഏതാണ് മികച്ച പരിഹാരം എന്ന് തീരുമാനിക്കേണ്ടത് നിങ്ങളാണ്.
.dropdown-backdrop
z-ഇൻഡക്സിംഗിന്റെ സങ്കീർണ്ണത കാരണം nav-ലെ iOS-ൽ ഈ ഘടകം ഉപയോഗിക്കുന്നില്ല. അതിനാൽ, നാവ്ബാറുകളിലെ ഡ്രോപ്പ്ഡൗണുകൾ അടയ്ക്കുന്നതിന്, നിങ്ങൾ നേരിട്ട് ഡ്രോപ്പ്ഡൗൺ എലമെന്റിൽ ക്ലിക്ക് ചെയ്യണം (അല്ലെങ്കിൽ iOS-ൽ ഒരു ക്ലിക്ക് ഇവന്റ് ഫയർ ചെയ്യുന്ന മറ്റേതെങ്കിലും ഘടകം ).
പേജ് സൂമിംഗ് അനിവാര്യമായും ചില ഘടകങ്ങളിൽ റെൻഡറിംഗ് ആർട്ടിഫാക്റ്റുകൾ ബൂട്ട്സ്ട്രാപ്പിലും മറ്റ് വെബിലും അവതരിപ്പിക്കുന്നു. പ്രശ്നത്തെ ആശ്രയിച്ച്, ഞങ്ങൾക്ക് അത് പരിഹരിക്കാൻ കഴിഞ്ഞേക്കും (ആദ്യം തിരയുക, തുടർന്ന് ആവശ്യമെങ്കിൽ ഒരു പ്രശ്നം തുറക്കുക). എന്നിരുന്നാലും, ഹാക്കി പരിഹാരങ്ങളല്ലാതെ അവയ്ക്ക് പലപ്പോഴും നേരിട്ടുള്ള പരിഹാരങ്ങളില്ലാത്തതിനാൽ ഞങ്ങൾ ഇവയെ അവഗണിക്കുന്നു.
:hover
/ :focus
മൊബൈലിൽമിക്ക ടച്ച്സ്ക്രീനുകളിലും യഥാർത്ഥ ഹോവറിംഗ് സാധ്യമല്ലെങ്കിലും, മിക്ക മൊബൈൽ ബ്രൗസറുകളും ഹോവറിംഗ് പിന്തുണയെ അനുകരിക്കുകയും :hover
"സ്റ്റിക്കി" ആക്കുകയും ചെയ്യുന്നു. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, :hover
ഒരു ഘടകം ടാപ്പുചെയ്തതിന് ശേഷം ശൈലികൾ പ്രയോഗിക്കാൻ തുടങ്ങുകയും ഉപയോക്താവ് മറ്റ് ചില ഘടകങ്ങൾ ടാപ്പുചെയ്തതിന് ശേഷം മാത്രം പ്രയോഗിക്കുന്നത് നിർത്തുകയും ചെയ്യുന്നു. ഇത് ബൂട്ട്സ്ട്രാപ്പിന്റെ :hover
സ്റ്റേറ്റുകൾ ഇത്തരം ബ്രൗസറുകളിൽ അനഭിലഷണീയമായി "സ്റ്റക്ക്" ആകാൻ ഇടയാക്കും. ചില മൊബൈൽ ബ്രൗസറുകളും :focus
സമാനമായി സ്റ്റിക്കി ഉണ്ടാക്കുന്നു. അത്തരം ശൈലികൾ പൂർണ്ണമായും നീക്കം ചെയ്യുന്നതല്ലാതെ ഈ പ്രശ്നങ്ങൾക്ക് നിലവിൽ ലളിതമായ ഒരു പരിഹാരവുമില്ല.
ചില ആധുനിക ബ്രൗസറുകളിൽ പോലും, പ്രിന്റിംഗ് വിചിത്രമായിരിക്കും.
പ്രത്യേകിച്ചും, Chrome v32 പോലെ, മാർജിൻ ക്രമീകരണങ്ങൾ പരിഗണിക്കാതെ, ഒരു വെബ്പേജ് പ്രിന്റ് ചെയ്യുമ്പോൾ മീഡിയ ചോദ്യങ്ങൾ പരിഹരിക്കുമ്പോൾ ഫിസിക്കൽ പേപ്പർ വലുപ്പത്തേക്കാൾ വളരെ ഇടുങ്ങിയ വ്യൂപോർട്ട് വീതി Chrome ഉപയോഗിക്കുന്നു. പ്രിന്റ് ചെയ്യുമ്പോൾ ബൂട്ട്സ്ട്രാപ്പിന്റെ അധിക-ചെറിയ ഗ്രിഡ് അപ്രതീക്ഷിതമായി സജീവമാകുന്നതിന് ഇത് കാരണമാകും. ചില വിശദാംശങ്ങൾക്ക് ലക്കം #12078 , Chrome ബഗ് #273306 എന്നിവ കാണുക. നിർദ്ദേശിച്ച പരിഹാരങ്ങൾ:
@screen-*
അതുവഴി നിങ്ങളുടെ പ്രിന്റർ പേപ്പർ അധിക-ചെറിയതിനേക്കാൾ വലുതായി കണക്കാക്കുന്നു.കൂടാതെ, Safari v8.0 പോലെ, പ്രിന്റ് ചെയ്യുമ്പോൾ, സഫാരിക്ക് അസാധാരണമാം വിധം ചെറിയ ഫോണ്ട് സൈസ് ഉപയോഗിക്കുന്നതിന് ഫിക്സഡ് വിഡ്ത്ത് .container
s കാരണമാകും. കൂടുതൽ വിവരങ്ങൾക്ക് #14868 , WebKit bug #138192 എന്നിവ കാണുക . ഇതിനുള്ള ഒരു പ്രതിവിധി ഇനിപ്പറയുന്ന CSS ചേർക്കുന്നു:
ബോക്സിന് പുറത്ത്, Android 4.1 (കൂടാതെ ചില പുതിയ റിലീസുകൾ പോലും) ബ്രൗസർ ആപ്പിന്റെ ഡിഫോൾട്ട് വെബ് ബ്രൗസറായി തിരഞ്ഞെടുക്കുന്നു (Chrome-ന് വിപരീതമായി). നിർഭാഗ്യവശാൽ, ബ്രൗസർ ആപ്പിന് പൊതുവെ CSS-ൽ ധാരാളം ബഗുകളും പൊരുത്തക്കേടുകളും ഉണ്ട്.
ഘടകങ്ങളിൽ , കൂടാതെ/അല്ലെങ്കിൽ പ്രയോഗിച്ചാൽ <select>
, Android സ്റ്റോക്ക് ബ്രൗസർ സൈഡ് നിയന്ത്രണങ്ങൾ പ്രദർശിപ്പിക്കില്ല . ( വിശദാംശങ്ങൾക്ക് ഈ StackOverflow ചോദ്യം കാണുക.) കുറ്റകരമായ CSS നീക്കം ചെയ്യാനും Android സ്റ്റോക്ക് ബ്രൗസറിൽ ഒരു ശൈലിയില്ലാത്ത ഘടകമായി റെൻഡർ ചെയ്യാനും ചുവടെയുള്ള കോഡിന്റെ സ്നിപ്പെറ്റ് ഉപയോഗിക്കുക . ഉപയോക്തൃ ഏജന്റ് സ്നിഫിംഗ് Chrome, Safari, Mozilla ബ്രൗസറുകളുമായുള്ള ഇടപെടൽ ഒഴിവാക്കുന്നു.border-radius
border
<select>
ഒരു ഉദാഹരണം കാണണോ? ഈ JS ബിൻ ഡെമോ പരിശോധിക്കുക.
പഴയതും ബഗ്ഗിയുള്ളതുമായ ബ്രൗസറുകൾക്ക് സാധ്യമായ ഏറ്റവും മികച്ച അനുഭവം നൽകുന്നതിന്, ബ്രൗസറുകളിലെ ബഗുകൾ പരിഹരിക്കുന്നതിന് ചില ബ്രൗസർ പതിപ്പുകളിലേക്ക് പ്രത്യേക CSS ടാർഗെറ്റുചെയ്യുന്നതിന് ബൂട്ട്സ്ട്രാപ്പ് പല സ്ഥലങ്ങളിലും CSS ബ്രൗസർ ഹാക്കുകൾ ഉപയോഗിക്കുന്നു. ഈ ഹാക്കുകൾ മനസ്സിലാക്കാവുന്നതേയുള്ളൂ, അവ അസാധുവാണെന്ന് CSS മൂല്യനിർണ്ണയക്കാർ പരാതിപ്പെടാൻ ഇടയാക്കുന്നു. രണ്ട് സ്ഥലങ്ങളിൽ, ഇതുവരെ പൂർണ്ണമായി സ്റ്റാൻഡേർഡ് ചെയ്യാത്ത ബ്ലീഡിംഗ് എഡ്ജ് CSS ഫീച്ചറുകളും ഞങ്ങൾ ഉപയോഗിക്കുന്നു, എന്നാൽ ഇവ പുരോഗമനപരമായ മെച്ചപ്പെടുത്തലിനായി ഉപയോഗിക്കുന്നു.
ഞങ്ങളുടെ CSS-ന്റെ ഹാക്കി അല്ലാത്ത ഭാഗം പൂർണ്ണമായി സാധൂകരിക്കുകയും ഹാക്കി അല്ലാത്ത ഭാഗത്തിന്റെ ശരിയായ പ്രവർത്തനത്തിൽ ഹാക്കി ഭാഗങ്ങൾ ഇടപെടാതിരിക്കുകയും ചെയ്യുന്നതിനാൽ ഈ മൂല്യനിർണ്ണയ മുന്നറിയിപ്പുകൾ പ്രായോഗികമായി പ്രശ്നമല്ല, അതിനാൽ ഈ പ്രത്യേക മുന്നറിയിപ്പുകൾ ഞങ്ങൾ മനഃപൂർവ്വം അവഗണിക്കുന്നത് എന്തുകൊണ്ട്.
ഞങ്ങളുടെ HTML ഡോക്സിനും അതുപോലെ ചില നിസ്സാരവും അപ്രസക്തവുമായ HTML മൂല്യനിർണ്ണയ മുന്നറിയിപ്പുകൾ ഉണ്ട് .
ഞങ്ങൾ ഏതെങ്കിലും മൂന്നാം കക്ഷി പ്ലഗിന്നുകളെയോ ആഡ്-ഓണുകളെയോ ഔദ്യോഗികമായി പിന്തുണയ്ക്കുന്നില്ലെങ്കിലും, നിങ്ങളുടെ പ്രോജക്റ്റുകളിലെ പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ സഹായിക്കുന്നതിന് ഞങ്ങൾ ചില ഉപയോഗപ്രദമായ ഉപദേശങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു.
ഗൂഗിൾ മാപ്സ്, ഗൂഗിൾ കസ്റ്റം സെർച്ച് എഞ്ചിൻ എന്നിവയുൾപ്പെടെയുള്ള ചില മൂന്നാം കക്ഷി സോഫ്റ്റ്വെയറുകൾ ബൂട്ട്സ്ട്രാപ്പുമായി വൈരുദ്ധ്യമുള്ളതിനാൽ * { box-sizing: border-box; }
, padding
ഒരു ഘടകത്തിന്റെ അന്തിമ കണക്കുകൂട്ടിയ വീതിയെ ബാധിക്കില്ല. CSS ട്രിക്കുകളിൽ ബോക്സ് മോഡലിനെക്കുറിച്ചും വലുപ്പത്തെക്കുറിച്ചും കൂടുതലറിയുക .
സന്ദർഭത്തെ ആശ്രയിച്ച്, നിങ്ങൾക്ക് ആവശ്യാനുസരണം അസാധുവാക്കാം (ഓപ്ഷൻ 1) അല്ലെങ്കിൽ മുഴുവൻ പ്രദേശങ്ങൾക്കുമായി ബോക്സ് വലുപ്പം പുനഃസജ്ജമാക്കാം (ഓപ്ഷൻ 2).
ബൂട്ട്സ്ട്രാപ്പ് പൊതുവായ വെബ് മാനദണ്ഡങ്ങൾ പിന്തുടരുന്നു, കൂടാതെ—ഏറ്റവും കുറഞ്ഞ പ്രയത്നത്തോടെ— എടി ഉപയോഗിക്കുന്നവർക്ക് ആക്സസ് ചെയ്യാൻ കഴിയുന്ന സൈറ്റുകൾ സൃഷ്ടിക്കാൻ ഇത് ഉപയോഗിക്കാം .
നിങ്ങളുടെ നാവിഗേഷനിൽ നിരവധി ലിങ്കുകൾ അടങ്ങിയിരിക്കുകയും DOM-ലെ പ്രധാന ഉള്ളടക്കത്തിന് മുമ്പായി വരികയും ചെയ്യുന്നുവെങ്കിൽ Skip to main content
, നാവിഗേഷന് മുമ്പ് ഒരു ലിങ്ക് ചേർക്കുക (ലളിതമായ വിശദീകരണത്തിന്, നാവിഗേഷൻ ലിങ്കുകൾ ഒഴിവാക്കുക എന്നതിനെക്കുറിച്ചുള്ള ഈ A11Y പ്രോജക്റ്റ് ലേഖനം കാണുക ). ക്ലാസ് ഉപയോഗിക്കുന്നത് .sr-only
സ്കിപ്പ് ലിങ്ക് ദൃശ്യപരമായി മറയ്ക്കും, .sr-only-focusable
ഒരിക്കൽ ഫോക്കസ് ചെയ്താൽ ലിങ്ക് ദൃശ്യമാകുമെന്ന് ക്ലാസ് ഉറപ്പാക്കും (കാഴ്ചയുള്ള കീബോർഡ് ഉപയോക്താക്കൾക്ക്).
Chrome-ലെ ദീർഘകാല പോരായ്മകൾ/ബഗുകൾ ( Chromium ബഗ് ട്രാക്കറിലെ ലക്കം 262171 കാണുക), Internet Explorer ( ഇൻ-പേജ് ലിങ്കുകൾ, ഫോക്കസ് ഓർഡർ എന്നിവയെക്കുറിച്ചുള്ള ഈ ലേഖനം കാണുക ), നിങ്ങളുടെ സ്കിപ്പ് ലിങ്കിന്റെ ലക്ഷ്യം നിങ്ങൾ ഉറപ്പാക്കേണ്ടതുണ്ട്. ചേർക്കുന���നതിലൂടെ കുറഞ്ഞത് പ്രോഗ്രാമാറ്റിക് ആയി ഫോക്കസ് ചെയ്യാവുന്നതാണ് tabindex="-1"
.
tabindex="-1"
കൂടാതെ, ടാർഗെറ്റിലെ ദൃശ്യമായ ഫോക്കസ് സൂചന (പ്രത്യേകിച്ച് Chrome നിലവിൽ മൗസ് ഉപയോഗിച്ച് ക്ലിക്കുചെയ്യുമ്പോൾ ഘടകങ്ങളിൽ ഫോക്കസ് സജ്ജീകരിക്കുന്നത് പോലെ) വ്യക്തമായി അടിച്ചമർത്താൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം #content:focus { outline: none; }
.
കീബോർഡ് ഉപയോക്താക്കൾക്ക് ഉപയോഗശൂന്യമാക്കുന്ന, നിങ്ങളുടെ സൈറ്റ് ഉപയോഗിച്ചേക്കാവുന്ന മറ്റേതെങ്കിലും ഇൻ-പേജ് ലിങ്കുകളെയും ഈ ബഗ് ബാധിക്കുമെന്നത് ശ്രദ്ധിക്കുക. ലിങ്ക് ടാർഗെറ്റുകളായി പ്രവർത്തിക്കുന്ന മറ്റെല്ലാ പേരുള്ള ആങ്കറുകൾ / ഫ്രാഗ്മെന്റ് ഐഡന്റിഫയറുകളിലും സമാനമായ സ്റ്റോപ്പ്-ഗ്യാപ്പ് ഫിക്സ് ചേർക്കുന്നത് നിങ്ങൾക്ക് പരിഗണിക്കാവുന്നതാണ്.
തലക്കെട്ടുകൾ കൂടുമ്പോൾ ( <h1>
- <h6>
), നിങ്ങളുടെ പ്രാഥമിക പ്രമാണ തലക്കെട്ട് ഒരു ആയിരിക്കണം <h1>
. തുടർന്നുള്ള തലക്കെട്ടുകൾ യുക്തിസഹമായി ഉപയോഗിക്കണം <h2>
- <h6>
സ്ക്രീൻ റീഡറുകൾക്ക് നിങ്ങളുടെ പേജുകൾക്കായി ഒരു ഉള്ളടക്ക പട്ടിക നിർമ്മിക്കാൻ കഴിയും.
HTML CodeSniffer , Penn State's AccessAbility എന്നിവയിൽ കൂടുതലറിയുക .
നിലവിൽ, ബൂട്ട്സ്ട്രാപ്പിൽ ലഭ്യമായ ചില ഡിഫോൾട്ട് വർണ്ണ കോമ്പിനേഷനുകൾ (വിവിധ ശൈലിയിലുള്ള ബട്ടൺ ക്ലാസുകൾ, അടിസ്ഥാന കോഡ് ബ്ലോക്കുകൾക്ക് ഉപയോഗിക്കുന്ന ചില കോഡ് ഹൈലൈറ്റ് ചെയ്യുന്ന നിറങ്ങൾ , .bg-primary
സാന്ദർഭിക പശ്ചാത്തല സഹായ ക്ലാസ്, വെളുത്ത പശ്ചാത്തലത്തിൽ ഉപയോഗിക്കുമ്പോൾ സ്ഥിരസ്ഥിതി ലിങ്ക് നിറം എന്നിവ) കുറഞ്ഞ കോൺട്രാസ്റ്റ് റേഷ്യോ ഉണ്ടായിരിക്കുക ( ശുപാർശ ചെയ്ത അനുപാതമായ 4.5:1 ന് താഴെ ). ഇത് കാഴ്ചക്കുറവുള്ള അല്ലെങ്കിൽ വർണ്ണാന്ധതയുള്ള ഉപയോക്താക്കൾക്ക് പ്രശ്നങ്ങൾ ഉണ്ടാക്കാം. ഈ ഡിഫോൾട്ട് നിറങ്ങൾ അവയുടെ ദൃശ്യതീവ്രതയും വ്യക്തതയും വർദ്ധിപ്പിക്കുന്നതിന് പരിഷ്ക്കരിക്കേണ്ടി വന്നേക്കാം.
ബൂട്ട്സ്ട്രാപ്പ് എംഐടി ലൈസൻസിന് കീഴിലാണ് പുറത്തിറങ്ങുന്നത്, ഇത് 2016 ട്വിറ്ററിന്റെ പകർപ്പവകാശമാണ്. ചെറിയ കഷ്ണങ്ങളാക്കി തിളപ്പിച്ച് താഴെ പറയുന്ന വ്യവസ്ഥകളോടെ വിവരിക്കാം.
കൂടുതൽ വിവരങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പ് ലൈസൻസ് പ്രോജക്റ്റ് റിപ്പോസിറ്ററിയിലാണ് .
കമ്മ്യൂണിറ്റി അംഗങ്ങൾ ബൂട്ട്സ്ട്രാപ്പിന്റെ ഡോക്യുമെന്റേഷൻ വിവിധ ഭാഷകളിലേക്ക് വിവർത്തനം ചെയ്തിട്ടുണ്ട്. അവയൊന്നും ഔദ്യോഗികമായി പിന്തുണയ്ക്കുന്നില്ല, അവ എപ്പോഴും അപ് ടു ഡേറ്റ് ആയിരിക്കണമെന്നില്ല.
വിവർത്തനങ്ങൾ സംഘടിപ്പിക്കുന്നതിനോ ഹോസ്റ്റുചെയ്യുന്നതിനോ ഞങ്ങൾ സഹായിക്കില്ല, ഞങ്ങൾ അവയിലേക്ക് ലിങ്ക് ചെയ്താൽ മതി.
പുതിയതോ മികച്ചതോ ആയ വിവർത്തനം പൂർത്തിയാക്കിയോ? ഞങ്ങളുടെ ലിസ്റ്റിലേക്ക് ചേർക്കാൻ ഒരു പുൾ അഭ്യർത്ഥന തുറക്കുക.