ആരംഭിക്കുന്നു · ബൂട്ട്സ്ട്രാപ്പ് മലയാളത്തിൽ

ബൂട്ട്‌സ്‌ട്രാപ്പിന് (നിലവിൽ v3.4.1) വേഗത്തിൽ ആരംഭിക്കാൻ കുറച്ച് എളുപ്പവഴികളുണ്ട്, ഓരോന്നും വ്യത്യസ്തമായ നൈപുണ്യ നിലയിലേക്കും ഉപയോഗ സാഹചര്യത്തിലേക്കും ആകർഷിക്കുന്നു. നിങ്ങളുടെ പ്രത്യേക ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായത് എന്താണെന്ന് കാണാൻ വായിക്കുക.

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

CSS, JavaScript, ഫോണ്ടുകൾ എന്നിവ സമാഹരിച്ച് ചെറുതാക്കി. ഡോക്‌സോ യഥാർത്ഥ ഉറവിട ഫയലുകളോ ഉൾപ്പെടുത്തിയിട്ടില്ല.

ബൂട്ട്സ്ട്രാപ്പ് ഡൗൺലോഡ് ചെയ്യുക

സോഴ്സ് കോഡ്

ഞങ്ങളുടെ ഡോക്‌സിനൊപ്പം സോഴ്‌സ് ലെസ്, ജാവാസ്‌ക്രിപ്റ്റ്, ഫോണ്ട് ഫയലുകൾ. കുറച്ച് കംപൈലറും കുറച്ച് സജ്ജീകരണവും ആവശ്യമാണ്.

ഉറവിടം ഡൗൺലോഡ് ചെയ്യുക

സാസ്

റെയിലുകൾ, കോമ്പസ് അല്ലെങ്കിൽ സാസ്-ഒൺലി പ്രോജക്റ്റുകളിൽ എളുപ്പത്തിൽ ഉൾപ്പെടുത്തുന്നതിനായി ബൂട്ട്‌സ്‌ട്രാപ്പ് Less-ൽ നിന്ന് Sass-ലേക്ക് പോർട്ട് ചെയ്‌തു .

Sass ഡൗൺലോഡ് ചെയ്യുക

jsDelivr

jsDelivr- ലെ ആളുകൾ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS-നും JavaScript-നും CDN പിന്തുണ നൽകുന്നു. ഈ jsDelivr ലിങ്കുകൾ ഉപയോഗിക്കുക.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

ബോവർ ഉപയോഗിച്ച് ഇൻസ്റ്റാൾ ചെയ്യുക

Bower ഉപയോഗിച്ച് നിങ്ങൾക്ക് Bootstrap-ന്റെ Less, CSS, JavaScript, ഫോണ്ടുകൾ എന്നിവ ഇൻസ്റ്റാൾ ചെയ്യാനും നിയന്ത്രിക്കാനും കഴിയും :

bower install bootstrap

npm ഉപയോഗിച്ച് ഇൻസ്റ്റാൾ ചെയ്യുക

npm ഉപയോഗിച്ച് നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യാനും കഴിയും :

npm install bootstrap@3

require('bootstrap')ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ എല്ലാ jQuery പ്ലഗിനുകളും jQuery ഒബ്‌ജക്റ്റിലേക്ക് ലോഡ് ചെയ്യും. bootstrapമൊഡ്യൂൾ തന്നെ ഒന്നും കയറ്റുമതി ചെയ്യുന്നില്ല . /js/*.jsപാക്കേജിന്റെ ഉയർന്ന തലത്തിലുള്ള ഡയറക്‌ടറിക്ക് കീഴിലുള്ള ഫയലുകൾ ലോഡുചെയ്യുന്നതിലൂടെ നിങ്ങൾക്ക് ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ jQuery പ്ലഗിനുകൾ സ്വമേധയാ ലോഡ് ചെയ്യാൻ കഴിയും .

ബൂട്ട്‌സ്‌ട്രാപ്പിൽ package.jsonഇനിപ്പറയുന്ന കീകൾക്ക് കീഴിൽ ചില അധിക മെറ്റാഡാറ്റ അടങ്ങിയിരിക്കുന്നു:

less- ബൂട്ട്സ്ട്രാപ്പിന്റെ പ്രധാന ലെസ് സോഴ്സ് ഫയലിലേക്കുള്ള പാത
style- സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങൾ ഉപയോഗിച്ച് മുൻകൂട്ടി കംപൈൽ ചെയ്‌ത ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ചെറുതല്ലാത്ത CSS-ലേക്കുള്ള പാത (ഇഷ്‌ടാനുസൃതമാക്കൽ ഇല്ല)

കമ്പോസർ ഉപയോഗിച്ച് ഇൻസ്റ്റാൾ ചെയ്യുക

കമ്പോസർ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പിന്റെ ലെസ്, സിഎസ്എസ്, ജാവാസ്ക്രിപ്റ്റ്, ഫോണ്ടുകൾ എന്നിവ ഇൻസ്റ്റാൾ ചെയ്യാനും നിയന്ത്രിക്കാനും കഴിയും :

composer require twbs/bootstrap

കുറവ്/സാസ് എന്നതിന് ഓട്ടോപ്രിഫിക്‌സർ ആവശ്യമാണ്

CSS വെണ്ടർ പ്രിഫിക്സുകൾ കൈകാര്യം ചെയ്യാൻ ബൂട്ട്സ്ട്രാപ്പ് Autoprefixer ഉപയോഗിക്കുന്നു . നിങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പ് അതിന്റെ Less/Sass ഉറവിടത്തിൽ നിന്നാണ് കംപൈൽ ചെയ്യുന്നതെങ്കിൽ ഞങ്ങളുടെ Gruntfile ഉപയോഗിക്കുന്നില്ലെങ്കിൽ, നിങ്ങൾ സ്വയം നിങ്ങളുടെ ബിൽഡ് പ്രോസസിലേക്ക് Autoprefixer സംയോജിപ്പിക്കേണ്ടതുണ്ട്. നിങ്ങൾ പ്രീ കംപൈൽ ചെയ്‌ത ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിക്കുകയാണെങ്കിൽ അല്ലെങ്കിൽ ഞങ്ങളുടെ Gruntfile ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങൾ ഇതിനെക്കുറിച്ച് വിഷമിക്കേണ്ടതില്ല, കാരണം Autoprefixer ഇതിനകം തന്നെ ഞങ്ങളുടെ Gruntfile-ൽ സംയോജിപ്പിച്ചിരിക്കുന്നു.

ബൂട്ട്‌സ്‌ട്രാപ്പ് രണ്ട് രൂപങ്ങളിൽ ഡൗൺലോഡ് ചെയ്യാവുന്നതാണ്, അതിനുള്ളിൽ നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന ഡയറക്‌ടറികളും ഫയലുകളും കാണാം, പൊതുവായ ഉറവിടങ്ങളെ യുക്തിപരമായി ഗ്രൂപ്പുചെയ്യുകയും കംപൈൽ ചെയ്‌തതും ചെറുതാക്കിയതുമായ വ്യതിയാനങ്ങൾ നൽകുകയും ചെയ്യുന്നു.

jQuery ആവശ്യമാണ്

സ്റ്റാർട്ടർ ടെംപ്ലേറ്റിൽ കാണിച്ചിരിക്കുന്നതുപോലെ എല്ലാ JavaScript പ്ലഗിന്നുകളിലും jQuery ഉൾപ്പെടുത്തണമെന്ന് ദയവായി ശ്രദ്ധിക്കുക . jQuery- യുടെ ഏത് പതിപ്പുകളാണ് പിന്തുണയ്‌ക്കുന്നതെന്ന് കാണാൻ ഞങ്ങളുമായി ബന്ധപ്പെടുക.bower.json

മുൻകൂട്ടി തയ്യാറാക്കിയ ബൂട്ട്സ്ട്രാപ്പ്

ഡൗൺലോഡ് ചെയ്‌തുകഴിഞ്ഞാൽ, (കംപൈൽ ചെയ്‌ത) ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഘടന കാണുന്നതിന് കംപ്രസ് ചെയ്‌ത ഫോൾഡർ അൺസിപ്പ് ചെയ്യുക. ഇതുപോലുള്ള ഒന്ന് നിങ്ങൾ കാണും:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഏറ്റവും അടിസ്ഥാന രൂപമാണിത്: മിക്കവാറും എല്ലാ വെബ് പ്രോജക്റ്റുകളിലും ദ്രുത ഡ്രോപ്പ്-ഇൻ ഉപയോഗത്തിനായി മുൻകൂട്ടി തയ്യാറാക്കിയ ഫയലുകൾ. ഞങ്ങൾ സമാഹരിച്ച CSS ഉം JS ഉം നൽകുന്നു ( bootstrap.*), അതുപോലെ സമാഹരിച്ചതും ചെറുതാക്കിയതുമായ CSS, JS ( bootstrap.min.*) എന്നിവയും. ചില ബ്രൗസറുകളുടെ ഡെവലപ്പർ ടൂളുകൾക്കൊപ്പം ഉപയോഗിക്കുന്നതിന് CSS ഉറവിട മാപ്പുകൾ ( bootstrap.*.map) ലഭ്യമാണ്. ഓപ്ഷണൽ ബൂട്ട്സ്ട്രാപ്പ് തീം പോലെ ഗ്ലിഫിക്കോണുകളിൽ നിന്നുള്ള ഫോണ്ടുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.

ബൂട്ട്സ്ട്രാപ്പ് സോഴ്സ് കോഡ്

ബൂട്ട്‌സ്‌ട്രാപ്പ് സോഴ്‌സ് കോഡ് ഡൗൺലോഡിൽ, സോഴ്‌സ് ലെസ്, ജാവാസ്ക്രിപ്റ്റ്, ഡോക്യുമെന്റേഷൻ എന്നിവയ്‌ക്കൊപ്പം പ്രീ കംപൈൽ ചെയ്‌ത CSS, JavaScript, ഫോണ്ട് അസറ്റുകൾ എന്നിവ ഉൾപ്പെടുന്നു. കൂടുതൽ വ്യക്തമായി പറഞ്ഞാൽ, അതിൽ ഇനിപ്പറയുന്നവയും അതിലേറെയും ഉൾപ്പെടുന്നു:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

ഞങ്ങളുടെ CSS, JS, ഐക്കൺ ഫോണ്ടുകൾ (യഥാക്രമം) എന്നിവയുടെ സോഴ്സ് കോഡാണ് , , less/എന്നിവ js/. fonts/മുകളിൽ dist/മുൻകൂട്ടി തയ്യാറാക്കിയ ഡൗൺലോഡ് വിഭാഗത്തിൽ ലിസ്റ്റ് ചെയ്തിരിക്കുന്നതെല്ലാം ഫോൾഡറിൽ ഉൾപ്പെടുന്നു. ഫോൾഡറിൽ ഞങ്ങളുടെ docs/ഡോക്യുമെന്റേഷന്റെയും examples/ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗത്തിന്റെയും സോഴ്സ് കോഡ് ഉൾപ്പെടുന്നു. അതിനപ്പുറം, ഉൾപ്പെടുത്തിയിരിക്കുന്ന മറ്റേതെങ്കിലും ഫയലുകൾ പാക്കേജുകൾക്കും ലൈസൻസ് വിവരങ്ങൾക്കും വികസനത്തിനും പിന്തുണ നൽകുന്നു.

ബൂട്ട്സ്ട്രാപ്പ് അതിന്റെ ബിൽഡ് സിസ്റ്റത്തിനായി ഗ്രണ്ട് ഉപയോഗിക്കുന്നു , ചട്ടക്കൂടിനൊപ്പം പ്രവർത്തിക്കുന്നതിനുള്ള സൗകര്യപ്രദമായ രീതികൾ. ഞങ്ങളുടെ കോഡ് കംപൈൽ ചെയ്യുന്നതും ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുന്നതും മറ്റും ഇങ്ങനെയാണ്.

Grunt ഇൻസ്റ്റാൾ ചെയ്യുന്നു

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 പ്രവർത്തിപ്പിക്കുകയും യഥാർത്ഥ ബ്രൗസറുകളിൽ QUnit ടെസ്റ്റുകൾ പ്രവർത്തിപ്പിക്കുകയും ചെയ്യുന്നത് കർമ്മയ്ക്ക് നന്ദി .

`grunt docs`(ഡോക്‌സ് അസറ്റുകൾ നിർമ്മിക്കുകയും പരിശോധിക്കുകയും ചെയ്യുക)

വഴി പ്രാദേശികമായി ഡോക്യുമെന്റേഷൻ പ്രവർത്തിപ്പിക്കുമ്പോൾ ഉപയോഗിക്കുന്ന CSS, JavaScript, മറ്റ് അസറ്റുകൾ എന്നിവ നിർമ്മിക്കുകയും പരിശോധിക്കുകയും ചെയ്യുന്നു bundle exec jekyll serve.

`grunt`(എല്ലാം നിർമ്മിക്കുകയും പരിശോധനകൾ നടത്തുകയും ചെയ്യുക)

CSS ഉം JavaScript ഉം കംപൈൽ ചെയ്യുകയും ചെറുതാക്കുകയും ചെയ്യുന്നു, ഡോക്യുമെന്റേഷൻ വെബ്‌സൈറ്റ് നിർമ്മിക്കുന്നു, ഡോക്‌സിനെതിരെ HTML5 വാലിഡേറ്റർ പ്രവർത്തിപ്പിക്കുന്നു, കസ്റ്റമൈസർ അസറ്റുകൾ പുനഃസൃഷ്ടിക്കുന്നു, കൂടാതെ മറ്റു പലതും. ജെക്കിൽ ആവശ്യമാണ് . നിങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പിൽ തന്നെ ഹാക്ക് ചെയ്യുകയാണെങ്കിൽ മാത്രമേ സാധാരണയായി ആവശ്യമുള്ളൂ.

ട്രബിൾഷൂട്ടിംഗ്

ഡിപൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യുന്നതിനോ ഗ്രന്റ് കമാൻഡുകൾ പ്രവർത്തിപ്പിക്കുന്നതിനോ നിങ്ങൾക്ക് പ്രശ്നങ്ങൾ നേരിടുകയാണെങ്കിൽ, ആദ്യം /node_modules/npm സൃഷ്ടിച്ച ഡയറക്ടറി ഇല്ലാതാക്കുക. തുടർന്ന്, വീണ്ടും പ്രവർത്തിപ്പിക്കുക npm install.

ഈ അടിസ്ഥാന HTML ടെംപ്ലേറ്റ് ഉപയോഗിച്ച് ആരംഭിക്കുക, അല്ലെങ്കിൽ ഈ ഉദാഹരണങ്ങൾ പരിഷ്ക്കരിക്കുക . ഞങ്ങളുടെ ടെംപ്ലേറ്റുകളും ഉദാഹരണങ്ങളും നിങ്ങൾ ഇഷ്ടാനുസൃതമാക്കുമെന്ന് ഞങ്ങൾ പ്രതീക്ഷിക്കുന്നു, അവ നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമാക്കും.

കുറഞ്ഞ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഡോക്യുമെന്റ് ഉപയോഗിച്ച് പ്രവർത്തിക്കാൻ താഴെയുള്ള HTML പകർത്തുക.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ നിരവധി ഘടകങ്ങൾ ഉപയോഗിച്ച് മുകളിലുള്ള അടിസ്ഥാന ടെംപ്ലേറ്റിൽ നിർമ്മിക്കുക. നിങ്ങളുടെ വ്യക്തിഗത പ്രോജക്റ്റിന്റെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇഷ്‌ടാനുസൃതമാക്കാനും പൊരുത്തപ്പെടുത്താനും ഞങ്ങൾ നിങ്ങളെ പ്രോത്സാഹിപ്പിക്കുന്നു.

ബൂട്ട്‌സ്‌ട്രാപ്പ് ശേഖരം ഡൗൺലോഡ് ചെയ്‌ത് ചുവടെയുള്ള എല്ലാ ഉദാഹരണങ്ങളുടെയും സോഴ്‌സ് കോഡ് നേടുക . ഉദാഹരണങ്ങൾ docs/examples/ഡയറക്ടറിയിൽ കാണാം.

ചട്ടക്കൂട് ഉപയോഗിക്കുന്നു

സ്റ്റാർട്ടർ ടെംപ്ലേറ്റ്

അടിസ്ഥാനകാര്യങ്ങളല്ലാതെ മറ്റൊന്നുമില്ല: ഒരു കണ്ടെയ്‌നറിനൊപ്പം CSS ഉം JavaScript ഉം സമാഹരിച്ചു.

ബൂട്ട്സ്ട്രാപ്പ് തീം

ദൃശ്യപരമായി മെച്ചപ്പെടുത്തിയ അനുഭവത്തിനായി ഓപ്ഷണൽ ബൂട്ട്സ്ട്രാപ്പ് തീം ലോഡ് ചെയ്യുക.

ഗ്രിഡുകൾ

നാല് ടയറുകളുള്ള ഗ്രിഡ് ലേഔട്ടുകളുടെ ഒന്നിലധികം ഉദാഹരണങ്ങൾ, നെസ്റ്റിംഗ് എന്നിവയും മറ്റും.

ജംബോട്രോൺ

ഒരു നവബാറും ചില അടിസ്ഥാന ഗ്രിഡ് കോളങ്ങളും ഉപയോഗിച്ച് ജംബോട്രോണിന് ചുറ്റും നിർമ്മിക്കുക.

ഇടുങ്ങിയ ജംബോട്രോൺ

ഡിഫോൾട്ട് കണ്ടെയ്‌നറും ജംബോട്രോണും ചുരുക്കി കൂടുതൽ ഇഷ്‌ടാനുസൃത പേജ് നിർമ്മിക്കുക.

നവബാറുകൾ പ്രവർത്തനത്തിലാണ്

നവബാർ

ചില അധിക ഉള്ളടക്കത്തോടൊപ്പം navbar ഉൾപ്പെടുന്ന സൂപ്പർ അടിസ്ഥാന ടെംപ്ലേറ്റ്.

സ്റ്റാറ്റിക് ടോപ്പ് നാവ്ബാർ

ചില അധിക ഉള്ളടക്കങ്ങൾക്കൊപ്പം ഒരു സ്റ്റാറ്റിക് ടോപ്പ് നാവ്ബാറുള്ള സൂപ്പർ അടിസ്ഥാന ടെംപ്ലേറ്റ്.

സ്ഥിര നവബാർ

ചില അധിക ഉള്ളടക്കങ്ങൾക്കൊപ്പം ഫിക്സഡ് ടോപ്പ് നാവ്ബാറുള്ള സൂപ്പർ അടിസ്ഥാന ടെംപ്ലേറ്റ്.

ഇഷ്ടാനുസൃത ഘടകങ്ങൾ

മൂടുക

ലളിതവും മനോഹരവുമായ ഹോം പേജുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു പേജ് ടെംപ്ലേറ്റ്.

കറൗസൽ

നവബാറും കറൗസലും ഇഷ്‌ടാനുസൃതമാക്കുക, തുടർന്ന് ചില പുതിയ ഘടകങ്ങൾ ചേർക്കുക.

ബ്ലോഗ്

ഇഷ്‌ടാനുസൃത നാവിഗേഷൻ, തലക്കെട്ട്, തരം എന്നിവയ്‌ക്കൊപ്പം ലളിതമായ രണ്ട് കോളമുള്ള ബ്ലോഗ് ലേഔട്ട്.

ഡാഷ്ബോർഡ്

നിശ്ചിത സൈഡ്‌ബാറും നവബാറും ഉള്ള ഒരു അഡ്മിൻ ഡാഷ്‌ബോർഡിനുള്ള അടിസ്ഥാന ഘടന.

സൈൻ ഇൻ പേജ്

ഇഷ്‌ടാനുസൃത ഫോം ലേഔട്ടും രൂപകൽപനയും ലളിതമായ ഒരു സൈൻ ഇൻ ഫോമിനായി.

ന്യായീകരിച്ച നവ്

ന്യായീകരിക്കപ്പെട്ട ലിങ്കുകൾ ഉപയോഗിച്ച് ഒരു ഇഷ്‌ടാനുസൃത നാവ്ബാർ സൃഷ്‌ടിക്കുക. ഹെഡ്സ് അപ്പുകൾ! വളരെ സഫാരി സൗഹൃദമല്ല.

സ്റ്റിക്കി ഫൂട്ടർ

ഉള്ളടക്കം അതിനെക്കാൾ ചെറുതായിരിക്കുമ്പോൾ വ്യൂപോർട്ടിന്റെ അടിയിൽ ഒരു അടിക്കുറിപ്പ് അറ്റാച്ചുചെയ്യുക.

navbar ഉള്ള സ്റ്റിക്കി അടിക്കുറിപ്പ്

വ്യൂപോർട്ടിന്റെ അടിയിൽ മുകളിൽ ഫിക്സഡ് നാവ്ബാർ ഉപയോഗിച്ച് ഒരു അടിക്കുറിപ്പ് അറ്റാച്ചുചെയ്യുക.

പരീക്ഷണങ്ങൾ

പ്രതികരിക്കാത്ത ബൂട്ട്സ്ട്രാപ്പ്

ഞങ്ങളുടെ ഡോക്‌സിന് അനുസരിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്രതികരണം എളുപ്പത്തിൽ പ്രവർത്തനരഹിതമാക്കുക .

ഓഫ്-കാൻവാസ്

ബൂട്ട്‌സ്‌ട്രാപ്പിനൊപ്പം ഉപയോഗിക്കുന്നതിന് ടോഗിൾ ചെയ്യാവുന്ന ഓഫ്-കാൻവാസ് നാവിഗേഷൻ മെനു നിർമ്മിക്കുക.

ബൂട്ട്ലിന്റ്

ബൂട്ട്‌ലിന്റ് ഔദ്യോഗിക ബൂട്ട്‌സ്‌ട്രാപ്പ് HTML ലിന്റർ ടൂളാണ്. തികച്ചും "വാനില" രീതിയിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിക്കുന്ന വെബ്‌പേജുകളിലെ പൊതുവായ നിരവധി HTML തെറ്റുകൾ ഇത് യാന്ത്രികമായി പരിശോധിക്കുന്നു. വാനില ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഘടകങ്ങൾ/വിജറ്റുകൾക്ക് അവയുടെ DOM-ന്റെ ഭാഗങ്ങൾ ചില ഘടനകൾക്ക് അനുസൃതമായി പ്രവർത്തിക്കേണ്ടതുണ്ട്. ബൂട്ട്‌സ്‌ട്രാപ്പ് ഘടകങ്ങളുടെ ഉദാഹരണങ്ങൾ എച്ച്ടിഎംഎൽ ശരിയായി ക്രമീകരിച്ചിട്ടുണ്ടോയെന്ന് ബൂട്ട്ലിന്റ് പരിശോധിക്കുന്നു. നിങ്ങളുടെ ബൂട്ട്‌സ്‌ട്രാപ്പ് വെബ് ഡെവലപ്‌മെന്റ് ടൂൾചെയിനിലേക്ക് ബൂട്ട്‌ലിന്റ് ചേർക്കുന്നത് പരിഗണിക്കുക, അതുവഴി പൊതുവായ തെറ്റുകളൊന്നും നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ വികസനം മന്ദഗതിയിലാക്കില്ല.

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ വികസനത്തെക്കുറിച്ച് കാലികമായി തുടരുക, ഈ സഹായകരമായ ഉറവിടങ്ങൾ ഉപയോഗിച്ച് കമ്മ്യൂണിറ്റിയിലേക്ക് എത്തിച്ചേരുക.

ഔദ്യോഗിക ബൂട്ട്സ്ട്രാപ്പ് ബ്ലോഗ് വായിച്ച് സബ്സ്ക്രൈബ് ചെയ്യുക .
##bootstrap ചാനലിലെirc.freenode.net സെർവറിൽ IRC ഉപയോഗിച്ച് സഹ ബൂട്ട്‌സ്ട്രാപ്പർമാരുമായി ചാറ്റ് ചെയ്യുക .
ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിക്കുന്നതിനുള്ള സഹായത്തിന് , ടാഗ് ഉപയോഗിച്ച് StackOverflow-twitter-bootstrap-3 ൽ ചോദിക്കുക .
npm അല്ലെങ്കിൽ സമാനമായ ഡെലിവറി മെക്കാനിസങ്ങൾ bootstrapവഴി വിതരണം ചെയ്യുമ്പോൾ, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പ്രവർത്തനക്ഷമത പരിഷ്‌ക്കരിക്കുന്നതോ കൂട്ടിച്ചേർക്കുന്നതോ ആയ പാക്കേജുകളിൽ ഡവലപ്പർമാർ കീവേഡ് ഉപയോഗിക്കണം .
ബൂട്ട്‌സ്‌ട്രാപ്പ് എക്‌സ്‌പോയിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് നിർമ്മിക്കുന്ന ആളുകളുടെ പ്രചോദനാത്മക ഉദാഹരണങ്ങൾ കണ്ടെത്തുക .

ഏറ്റവും പുതിയ ഗോസിപ്പുകൾക്കും ആകർഷകമായ സംഗീത വീഡിയോകൾക്കുമായി നിങ്ങൾക്ക് @getbootstrap Twitter- ൽ പിന്തുടരാനും കഴിയും .

ബൂട്ട്‌സ്‌ട്രാപ്പ് നിങ്ങളുടെ പേജുകളെ വിവിധ സ്‌ക്രീൻ വലുപ്പങ്ങൾക്കായി സ്വയമേവ പൊരുത്തപ്പെടുത്തുന്നു. ഈ സവിശേഷത പ്രവർത്തനരഹിതമാക്കുന്നത് എങ്ങനെയെന്നത് ഇവിടെയുണ്ട്, അതിനാൽ നിങ്ങളുടെ പേജ് ഇത് പോലെ പ്രവർത്തിക്കുന്നു .

പേജ് പ്രതികരണശേഷി പ്രവർത്തനരഹിതമാക്കുന്നതിനുള്ള നടപടികൾ

CSS<meta> ഡോക്‌സിൽ പറഞ്ഞിരിക്കുന്ന വ്യൂപോർട്ട് ഒഴിവാക്കുക
widthഒരു വീതിയുള്ള ഓരോ ഗ്രിഡ് ടയറിനുമുള്ള ഓൺ അസാധുവാക്കുക, .containerഉദാഹരണത്തിന് width: 970px !important;ഇത് സ്ഥിരസ്ഥിതി ബൂട്ട്‌സ്‌ട്രാപ്പ് CSS-ന് ശേഷമാണെന്ന് ഉറപ്പാക്കുക. !importantമീഡിയാ ചോദ്യങ്ങൾ അല്ലെങ്കിൽ ചില സെലക്ടർ-ഫു ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഓപ്ഷണലായി ഒഴിവാക്കാം .
navbars ഉപയോഗിക്കുകയാണെങ്കിൽ, എല്ലാ navbar തകരുന്നതും വികസിപ്പിക്കുന്നതുമായ സ്വഭാവം നീക്കം ചെയ്യുക.
ഗ്രിഡ് ലേഔട്ടുകൾക്ക്, .col-xs-*ഇടത്തരം/വലിയ ക്ലാസുകൾക്ക് പുറമെയോ പകരം ക്ലാസുകൾ ഉപയോഗിക്കുക. വിഷമിക്കേണ്ട, അധിക-ചെറിയ ഉപകരണ ഗ്രിഡ് എല്ലാ റെസല്യൂഷനുകളിലേക്കും സ്കെയിൽ ചെയ്യുന്നു.

IE8-നായി നിങ്ങൾക്ക് തുടർന്നും Respond.js ആവശ്യമാണ് (ഞങ്ങളുടെ മീഡിയ അന്വേഷണങ്ങൾ ഇപ്പോഴും ഉള്ളതിനാൽ പ്രോസസ്സ് ചെയ്യേണ്ടതുണ്ട്). ഇത് ബൂട്ട്സ്ട്രാപ്പിന്റെ "മൊബൈൽ സൈറ്റ്" വശങ്ങൾ പ്രവർത്തനരഹിതമാക്കുന്നു.

പ്രതികരണശേഷിയുള്ള ബൂട്ട്‌സ്‌ട്രാപ്പ് ടെംപ്ലേറ്റ് പ്രവർത്തനരഹിതമാക്കി

ഞങ്ങൾ ഈ ഘട്ടങ്ങൾ ഒരു ഉദാഹരണത്തിലേക്ക് പ്രയോഗിച്ചു. നടപ്പിലാക്കിയ നിർദ്ദിഷ്ട മാറ്റങ്ങൾ കാണുന്നതിന് അതിന്റെ സോഴ്സ് കോഡ് വായിക്കുക.

പ്രതികരിക്കാത്ത ഉദാഹരണം കാണുക

v2.x-ൽ നിന്ന് v3.x-ലേക്ക് മൈഗ്രേറ്റ് ചെയ്യുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ പഴയ പതിപ്പിൽ നിന്ന് 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 എന്നിവയിൽ വേണ്ടത്ര നന്നായി കാണുകയും പെരുമാറുകയും വേണം, അവയ്ക്ക് ഔദ്യോഗികമായി പിന്തുണയില്ലെങ്കിലും.

ബൂട്ട്‌സ്‌ട്രാപ്പ് കൈകാര്യം ചെയ്യേണ്ട ചില ബ്രൗസർ ബഗുകളുടെ ഒരു ലിസ്റ്റിനായി, ബ്രൗസർ ബഗുകളുടെ മതിൽ കാണുക .

ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 8 ഉം 9 ഉം

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

Internet Explorer 8-നുള്ള നിങ്ങളുടെ വികസനത്തിലും പ്രൊഡക്ഷൻ പരിതസ്ഥിതികളിലും Respond.js ഉപയോഗിക്കുമ്പോൾ ഇനിപ്പറയുന്ന മുന്നറിയിപ്പുകൾ സൂക്ഷിക്കുക.

Respond.js, ക്രോസ്-ഡൊമെയ്ൻ CSS

മറ്റൊരു (സബ്)ഡൊമെയ്‌നിൽ (ഉദാഹരണത്തിന്, ഒരു CDN-ൽ) ഹോസ്റ്റ് ചെയ്‌തിരിക്കുന്ന CSS-നൊപ്പം Respond.js ഉപയോഗിക്കുന്നതിന് കുറച്ച് അധിക സജ്ജീകരണം ആവശ്യമാണ്. വിശദാംശങ്ങൾക്ക് Respond.js ഡോക്‌സ് കാണുക.

Respond.js ഒപ്പം`file://`

ബ്രൗസർ സുരക്ഷാ നിയമങ്ങൾ കാരണം, പ്രോട്ടോക്കോൾ വഴി കാണുന്ന പേജുകളിൽ Respond.js പ്രവർത്തിക്കില്ല file://(ഒരു പ്രാദേശിക HTML ഫയൽ തുറക്കുമ്പോൾ പോലെ). IE8-ൽ പ്രതികരിക്കുന്ന സവിശേഷതകൾ പരിശോധിക്കുന്നതിന്, HTTP(S) വഴി നിങ്ങളുടെ പേജുകൾ കാണുക. വിശദാംശങ്ങൾക്ക് Respond.js ഡോക്‌സ് കാണുക.

Respond.js ഒപ്പം`@import`

വഴി പരാമർശിച്ചിരിക്കുന്ന CSS-ൽ Respond.js പ്രവർത്തിക്കുന്നില്ല @import. പ്രത്യേകിച്ചും, ചില Drupal കോൺഫിഗറേഷനുകൾ ഉപയോഗിക്കുന്നത് അറിയപ്പെടുന്നു @import. വിശദാംശങ്ങൾക്ക് Respond.js ഡോക്‌സ് കാണുക.

ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 8 ഉം ബോക്സ് വലുപ്പവും

, , അല്ലെങ്കിൽ box-sizing: border-box;എന്നിവയുമായി സംയോജിപ്പിക്കുമ്പോൾ IE8 പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നില്ല . ഇക്കാരണത്താൽ, v3.0.1 മുതൽ, ഞങ്ങൾ മേലിൽ s- ൽ ഉപയോഗിക്കില്ല .min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 ഉം @font-face ഉം

@font-faceയുമായി സംയോജിപ്പിക്കുമ്പോൾ IE8-ന് ചില പ്രശ്നങ്ങളുണ്ട് :before. ബൂട്ട്സ്ട്രാപ്പ് അതിന്റെ ഗ്ലിഫിക്കോണുകൾക്കൊപ്പം ആ കോമ്പിനേഷൻ ഉപയോഗിക്കുന്നു. ഒരു പേജ് കാഷെ ചെയ്യുകയും വിൻഡോയിൽ മൗസ് ഇല്ലാതെ ലോഡ് ചെയ്യുകയും ചെയ്താൽ (അതായത് പുതുക്കുക ബട്ടൺ അമർത്തുക അല്ലെങ്കിൽ ഒരു iframe-ൽ എന്തെങ്കിലും ലോഡ് ചെയ്യുക) തുടർന്ന് ഫോണ്ട് ലോഡുചെയ്യുന്നതിന് മുമ്പ് പേജ് റെൻഡർ ചെയ്യപ്പെടും. പേജിൽ (ബോഡി) ഹോവർ ചെയ്യുന്നത് ചില ഐക്കണുകൾ കാണിക്കും, ശേഷിക്കുന്ന ഐക്കണുകളിൽ ഹോവർ ചെയ്യുന്നത് അവയും കാണിക്കും. വിശദാംശങ്ങൾക്ക് #13863 ലക്കം കാണുക.

IE അനുയോജ്യത മോഡുകൾ

പഴയ ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ കോംപാറ്റിബിലിറ്റി മോഡുകളിൽ ബൂട്ട്സ്ട്രാപ്പ് പിന്തുണയ്ക്കുന്നില്ല. നിങ്ങൾ IE-യ്‌ക്കായി ഏറ്റവും പുതിയ റെൻഡറിംഗ് മോഡ് ഉപയോഗിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ, <meta>നിങ്ങളുടെ പേജുകളിൽ ഉചിതമായ ടാഗ് ഉൾപ്പെടുത്തുന്നത് പരിഗണിക്കുക:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ഡീബഗ്ഗിംഗ് ടൂളുകൾ തുറന്ന് ഡോക്യുമെന്റ് മോഡ് സ്ഥിരീകരിക്കുക: F12"ഡോക്യുമെന്റ് മോഡ്" അമർത്തി പരിശോധിക്കുക.

Internet Explorer-ന്റെ പിന്തുണയ്ക്കുന്ന ഓരോ പതിപ്പിലും സാധ്യമായ ഏറ്റവും മികച്ച റെൻഡറിംഗ് ഉറപ്പാക്കാൻ ബൂട്ട്സ്ട്രാപ്പിന്റെ എല്ലാ ഡോക്യുമെന്റേഷനുകളിലും ഉദാഹരണങ്ങളിലും ഈ ടാഗ് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്.

കൂടുതൽ വിവരങ്ങൾക്ക് ഈ StackOverflow ചോദ്യം കാണുക .

വിൻഡോസ് 8-ലും വിൻഡോസ് ഫോൺ 8-ലും ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 10

ഇൻറർനെറ്റ് എക്സ്പ്ലോറർ 10 ഉപകരണത്തിന്റെ വീതിയെ വ്യൂപോർട്ട് വീതിയിൽ നിന്ന് വേർതിരിക്കുന്നില്ല , അതിനാൽ ബൂട്ട്സ്ട്രാപ്പിന്റെ CSS-ൽ മീഡിയ അന്വേഷണങ്ങൾ ശരിയായി പ്രയോഗിക്കുന്നില്ല. ഇത് പരിഹരിക്കാൻ സാധാരണയായി നിങ്ങൾ CSS-ന്റെ ഒരു ദ്രുത സ്‌നിപ്പെറ്റ് ചേർക്കും:

@-ms-viewport       { width: device-width; }

എന്നിരുന്നാലും, അപ്‌ഡേറ്റ് 3 (അതായത് GDR3) എന്നതിനേക്കാൾ പഴയ വിൻഡോസ് ഫോൺ 8 പതിപ്പുകൾ പ്രവർത്തിക്കുന്ന ഉപകരണങ്ങൾക്ക് ഇത് പ്രവർത്തിക്കില്ല , കാരണം അത്തരം ഉപകരണങ്ങൾ ഇടുങ്ങിയ "ഫോൺ" കാഴ്‌ചയ്‌ക്ക് പകരം ഡെസ്‌ക്‌ടോപ്പ് കാഴ്‌ച കാണിക്കുന്നതിന് കാരണമാകുന്നു. ഇത് പരിഹരിക്കുന്നതിന്, ബഗിന് ചുറ്റും പ്രവർത്തിക്കാൻ നിങ്ങൾ ഇനിപ്പറയുന്ന CSS ഉം JavaScript ഉം ഉൾപ്പെടുത്തേണ്ടതുണ്ട് .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

കൂടുതൽ വിവരങ്ങൾക്കും ഉപയോഗ മാർഗ്ഗനിർദ്ദേശങ്ങൾക്കും, Windows Phone 8, Device-Width എന്നിവ വായിക്കുക .

ഒരു മുൻകരുതൽ എന്ന നിലയിൽ, ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ എല്ലാ ഡോക്യുമെന്റേഷനുകളിലും ഉദാഹരണങ്ങളിലും ഞങ്ങൾ ഇത് ഒരു പ്രകടനമായി ഉൾപ്പെടുത്തുന്നു.

സഫാരി ശതമാനം റൗണ്ടിംഗ്

OS X-നുള്ള v7.1-നും iOS v8.0-നുള്ള Safari-നും മുമ്പുള്ള സഫാരിയുടെ പതിപ്പുകളുടെ റെൻഡറിംഗ് എഞ്ചിന് ഞങ്ങളുടെ .col-*-1ഗ്രിഡ് ക്ലാസുകളിൽ ഉപയോഗിക്കുന്ന ദശാംശ സ്ഥാനങ്ങളുടെ എണ്ണത്തിൽ ചില പ്രശ്‌നങ്ങളുണ്ടായിരുന്നു. അതിനാൽ നിങ്ങൾക്ക് 12 വ്യക്തിഗത ഗ്രിഡ് കോളങ്ങൾ ഉണ്ടെങ്കിൽ, മറ്റ് നിരകളുടെ നിരകളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ അവ കുറവാണെന്ന് നിങ്ങൾ ശ്രദ്ധിക്കും. Safari/iOS അപ്‌ഗ്രേഡ് ചെയ്യുന്നതിനു പുറമേ, പരിഹാരങ്ങൾക്കായി നിങ്ങൾക്ക് ചില ഓപ്ഷനുകൾ ഉണ്ട്:

.pull-rightഹാർഡ്-വലത് വിന്യാസം ലഭിക്കുന്നതിന് നിങ്ങളുടെ അവസാന ഗ്രിഡ് കോളത്തിലേക്ക് ചേർക്കുക
സഫാരിക്ക് അനുയോജ്യമായ റൗണ്ടിംഗ് ലഭിക്കുന്നതിന് നിങ്ങളുടെ ശതമാനങ്ങൾ സ്വമേധയാ മാറ്റുക (ആദ്യ ഓപ്ഷനേക്കാൾ ബുദ്ധിമുട്ടാണ്)

മോഡലുകൾ, നവബാറുകൾ, വെർച്വൽ കീബോർഡുകൾ

ഓവർഫ്ലോയും സ്ക്രോളിംഗും

ഘടകത്തിനായുള്ള പിന്തുണ overflow: hiddeniOS <body>, Android എന്നിവയിൽ വളരെ പരിമിതമാണ്. അതിനായി, ആ ഉപകരണങ്ങളുടെ ഏതെങ്കിലും ബ്രൗസറുകളിൽ നിങ്ങൾ ഒരു മോഡലിന്റെ മുകളിലോ താഴെയോ സ്ക്രോൾ ചെയ്യുമ്പോൾ, <body>ഉള്ളടക്കം സ്ക്രോൾ ചെയ്യാൻ തുടങ്ങും. Chrome ബഗ് #175502 (Chrome v40-ൽ പരിഹരിച്ചിരിക്കുന്നു), WebKit ബഗ് #153852 എന്നിവ കാണുക .

iOS ടെക്സ്റ്റ് ഫീൽഡുകളും സ്ക്രോളിംഗും

<input>iOS 9.3 പോലെ, ഒരു മോഡൽ തുറന്നിരിക്കുമ്പോൾ, ഒരു സ്ക്രോൾ ആംഗ്യത്തിന്റെ പ്രാരംഭ സ്പർശനം ഒരു ടെക്‌സ്‌ച്വൽ അല്ലെങ്കിൽ a എന്നതിന്റെ പരിധിക്കുള്ളിലാണെങ്കിൽ, <textarea>മോഡലിന്റെ <body>കീഴിലുള്ള ഉള്ളടക്കം മോഡലിന് പകരം സ്‌ക്രോൾ ചെയ്യപ്പെടും. WebKit ബഗ് #153856 കാണുക .

വെർച്വൽ കീബോർഡുകൾ

കൂടാതെ, നിങ്ങൾ ഒരു ഫിക്സഡ് നാവ്ബാർ ഉപയോഗിക്കുകയാണെങ്കിൽ അല്ലെങ്കിൽ ഒരു മോഡലിനുള്ളിൽ ഇൻപുട്ടുകൾ ഉപയോഗിക്കുകയാണെങ്കിൽ, വെർച്വൽ കീബോർഡ് പ്രവർത്തനക്ഷമമാക്കുമ്പോൾ നിശ്ചിത ഘടകങ്ങളുടെ സ്ഥാനം അപ്ഡേറ്റ് ചെയ്യാത്ത ഒരു റെൻഡറിംഗ് ബഗ് iOS-നുണ്ട്. ഇതിനുള്ള ചില പരിഹാരങ്ങളിൽ നിങ്ങളുടെ ഘടകങ്ങളെ രൂപാന്തരപ്പെടുത്തുകയോ position: absoluteഅല്ലെങ്കിൽ പൊസിഷനിംഗ് സ്വമേധയാ ശരിയാക്കാൻ ശ്രമിക്കുന്നതിന് ഫോക്കസിൽ ഒരു ടൈമർ അഭ്യർത്ഥിക്കുകയോ ഉൾപ്പെടുന്നു. ഇത് ബൂട്ട്‌സ്‌ട്രാപ്പ് കൈകാര്യം ചെയ്യുന്നില്ല, അതിനാൽ നിങ്ങളുടെ ആപ്ലിക്കേഷന് ഏതാണ് മികച്ച പരിഹാരം എന്ന് തീരുമാനിക്കേണ്ടത് നിങ്ങളാണ്.

.dropdown-backdropz-ഇൻഡക്‌സിംഗിന്റെ സങ്കീർണ്ണത കാരണം nav-ലെ iOS-ൽ ഈ ഘടകം ഉപയോഗിക്കുന്നില്ല. അതിനാൽ, നാവ്ബാറുകളിലെ ഡ്രോപ്പ്ഡൗണുകൾ അടയ്ക്കുന്നതിന്, നിങ്ങൾ നേരിട്ട് ഡ്രോപ്പ്ഡൗൺ എലമെന്റിൽ ക്ലിക്ക് ചെയ്യണം (അല്ലെങ്കിൽ iOS-ൽ ഒരു ക്ലിക്ക് ഇവന്റ് ഫയർ ചെയ്യുന്ന മറ്റേതെങ്കിലും ഘടകം ).

ബ്രൗസർ സൂം ചെയ്യുന്നു

പേജ് സൂമിംഗ് അനിവാര്യമായും ചില ഘടകങ്ങളിൽ റെൻഡറിംഗ് ആർട്ടിഫാക്‌റ്റുകൾ ബൂട്ട്‌സ്‌ട്രാപ്പിലും മറ്റ് വെബിലും അവതരിപ്പിക്കുന്നു. പ്രശ്‌നത്തെ ആശ്രയിച്ച്, ഞങ്ങൾക്ക് അത് പരിഹരിക്കാൻ കഴിഞ്ഞേക്കും (ആദ്യം തിരയുക, തുടർന്ന് ആവശ്യമെങ്കിൽ ഒരു പ്രശ്നം തുറക്കുക). എന്നിരുന്നാലും, ഹാക്കി പരിഹാരങ്ങളല്ലാതെ അവയ്ക്ക് പലപ്പോഴും നേരിട്ടുള്ള പരിഹാരങ്ങളില്ലാത്തതിനാൽ ഞങ്ങൾ ഇവയെ അവഗണിക്കുന്നു.

സ്റ്റിക്കി `:hover`/ `:focus`മൊബൈലിൽ

മിക്ക ടച്ച്‌സ്‌ക്രീനുകളിലും യഥാർത്ഥ ഹോവറിംഗ് സാധ്യമല്ലെങ്കിലും, മിക്ക മൊബൈൽ ബ്രൗസറുകളും ഹോവറിംഗ് പിന്തുണയെ അനുകരിക്കുകയും :hover"സ്റ്റിക്കി" ആക്കുകയും ചെയ്യുന്നു. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, :hoverഒരു ഘടകം ടാപ്പുചെയ്‌തതിന് ശേഷം ശൈലികൾ പ്രയോഗിക്കാൻ തുടങ്ങുകയും ഉപയോക്താവ് മറ്റ് ചില ഘടകങ്ങൾ ടാപ്പുചെയ്‌തതിന് ശേഷം മാത്രം പ്രയോഗിക്കുന്നത് നിർത്തുകയും ചെയ്യുന്നു. ഇത് ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ :hoverസ്‌റ്റേറ്റുകൾ ഇത്തരം ബ്രൗസറുകളിൽ അനഭിലഷണീയമായി "സ്റ്റക്ക്" ആകാൻ ഇടയാക്കും. ചില മൊബൈൽ ബ്രൗസറുകളും :focusസമാനമായി സ്റ്റിക്കി ഉണ്ടാക്കുന്നു. അത്തരം ശൈലികൾ പൂർണ്ണമായും നീക്കം ചെയ്യുന്നതല്ലാതെ ഈ പ്രശ്നങ്ങൾക്ക് നിലവിൽ ലളിതമായ ഒരു പരിഹാരവുമില്ല.

പ്രിന്റിംഗ്

ചില ആധുനിക ബ്രൗസറുകളിൽ പോലും, പ്രിന്റിംഗ് വിചിത്രമായിരിക്കും.

പ്രത്യേകിച്ചും, Chrome v32 പോലെ, മാർജിൻ ക്രമീകരണങ്ങൾ പരിഗണിക്കാതെ, ഒരു വെബ്‌പേജ് പ്രിന്റ് ചെയ്യുമ്പോൾ മീഡിയ ചോദ്യങ്ങൾ പരിഹരിക്കുമ്പോൾ ഫിസിക്കൽ പേപ്പർ വലുപ്പത്തേക്കാൾ വളരെ ഇടുങ്ങിയ വ്യൂപോർട്ട് വീതി Chrome ഉപയോഗിക്കുന്നു. പ്രിന്റ് ചെയ്യുമ്പോൾ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ അധിക-ചെറിയ ഗ്രിഡ് അപ്രതീക്ഷിതമായി സജീവമാകുന്നതിന് ഇത് കാരണമാകും. ചില വിശദാംശങ്ങൾക്ക് ലക്കം #12078 , Chrome ബഗ് #273306 എന്നിവ കാണുക. നിർദ്ദേശിച്ച പരിഹാരങ്ങൾ:

അധിക-ചെറിയ ഗ്രിഡ് സ്വീകരിക്കുകയും നിങ്ങളുടെ പേജ് അതിന് കീഴിൽ സ്വീകാര്യമാണെന്ന് ഉറപ്പാക്കുകയും ചെയ്യുക.
കുറഞ്ഞ വേരിയബിളുകളുടെ മൂല്യങ്ങൾ ഇഷ്‌ടാനുസൃതമാക്കുക, @screen-*അതുവഴി നിങ്ങളുടെ പ്രിന്റർ പേപ്പർ അധിക-ചെറിയതിനേക്കാൾ വലുതായി കണക്കാക്കുന്നു.
പ്രിന്റ് മീഡിയയ്ക്ക് മാത്രമായി ഗ്രിഡ് സൈസ് ബ്രേക്ക്‌പോയിന്റുകൾ മാറ്റാൻ ഇഷ്‌ടാനുസൃത മീഡിയ അന്വേഷണങ്ങൾ ചേർക്കുക.

കൂടാതെ, Safari v8.0 പോലെ, പ്രിന്റ് ചെയ്യുമ്പോൾ, സഫാരിക്ക് അസാധാരണമാം വിധം ചെറിയ ഫോണ്ട് സൈസ് ഉപയോഗിക്കുന്നതിന് ഫിക്സഡ് വിഡ്ത്ത് .containers കാരണമാകും. കൂടുതൽ വിവരങ്ങൾക്ക് #14868 , WebKit bug #138192 എന്നിവ കാണുക . ഇതിനുള്ള ഒരു പ്രതിവിധി ഇനിപ്പറയുന്ന CSS ചേർക്കുന്നു:

@media print {
  .container {
    width: auto;
  }
}

ആൻഡ്രോയിഡ് സ്റ്റോക്ക് ബ്രൗസർ

ബോക്‌സിന് പുറത്ത്, Android 4.1 (കൂടാതെ ചില പുതിയ റിലീസുകൾ പോലും) ബ്രൗസർ ആപ്പിന്റെ ഡിഫോൾട്ട് വെബ് ബ്രൗസറായി തിരഞ്ഞെടുക്കുന്നു (Chrome-ന് വിപരീതമായി). നിർഭാഗ്യവശാൽ, ബ്രൗസർ ആപ്പിന് പൊതുവെ CSS-ൽ ധാരാളം ബഗുകളും പൊരുത്തക്കേടുകളും ഉണ്ട്.

മെനുകൾ തിരഞ്ഞെടുക്കുക

ഘടകങ്ങളിൽ , കൂടാതെ/അല്ലെങ്കിൽ പ്രയോഗിച്ചാൽ <select>, Android സ്റ്റോക്ക് ബ്രൗസർ സൈഡ് നിയന്ത്രണങ്ങൾ പ്രദർശിപ്പിക്കില്ല . ( വിശദാംശങ്ങൾക്ക് ഈ StackOverflow ചോദ്യം കാണുക.) കുറ്റകരമായ CSS നീക്കം ചെയ്യാനും Android സ്റ്റോക്ക് ബ്രൗസറിൽ ഒരു ശൈലിയില്ലാത്ത ഘടകമായി റെൻഡർ ചെയ്യാനും ചുവടെയുള്ള കോഡിന്റെ സ്‌നിപ്പെറ്റ് ഉപയോഗിക്കുക . ഉപയോക്തൃ ഏജന്റ് സ്നിഫിംഗ് Chrome, Safari, Mozilla ബ്രൗസറുകളുമായുള്ള ഇടപെടൽ ഒഴിവാക്കുന്നു.border-radiusborder<select>

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

ഒരു ഉദാഹരണം കാണണോ? ഈ JS ബിൻ ഡെമോ പരിശോധിക്കുക.

മൂല്യനിർണ്ണയക്കാർ

പഴയതും ബഗ്ഗിയുള്ളതുമായ ബ്രൗസറുകൾക്ക് സാധ്യമായ ഏറ്റവും മികച്ച അനുഭവം നൽകുന്നതിന്, ബ്രൗസറുകളിലെ ബഗുകൾ പരിഹരിക്കുന്നതിന് ചില ബ്രൗസർ പതിപ്പുകളിലേക്ക് പ്രത്യേക CSS ടാർഗെറ്റുചെയ്യുന്നതിന് ബൂട്ട്സ്ട്രാപ്പ് പല സ്ഥലങ്ങളിലും CSS ബ്രൗസർ ഹാക്കുകൾ ഉപയോഗിക്കുന്നു. ഈ ഹാക്കുകൾ മനസ്സിലാക്കാവുന്നതേയുള്ളൂ, അവ അസാധുവാണെന്ന് CSS മൂല്യനിർണ്ണയക്കാർ പരാതിപ്പെടാൻ ഇടയാക്കുന്നു. രണ്ട് സ്ഥലങ്ങളിൽ, ഇതുവരെ പൂർണ്ണമായി സ്റ്റാൻഡേർഡ് ചെയ്യാത്ത ബ്ലീഡിംഗ് എഡ്ജ് CSS ഫീച്ചറുകളും ഞങ്ങൾ ഉപയോഗിക്കുന്നു, എന്നാൽ ഇവ പുരോഗമനപരമായ മെച്ചപ്പെടുത്തലിനായി ഉപയോഗിക്കുന്നു.

ഞങ്ങളുടെ CSS-ന്റെ ഹാക്കി അല്ലാത്ത ഭാഗം പൂർണ്ണമായി സാധൂകരിക്കുകയും ഹാക്കി അല്ലാത്ത ഭാഗത്തിന്റെ ശരിയായ പ്രവർത്തനത്തിൽ ഹാക്കി ഭാഗങ്ങൾ ഇടപെടാതിരിക്കുകയും ചെയ്യുന്നതിനാൽ ഈ മൂല്യനിർണ്ണയ മുന്നറിയിപ്പുകൾ പ്രായോഗികമായി പ്രശ്നമല്ല, അതിനാൽ ഈ പ്രത്യേക മുന്നറിയിപ്പുകൾ ഞങ്ങൾ മനഃപൂർവ്വം അവഗണിക്കുന്നത് എന്തുകൊണ്ട്.

ഞങ്ങളുടെ HTML ഡോക്‌സിനും അതുപോലെ ചില നിസ്സാരവും അപ്രസക്തവുമായ HTML മൂല്യനിർണ്ണയ മുന്നറിയിപ്പുകൾ ഉണ്ട് .

ഞങ്ങൾ ഏതെങ്കിലും മൂന്നാം കക്ഷി പ്ലഗിന്നുകളെയോ ആഡ്-ഓണുകളെയോ ഔദ്യോഗികമായി പിന്തുണയ്‌ക്കുന്നില്ലെങ്കിലും, നിങ്ങളുടെ പ്രോജക്‌റ്റുകളിലെ പ്രശ്‌നങ്ങൾ ഒഴിവാക്കാൻ സഹായിക്കുന്നതിന് ഞങ്ങൾ ചില ഉപയോഗപ്രദമായ ഉപദേശങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു.

പെട്ടി വലിപ്പം

ഗൂഗിൾ മാപ്‌സ്, ഗൂഗിൾ കസ്റ്റം സെർച്ച് എഞ്ചിൻ എന്നിവയുൾപ്പെടെയുള്ള ചില മൂന്നാം കക്ഷി സോഫ്‌റ്റ്‌വെയറുകൾ ബൂട്ട്‌സ്‌ട്രാപ്പുമായി വൈരുദ്ധ്യമുള്ളതിനാൽ * { box-sizing: border-box; }, paddingഒരു ഘടകത്തിന്റെ അന്തിമ കണക്കുകൂട്ടിയ വീതിയെ ബാധിക്കില്ല. CSS ട്രിക്കുകളിൽ ബോക്‌സ് മോഡലിനെക്കുറിച്ചും വലുപ്പത്തെക്കുറിച്ചും കൂടുതലറിയുക .

സന്ദർഭത്തെ ആശ്രയിച്ച്, നിങ്ങൾക്ക് ആവശ്യാനുസരണം അസാധുവാക്കാം (ഓപ്ഷൻ 1) അല്ലെങ്കിൽ മുഴുവൻ പ്രദേശങ്ങൾക്കുമായി ബോക്സ് വലുപ്പം പുനഃസജ്ജമാക്കാം (ഓപ്ഷൻ 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

ബൂട്ട്‌സ്‌ട്രാപ്പ് പൊതുവായ വെബ് മാനദണ്ഡങ്ങൾ പിന്തുടരുന്നു, കൂടാതെ—ഏറ്റവും കുറഞ്ഞ പ്രയത്നത്തോടെ— എടി ഉപയോഗിക്കുന്നവർക്ക് ആക്‌സസ് ചെയ്യാൻ കഴിയുന്ന സൈറ്റുകൾ സൃഷ്‌ടിക്കാൻ ഇത് ഉപയോഗിക്കാം .

നിങ്ങളുടെ നാവിഗേഷനിൽ നിരവധി ലിങ്കുകൾ അടങ്ങിയിരിക്കുകയും 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; }.

കീബോർഡ് ഉപയോക്താക്കൾക്ക് ഉപയോഗശൂന്യമാക്കുന്ന, നിങ്ങളുടെ സൈറ്റ് ഉപയോഗിച്ചേക്കാവുന്ന മറ്റേതെങ്കിലും ഇൻ-പേജ് ലിങ്കുകളെയും ഈ ബഗ് ബാധിക്കുമെന്നത് ശ്രദ്ധിക്കുക. ലിങ്ക് ടാർഗെറ്റുകളായി പ്രവർത്തിക്കുന്ന മറ്റെല്ലാ പേരുള്ള ആങ്കറുകൾ / ഫ്രാഗ്‌മെന്റ് ഐഡന്റിഫയറുകളിലും സമാനമായ സ്റ്റോപ്പ്-ഗ്യാപ്പ് ഫിക്സ് ചേർക്കുന്നത് നിങ്ങൾക്ക് പരിഗണിക്കാവുന്നതാണ്.

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

നെസ്റ്റഡ് തലക്കെട്ടുകൾ

തലക്കെട്ടുകൾ കൂടുമ്പോൾ ( <h1>- <h6>), നിങ്ങളുടെ പ്രാഥമിക പ്രമാണ തലക്കെട്ട് ഒരു ആയിരിക്കണം <h1>. തുടർന്നുള്ള തലക്കെട്ടുകൾ യുക്തിസഹമായി ഉപയോഗിക്കണം <h2>- <h6>സ്ക്രീൻ റീഡറുകൾക്ക് നിങ്ങളുടെ പേജുകൾക്കായി ഒരു ഉള്ളടക്ക പട്ടിക നിർമ്മിക്കാൻ കഴിയും.

HTML CodeSniffer , Penn State's AccessAbility എന്നിവയിൽ കൂടുതലറിയുക .

വർണ്ണ വൈരുദ്ധ്യം

നിലവിൽ, ബൂട്ട്‌സ്‌ട്രാപ്പിൽ ലഭ്യമായ ചില ഡിഫോൾട്ട് വർണ്ണ കോമ്പിനേഷനുകൾ (വിവിധ ശൈലിയിലുള്ള ബട്ടൺ ക്ലാസുകൾ, അടിസ്ഥാന കോഡ് ബ്ലോക്കുകൾക്ക് ഉപയോഗിക്കുന്ന ചില കോഡ് ഹൈലൈറ്റ് ചെയ്യുന്ന നിറങ്ങൾ , .bg-primary സാന്ദർഭിക പശ്ചാത്തല സഹായ ക്ലാസ്, വെളുത്ത പശ്ചാത്തലത്തിൽ ഉപയോഗിക്കുമ്പോൾ സ്ഥിരസ്ഥിതി ലിങ്ക് നിറം എന്നിവ) കുറഞ്ഞ കോൺട്രാസ്റ്റ് റേഷ്യോ ഉണ്ടായിരിക്കുക ( ശുപാർശ ചെയ്ത അനുപാതമായ 4.5:1 ന് താഴെ ). ഇത് കാഴ്ചക്കുറവുള്ള അല്ലെങ്കിൽ വർണ്ണാന്ധതയുള്ള ഉപയോക്താക്കൾക്ക് പ്രശ്നങ്ങൾ ഉണ്ടാക്കാം. ഈ ഡിഫോൾട്ട് നിറങ്ങൾ അവയുടെ ദൃശ്യതീവ്രതയും വ്യക്തതയും വർദ്ധിപ്പിക്കുന്നതിന് പരിഷ്‌ക്കരിക്കേണ്ടി വന്നേക്കാം.

അധിക വിഭവങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് എം‌ഐ‌ടി ലൈസൻസിന് കീഴിലാണ് പുറത്തിറങ്ങുന്നത്, പകർപ്പവകാശം 2019 Twitter ആണ്. ചെറിയ കഷ്ണങ്ങളാക്കി തിളപ്പിച്ച് താഴെ പറയുന്ന വ്യവസ്ഥകളോടെ വിവരിക്കാം.

ഇത് നിങ്ങളോട് ആവശ്യപ്പെടുന്നു:

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS, JavaScript ഫയലുകൾ നിങ്ങളുടെ പ്രവൃത്തികളിൽ ഉപയോഗിക്കുമ്പോൾ അവയിൽ ഉൾപ്പെടുത്തിയിരിക്കുന്ന ലൈസൻസും പകർപ്പവകാശ അറിയിപ്പും സൂക്ഷിക്കുക

ഇത് നിങ്ങളെ അനുവദിക്കുന്നു:

വ്യക്തിഗതമോ സ്വകാര്യമോ കമ്പനിയുടെ ആന്തരികമോ വാണിജ്യപരമോ ആയ ആവശ്യങ്ങൾക്കായി ബൂട്ട്‌സ്‌ട്രാപ്പ് പൂർണ്ണമായോ ഭാഗികമായോ സൗജന്യമായി ഡൗൺലോഡ് ചെയ്‌ത് ഉപയോഗിക്കുക
നിങ്ങൾ സൃഷ്ടിക്കുന്ന പാക്കേജുകളിലോ വിതരണങ്ങളിലോ ബൂട്ട്സ്ട്രാപ്പ് ഉപയോഗ��ക്കുക
സോഴ്സ് കോഡ് പരിഷ്കരിക്കുക
ലൈസൻസിൽ ഉൾപ്പെടുത്താത്ത മൂന്നാം കക്ഷികൾക്ക് ബൂട്ട്‌സ്‌ട്രാപ്പ് പരിഷ്‌ക്കരിക്കുന്നതിനും വിതരണം ചെയ്യുന്നതിനും ഒരു സബ്‌ലൈസൻസ് അനുവദിക്കുക

ഇത് നിങ്ങളെ വിലക്കുന്നു:

ബൂട്ട്‌സ്‌ട്രാപ്പ് വാറന്റി ഇല്ലാതെ നൽകുന്നതിനാൽ നാശനഷ്ടങ്ങൾക്ക് രചയിതാക്കളെയും ലൈസൻസ് ഉടമകളെയും ബാധ്യസ്ഥരാക്കുക
ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ സ്രഷ്‌ടാക്കളെയോ പകർപ്പവകാശ ഉടമകളെയോ ബാധ്യസ്ഥരാക്കുക
ശരിയായ ആട്രിബ്യൂഷൻ ഇല്ലാതെ ബൂട്ട്സ്ട്രാപ്പിന്റെ ഏതെങ്കിലും ഭാഗം പുനർവിതരണം ചെയ്യുക
Twitter നിങ്ങളുടെ വിതരണത്തെ അംഗീകരിക്കുന്നതായി പ്രസ്താവിക്കുന്നതോ സൂചിപ്പിക്കുന്നതോ ആയ ഏതെങ്കിലും വിധത്തിൽ Twitter-ന്റെ ഉടമസ്ഥതയിലുള്ള ഏതെങ്കിലും മാർക്കുകൾ ഉപയോഗിക്കുക
നിങ്ങൾ ട്വിറ്റർ സോഫ്‌റ്റ്‌വെയർ സൃഷ്‌ടിച്ചതായി പ്രസ്‌താവിക്കുന്നതോ സൂചിപ്പിക്കുന്നതോ ആയ ഏതെങ്കിലും വിധത്തിൽ Twitter-ന്റെ ഉടമസ്ഥതയിലുള്ള ഏതെങ്കിലും മാർക്കുകൾ ഉപയോഗിക്കുക

ഇത് നിങ്ങളോട് ആവശ്യപ്പെടുന്നില്ല:

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഉറവിടം അല്ലെങ്കിൽ നിങ്ങൾ അതിൽ വരുത്തിയിട്ടുള്ള ഏതെങ്കിലും പരിഷ്‌ക്കരണങ്ങളുടെ ഉറവിടം ഉൾപ്പെടുത്തുക, അത് ഉൾപ്പെടുന്ന ഏതെങ്കിലും പുനർവിതരണത്തിൽ നിങ്ങൾ കൂട്ടിച്ചേർക്കുക
ബൂട്ട്‌സ്‌ട്രാപ്പിൽ നിങ്ങൾ വരുത്തുന്ന മാറ്റങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പ് പ്രോജക്റ്റിലേക്ക് തിരികെ സമർപ്പിക്കുക (അത്തരം ഫീഡ്‌ബാക്ക് പ്രോത്സാഹിപ്പിക്കപ്പെടുമെങ്കിലും)

കൂടുതൽ വിവരങ്ങൾക്ക് ബൂട്ട്‌സ്‌ട്രാപ്പ് ലൈസൻസ് പ്രോജക്‌റ്റ് റിപ്പോസിറ്ററിയിലാണ് .

കമ്മ്യൂണിറ്റി അംഗങ്ങൾ ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഡോക്യുമെന്റേഷൻ വിവിധ ഭാഷകളിലേക്ക് വിവർത്തനം ചെയ്തിട്ടുണ്ട്. അവയൊന്നും ഔദ്യോഗികമായി പിന്തുണയ്ക്കുന്നില്ല, അവ എപ്പോഴും അപ് ടു ഡേറ്റ് ആയിരിക്കണമെന്നില്ല.

വിവർത്തനങ്ങൾ സംഘടിപ്പിക്കുന്നതിനോ ഹോസ്റ്റുചെയ്യുന്നതിനോ ഞങ്ങൾ സഹായിക്കില്ല, ഞങ്ങൾ അവയിലേക്ക് ലിങ്ക് ചെയ്താൽ മതി.

പുതിയതോ മികച്ചതോ ആയ വിവർത്തനം പൂർത്തിയാക്കിയോ? ഞങ്ങളുടെ ലിസ്റ്റിലേക്ക് ചേർക്കാൻ ഒരു പുൾ അഭ്യർത്ഥന തുറക്കുക.

ആമുഖം

ഡൗൺലോഡ്