ទាញយក

Bootstrap (បច្ចុប្បន្ន v3.4.1) មានវិធីងាយៗមួយចំនួនដើម្បីចាប់ផ្តើមយ៉ាងឆាប់រហ័ស ដែលនីមួយៗទាក់ទាញដល់កម្រិតជំនាញ និងករណីប្រើប្រាស់ផ្សេងៗគ្នា។ សូមអានដើម្បីមើលថាតើអ្វីដែលសាកសមនឹងតម្រូវការជាក់លាក់របស់អ្នក។

jsDelivr

មនុស្សនៅ jsDelivr ផ្តល់ការគាំទ្រ CDN សម្រាប់ CSS និង JavaScript របស់ Bootstrap ។ គ្រាន់តែប្រើ តំណ 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's Less, CSS, JavaScript, និងfonts ដោយប្រើ Bower :

bower install bootstrap

ដំឡើងជាមួយ npm

អ្នកក៏អាចដំឡើង Bootstrap ដោយប្រើ npm :

npm install bootstrap@3

require('bootstrap')នឹងផ្ទុកកម្មវិធីជំនួយ jQuery ទាំងអស់របស់ Bootstrap ទៅលើវត្ថុ jQuery ។ ម៉ូឌុល bootstrapខ្លួនវាមិននាំចេញអ្វីទេ។ អ្នកអាចផ្ទុកកម្មវិធីជំនួយ jQuery របស់ Bootstrap ដោយដៃដោយផ្ទុក /js/*.jsឯកសារនៅក្រោមថតកម្រិតកំពូលរបស់កញ្ចប់។

Bootstrap package.jsonមានផ្ទុកទិន្នន័យមេតាបន្ថែមមួយចំនួននៅក្រោមគ្រាប់ចុចខាងក្រោម៖

• less- ផ្លូវទៅកាន់ ឯកសារ ប្រភព សំខាន់របស់ Bootstrap
• style- ផ្លូវទៅកាន់ CSS ដែលមិនត្រូវបានបង្រួមតូចរបស់ Bootstrap ដែលត្រូវបានចងក្រងជាមុនដោយប្រើការកំណត់លំនាំដើម (គ្មានការប្ដូរតាមបំណង)

ដំឡើងជាមួយកម្មវិធីតែង

អ្នកក៏អាចដំឡើង និងគ្រប់គ្រង Bootstrap's Less, CSS, JavaScript និង fonts ដោយប្រើ Composer ៖

composer require twbs/bootstrap

តម្រូវ​ឱ្យ​មាន​បុព្វបទ​ស្វ័យប្រវត្តិ​សម្រាប់ Less/Sass

Bootstrap ប្រើ Autoprefixer ដើម្បីដោះស្រាយជាមួយ បុព្វបទអ្នកលក់ CSS ។ ប្រសិនបើអ្នកកំពុងចងក្រង Bootstrap ពីប្រភព Less/Sass របស់វា ហើយមិនប្រើ Gruntfile របស់យើងទេ អ្នកនឹងត្រូវបញ្ចូល Autoprefixer ទៅក្នុងដំណើរការបង្កើតរបស់អ្នកដោយខ្លួនឯង។ ប្រសិនបើអ្នកកំពុងប្រើ Bootstrap ដែលបានចងក្រងជាមុន ឬប្រើ Gruntfile របស់យើង អ្នកមិនចាំបាច់ព្រួយបារម្ភអំពីបញ្ហានេះទេ ព្រោះ Autoprefixer ត្រូវបានបញ្ចូលទៅក្នុង Gruntfile របស់យើង។

អ្វីដែលរួមបញ្ចូល

Bootstrap អាចទាញយកបានក្នុងទម្រង់ពីរ ដែលក្នុងនោះអ្នកនឹងរកឃើញថតឯកសារ និងឯកសារខាងក្រោម ដោយដាក់ជាក្រុមដោយឡូជីខលនៃធនធានទូទៅ និងផ្តល់ទាំងបំរែបំរួលដែលបានចងក្រង និងបង្រួមតូច។

Bootstrap ដែលបានចងក្រងជាមុន

នៅពេលទាញយករួច ពន្លាថតឯកសារដែលបានបង្ហាប់ ដើម្បីមើលរចនាសម្ព័ន្ធរបស់ Bootstrap (ដែលបានចងក្រង)។ អ្នកនឹងឃើញអ្វីមួយដូចនេះ៖

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) មានសម្រាប់ប្រើជាមួយឧបករណ៍អ្នកអភិវឌ្ឍន៍មួយចំនួនរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត។ ពុម្ពអក្សរពី Glyphicons ត្រូវបានរួមបញ្ចូល ក៏ដូចជាប្រធានបទ Bootstrap ស្រេចចិត្ត។

កូដប្រភព Bootstrap

ការទាញយកកូដប្រភព Bootstrap រួមបញ្ចូល CSS, JavaScript, និងទ្រព្យសម្បត្តិពុម្ពអក្សរដែលបានចងក្រងជាមុន រួមជាមួយនឹងប្រភព Less, 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 និងជាវិធីមួយដើម្បីគ្រប់គ្រង develop dependencies តាមរយៈ node.js។

1. ដំឡើង grunt-cliជាសកលជាមួយ npm install -g grunt-cli.
2. រុករកទៅ /bootstrap/ថត root បន្ទាប់មកដំណើរការ npm install។ npm នឹងមើល package.jsonឯកសារ ហើយដំឡើងដោយស្វ័យប្រវត្តិនូវភាពអាស្រ័យមូលដ្ឋានចាំបាច់ដែលបានរាយបញ្ជីនៅទីនោះ។

នៅពេលបញ្ចប់ អ្នកនឹងអាចដំណើរការពាក្យបញ្ជា Grunt ផ្សេងៗដែលបានផ្តល់ពីបន្ទាត់ពាក្យបញ្ជា។

ពាក្យបញ្ជា Grunt ដែលអាចប្រើបាន

grunt dist(គ្រាន់តែចងក្រង CSS និង JavaScript)

បង្កើតឡើងវិញនូវ /dist/ថតឯកសារ CSS និង JavaScript ដែលបានចងក្រង និងបង្រួមតូច។ ក្នុងនាមជាអ្នកប្រើប្រាស់ Bootstrap ជាធម្មតានេះគឺជាពាក្យបញ្ជាដែលអ្នកចង់បាន។

grunt watch(មើល)

មើលឯកសារប្រភពតិច ហើយចងក្រងពួកវាឡើងវិញដោយស្វ័យប្រវត្តិទៅ CSS នៅពេលណាដែលអ្នករក្សាទុកការផ្លាស់ប្តូរ។

grunt test(ដំណើរការតេស្ត)

ដំណើរការ JSHint និងដំណើរការការ ធ្វើតេស្ត QUnit នៅក្នុងកម្មវិធីរុករកពិតប្រាកដ អរគុណដល់ Karma ។

grunt docs(បង្កើត និងសាកល្បងទ្រព្យសម្បត្តិឯកសារ)

បង្កើត និងសាកល្បង CSS, JavaScript និងទ្រព្យសកម្មផ្សេងទៀតដែលត្រូវបានប្រើនៅពេលដំណើរការឯកសារក្នុងមូលដ្ឋានតាមរយៈ bundle exec jekyll serve.

grunt(បង្កើតអ្វីៗគ្រប់យ៉ាង និងដំណើរការសាកល្បង)

ចងក្រង និងបង្រួម CSS និង JavaScript បង្កើតគេហទំព័រឯកសារ ដំណើរការកម្មវិធីផ្ទៀងផ្ទាត់ HTML5 ប្រឆាំងនឹងឯកសារ បង្កើតទ្រព្យសកម្មរបស់អ្នកប្ដូរតាមបំណង និងអ្វីៗជាច្រើនទៀត។ ទាមទារ Jekyll ។ ជាធម្មតាចាំបាច់តែប្រសិនបើអ្នកកំពុងលួចចូល Bootstrap ខ្លួនឯង។

ការ​ដោះស្រាយ​បញ្ហា

ប្រសិនបើអ្នកជួបប្រទះបញ្ហាក្នុងការដំឡើងភាពអាស្រ័យ ឬដំណើរការពាក្យបញ្ជា Grunt ដំបូងត្រូវលុប /node_modules/ថតដែលបង្កើតដោយ npm។ បន្ទាប់មក ដំណើរការឡើងវិញ npm install។

គំរូមូលដ្ឋាន

ចាប់ផ្តើមជាមួយគំរូ HTML មូលដ្ឋាននេះ ឬកែប្រែ ឧទាហរណ៍ទាំងនេះ ។ យើងសង្ឃឹមថាអ្នកនឹងប្ដូរគំរូ និងគំរូរបស់យើងតាមបំណង ដោយសម្របពួកវាឱ្យសមនឹងតម្រូវការរបស់អ្នក។

ចម្លង HTML ខាងក្រោមដើម្បីចាប់ផ្តើមធ្វើការជាមួយឯកសារ Bootstrap តិចតួចបំផុត។

<!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 ជាជម្រើសសម្រាប់បទពិសោធន៍ដែលមើលឃើញកាន់តែប្រសើរឡើង។

ក្រឡាចត្រង្គ

ឧទាហរណ៍ជាច្រើននៃប្លង់ក្រឡាចត្រង្គដែលមានកម្រិតទាំងបួន ការដាក់សំបុក និងច្រើនទៀត។

Jumbotron

សាងសង់ជុំវិញ jumbotron ជាមួយនឹងរបារ navbar និងជួរឈរក្រឡាចត្រង្គមូលដ្ឋានមួយចំនួន។

jumbotron តូចចង្អៀត

បង្កើតទំព័រផ្ទាល់ខ្លួនបន្ថែមទៀតដោយបង្រួមធុងលំនាំដើម និង jumbotron ។

Navbars នៅក្នុងសកម្មភាព

Navbar

គំរូមូលដ្ឋានទំនើបដែលរួមបញ្ចូលរបារ navbar រួមជាមួយនឹងមាតិកាបន្ថែមមួយចំនួន។

របាររុករកកំពូលឋិតិវន្ត

គំរូមូលដ្ឋានដ៏អស្ចារ្យជាមួយនឹងរបាររុករកកំពូលឋិតិវន្ត រួមជាមួយនឹងខ្លឹមសារបន្ថែមមួយចំនួន។

របាររុករកថេរ

គំរូមូលដ្ឋានដ៏អស្ចារ្យជាមួយនឹងរបាររុករកកំពូលថេរ រួមជាមួយនឹងមាតិកាបន្ថែមមួយចំនួន។

សមាសធាតុផ្ទាល់ខ្លួន

គម្រប

គំរូមួយទំព័រសម្រាប់បង្កើតទំព័រដើមដ៏សាមញ្ញ និងស្រស់ស្អាត។

វង់

ប្ដូររបាររុករក និងរង្វង់តាមបំណង បន្ទាប់មកបន្ថែមសមាសធាតុថ្មីមួយចំនួន។

ប្លុក

ប្លង់ប្លុកពីរជួរសាមញ្ញជាមួយនឹងការរុករកផ្ទាល់ខ្លួន បឋមកថា និងប្រភេទ។

ផ្ទាំងគ្រប់គ្រង

រចនាសម្ព័ន្ធមូលដ្ឋានសម្រាប់ផ្ទាំងគ្រប់គ្រងគ្រប់គ្រងដែលមានរបារចំហៀងថេរ និងរបាររុករក។

ទំព័រចូល

ប្លង់ទម្រង់ផ្ទាល់ខ្លួន និងការរចនាសម្រាប់សញ្ញាសាមញ្ញក្នុងទម្រង់។

nav

បង្កើតរបាររុករកផ្ទាល់ខ្លួនជាមួយនឹងតំណភ្ជាប់ត្រឹមត្រូវ។ ព្រឺក្បាល! មិនងាយ Safari ពេកទេ។

បាតកថាស្អិត

ភ្ជាប់បាតកថាទៅបាតនៃច្រកចូលមើល នៅពេលដែលមាតិកាខ្លីជាងវា។

បាតកថាស្អិតជាមួយរបាររុករក

ភ្ជាប់បាតកថាទៅផ្នែកខាងក្រោមនៃច្រកទិដ្ឋភាពជាមួយនឹងរបាររុករកថេរនៅផ្នែកខាងលើ។

ការពិសោធន៍

Bootstrap មិនឆ្លើយតប

ងាយស្រួលបិទដំណើរការឆ្លើយតបរបស់ Bootstrap តាមឯកសាររបស់យើង ។

បិទផ្ទាំងក្រណាត់

បង្កើតម៉ឺនុយរុករកបិទផ្ទាំងក្រណាត់ដែលអាចបិទបើកបានសម្រាប់ប្រើជាមួយ Bootstrap ។

ឧបករណ៍

ប៊ូលីន

Bootlint គឺជាឧបករណ៍ ផ្ទុកឯកសារ HTML ផ្លូវការរបស់ Bootstrap។ វាពិនិត្យដោយស្វ័យប្រវត្តិនូវកំហុស HTML ទូទៅមួយចំនួននៅក្នុងគេហទំព័រដែលកំពុងប្រើ Bootstrap តាមរបៀប "vanilla" ។ សមាសធាតុ/ធាតុក្រាហ្វិករបស់ Vanilla Bootstrap ទាមទារផ្នែករបស់ពួកគេនៃ DOM ដើម្បីអនុលោមតាមរចនាសម្ព័ន្ធជាក់លាក់។ Bootlint ពិនិត្យមើលថាឧទាហរណ៍នៃសមាសធាតុ Bootstrap មាន HTML ដែលមានរចនាសម្ព័ន្ធត្រឹមត្រូវ។ ពិចារណាបន្ថែម Bootlint ទៅក្នុងខ្សែសង្វាក់ឧបករណ៍អភិវឌ្ឍន៍គេហទំព័រ Bootstrap របស់អ្នក ដើម្បីកុំឱ្យកំហុសទូទៅណាមួយធ្វើឱ្យការអភិវឌ្ឍន៍គម្រោងរបស់អ្នកយឺតយ៉ាវឡើយ។

សហគមន៍

ទទួលបានព័ត៌មានថ្មីៗអំពីការអភិវឌ្ឍន៍ Bootstrap និងទាក់ទងសហគមន៍ជាមួយនឹងធនធានដ៏មានប្រយោជន៍ទាំងនេះ។

• អាន និងជាវទៅកាន់ ប្លុក Bootstrap ផ្លូវការ ។
• ជជែកជាមួយមិត្ត Bootstrappers ដោយប្រើ IRC នៅក្នុង irc.freenode.netserver ក្នុង ##bootstrap channel ។
• សម្រាប់ជំនួយក្នុងការប្រើ Bootstrap សូមសួរនៅលើ StackOverflow ដោយប្រើស្លាកtwitter-bootstrap-3 ។
• អ្នកអភិវឌ្ឍន៍គួរតែប្រើពាក្យគន្លឹះ bootstrapនៅលើកញ្ចប់ដែលកែប្រែ ឬបន្ថែមមុខងាររបស់ Bootstrap នៅពេលចែកចាយតាមរយៈ npm ឬយន្តការចែកចាយស្រដៀងគ្នាសម្រាប់ការរកឃើញអតិបរមា។
• ស្វែងរកឧទាហរណ៍ដ៏បំផុសគំនិតនៃមនុស្សកសាងជាមួយ Bootstrap នៅ Bootstrap Expo ។

អ្នកក៏អាចតាមដាន @getbootstrap នៅលើ Twitter សម្រាប់វីដេអូចម្រៀងថ្មីៗ និងពិរោះៗផងដែរ។

បិទដំណើរការឆ្លើយតប

Bootstrap សម្របទំព័ររបស់អ្នកដោយស្វ័យប្រវត្តិសម្រាប់ទំហំអេក្រង់ផ្សេងៗ។ នេះជារបៀបបិទមុខងារនេះ ដើម្បីឱ្យទំព័ររបស់អ្នកដំណើរការដូច ឧទាហរណ៍ដែលមិនឆ្លើយតបនេះ ។

ជំហានដើម្បីបិទការឆ្លើយតបទំព័រ

1. លុបច្រកទិដ្ឋភាព <meta>ដែលបានរៀបរាប់នៅក្នុង ឯកសារ CSS
2. ត្រួត widthលើ .containerក្រឡាចត្រង្គសម្រាប់ក្រឡាចត្រង្គនីមួយៗដែលមានទទឹងតែមួយ ឧទាហរណ៍ width: 970px !important;ត្រូវប្រាកដថាវាមកបន្ទាប់ពី Bootstrap CSS លំនាំដើម។ អ្នក​អាច​ជៀស​វាង​ជា​ជម្រើស !important​ជាមួយ​នឹង​សំណួរ​មេឌៀ ឬ​ជម្រើស​មួយ​ចំនួន។
3. ប្រសិនបើប្រើ navbars លុប navbar ទាំងអស់ដួលរលំ និងពង្រីកឥរិយាបថ។
4. សម្រាប់ប្លង់ក្រឡាចត្រង្គ ប្រើ .col-xs-*ថ្នាក់បន្ថែមលើ ឬជំនួស មធ្យម/ធំ។ កុំបារម្ភ ឧបករណ៍តូចបន្ថែមក្រឡាចត្រង្គធ្វើមាត្រដ្ឋានទៅគ្រប់ដំណោះស្រាយ។

អ្នកនឹងនៅតែត្រូវការ Respond.js សម្រាប់ IE8 (ចាប់តាំងពីសំណួរប្រព័ន្ធផ្សព្វផ្សាយរបស់យើងនៅតែមាន ហើយត្រូវការដំណើរការ)។ វាបិទទិដ្ឋភាព "គេហទំព័រចល័ត" នៃ Bootstrap ។

គំរូ Bootstrap ជាមួយនឹងការឆ្លើយតបត្រូវបានបិទ

យើងបានអនុវត្តជំហានទាំងនេះទៅជាឧទាហរណ៍មួយ។ អានកូដប្រភពរបស់វា ដើម្បីមើលការផ្លាស់ប្តូរជាក់លាក់ដែលបានអនុវត្ត។

មើលឧទាហរណ៍ដែលមិនឆ្លើយតប

កម្មវិធីរុករកនិងឧបករណ៍គាំទ្រ

Bootstrap ត្រូវបានបង្កើតឡើងដើម្បីដំណើរការបានល្អបំផុតនៅក្នុងកម្មវិធីរុករកតាមកុំព្យូទ័រ និងឧបករណ៍ចល័តចុងក្រោយបំផុត មានន័យថាកម្មវិធីរុករកចាស់ៗអាចបង្ហាញរចនាប័ទ្មខុសគ្នា ទោះបីជាមានមុខងារពេញលេញក៏ដោយ ការបង្ហាញនៃសមាសធាតុមួយចំនួន។

កម្មវិធីរុករកដែលគាំទ្រ

ជាពិសេស យើងគាំទ្រ កំណែចុងក្រោយបំផុត នៃកម្មវិធីរុករក និងវេទិកាខាងក្រោម។

កម្មវិធីរុករកជំនួសដែលប្រើកំណែចុងក្រោយបំផុតរបស់ WebKit, Blink ឬ Gecko មិនថាដោយផ្ទាល់ ឬតាមរយៈ API ទិដ្ឋភាពបណ្ដាញរបស់វេទិកានោះ មិនត្រូវបានគាំទ្រយ៉ាងច្បាស់នោះទេ។ ទោះជាយ៉ាងណាក៏ដោយ Bootstrap គួរតែ (ក្នុងករណីភាគច្រើន) បង្ហាញ និងដំណើរការត្រឹមត្រូវនៅក្នុងកម្មវិធីរុករកទាំងនេះផងដែរ។ ព័ត៌មានជំនួយជាក់លាក់បន្ថែមត្រូវបានផ្តល់ជូនខាងក្រោម។

ឧបករណ៍ចល័ត

និយាយជាទូទៅ Bootstrap គាំទ្រកំណែចុងក្រោយបំផុតនៃកម្មវិធីរុករកលំនាំដើមរបស់វេទិកាសំខាន់ៗនីមួយៗ។ ចំណាំថាកម្មវិធីរុករកប្រូកស៊ី (ដូចជា Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) មិនត្រូវបានគាំទ្រទេ។

កម្មវិធីរុករកលើតុ

ស្រដៀងគ្នានេះដែរ កំណែចុងក្រោយបំផុតនៃកម្មវិធីរុករកលើតុភាគច្រើនត្រូវបានគាំទ្រ។

នៅលើ Windows យើងគាំទ្រ Internet Explorer 8-11 ។

សម្រាប់ Firefox បន្ថែមពីលើការចេញផ្សាយស្ថេរភាពធម្មតាចុងក្រោយបំផុត យើងក៏គាំទ្រ កំណែចុងក្រោយបង្អស់របស់ Firefox Extended Support Release (ESR) ផងដែរ។

ក្រៅផ្លូវការ Bootstrap គួរតែមើលទៅ និងមានឥរិយាបថគ្រប់គ្រាន់នៅក្នុង Chromium និង Chrome សម្រាប់ Linux, Firefox សម្រាប់ Linux និង Internet Explorer 7 ក៏ដូចជា Microsoft Edge ទោះបីជាពួកវាមិនត្រូវបានគាំទ្រជាផ្លូវការក៏ដោយ។

សម្រាប់បញ្ជីនៃកំហុសកម្មវិធីរុករកមួយចំនួនដែល Bootstrap ត្រូវដោះស្រាយ សូមមើល ជញ្ជាំងនៃកម្មវិធីរុករករបស់យើង កំហុស ។

Internet Explorer 8 និង 9

Internet Explorer 8 និង 9 ក៏ត្រូវបានគាំទ្រផងដែរ ទោះជាយ៉ាងណាក៏ដោយ សូមដឹងថាលក្ខណៈសម្បត្តិ CSS3 និងធាតុ HTML5 មួយចំនួនមិនត្រូវបានគាំទ្រទាំងស្រុងដោយកម្មវិធីរុករកទាំងនេះទេ។ លើសពីនេះ Internet Explorer 8 ទាមទារការប្រើប្រាស់ Respond.js ដើម្បីបើកការគាំទ្រសំណួរមេឌៀ។

សូមចូលទៅកាន់ Can I use... សម្រាប់ព័ត៌មានលម្អិតអំពីមុខងារ browser support របស់ CSS3 និង HTML5។

Internet Explorer 8 និង Respond.js

សូមប្រយ័ត្នចំពោះការព្រមានខាងក្រោមនៅពេលប្រើ Respond.js នៅក្នុងបរិយាកាសអភិវឌ្ឍន៍ និងផលិតកម្មរបស់អ្នកសម្រាប់ Internet Explorer 8។

Respond.js និង CSS ឆ្លងដែន

ការប្រើប្រាស់ Respond.js ជាមួយ CSS ដែលបង្ហោះនៅលើដែន (sub) ផ្សេងគ្នា (ឧទាហរណ៍ នៅលើ CDN) ទាមទារការដំឡើងបន្ថែមមួយចំនួន។ សូមមើលឯកសារ Respond.js សម្រាប់ព័ត៌មានលម្អិត។

Respond.js និងfile://

ដោយសារច្បាប់សុវត្ថិភាពរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត Respond.js មិនដំណើរការជាមួយទំព័រដែលបានមើលតាមរយៈ file://ពិធីការ (ដូចជាពេលបើកឯកសារ HTML ក្នុងស្រុក)។ ដើម្បីសាកល្បងមុខងារឆ្លើយតបនៅក្នុង IE8 សូមមើលទំព័ររបស់អ្នកតាមរយៈ HTTP(S)។ សូមមើលឯកសារ Respond.js សម្រាប់ព័ត៌មានលម្អិត។

Respond.js និង@import

Respond.js មិនដំណើរការជាមួយ CSS ដែលត្រូវបានយោងតាមរយៈ @import. ជាពិសេស ការកំណត់រចនាសម្ព័ន្ធ Drupal មួយចំនួនត្រូវបានគេដឹងថាប្រើ @import។ សូមមើលឯកសារ Respond.js សម្រាប់ព័ត៌មានលម្អិត។

Internet Explorer 8 និងទំហំប្រអប់

IE8 មិនគាំទ្រពេញលេញទេ box-sizing: border-box;នៅពេលរួមបញ្ចូលជាមួយ min-width, max-width, min-height, ឬ max-height. សម្រាប់ហេតុផលនោះ គិតត្រឹម v3.0.1 យើងលែងប្រើ max-widthនៅលើ .containers ។

Internet Explorer 8 និង @font-face

IE8 មានបញ្ហាមួយចំនួនជាមួយ @font-faceនៅពេលរួមបញ្ចូលជាមួយ :before. Bootstrap ប្រើការរួមបញ្ចូលគ្នាជាមួយ Glyphicons របស់វា។ ប្រសិនបើទំព័រមួយត្រូវបានទុកក្នុងឃ្លាំងសម្ងាត់ ហើយបានផ្ទុកដោយគ្មានកណ្ដុរលើបង្អួច (ឧ. ចុចប៊ូតុង ធ្វើឱ្យស្រស់ ឬផ្ទុកអ្វីមួយនៅក្នុង iframe) នោះទំព័រនឹងត្រូវបានបង្ហាញមុនពេលផ្ទុកពុម្ពអក្សរ។ ការ​ដាក់​លើ​ទំព័រ (តួ) នឹង​បង្ហាញ​រូប​តំណាង​មួយ​ចំនួន ហើយ​ការ​ដាក់​លើ​រូប​តំណាង​ដែល​នៅ​សល់​នឹង​បង្ហាញ​រូប​តំណាង​ទាំង​នោះ​ផង​ដែរ។ សូមមើលលេខ 13863 សម្រាប់ព័ត៌មានលម្អិត។

របៀបភាពឆបគ្នារបស់ IE

Bootstrap មិនត្រូវបានគាំទ្រនៅក្នុងរបៀបភាពឆបគ្នារបស់ Internet Explorer ចាស់ទេ។ ដើម្បីប្រាកដថាអ្នកកំពុងប្រើរបៀបបង្ហាញចុងក្រោយបំផុតសម្រាប់ IE សូមពិចារណារួមបញ្ចូល <meta>ស្លាកដែលសមរម្យនៅក្នុងទំព័ររបស់អ្នក៖

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

បញ្ជាក់របៀបឯកសារដោយបើកឧបករណ៍បំបាត់កំហុស៖ ចុច F12ហើយពិនិត្យមើល "របៀបឯកសារ" ។

ស្លាកនេះត្រូវបានរួមបញ្ចូលនៅក្នុងឯកសារ និងឧទាហរណ៍ទាំងអស់របស់ Bootstrap ដើម្បីធានាបាននូវការបង្ហាញដ៏ល្អបំផុតដែលអាចធ្វើទៅបាននៅក្នុងកំណែដែលគាំទ្រនីមួយៗនៃ Internet Explorer ។

សូមមើល សំណួរ StackOverflow នេះ សម្រាប់ព័ត៌មានបន្ថែម។

Internet Explorer 10 នៅក្នុង Windows 8 និង Windows Phone 8

Internet Explorer 10 មិនបែងចែក ទទឹងឧបករណ៍ ពី ទទឹងច្រកចូល ទេ ហើយដូច្នេះមិនអនុវត្តសំណួរមេឌៀនៅក្នុង CSS របស់ Bootstrap ឱ្យបានត្រឹមត្រូវទេ។ ជាធម្មតា អ្នកគ្រាន់តែបន្ថែមអត្ថបទខ្លីៗនៃ CSS ដើម្បីដោះស្រាយបញ្ហានេះ៖

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

ទោះជាយ៉ាងណាក៏ដោយ វាមិនដំណើរការសម្រាប់ឧបករណ៍ដែលដំណើរការ Windows Phone 8 កំណែចាស់ជាង Update 3 (aka GDR3) ព្រោះវាបណ្តាលឱ្យឧបករណ៍បែបនេះបង្ហាញទិដ្ឋភាពផ្ទៃតុភាគច្រើនជំនួសឱ្យទិដ្ឋភាព "ទូរស័ព្ទ" តូចចង្អៀត។ ដើម្បីដោះស្រាយបញ្ហានេះ អ្នកនឹងត្រូវ បញ្ចូល 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 ជាការបង្ហាញមួយ។

ការបង្គត់ភាគរយ Safari

ម៉ាស៊ីនបង្ហាញកំណែរបស់ Safari មុន v7.1 សម្រាប់ OS X និង Safari សម្រាប់ iOS v8.0 មានបញ្ហាខ្លះជាមួយចំនួនខ្ទង់ទសភាគដែលប្រើក្នុង .col-*-1ថ្នាក់ក្រឡាចត្រង្គរបស់យើង។ ដូច្នេះប្រសិនបើអ្នកមានជួរក្រឡាក្រឡាចត្រង្គចំនួន 12 អ្នកនឹងសម្គាល់ឃើញថាពួកវាមានខ្លីបើធៀបនឹងជួរជួរផ្សេងទៀតនៃជួរឈរ។ ក្រៅពីធ្វើបច្ចុប្បន្នភាព Safari/iOS អ្នកមានជម្រើសមួយចំនួនសម្រាប់ដំណោះស្រាយ៖

• បន្ថែម .pull-rightទៅជួរក្រឡាក្រឡាចត្រង្គចុងក្រោយរបស់អ្នក ដើម្បីទទួលបានការតម្រឹមរឹង-ស្តាំ
• កែប្រែភាគរយរបស់អ្នកដោយដៃដើម្បីទទួលបានការបង្គត់ដ៏ល្អឥតខ្ចោះសម្រាប់ Safari (ពិបាកជាងជម្រើសដំបូង)

ម៉ូឌុល របាររុករក និងក្តារចុចនិម្មិត

ហូរហៀរនិងរមូរ

ការ​គាំទ្រ​សម្រាប់ overflow: hidden​នៅ​លើ <body>​ធាតុ​គឺ​មាន​កម្រិត​ណាស់​នៅ​ក្នុង iOS និង Android ។ ដល់ទីបញ្ចប់នេះ នៅពេលអ្នករមូរឆ្លងកាត់ផ្នែកខាងលើ ឬខាងក្រោមនៃម៉ូឌុលនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់ឧបករណ៍ទាំងនោះ <body>ខ្លឹមសារនឹងចាប់ផ្តើមរមូរ។ សូមមើល កំហុសរបស់ Chrome #175502 (ជួសជុលនៅក្នុង Chrome v40) និង កំហុស WebKit #153852 ។

វាលអត្ថបទ iOS និងការរមូរ

ចាប់ពី iOS 9.3 ខណៈពេលដែលម៉ូឌុលមួយត្រូវបានបើក ប្រសិនបើការប៉ះដំបូងនៃកាយវិការរមូរស្ថិតនៅក្នុងព្រំដែននៃអត្ថបទ <input>ឬ a <textarea>នោះ <body>ខ្លឹមសារនៅក្រោមម៉ូឌុលនឹងត្រូវបានរមូរជំនួសឱ្យម៉ូឌុលខ្លួនឯង។ សូមមើល កំហុស WebKit #153856 ។

ក្តារចុចនិម្មិត

សូមចំណាំផងដែរថា ប្រសិនបើអ្នកកំពុងប្រើរបាររុករកថេរ ឬប្រើធាតុបញ្ចូលក្នុងម៉ូឌុល ប្រព័ន្ធប្រតិបត្តិការ iOS មានកំហុសក្នុងការបង្ហាញ ដែលមិនធ្វើបច្ចុប្បន្នភាពទីតាំងនៃធាតុថេរ នៅពេលដែលក្តារចុចនិម្មិតត្រូវបានកេះ។ ដំណោះស្រាយមួយចំនួនសម្រាប់បញ្ហានេះរួមមានការបំប្លែងធាតុរបស់អ្នកទៅជា position: absoluteឬហៅកម្មវិធីកំណត់ម៉ោងលើការផ្តោតអារម្មណ៍ ដើម្បីព្យាយាមកែតម្រូវទីតាំងដោយដៃ។ នេះមិនត្រូវបានគ្រប់គ្រងដោយ Bootstrap ទេ ដូច្នេះវាអាស្រ័យលើអ្នកក្នុងការសម្រេចចិត្តថាតើដំណោះស្រាយមួយណាដែលល្អបំផុតសម្រាប់កម្មវិធីរបស់អ្នក។

ទម្លាក់ចុះ Navbar

ធាតុ នេះ .dropdown-backdropមិនត្រូវបានប្រើនៅលើប្រព័ន្ធប្រតិបត្តិការ iOS នៅក្នុង nav ដោយសារតែភាពស្មុគស្មាញនៃការបង្កើតលិបិក្រម z ។ ដូច្នេះ ដើម្បី​បិទ dropdowns ក្នុង navbars អ្នក​ត្រូវ​តែ​ចុច​លើ dropdown element (ឬ ​ធាតុ​ផ្សេង​ទៀត​ដែល​នឹង​បញ្ឆេះ​ព្រឹត្តិការណ៍​ចុច​នៅ​ក្នុង iOS )។

ការពង្រីកកម្មវិធីរុករក

ការពង្រីកទំព័រដោយជៀសមិនរួចបង្ហាញពីការបង្ហាញវត្ថុបុរាណនៅក្នុងសមាសធាតុមួយចំនួន ទាំងនៅក្នុង Bootstrap និងផ្នែកផ្សេងទៀតនៃគេហទំព័រ។ អាស្រ័យលើបញ្ហា យើងអាចជួសជុលវាបាន (ស្វែងរកជាមុន ហើយបន្ទាប់មកបើកបញ្ហាប្រសិនបើចាំបាច់)។ ទោះជាយ៉ាងណាក៏ដោយ យើងមានទំនោរមិនអើពើនឹងបញ្ហាទាំងនេះ ដោយសារពួកគេច្រើនតែមិនមានដំណោះស្រាយផ្ទាល់ក្រៅពីការដោះស្រាយការលួចចូល។

ស្អិត :hover/ :focusនៅលើទូរស័ព្ទ

ទោះបីជាមិនអាចដាក់នៅលើអេក្រង់ថាច់ស្គ្រីនពិតប្រាកដក៏ដោយ ក៏កម្មវិធីរុករកតាមទូរស័ព្ទភាគច្រើនធ្វើត្រាប់តាមការគាំទ្រការសង្កត់ ហើយធ្វើឱ្យ :hover"ស្អិត"។ ម្យ៉ាងវិញទៀត :hoverរចនាប័ទ្មចាប់ផ្តើមអនុវត្តបន្ទាប់ពីប៉ះធាតុមួយ ហើយឈប់អនុវត្តបន្ទាប់ពីអ្នកប្រើប្រាស់ប៉ះធាតុផ្សេងទៀតមួយចំនួន។ នេះអាចបណ្តាលឱ្យរដ្ឋរបស់ Bootstrap :hoverក្លាយទៅជា "ជាប់គាំង" ដែលមិនចង់បាននៅលើកម្មវិធីរុករកបែបនេះ។ កម្មវិធីរុករកតាមទូរស័ព្ទមួយចំនួនក៏ធ្វើឱ្យ មានភាព :focusស្អិតដូចគ្នាដែរ។ បច្ចុប្បន្នមិនមានដំណោះស្រាយសាមញ្ញសម្រាប់បញ្ហាទាំងនេះក្រៅពីការលុបរចនាប័ទ្មបែបនេះទាំងស្រុងនោះទេ។

ការបោះពុម្ព

សូម្បីតែនៅក្នុងកម្មវិធីរុករកទំនើបមួយចំនួនក៏ដោយ ការបោះពុម្ពអាចមានលក្ខណៈប្លែក។

ជាពិសេស ចាប់តាំងពី Chrome v32 និងមិនគិតពីការកំណត់រឹម Chrome ប្រើទទឹងច្រកមើលដែលតូចជាងទំហំក្រដាសជាក់ស្តែង នៅពេលដោះស្រាយសំណួរមេឌៀ ខណៈពេលបោះពុម្ពគេហទំព័រ។ នេះអាចបណ្តាលឱ្យក្រឡាចត្រង្គតូចបន្ថែមរបស់ Bootstrap ត្រូវបានដំណើរការដោយមិនបានរំពឹងទុកនៅពេលបោះពុម្ព។ សូមមើលបញ្ហា #12078 និង កំហុស Chrome #273306 សម្រាប់ព័ត៌មានលម្អិតមួយចំនួន។ ដំណោះស្រាយដែលបានណែនាំ៖

• ចាប់យកក្រឡាចត្រង្គតូចបន្ថែម ហើយត្រូវប្រាកដថាទំព័ររបស់អ្នកមើលទៅអាចទទួលយកបាននៅក្រោមវា។
• ប្ដូរតាមបំណងតម្លៃនៃ @screen-*Less variables ដូច្នេះក្រដាសម៉ាស៊ីនបោះពុម្ពរបស់អ្នកត្រូវបានចាត់ទុកថាធំជាងតូចបន្ថែម។
• បន្ថែមសំណួរមេឌៀផ្ទាល់ខ្លួន ដើម្បីផ្លាស់ប្តូរចំណុចបំបែកទំហំក្រឡាចត្រង្គសម្រាប់តែមេឌៀបោះពុម្ពប៉ុណ្ណោះ។

ដូចគ្នាដែរ ចំពោះ Safari v8.0 ទទឹងថេរ .containers អាចបណ្តាលឱ្យ Safari ប្រើទំហំពុម្ពអក្សរតូចខុសពីធម្មតានៅពេលបោះពុម្ព។ សូមមើល #14868 និង កំហុស WebKit #138192 សម្រាប់ព័ត៌មានលម្អិត។ ដំណោះស្រាយសក្តានុពលមួយសម្រាប់ការនេះគឺការបន្ថែម CSS ខាងក្រោម៖

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

កម្មវិធីរុករកស្តុក Android

ក្រៅប្រអប់ ប្រព័ន្ធប្រតិបត្តិការ Android 4.1 (និងសូម្បីតែការចេញផ្សាយថ្មីជាងនេះជាក់ស្តែង) ដឹកជញ្ជូនជាមួយកម្មវិធី Browser ជាកម្មវិធីរុករកតាមអ៊ីនធឺណិតលំនាំដើមនៃជម្រើស (ផ្ទុយពី Chrome) ។ ជាអកុសល កម្មវិធី Browser មានកំហុសជាច្រើន និងភាពមិនស៊ីសង្វាក់គ្នាជាមួយ CSS ជាទូទៅ។

ជ្រើសរើសម៉ឺនុយ

នៅលើ <select>ធាតុ កម្មវិធីរុករកភាគហ៊ុន Android នឹងមិនបង្ហាញការគ្រប់គ្រងចំហៀង ប្រសិនបើមាន border-radiusនិង/ឬ borderត្រូវបានអនុវត្ត។ (សូមមើល សំណួរ StackOverflow នេះ សម្រាប់ព័ត៌មានលម្អិត។) ប្រើព័ត៌មានសង្ខេបនៃកូដខាងក្រោម ដើម្បីលុប CSS ដែលបំពាន ហើយបង្ហាញ<select> ជាធាតុដែលគ្មានរចនាប័ទ្មនៅលើកម្មវិធីរុករកតាមអ៊ីនធឺណិត Android ។ ការស្រូបភ្នាក់ងារអ្នកប្រើប្រាស់ជៀសវាងការជ្រៀតជ្រែកជាមួយកម្មវិធីរុករក 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 នេះ។

អ្នកផ្តល់សុពលភាព

ដើម្បីផ្តល់នូវបទពិសោធន៍ដ៏ល្អបំផុតដែលអាចធ្វើទៅបានដល់កម្មវិធីរុករកចាស់ៗ និងដែលមានកំហុស Bootstrap ប្រើ ការលួចចូលកម្មវិធីរុករកតាមអ៊ីនធឺណិត CSS នៅកន្លែងជាច្រើនដើម្បីកំណត់ CSS ពិសេសទៅកាន់កំណែកម្មវិធីរុករកតាមអ៊ីនធឺណិតមួយចំនួន ដើម្បីធ្វើការជុំវិញបញ្ហានៅក្នុងកម្មវិធីរុករកខ្លួនឯង។ ការលួចចូលទាំងនេះពិតជាធ្វើឱ្យអ្នកផ្ទៀងផ្ទាត់ CSS ត្អូញត្អែរថាពួកគេមិនត្រឹមត្រូវ។ នៅកន្លែងពីរបី យើងក៏ប្រើមុខងារ CSS ដែលមិនទាន់មានស្តង់ដារពេញលេញនៅឡើយ ប៉ុន្តែទាំងនេះត្រូវបានប្រើប្រាស់សុទ្ធសាធសម្រាប់ការធ្វើឱ្យប្រសើរឡើងជាលំដាប់។

ការព្រមានអំពីសុពលភាពទាំងនេះមិនមានបញ្ហាក្នុងការអនុវត្តទេ ដោយសារផ្នែកដែលមិន hacky នៃ CSS របស់យើងមានសុពលភាពពេញលេញ ហើយផ្នែកដែលលួចចូលមិនជ្រៀតជ្រែកជាមួយនឹងដំណើរការត្រឹមត្រូវនៃផ្នែកដែលមិន hacky ដូច្នេះហេតុអ្វីបានជាយើងមិនអើពើនឹងការព្រមានពិសេសទាំងនេះដោយចេតនា។

ឯកសារ HTML របស់យើងក៏មានការព្រមានអំពីសុពលភាព HTML ដែលមិនសំខាន់ និងមិនសមហេតុផល ដោយសារតែការរួមបញ្ចូលរបស់យើងនូវដំណោះស្រាយសម្រាប់ កំហុស Firefox ជាក់លាក់មួយ ។

ការគាំទ្រភាគីទីបី

ទោះបីជាយើងមិនគាំទ្រជាផ្លូវការនូវកម្មវិធីជំនួយភាគីទីបី ឬកម្មវិធីបន្ថែមណាមួយក៏ដោយ យើងផ្តល់ដំបូន្មានមានប្រយោជន៍មួយចំនួនដើម្បីជួយជៀសវាងបញ្ហាដែលអាចកើតមាននៅក្នុងគម្រោងរបស់អ្នក។

ទំហំប្រអប់

កម្មវិធីភាគីទីបីមួយចំនួន រួមទាំង Google Maps និង Google Custom Search Engine មានការប៉ះទង្គិចជាមួយ Bootstrap ដោយសារតែ * { box-sizing: border-box; }ច្បាប់ដែលធ្វើឱ្យវាដូច្នេះ paddingមិនប៉ះពាល់ដល់ទទឹងដែលបានគណនាចុងក្រោយនៃធាតុមួយ។ ស្វែងយល់បន្ថែមអំពី គំរូប្រអប់ និងទំហំនៅ CSS Tricks ។

អាស្រ័យលើបរិបទ អ្នកអាចបដិសេធតាមតម្រូវការ (ជម្រើសទី 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();
}

ភាពងាយស្រួល

Bootstrap អនុវត្តតាមស្តង់ដារគេហទំព័រទូទៅ ហើយ-ជាមួយនឹងការខិតខំប្រឹងប្រែងបន្ថែមតិចតួចបំផុត- អាចត្រូវបានប្រើដើម្បីបង្កើតគេហទំព័រដែលអាចចូលប្រើបានសម្រាប់អ្នកដែលប្រើ 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" bookmarklet សម្រាប់កំណត់បញ្ហាភាពងាយស្រួល
• ផ្នែកបន្ថែមឧបករណ៍អ្នកអភិវឌ្ឍន៍ភាពងាយស្រួលរបស់ Chrome
• ឧបករណ៍វិភាគកម្រិតពណ៌
• គម្រោង A11Y
• ឯកសារភាពងាយស្រួល MDN

សំណួរគេសួរញឹកញាប់អំពីអាជ្ញាប័ណ្ណ

Bootstrap ត្រូវបានចេញផ្សាយក្រោមអាជ្ញាប័ណ្ណ MIT និងរក្សាសិទ្ធិ 2019 Twitter ។ ដាំឱ្យពុះទៅជាកំណាត់តូចៗ វាអាចត្រូវបានពិពណ៌នាជាមួយនឹងលក្ខខណ្ឌដូចខាងក្រោម។

វាតម្រូវឱ្យអ្នក:

• រក្សាអាជ្ញាប័ណ្ណ និងការជូនដំណឹងអំពីការរក្សាសិទ្ធិរួមបញ្ចូលនៅក្នុងឯកសារ CSS និង JavaScript របស់ Bootstrap នៅពេលអ្នកប្រើពួកវានៅក្នុងការងាររបស់អ្នក។

វាអនុញ្ញាតឱ្យអ្នក:

• ទាញយក និងប្រើប្រាស់ Bootstrap ដោយសេរី ទាំងស្រុង ឬមួយផ្នែក សម្រាប់គោលបំណងផ្ទាល់ខ្លួន ឯកជន ផ្ទៃក្នុងក្រុមហ៊ុន ឬពាណិជ្ជកម្ម
• ប្រើ Bootstrap ក្នុងកញ្ចប់ ឬការចែកចាយដែលអ្នកបង្កើត
• កែប្រែកូដប្រភព
• ផ្តល់អាជ្ញាបណ្ណរងដើម្បីកែប្រែ និងចែកចាយ Bootstrap ដល់ភាគីទីបីដែលមិនត្រូវបានរាប់បញ្ចូលក្នុងអាជ្ញាប័ណ្ណ

វាហាមឃាត់អ្នកឱ្យ៖

• រក្សាអ្នកនិពន្ធ និងម្ចាស់អាជ្ញាបណ្ណទទួលខុសត្រូវចំពោះការខូចខាត ដោយសារ Bootstrap ត្រូវបានផ្តល់ជូនដោយគ្មានការធានា
• រក្សាអ្នកបង្កើត ឬអ្នករក្សាសិទ្ធិរបស់ Bootstrap ទទួលខុសត្រូវ
• ចែកចាយឡើងវិញនូវផ្នែកណាមួយនៃ Bootstrap ដោយមិនមានការបញ្ជាក់ត្រឹមត្រូវ។
• ប្រើសញ្ញាសម្គាល់ណាមួយដែលគ្រប់គ្រងដោយ Twitter ក្នុងមធ្យោបាយណាមួយដែលអាចបញ្ជាក់ ឬបញ្ជាក់ថា Twitter គាំទ្រការចែកចាយរបស់អ្នក។
• ប្រើសញ្ញាណាមួយដែលគ្រប់គ្រងដោយ Twitter ក្នុងមធ្យោបាយណាមួយដែលអាចបញ្ជាក់ ឬបញ្ជាក់ថាអ្នកបានបង្កើតកម្មវិធី Twitter ជាសំណួរ

វាមិនតម្រូវឱ្យអ្នក:

• រួមបញ្ចូលប្រភពនៃ Bootstrap ខ្លួនវាផ្ទាល់ ឬការកែប្រែណាមួយដែលអ្នកប្រហែលជាបានធ្វើចំពោះវា នៅក្នុងការចែកចាយឡើងវិញណាមួយ អ្នកអាចប្រមូលផ្តុំដែលរួមបញ្ចូលវា
• ដាក់ស្នើការផ្លាស់ប្តូរដែលអ្នកបានធ្វើចំពោះ Bootstrap ត្រឡប់ទៅគម្រោង Bootstrap (ទោះបីជាមតិកែលម្អបែបនេះត្រូវបានលើកទឹកចិត្តក៏ដោយ)

អាជ្ញាប័ណ្ណ Bootstrap ពេញលេញមានទីតាំង នៅក្នុងឃ្លាំងគម្រោង សម្រាប់ព័ត៌មានបន្ថែម។

ការបកប្រែ

សមាជិកសហគមន៍បានបកប្រែឯកសាររបស់ Bootstrap ជាភាសាផ្សេងៗ។ គ្មាន​នរណា​ម្នាក់​ត្រូវ​បាន​គាំទ្រ​ជា​ផ្លូវ​ការ​ទេ ហើយ​ពួក​វា​ប្រហែល​ជា​មិន​ទាន់​មាន​បច្ចុប្បន្នភាព​ជានិច្ច។

• Bootstrap 中文文档 (ភាសាចិន)
• Bootstrap នៅលើ Dansk (ដាណឺម៉ាក)
• Bootstrap en Français (ភាសាបារាំង)
• Bootstrap auf Deutsch (អាល្លឺម៉ង់)
• Bootstrap in Italiano (អ៊ីតាលី)
• Bootstrap 한국어 (កូរ៉េ)
• Bootstrap em Português do Brasil (ព័រទុយហ្គាល់ប្រេស៊ីល)
• Bootstrap по-русски (រុស្ស៊ី)
• Bootstrap en Español (អេស្ប៉ាញ)
• Türkçe Bootstrap (ទួរគី)
• Bootstrap українською (អ៊ុយក្រែន)
• Bootstrap bằng tiếng Việt (វៀតណាម)

យើងមិនជួយរៀបចំ ឬរៀបចំការបកប្រែទេ យើងគ្រាន់តែភ្ជាប់ទៅពួកគេ។

បានបញ្ចប់ការបកប្រែថ្មី ឬប្រសើរជាង? បើកសំណើទាញដើម្បីបន្ថែមវាទៅក្នុងបញ្ជីរបស់យើង។