බාගත

Bootstrap (දැනට v3.4.1) ඉක්මනින් ආරම්භ කිරීමට පහසු ක්‍රම කිහිපයක් ඇත, ඒ සෑම එකක්ම වෙනස් නිපුණතා මට්ටම් සහ භාවිත අවස්ථා සඳහා ආයාචනා කරයි. ඔබේ විශේෂ අවශ්‍යතා මොනවාදැයි බැලීමට කියවන්න.

jsDelivr

jsDelivr හි සිටින අය Bootstrap හි 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 හි අඩු, CSS, JavaScript සහ අකුරු ස්ථාපනය කර කළමනාකරණය කළ හැකිය :

bower install bootstrap

npm සමඟ ස්ථාපනය කරන්න

ඔබට npm භාවිතයෙන් Bootstrap ස්ථාපනය කළ හැකිය :

npm install bootstrap@3

require('bootstrap')Bootstrap හි සියලුම jQuery ප්ලගීන jQuery වස්තුවට පූරණය කරයි. මොඩියුලයම bootstrapකිසිවක් අපනයනය නොකරයි. /js/*.jsපැකේජයේ ඉහළම මට්ටමේ නාමාවලිය යටතේ ඇති ගොනු පූරණය කිරීමෙන් ඔබට Bootstrap හි jQuery ප්ලගීන තනි තනිව පූරණය කළ හැක.

Bootstrap's හි package.jsonපහත යතුරු යටතේ අමතර පාරදත්ත කිහිපයක් අඩංගු වේ:

• less- Bootstrap හි ප්‍රධාන අඩු මූලාශ්‍ර ගොනුව වෙත මාර්ගය
• style- පෙරනිමි සැකසුම් භාවිතයෙන් පූර්ව සම්පාදනය කර ඇති Bootstrap හි කුඩා නොවන CSS වෙත මාර්ගය (අභිරුචිකරණයක් නොමැත)

Composer සමඟ ස්ථාපනය කරන්න

ඔබට Composer භාවිතයෙන් Bootstrap හි අඩු, CSS, JavaScript, සහ අකුරු ස්ථාපනය කර කළමනාකරණය කළ හැක :

composer require twbs/bootstrap

අඩු/සාස් සඳහා ස්වයං උපසර්ගය අවශ්‍යයි

CSS විකුණුම් උපසර්ග සමඟ කටයුතු කිරීමට Bootstrap Autoprefixer භාවිතා කරයි . ඔබ Bootstrap සම්පාදනය කරන්නේ එහි Less/Sass මූලාශ්‍රයෙන් නම් සහ අපගේ Gruntfile භාවිතා නොකරන්නේ නම්, ඔබ විසින්ම ඔබේ ගොඩනැගීමේ ක්‍රියාවලියට Autoprefixer අනුකලනය කිරීමට අවශ්‍ය වනු ඇත. ඔබ precompiled Bootstrap භාවිතා කරන්නේ නම් හෝ අපගේ Gruntfile භාවිතා කරන්නේ නම්, Autoprefixer දැනටමත් අපගේ Gruntfile වෙත ඒකාබද්ධ කර ඇති නිසා ඔබ මේ ගැන කරදර විය යුතු නැත.

ඇතුළත් දේ

Bootstrap ආකාර දෙකකින් බාගත කළ හැකි අතර, ඔබට පහත නාමාවලි සහ ගොනු සොයා ගත හැකි අතර, පොදු සම්පත් තාර්කිකව සමූහගත කිරීම සහ සම්පාදනය කරන ලද සහ කුඩා වෙනස්කම් ලබා දීම.

Precompiled Bootstrap

බාගත කළ පසු, (සම්පාදිත) Bootstrap හි ව්‍යුහය බැලීමට සම්පීඩිත ෆෝල්ඩරය unzip කරන්න. ඔබට මෙවැනි දෙයක් පෙනෙනු ඇත:

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

මෙය Bootstrap හි මූලිකම ආකාරයයි: ඕනෑම වෙබ් ව්‍යාපෘතියක පාහේ ඉක්මන් පතන භාවිතය සඳහා precompiled ගොනු. අපි සම්පාදනය කරන ලද CSS සහ JS ( bootstrap.*), මෙන්ම සම්පාදනය කර කුඩා කළ CSS සහ JS ( ) සපයන්නෙමු bootstrap.min.*. CSS මූලාශ්‍ර සිතියම් ( bootstrap.*.map) ඇතැම් බ්‍රවුසර සංවර්ධක මෙවලම් සමඟ භාවිතය සඳහා පවතී. විකල්ප Bootstrap තේමාව මෙන්ම Glyphicons වෙතින් අකුරු ඇතුළත් වේ.

Bootstrap මූල කේතය

Bootstrap ප්‍රභව කේත බාගැනීමෙහි පූර්ව සම්පාදනය කරන ලද CSS, JavaScript, සහ අකුරු වත්කම්, මූලාශ්‍ර අඩු, ජාවාස්ක්‍රිප්ට් සහ ලේඛන ඇතුළත් වේ. වඩාත් නිශ්චිතව, එයට පහත සහ තවත් දේ ඇතුළත් වේ:

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

, less/, js/සහ fonts/අපගේ CSS, JS, සහ අයිකන අකුරු (පිළිවෙලින්) සඳහා ප්‍රභව කේතය වේ. ෆෝල්ඩරයේ ඉහත dist/පූර්ව සම්පාදනය කළ බාගැනීම් කොටසේ ලැයිස්තුගත කර ඇති සියල්ල ඇතුළත් වේ. docs/ෆෝල්ඩරයේ අපගේ ලියකියවිලි සහ examples/Bootstrap භාවිතය සඳහා වන මූල කේතය ඇතුළත් වේ. ඉන් ඔබ්බට, වෙනත් ඕනෑම ඇතුළත් ගොනුවක් පැකේජ, බලපත්‍ර තොරතුරු සහ සංවර්ධනය සඳහා සහාය සපයයි.

CSS සහ JavaScript සම්පාදනය කිරීම

Bootstrap එහි ගොඩනැගීමේ පද්ධතිය සඳහා Grunt භාවිතා කරයි , රාමුව සමඟ වැඩ කිරීම සඳහා පහසු ක්රම සමඟ. අපි අපේ කේතය සම්පාදනය කරන්නේ, පරීක්ෂණ ධාවනය කරන ආකාරය සහ තවත් දේ.

Grunt ස්ථාපනය කිරීම

Grunt ස්ථාපනය කිරීමට, ඔබ මුලින්ම node.js බාගත කර ස්ථාපනය කළ යුතුය (එයට npm ඇතුළත් වේ). npm යනු node packed modules සඳහා වන අතර එය node.js හරහා සංවර්ධන පරායත්තතා කළමනාකරණය කිරීමේ ක්‍රමයකි.

1. grunt-cliසමඟ ගෝලීයව ස්ථාපනය කරන්න npm install -g grunt-cli.
2. /bootstrap/මූල නාමාවලිය වෙත සංචාලනය කරන්න , ඉන්පසු ධාවනය කරන්න npm install. npm ගොනුව දෙස බලා package.jsonඑහි ලැයිස්තුගත කර ඇති අවශ්‍ය දේශීය පරායත්තතා ස්වයංක්‍රීයව ස්ථාපනය කරයි.

සම්පුර්ණ වූ විට, ඔබට විධාන රේඛාවෙන් සපයන විවිධ Grunt විධානයන් ක්‍රියාත්මක කිරීමට හැකි වනු ඇත.

පවතින Grunt විධාන

grunt dist(CSS සහ JavaScript සම්පාදනය කරන්න)

/dist/සම්පාදනය කරන ලද සහ කුඩා කළ CSS සහ JavaScript ගොනු සමඟ නාමාවලිය නැවත උත්පාදනය කරයි. Bootstrap පරිශීලකයෙකු ලෙස, මෙය සාමාන්‍යයෙන් ඔබට අවශ්‍ය විධානයයි.

grunt watch(නරඹන්න)

අඩු මූලාශ්‍ර ගොනු නරඹන අතර ඔබ වෙනසක් සුරකින විට ඒවා ස්වයංක්‍රීයව CSS වෙත නැවත සම්පාදනය කරයි.

grunt test(පරීක්ෂණ ධාවනය කරන්න)

JSHint ධාවනය කර සැබෑ බ්‍රවුසරවල QUnit පරීක්ෂණ ධාවනය කරන්නේ කර්මයට ස්තුති වන්නටය .

grunt docs(ලේඛන වත්කම් ගොඩනඟා පරීක්ෂා කරන්න)

හරහා දේශීයව ලේඛන ධාවනය කරන විට භාවිතා කරන CSS, JavaScript, සහ අනෙකුත් වත්කම් ගොඩනඟා පරීක්ෂා කරයි bundle exec jekyll serve.

grunt(සියල්ල සම්පූර්ණයෙන්ම ගොඩනඟා පරීක්ෂණ ධාවනය කරන්න)

CSS සහ JavaScript සම්පාදනය කර කුඩා කරයි, ලේඛන වෙබ් අඩවිය ගොඩනඟයි, ලේඛනවලට එරෙහිව HTML5 වලංගුකාරකය ධාවනය කරයි, අභිරුචිකරණ වත්කම් නැවත උත්පාදනය කරයි, සහ තවත් දේ. ජෙකිල් අවශ්‍යයි . සාමාන්‍යයෙන් අවශ්‍ය වන්නේ ඔබ Bootstrap මතම හැක් කරන්නේ නම් පමණි.

දෝෂගවේෂණය

ඔබට පරායත්තතා ස්ථාපනය කිරීමේදී හෝ Grunt විධානයන් ක්‍රියාත්මක කිරීමේදී ගැටළු ඇති වුවහොත්, පළමුව /node_modules/npm මගින් ජනනය කරන ලද නාමාවලිය මකා දමන්න. ඉන්පසු, නැවත ධාවනය කරන්න npm install.

මූලික සැකිල්ල

මෙම මූලික HTML අච්චුව සමඟ ආරම්භ කරන්න, නැතහොත් මෙම උදාහරණ වෙනස් කරන්න . ඔබ අපගේ සැකිලි සහ උදාහරණ ඔබේ අවශ්‍යතාවයට ගැළපෙන පරිදි සකස් කර ගනු ඇතැයි අපි බලාපොරොත්තු වෙමු.

අවම Bootstrap ලේඛනයක් සමඟ වැඩ කිරීම ආරම්භ කිරීමට පහත 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>

උදාහරණ

Bootstrap හි බොහෝ සංරචක සමඟ ඉහත මූලික අච්චුව මත ගොඩනඟන්න. ඔබගේ පුද්ගලික ව්‍යාපෘතියේ අවශ්‍යතා වලට ගැලපෙන පරිදි Bootstrap අභිරුචිකරණය කිරීමට සහ අනුවර්තනය කිරීමට අපි ඔබව දිරිමත් කරමු.

Bootstrap ගබඩාව බාගත කිරීමෙන් පහත සෑම උදාහරණයකටම මූලාශ්‍ර කේතය ලබා ගන්න . docs/examples/උදාහරණ නාමාවලියෙන් සොයාගත හැකිය .

රාමුව භාවිතා කිරීම

ආරම්භක අච්චුව

මූලික කරුණු හැර වෙන කිසිවක් නැත: කන්ටේනරයක් සමඟ සම්පාදනය කරන ලද CSS සහ JavaScript.

Bootstrap තේමාව

දෘශ්‍යමය වශයෙන් වැඩිදියුණු කළ අත්දැකීමක් සඳහා විකල්ප Bootstrap තේමාව පූරණය කරන්න.

ජාලක

තට්ටු හතරම, කැදැල්ල සහ තවත් බොහෝ දේ සහිත ජාලක පිරිසැලසුම් සඳහා බහුවිධ උදාහරණ.

ජම්බෝට්‍රොන්

නව තීරුවක් සහ මූලික ජාල තීරු කිහිපයක් සමඟ ජම්බෝට්‍රෝනය වටා ගොඩනඟන්න.

පටු ජම්බෝට්‍රොන්

පෙරනිමි බහාලුම් සහ ජම්බෝට්‍රෝනය පටු කිරීමෙන් වඩාත් අභිරුචි පිටුවක් සාදන්න.

Navbars ක්රියාත්මක වේ

නවබාර්

සමහර අමතර අන්තර්ගතයන් සමඟ නව තීරුව ඇතුළත් සුපිරි මූලික අච්චුව.

ස්ථිතික ඉහළ නව තීරුව

සමහර අමතර අන්තර්ගතයන් සමඟ ස්ථිතික ඉහළ නව තීරුවක් සහිත සුපිරි මූලික අච්චුව.

ස්ථාවර navbar

සමහර අමතර අන්තර්ගතයන් සමඟ ස්ථාවර ඉහළ නව තීරුවක් සහිත සුපිරි මූලික අච්චුව.

අභිරුචි සංරචක

ආවරණය කරන්න

සරල සහ ලස්සන මුල් පිටු තැනීම සඳහා තනි පිටු අච්චුවක්.

කැරොසල්

navbar සහ carousel අභිරුචිකරණය කරන්න, පසුව නව සංරචක කිහිපයක් එක් කරන්න.

බ්ලොග්

අභිරුචි සංචාලනය, ශීර්ෂකය සහ වර්ගය සහිත සරල තීරු දෙකක බ්ලොග් පිරිසැලසුම.

උපකරණ පුවරුව

ස්ථාවර පැති තීරුව සහ නව තීරුව සහිත පරිපාලක උපකරණ පුවරුව සඳහා මූලික ව්‍යුහය.

පුරනය වීමේ පිටුව

පෝරමයේ සරල ලකුණක් සඳහා අභිරුචි පෝරම පිරිසැලසුම සහ නිර්මාණය.

යුක්ති සහගත නාවික

යුක්ති සහගත සබැඳි සමඟ අභිරුචි නව තීරුවක් සාදන්න. දැනුම්දීම! වැඩිය Safari හිතකාමී නැහැ.

ඇලෙන සුළු පාදකය

අන්තර්ගතය ඊට වඩා කෙටි වූ විට දර්ශන තොටේ පහළට පාදයක් අමුණන්න.

navbar සමඟ ඇලෙන සුළු පාදකය

දර්ශන තොටේ පහළට පාදකයක් අමුණන්න, ඉහළින් ස්ථාවර නව තීරුවක් සමඟ.

අත්හදා බැලීම්

ප්‍රතිචාර නොදක්වන Bootstrap

අපගේ ලේඛන අනුව Bootstrap හි ප්‍රතිචාරය පහසුවෙන් අක්‍රීය කරන්න .

කැන්වසයෙන් පිටත

Bootstrap සමඟ භාවිතා කිරීම සඳහා ටොගල් කළ හැකි off-canvas navigation මෙනුවක් සාදන්න.

මෙවලම්

බූට්ලින්ට්

Bootlint යනු නිල Bootstrap HTML ලින්ටර් මෙවලමයි. එය තරමක් "වැනිලා" ආකාරයෙන් Bootstrap භාවිතා කරන වෙබ් පිටු වල පොදු HTML වැරදි කිහිපයක් සඳහා ස්වයංක්‍රීයව පරීක්ෂා කරයි. වැනිලා බූට්ස්ට්‍රැප් හි සංරචක/විජට් සඳහා ඒවායේ DOM කොටස් ඇතැම් ව්‍යුහයන්ට අනුකූල වීම අවශ්‍ය වේ. Bootlint Bootstrap සංරචකවල නිදසුන් නිවැරදිව ව්‍යුහගත HTML තිබේදැයි පරීක්ෂා කරයි. ඔබේ Bootstrap වෙබ් සංවර්ධන මෙවලම් දාමයට Bootlint එකතු කිරීම සලකා බලන්න එවිට පොදු වැරදි කිසිවක් ඔබේ ව්‍යාපෘතියේ සංවර්ධනය මන්දගාමී නොවේ.

ප්රජාව

Bootstrap සංවර්ධනය පිළිබඳව යාවත්කාලීනව සිටින්න සහ මෙම ප්‍රයෝජනවත් සම්පත් සමඟ ප්‍රජාව වෙත ළඟා වන්න.

• නිල Bootstrap බ්ලොග් කියවන්න සහ දායක වන්න .
• ##bootstrap නාලිකාවේirc.freenode.net , සේවාදායකයේ IRC භාවිතයෙන් සෙසු Bootstrapers සමඟ කතාබස් කරන්න .
• Bootstrap භාවිතා කිරීමට උදවු සඳහා, ටැගය භාවිතයෙන් StackOverflowtwitter-bootstrap-3 මත විමසන්න .
• සංවර්ධකයින් npm හෝ ඒ හා සමාන බෙදාහැරීමේ යාන්ත්‍රණයන් හරහා උපරිම සොයාගැනීම් සඳහා bootstrapබෙදා හැරීමේදී Bootstrap හි ක්‍රියාකාරීත්වය වෙනස් කරන හෝ එකතු කරන පැකේජවල මූල පදය භාවිතා කළ යුතුය .
• Bootstrap Expo හිදී Bootstrap සමඟින් ගොඩනඟන පුද්ගලයින්ගේ ආශ්වාදජනක උදාහරණ සොයන්න .

ඔබට නවතම ඕපාදූප සහ නියම සංගීත වීඩියෝ සඳහා Twitter හි @getbootstrap අනුගමනය කළ හැකිය.

ප්‍රතිචාර දැක්වීම අක්‍රීය කිරීම

Bootstrap ඔබගේ පිටු විවිධ තිර ප්‍රමාණ සඳහා ස්වයංක්‍රීයව අනුවර්තනය කරයි. ඔබගේ පිටුව මෙම ප්‍රතිචාර නොදක්වන උදාහරණය මෙන් ක්‍රියා කිරීමට මෙම විශේෂාංගය අබල කරන්නේ කෙසේද යන්න මෙන්න .

පිටු ප්‍රතිචාර දැක්වීම අක්‍රිය කිරීමට පියවර

1. CSS ලේඛනවල<meta> සඳහන් වීව්පෝට් එක අතහරින්න
2. තනි පළලක් සහිත එක් එක් ග්‍රිඩ් ටයර් සඳහා widthවන on ප්‍රතික්‍ෂේප කරන්න , උදාහරණයක් ලෙස මෙය පෙරනිමි Bootstrap CSS ට පසුව එන බවට සහතික වන්න. ඔබට විකල්ප වශයෙන් මාධ්‍ය විමසුම් හෝ සමහර තේරීම්-ෆු සමඟ වළක්වා ගත හැකිය..containerwidth: 970px !important;!important
3. navbars භාවිතා කරන්නේ නම්, සියලු navbar කඩා වැටෙන සහ පුළුල් වන හැසිරීම් ඉවත් කරන්න.
4. ජාලක පිරිසැලසුම් සඳහා .col-xs-*, මධ්‍යම/විශාල ඒවාට අමතරව හෝ ඒ වෙනුවට පන්ති භාවිතා කරන්න. කරදර නොවන්න, අමතර කුඩා උපාංග ජාලකය සියලු විභේදනවලට පරිමාණය කරයි.

ඔබට තවමත් IE8 සඳහා Respond.js අවශ්‍ය වනු ඇත (අපගේ මාධ්‍ය විමසුම් තවමත් පවතින බැවින් සහ සැකසීමට අවශ්‍ය බැවින්). මෙය Bootstrap හි "ජංගම වෙබ් අඩවිය" අක්‍රීය කරයි.

ප්‍රතිචාරාත්මක බව සහිත බූට්ස්ට්‍රැප් අච්චුව අබල කර ඇත

අපි මෙම පියවර උදාහරණයකට යොදා ගත්තෙමු. ක්‍රියාත්මක කර ඇති විශේෂිත වෙනස්කම් බැලීමට එහි මූල කේතය කියවන්න.

ප්‍රතිචාර නොදක්වන උදාහරණය බලන්න

බ්‍රව්සරය සහ උපාංග සහාය

Bootstrap ගොඩනගා ඇත්තේ නවතම ඩෙස්ක්ටොප් සහ ජංගම බ්‍රවුසරවල හොඳින්ම ක්‍රියා කිරීමටයි, එනම් පැරණි බ්‍රව්සර් සම්පූර්ණයෙන්ම ක්‍රියාකාරී වුවද, ඇතැම් සංරචකවල විදැහුම්කරණයන් වෙනස් ආකාරයෙන් පෙන්විය හැක.

සහාය දක්වන බ්‍රව්සර්

විශේෂයෙන්, අපි පහත බ්‍රව්සර් සහ වේදිකා වල නවතම අනුවාද සඳහා සහය දෙමු.

WebKit, Blink, හෝ Gecko හි නවතම අනුවාදය භාවිතා කරන විකල්ප බ්‍රවුසර සෘජුව හෝ වේදිකාවේ web view API හරහා, පැහැදිලිවම සහය නොදක්වයි. කෙසේ වෙතත්, Bootstrap (බොහෝ අවස්ථාවලදී) මෙම බ්‍රවුසරවලද නිවැරදිව ප්‍රදර්ශනය කර ක්‍රියා කළ යුතුය. වඩාත් නිශ්චිත ආධාරක තොරතුරු පහත දක්වා ඇත.

ජංගම උපාංග

සාමාන්‍යයෙන් කිවහොත්, Bootstrap එක් එක් ප්‍රධාන වේදිකාවේ පෙරනිමි බ්‍රව්සර්වල නවතම අනුවාද සඳහා සහය දක්වයි. ප්‍රොක්සි බ්‍රව්සර් (ඔපෙරා මිනි, ඔපෙරා මොබයිල් හි ටර්බෝ මාදිලිය, යූසී බ්‍රව්සර් මිනි, ඇමේසන් සිල්ක් වැනි) සහය නොදක්වන බව සලකන්න.

ඩෙස්ක්ටොප් බ්‍රව්සර්

ඒ හා සමානව, බොහෝ ඩෙස්ක්ටොප් බ්‍රව්සර්වල නවතම අනුවාද සඳහා සහය දක්වයි.

Windows හි, අපි Internet Explorer 8-11 සඳහා සහය දක්වයි .

Firefox සඳහා, නවතම සාමාන්‍ය ස්ථායී නිකුතුවට අමතරව, අපි Firefox හි නවතම Extended Support Release (ESR) අනුවාදයට ද සහාය දෙමු.

නිල නොවන ලෙස, Bootstrap ලිනක්ස් සඳහා Chromium සහ Chrome, Linux සඳහා Firefox, සහ Internet Explorer 7, මෙන්ම Microsoft Edge වැනි ඒවා නිල වශයෙන් සහය නොදක්වන නමුත්, ඒවා ප්‍රමාණවත් ලෙස දැකීමට සහ හැසිරිය යුතුය.

Bootstrap සමඟ පොරබදන්නට ඇති සමහර බ්‍රව්සර් දෝෂ ලැයිස්තුවක් සඳහා, අපගේ බ්‍රව්සර් දෝෂ වල බිත්තිය බලන්න .

Internet Explorer 8 සහ 9

Internet Explorer 8 සහ 9 ද සහය දක්වයි, කෙසේ වෙතත්, සමහර CSS3 ගුණාංග සහ HTML5 මූලද්‍රව්‍ය මෙම බ්‍රවුසර මගින් සම්පුර්ණයෙන්ම සහාය නොදක්වන බව කරුණාවෙන් සලකන්න. මීට අමතරව, Internet Explorer 8 හට මාධ්‍ය විමසුම් සහාය සක්‍රීය කිරීමට Respond.js භාවිතා කිරීම අවශ්‍ය වේ.

CSS3 සහ HTML5 විශේෂාංග වල බ්‍රවුසර සහාය පිළිබඳ විස්තර සඳහා මම භාවිතා කළ හැකිද... වෙත පිවිසෙන්න .

Internet Explorer 8 සහ Respond.js

Internet Explorer 8 සඳහා ඔබේ සංවර්ධන සහ නිෂ්පාදන පරිසරයන් තුළ Respond.js භාවිතා කරන විට පහත අනතුරු ඇඟවීම් වලින් පරිස්සම් වන්න.

Respond.js සහ හරස් වසම් CSS

වෙනත් (උප) වසමක (උදාහරණයක් ලෙස, CDN එකක) සත්කාරක CSS සමඟ Respond.js භාවිතා කිරීමට අමතර සැකසුම අවශ්‍ය වේ. විස්තර සඳහා Respond.js docs බලන්න.

Respond.js සහfile://

බ්‍රවුසර ආරක්ෂණ නීති හේතුවෙන්, ප්‍රොටෝකෝලය හරහා බලන පිටු සමඟ Respond.js ක්‍රියා නොකරයි file://(දේශීය HTML ගොනුවක් විවෘත කිරීමේදී වැනි). IE8 හි ප්‍රතිචාරාත්මක විශේෂාංග පරීක්ෂා කිරීමට, HTTP(S) හරහා ඔබේ පිටු බලන්න. Respond.js docs බලන්න බලන්න.

Respond.js සහ@import

හරහා යොමු කර ඇති CSS සමඟ Respond.js ක්‍රියා නොකරයි @import. විශේෂයෙන්, සමහර Drupal වින්‍යාසයන් භාවිතා කිරීමට දන්නා කරුණකි @import. විස්තර සඳහා Respond.js docs බලන්න.

Internet Explorer 8 සහ කොටු ප්‍රමාණය

IE8 , , , හෝ box-sizing: border-box;සමඟ ඒකාබද්ධ වූ විට සම්පූර්ණයෙන��ම සහාය නොදක්වයි . එම හේතුව නිසා, v3.0.1 ලෙස, අපි තවදුරටත් s මත භාවිතා නොකරමු .min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 සහ @font-face

@font-faceසමඟ ඒකාබද්ධ වූ විට IE8 සමඟ යම් ගැටළු ඇත :before. Bootstrap එම සංයෝජනය එහි Glyphicons සමඟ භාවිතා කරයි. පිටුවක් හැඹිලිගත කර, කවුළුව හරහා මවුසය නොමැතිව පූරණය කර ඇත්නම් (එනම් refresh බොත්තම ඔබන්න හෝ iframe එකක යමක් පූරණය කරන්න) එවිට අකුරු පූරණය වීමට පෙර පිටුව විදැහුම්කරණය වේ. පිටුව (ශරීරය) මත සැරිසැරීමෙන් සමහර අයිකන පෙන්වනු ඇති අතර ඉතිරි අයිකන මත සැරිසැරීමෙන් ඒවාද පෙන්වනු ඇත. #13863 කලාපය බලන්න බලන්න.

IE අනුකූලතා මාතයන්

පැරණි Internet Explorer අනුකූලතා මාතයන් තුළ Bootstrap සහාය නොදක්වයි. ඔබ IE සඳහා නවතම විදැහුම්කරණ මාදිලිය භාවිතා කරන බව සහතික කර ගැනීමට, <meta>ඔබේ පිටු තුළ සුදුසු ටැගය ඇතුළත් කිරීමට සලකා බලන්න:

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

නිදොස් කිරීමේ මෙවලම් විවෘත කිරීමෙන් ලේඛන මාදිලිය තහවුරු කරන්න: F12"ලේඛන මාදිලිය" ඔබා පරීක්ෂා කරන්න.

මෙම ටැගය Bootstrap හි සියලුම ලේඛනවල සහ Internet Explorer හි සහය දක්වන සෑම අනුවාදයකම හැකි හොඳම විදැහුම්කරණය සහතික කිරීම සඳහා උදාහරණ ඇතුළත් වේ.

වැඩි විස්තර සඳහා මෙම StackOverflow ප්‍රශ්නය බලන්න .

Windows 8 සහ Windows Phone 8 හි Internet Explorer 10

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 උපාංගයේ පළල දර්ශන තලයේ පළලින් වෙනස් නොකරන අතර එමඟින් බූට්ස්ට්‍රැප් හි සීඑස්එස් හි මාධ්‍ය විමසුම් නිසි ලෙස යොදන්නේ නැත. සාමාන්‍යයෙන් ඔබ මෙය නිවැරදි කිරීමට CSS හි ඉක්මන් ස්නිපට් එකක් එක් කරයි:

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

කෙසේ වෙතත්, යාවත්කාලීන 3 (එනම් GDR3) ට වඩා පැරණි Windows Phone 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 කියවන්න .

ප්‍රධාන කරුණක් ලෙස, අපි මෙය Bootstrap හි සියලුම ලේඛනවල සහ නිදර්ශනයක් ලෙස ඇතුළත් කරමු.

සෆාරි සියයට වටය

OS X සඳහා v7.1 ට පෙර Safari අනුවාද විදැහුම්කරණ එන්ජිම සහ iOS v8.0 සඳහා Safari අපගේ .col-*-1ජාල පන්තිවල භාවිතා කරන දශම ස්ථාන ගණන සමඟ යම් ගැටලුවක් ඇති කර ඇත. එබැවින් ඔබට තනි ජාලක තීරු 12ක් තිබුනේ නම්, අනෙකුත් තීරු පේළි හා සසඳන විට ඒවා කෙටි වූ බව ඔබට පෙනෙනු ඇත. Safari/iOS උත්ශ්‍රේණි කිරීමට අමතරව, ඔබට විසඳුම් සඳහා විකල්ප කිහිපයක් තිබේ:

• .pull-rightදෘඪ-දකුණු පෙළගැස්ම ලබා ගැනීමට ඔබේ අවසන් ජාල තීරුවට එක් කරන්න
• Safari සඳහා පරිපූර්ණ වටය ලබා ගැනීම සඳහා ඔබේ ප්‍රතිශත හස්තීයව වෙනස් කරන්න (පළමු විකල්පයට වඩා දුෂ්කර)

Modals, navbars, සහ virtual keyboards

පිටාර ගැලීම සහ අනුචලනය

overflow: hiddenIOS සහ Android හි මූලද්‍රව්‍ය සඳහා සහය <body>තරමක් සීමිතය. ඒ සඳහා, ඔබ එම උපාංගවල බ්‍රවුසර දෙකකින් මොඩලයක ඉහළ හෝ පහළ පසුකර යන විට, <body>අන්තර්ගතය අනුචලනය වීමට පටන් ගනී. Chrome දෝෂය #175502 ( Chrome v40 හි නිවැරදි කර ඇත) සහ WebKit දෝෂ #153852 බලන්න .

iOS පෙළ ක්ෂේත්‍ර සහ අනුචලනය

iOS 9.3 වන විට, මාදිලියක් විවෘතව පවතින අතර, අනුචලන අභිනයක ආරම්භක ස්පර්ශය පාඨමය <input>හෝ a හි සීමාව තුළ තිබේ නම්, මාදිලිය වෙනුවට මොඩලයට යටින් ඇති අන්තර්ගතය අනුචලනය වේ <textarea>. WebKit දෝෂ #153856<body> බලන්න .

අතථ්‍ය යතුරු පුවරු

එසේම, ඔබ ස්ථාවර නව තීරුවක් භාවිතා කරන්නේ නම් හෝ මාදිලියක් තුළ යෙදවුම් භාවිතා කරන්නේ නම්, අථත්‍ය යතුරුපුවරුව ක්‍රියාත්මක වන විට ස්ථාවර මූලද්‍රව්‍යවල පිහිටීම යාවත්කාලීන නොකරන විදැහුම්කරණ දෝෂයක් iOS සතුව ඇති බව සලකන්න. මේ සඳහා ක්‍රියා මාර්ග කිහිපයක් ඔබේ මූලද්‍රව්‍ය බවට පරිවර්තනය කිරීම position: absoluteහෝ ස්ථානගත කිරීම අතින් නිවැරදි කිරීමට උත්සාහ කිරීම සඳහා ටයිමරයක් නාභිගත කිරීම ඇතුළත් වේ. මෙය Bootstrap විසින් හසුරුවන්නේ නැත, එබැවින් ඔබගේ යෙදුම සඳහා හොඳම විසඳුම කුමක්දැයි තීරණය කිරීම ඔබ සතුය.

Navbar පතනයන්

.dropdown-backdropZ-සුචිගත කිරීමේ සංකීර්ණත්වය නිසා මෙම මූලද්‍රව්‍යය nav හි iOS මත භාවිතා නොවේ. මේ අනුව, navbars හි dropdowns වැසීමට, ඔබ dropdown මූලද්‍රව්‍යය කෙලින්ම ක්ලික් කළ යුතුය (හෝ iOS හි ක්ලික් සිදුවීමක් සිදු කරන වෙනත් ඕනෑම අංගයක් ).

බ්‍රව්සරය විශාලනය කිරීම

පිටු විශාලනය අනිවාර්යයෙන්ම Bootstrap සහ වෙබයේ අනෙකුත් කොටස් දෙකෙහිම සමහර සංරචකවල විදැහුම්කරණ කෞතුක වස්තු ඉදිරිපත් කරයි. ගැටලුව මත පදනම්ව, අපට එය නිවැරදි කිරීමට හැකි විය හැකිය (පළමුව සොයන්න සහ අවශ්‍ය නම් ගැටළුවක් විවෘත කරන්න). කෙසේ වෙතත්, අපි මේවා නොසලකා හැරීමට නැඹුරු වන්නේ ඒවාට බොහෝ විට හැකිකි විසඳුම් හැර වෙනත් සෘජු විසඳුමක් නොමැති බැවිනි.

ඇලෙන සුළු :hover/ :focusජංගම දුරකථනයේ

බොහෝ ටච්ස්ක්‍රීන් මත සැබෑ සැරිසැරීම කළ නොහැකි වුවද, බොහෝ ජංගම බ්‍රවුසරවල සැරිසැරීමේ සහය අනුකරණය කර :hover"ඇලෙන සුළු" බවට පත් කරයි. වෙනත් වචන වලින් කිවහොත්, :hoverමූලද්‍රව්‍යයක් තට්ටු කිරීමෙන් පසු මෝස්තර යෙදීමට පටන් ගන්නා අතර පරිශීලකයා වෙනත් මූලද්‍රව්‍යයකට තට්ටු කිරීමෙන් පසුව පමණක් යෙදීම නතර කරයි. මෙය Bootstrap හි :hoverතත්වයන් එවැනි බ්‍රව්සර්වල අනවශ්‍ය ලෙස "ඇලවී" ඇති වීමට හේතු විය හැක. සමහර ජංගම බ්‍රව්සර් ද ඒ හා :focusසමානව ඇලෙන සුළු කරයි. එවැනි මෝස්තර සම්පූර්ණයෙන්ම ඉවත් කිරීම හැර මෙම ගැටළු සඳහා සරල විසඳුමක් දැනට නොමැත.

මුද්රණය කිරීම

සමහර නවීන බ්‍රව්සර්වල පවා මුද්‍රණය විචිත්‍රවත් විය හැකිය.

විශේෂයෙන්ම, ක්‍රෝම් v32 සහ ආන්තික සැකසුම් නොතකා, වෙබ් පිටුවක් මුද්‍රණය කිරීමේදී මාධ්‍ය විමසුම් විසඳීමේදී භෞතික කඩදාසි ප්‍රමාණයට වඩා සැලකිය යුතු තරම් පටු වීව්පෝට් පළලක් Chrome භාවිතා කරයි. මෙය මුද්‍රණය කිරීමේදී Bootstrap හි අමතර කුඩා ජාලකය අනපේක්ෂිත ලෙස සක්‍රිය වීමට හේතු විය හැක. සමහර විස්තර සඳහා # 12078 නිකුතුව සහ Chrome bug #273306 බලන්න. යෝජිත විසඳුම්:

• අමතර කුඩා ජාලකය වැළඳගෙන ඔබේ පිටුව ඒ යටතේ පිළිගත හැකි බව සහතික කර ගන්න.
• අඩු විචල්‍යවල අගයන් අභිරුචිකරණය @screen-*කරන්න එවිට ඔබේ මුද්‍රණ කඩදාසිය කුඩාවට වඩා විශාල ලෙස සැලකේ.
• මුද්‍රිත මාධ්‍ය සඳහා පමණක් ජාල ප්‍රමාණයේ බිඳුම් ලක්ෂ්‍ය වෙනස් කිරීමට අභිරුචි මාධ්‍ය විමසුම් එක් කරන්න.

එසේම, Safari v8.0 ලෙස, ස්ථාවර පළල .containers සෆාරි මුද්‍රණය කිරීමේදී අසාමාන්‍ය ලෙස කුඩා අකුරු ප්‍රමාණයක් භාවිතා කිරීමට හේතු විය හැක. වැඩි විස්තර සඳහා #14868 සහ WebKit bug #138192 බලන්න. මේ සඳහා එක් විභව විසඳුමක් වන්නේ පහත CSS එකතු කිරීමයි:

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

Android කොටස් බ්‍රව්සරය

කොටුවෙන් පිටත, ඇන්ඩ්‍රොයිඩ් 4.1 (සහ සමහර නව නිකුතු පෙනෙන පරිදි) බ්‍රව්සර් යෙදුම සමඟ පෙරනිමි තේරීමේ වෙබ් බ්‍රව්සරය ලෙස නැව්ගත කරයි (ක්‍රෝම් වලට ප්‍රතිවිරුද්ධව). අවාසනාවකට, බ්‍රවුසර් යෙදුමට සාමාන්‍යයෙන් CSS සමඟ බොහෝ දෝෂ සහ නොගැලපීම් ඇත.

මෙනු තෝරන්න

මූලද්‍රව්‍ය මත , සහ/හෝ <select>තිබේ නම් ඇන්ඩ්‍රොයිඩ් කොටස් බ්‍රවුසරය පැති පාලන සංදර්ශණය නොවේborder-radiusborder යෙදී(විස්තර සඳහා මෙම StackOverflow ප්‍රශ්නය බලන්න.) වැරදි CSS ඉවත් කිරීමට සහ <select>Android කොටස් බ්‍රවුසරයේ මෝස්තර නොකළ අංගයක් ලෙස දැක්වීමට පහත කේත කොටස භාවිතා කරන්න. පරිශීලක නියෝජිතයා sniffing Chrome, Safari, සහ Mozilla බ්‍රවුසරවලට බාධා කිරීම් වළක්වයි.

<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 Bin demo එක බලන්න.

වලංගු කරන්නන්

පැරණි සහ දෝෂ සහිත බ්‍රවුසර සඳහා හොඳම අත්දැකීම ලබා දීම සඳහා, Bootstrap භාවිතා කරයි බ්‍රවුසරයේ ඇති දෝෂ සම්බන්ධයෙන් ක්‍රියා කිරීම සඳහා ඇතැම් බ්‍රවුසර අනුවාද සඳහා විශේෂ CSS ඉලක්ක කිරීමට ස්ථාන කිහිපයක CSS බ්‍රවුසර හැක් භාවිතා කරයි. මෙම හැක් කිරීම් CSS වලංගු කරන්නන් වලංගු නොවන බවට පැමිණිලි කිරීමට හේතු වේ. ස්ථාන කිහිපයකදී, අපි තවමත් සම්පූර්ණයෙන් ප්‍රමිතිගත කර නැති ලේ ගැලීම් සහිත CSS විශේෂාංග භාවිතා කරමු, නමුත් මේවා සම්පූර්ණයෙන්ම ප්‍රගතිශීලී වැඩිදියුණු කිරීම් සඳහා භාවිතා වේ.

අපගේ CSS හි අනවසර කොටස සම්පූර්ණයෙන් වලංගු වන බැවින් සහ හැකි නොවන කොටසෙහි නිසි ක්‍රියාකාරිත්වයට බාධා නොකරන බැවින් මෙම වලංගු කිරීමේ අනතුරු ඇඟවීම් ප්‍රායෝගිකව වැදගත් නොවේ, එබැවින් අපි මෙම විශේෂිත අනතුරු ඇඟවීම් හිතාමතාම නොසලකා හරින්නේ මන්ද යන්නයි.

අපගේ HTML ලේඛනවලද යම් යම් ෆයර්ෆොක්ස් දෝෂයක් සඳහා පිළියමක් ඇතුළත් කිරීම නිසා සුළු හා නොසැලකිලිමත් HTML වලංගු කිරීමේ අනතුරු ඇඟවීම් ඇත.

තෙවන පාර්ශවීය සහාය

අපි නිල වශයෙන් කිසිදු තෙවන පාර්ශ්ව ප්ලගීන හෝ ඈඳුම් සඳහා සහාය නොදක්වන අතර, අපි ඔබේ ව්‍යාපෘතිවල ඇති විය හැකි ගැටලු මඟහරවා ගැනීමට ප්‍රයෝජනවත් උපදෙස් කිහිපයක් ලබා දෙන්නෙමු.

පෙට්ටි ප්රමාණය

Google Maps සහ Google Custom Search Engine ඇතුළු සමහර තෙවන පාර්ශවීය මෘදුකාංග, Bootstrap සමඟ ගැටෙන නිසා * { 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();
}

ප්රවේශ

බූට්ස්ට්‍රැප් පොදු වෙබ් ප්‍රමිතීන් අනුගමනය කරන අතර—අඩුම අමතර පරිශ්‍රමයකින්— AT භාවිත කරන අයට ප්‍රවේශ විය හැකි අඩවි නිර්මාණය කිරීමට භාවිත කළ හැක. .

සංචාලනය මඟ හරින්න

ඔබේ සංචලනය බොහෝ සබැඳි අඩංගු නම් සහ DOM හි ප්‍රධාන අන්තර්ගතයට පෙර පැමිණෙන්නේ නම් , සංචාලනයට Skip to main contentපෙර සබැඳියක් එක් කරන්න (සරල පැහැදිලි කිරීමක් සඳහා, මඟ හැරීමේ සබැඳි පිළිබඳ මෙම A11Y ව්‍යාපෘති ලිපිය බලන්න ). පන්තිය භාවිතා කිරීම .sr-onlyමඟහැරීමේ සබැඳිය දෘශ්‍යමය වශයෙන් සඟවනු ඇති අතර, .sr-only-focusableනාභිගත කළ පසු සබැඳිය දෘශ්‍යමාන වන බව පන්තිය සහතික කරයි (දෘෂ්‍යමාන යතුරුපුවරු භාවිතා කරන්නන් සඳහා).

<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 හිදී තව දැන ගන්න .

වර්ණ වෙනස

දැනට, Bootstrap හි ඇති සමහර පෙරනිමි වර්ණ සංයෝජන (විවිධ මෝස්තර සහිත බොත්තම් පන්ති, මූලික කේත බ්ලොක් සඳහා භාවිතා කරන සමහර කේත උද්දීපනය කරන වර්ණ , .bg-primary සන්දර්භීය පසුබිම් උපකාරක පන්තිය සහ සුදු පසුබිමක භාවිතා කරන විට පෙරනිමි සබැඳි වර්ණය වැනි) අඩු ප්‍රතිවිරෝධතා අනුපාතයක් ඇත ( නිර්දේශිත අනුපාතය 4.5:1 ට පහළින් ). මෙය අඩු පෙනීම ඇති හෝ වර්ණ අන්ධ පරිශීලකයින්ට ගැටළු ඇති කළ හැක. මෙම පෙරනිමි වර්ණ ඒවායේ ප්‍රතිවිරුද්ධතාව සහ පැහැදිලි බව වැඩි කිරීමට වෙනස් කිරීමට අවශ්‍ය විය හැකිය.

අතිරේක සම්පත්

• ප්‍රවේශ්‍යතා ගැටළු හඳුනාගැනීම සඳහා "HTML Codesniffer" පිටු සලකුණු
• Chrome හි ප්‍රවේශ්‍යතා සංවර්ධක මෙවලම් දිගුව
• වර්ණ පරස්පර විශ්ලේෂකය
• A11Y ව්‍යාපෘතිය
• MDN ප්‍රවේශ්‍යතා ලේඛන

බලපත්‍ර නිතර අසන ප්‍රශ්න

Bootstrap MIT බලපත්‍රය යටතේ නිකුත් කර ඇති අතර එය ප්‍රකාශන හිමිකම 2019 Twitter වේ. කුඩා කැබලිවලට තම්බා පහත සඳහන් කොන්දේසි සහිතව විස්තර කළ හැක.

එය ඔබට අවශ්‍ය වන්නේ:

• Bootstrap හි CSS සහ JavaScript ගොනු ඔබ ඔබේ වැඩ වලදී භාවිතා කරන විට බලපත්‍රය සහ ප්‍රකාශන හිමිකම් දැන්වීම තබා ගන්න

එය ඔබට අවසර දෙයි:

• පුද්ගලික, පුද්ගලික, සමාගමේ අභ්‍යන්තර හෝ වාණිජ අරමුණු සඳහා Bootstrap සම්පූර්ණයෙන්ම හෝ අර්ධ වශයෙන් නොමිලේ බාගත කර භාවිතා කරන්න
• ඔබ නිර්මාණය කරන පැකේජ හෝ බෙදාහැරීම් වල Bootstrap භාවිතා කරන්න
• මූල කේතය වෙනස් කරන්න
• බලපත්‍රයේ ඇතුළත් නොවන තෙවන පාර්ශවයන්ට Bootstrap වෙනස් කිරීමට සහ බෙදා හැරීමට උප බලපත්‍රයක් ලබා දෙන්න

එය ඔබට තහනම් කරයි:

• බූට්ස්ට්‍රැප් වගකීමකින් තොරව ලබා දී ඇති බැවින් කතුවරුන් සහ බලපත්‍ර හිමිකරුවන් හානි සඳහා වගකිව යුතුය
• Bootstrap හි නිර්මාතෘවරුන් හෝ ප්‍රකාශන හිමිකම් දරන්නන් වගකීම් දරන්න
• නිසි ආරෝපණයකින් තොරව ඕනෑම Bootstrap කෑල්ලක් නැවත බෙදාහරින්න
• Twitter ඔබේ බෙදා හැරීම අනුමත කරන බව ප්‍රකාශ කළ හැකි හෝ ඇඟවුම් කළ හැකි ඕනෑම ආකාරයකින් Twitter සතු ඕනෑම ලකුණක් භාවිතා කරන්න
• ඔබ ප්‍රශ්නගත Twitter මෘදුකාංගය නිර්මාණය කළ බව ප්‍රකාශ කළ හැකි හෝ ඇඟවුම් කළ හැකි ඕනෑම ආකාරයකින් Twitter සතු ඕනෑම ලකුණක් භාවිත කරන්න

එය ඔබට අවශ්‍ය නොවේ:

• Bootstrap හි මූලාශ්‍රය හෝ ඔබ එයට සිදු කර ඇති ඕනෑම වෙනස් කිරීමක්, ඔබට එය ඇතුළත්ව එක්රැස් කළ හැකි ඕනෑම යලි බෙදාහැරීමකදී ඇතුළත් කරන්න.
• ඔබ Bootstrap වෙත සිදු කරන වෙනස්කම් Bootstrap ව්‍යාපෘතිය වෙත නැවත ඉදිරිපත් කරන්න (එවැනි ප්‍රතිපෝෂණ දිරිමත් කරනු ලැබුවද)

වැඩි විස්තර සඳහා සම්පූර්ණ Bootstrap බලපත්‍රය ව්‍යාපෘති ගබඩාවේ ඇත.

පරිවර්තන

ප්‍රජා සාමාජිකයින් Bootstrap හි ලේඛන විවිධ භාෂාවලට පරිවර්තනය කර ඇත. කිසිවක් නිල වශයෙන් සහාය නොදක්වන අතර ඒවා සැමවිටම යාවත්කාලීන නොවිය හැක.

• Bootstrap 中文文档 (චීන)
• බූට්ස්ට්‍රැප් ඩැන්ස්ක් (ඩෙන්මාර්ක)
• Bootstrap en Français (ප්‍රංශ)
• Bootstrap auf Deutsch (ජර්මානු)
• ඉතාලිනෝ භාෂාවෙන් බූට්ස්ට්‍රැප් (ඉතාලි)
• Bootstrap 한국어 (කොරියානු)
• Bootstrap em Português do Brasil (බ්‍රසීලියානු පෘතුගීසි)
• Bootstrap по-русски (රුසියානු)
• Bootstrap en Español (ස්පාඤ්ඤ)
• Türkçe Bootstrap (තුර්කි)
• Bootstrap українською (යුක්රේනියානු)
• Bootstrap bằng tiếng Việt (වියට්නාම)

අපි පරිවර්තන සංවිධානය කිරීමට හෝ සත්කාරකත්වය ලබා දීමට උදව් නොකරමු, අපි ඒවාට සම්බන්ධ කරන්නෙමු.

නව හෝ වඩා හොඳ පරිවර්තනයක් අවසන් කළාද? එය අපගේ ලැයිස්තුවට එක් කිරීමට අදින්න ඉල්ලීමක් විවෘත කරන්න.