ආරම්භ කිරීම · Bootstrap සිංහලෙන්

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

Bootstrap

CSS, JavaScript, සහ අකුරු සම්පාදනය කර කුඩා කරන ලදී. ලේඛන හෝ මුල් මූලාශ්‍ර ගොනු ඇතුළත් නොවේ.

Bootstrap බාගන්න

ප්රභව කේතය

මූලාශ්‍ර අඩු, ජාවාස්ක්‍රිප්ට්, සහ අකුරු ගොනු, අපගේ ලේඛන සමඟින්. අඩු සම්පාදකයක් සහ යම් සැකසීමක් අවශ්‍ය වේ.

මූලාශ්රය බාගත කරන්න

සාස්

රේල්, මාලිමා, හෝ Sass-පමණක් ව්‍යාපෘතිවලට පහසුවෙන් ඇතුළත් කිරීම සඳහා Bootstrap Less සිට Sass වෙත ගෙනයනු ලැබේ.

Sass බාගන්න

Bootstrap CDN

jsDelivr හි සිටින අය Bootstrap හි CSS සහ JavaScript සඳහා CDN සහාය කාරුණිකව සපයයි. මෙම Bootstrap CDN සබැඳි භාවිතා කරන්න.

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 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 ආකාර දෙකකින් බාගත කළ හැකි අතර, ඔබට පහත නාමාවලි සහ ගොනු සොයා ගත හැකි අතර, පොදු සම්පත් තාර්කිකව සමූහගත කිරීම සහ සම්පාදනය කරන ලද සහ කුඩා වෙනස්කම් ලබා දීම.

jQuery අවශ්‍යයි

ආරම්භක අච්චුවේ පෙන්වා ඇති පරිදි, සියලුම JavaScript ප්ලගීන සඳහා jQuery ඇතුළත් කිරීමට අවශ්‍ය බව කරුණාවෙන් සලකන්න . jQuery හි කුමන අනුවාද සඳහා සහය දක්වන්නේද යන්න බැලීමට අපගේ උපදෙස් ලබා ගන්න.bower.json

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 හි මූලිකම ආකාරයයි: ඕනෑම වෙබ් ව්‍යාපෘතියක පාහේ ඉක්මන් පතන භාවිතය සඳහා පූර්ව සම්පාදිත ගොනු. අපි සම්පාදනය කරන ලද 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 එහි ගොඩනැගීමේ පද්ධතිය සඳහා Grunt භාවිතා කරයි , රාමුව සමඟ වැඩ කිරීම සඳහා පහසු ක්රම සමඟ. අපි අපේ කේතය සම්පාදනය කරන්නේ, පරීක්ෂණ ධාවනය කරන ආකාරය සහ තවත් දේ.

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

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

ඉන්පසු, විධාන රේඛාවෙන්:

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

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

පවතින Grunt විධාන

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

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

`grunt watch`(නරඹන්න)

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

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

JSHint ධාවනය කර QUnit පරීක්ෂණ PhantomJS හි හිසකින් තොරව ධාවනය කරයි.

`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 href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></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 ඔබගේ පිටු විවිධ තිර ප්‍රමාණ සඳහා ස්වයංක්‍රීයව අනුවර්තනය කරයි. ඔබගේ පිටුව මෙම ප්‍රතිචාර නොදක්වන උදාහරණය මෙන් ක්‍රියා කිරීමට මෙම විශේෂාංගය අබල කරන්නේ කෙසේද යන්න මෙන්න .

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

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

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

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

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

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

v2.x සිට v3.x දක්වා සංක්‍රමණය වීම

Bootstrap හි පැරණි අනුවාදයකින් v3.x වෙත සංක්‍රමණය වීමට බලාපොරොත්තු වන්නේද? අපගේ සංක්‍රමණ මාර්ගෝපදේශය පරීක්ෂා කරන්න .

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

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

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

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

ජංගම උපාංග

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

	Chrome	ෆයර්ෆොක්ස්	සෆාරි
ඇන්ඩ්රොයිඩ්	සහාය දුන්නා	සහාය දුන්නා	N/A
iOS	සහාය දුන්නා	සහාය දුන්නා	සහාය දුන්නා

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

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

	Chrome	ෆයර්ෆොක්ස්	අන්තර්ජාල ගවේෂකය	ඔපෙරා	සෆාරි
Mac	සහාය දුන්නා	සහාය දුන්නා	N/A	සහාය දුන්නා	සහාය දුන්නා
වින්ඩෝස්	සහාය දුන්නා	සහාය දුන්නා	සහාය දුන්නා	සහාය දුන්නා	සහාය නොදක්වයි

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 භාවිතා කිරීම අවශ්‍ය වේ.

විශේෂාංගය	Internet Explorer 8	Internet Explorer 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 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-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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 විසින් හසුරුවන්නේ නැත, එබැවින් ඔබගේ යෙදුම සඳහා හොඳම විසඳුම කුමක්ද යන්න තීරණය කිරීම ඔබ සතුය.

.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>ඇත්නම් ඒවා ප්‍රදර්ශනය නොකරනු ඇත . (විස්තර සඳහා මෙම StackOverflow ප්‍රශ්නය බලන්න.) වැරදි CSS ඉවත් කිරීමට සහ Android කොටස් බ්‍රවුසරයේ මෝස්තර නොකළ අංගයක් ලෙස දැක්වීමට පහත කේත කොටස භාවිතා කරන්න. පරිශීලක නියෝජිතයා sniffing 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 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නාභිගත කළ පසු සබැඳිය දෘශ්‍යමාන වන බව පන්තිය සහතික කරයි (දෘෂ්‍යමාන යතුරුපුවරු භාවිතා කරන්නන් සඳහා).

Chrome හි දිගුකාලීන අඩුපාඩු/දෝෂ ( Chromium බග් ට්‍රැකරයේ 262171 නිකුතුව බලන්න) සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් ( පිටු-තුළ සබැඳි සහ නාභිගත අනුපිළිවෙල පිළිබඳ මෙම ලිපිය බලන්න ) හේතුවෙන්, ඔබේ මඟ හැරීමේ සබැඳියේ ඉලක්කය බවට ඔබ සහතික විය යුතුය. එකතු කිරීමෙන් අවම වශයෙන් ක්‍රමලේඛනාත්මකව අවධානය යොමු කළ හැකිය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 හිදී තව දැනගන්න .

වර්ණ වෙනස

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ඇරඹේ

බාගත