ការចាប់ផ្តើម
ទិដ្ឋភាពទូទៅនៃ Bootstrap របៀបទាញយក និងប្រើប្រាស់ គំរូមូលដ្ឋាន និងឧទាហរណ៍ និងច្រើនទៀត។
ទិដ្ឋភាពទូទៅនៃ Bootstrap របៀបទាញយក និងប្រើប្រាស់ គំរូមូលដ្ឋាន និងឧទាហរណ៍ និងច្រើនទៀត។
Bootstrap (បច្ចុប្បន្ន v3.3.7) មានវិធីងាយៗមួយចំនួនដើម្បីចាប់ផ្តើមយ៉ាងឆាប់រហ័ស ដែលនីមួយៗទាក់ទាញដល់កម្រិតជំនាញ និងករណីប្រើប្រាស់ផ្សេងៗគ្នា។ សូមអានដើម្បីមើលថាតើអ្វីដែលសាកសមនឹងតម្រូវការជាក់លាក់របស់អ្នក។
ចងក្រង និងបង្រួម CSS, JavaScript, និងពុម្ពអក្សរ។ គ្មានឯកសារ ឬឯកសារប្រភពដើមត្រូវបានរួមបញ្ចូលទេ។
ប្រភពតិច ឯកសារ JavaScript និងពុម្ពអក្សរ រួមជាមួយនឹងឯកសាររបស់យើង។ ទាមទារកម្មវិធីចងក្រងតិច និង ការដំឡើងមួយចំនួន។
Bootstrap ត្រូវបានបញ្ជូនពី Less ទៅ Sass ដើម្បីងាយស្រួលដាក់បញ្ចូលក្នុងគម្រោង Rails, Compass ឬ Sass-only។
មនុស្សនៅ jsDelivr ផ្តល់ការគាំទ្រ CDN សម្រាប់ CSS និង JavaScript របស់ Bootstrap ។ គ្រាន់តែប្រើ តំណភ្ជាប់ Bootstrap CDN ទាំងនេះ ។
អ្នកក៏អាចដំឡើង និងគ្រប់គ្រង Bootstrap's Less, CSS, JavaScript, និងfonts ដោយប្រើ Bower :
អ្នកក៏អាចដំឡើង Bootstrap ដោយប្រើ npm :
require('bootstrap')
នឹងផ្ទុកកម្មវិធីជំនួយ jQuery ទាំងអស់របស់ Bootstrap ទៅលើវត្ថុ jQuery ។ ម៉ូឌុល bootstrap
ខ្លួនវាមិននាំចេញអ្វីទេ។ អ្នកអាចផ្ទុកកម្មវិធីជំនួយ jQuery របស់ Bootstrap ដោយដៃដោយផ្ទុក /js/*.js
ឯកសារនៅក្រោមថតកម្រិតកំពូលរបស់កញ្ចប់។
Bootstrap package.json
មានផ្ទុកទិន្នន័យមេតាបន្ថែមមួយចំនួននៅក្រោមគ្រាប់ចុចខាងក្រោម៖
less
- ផ្លូវទៅកាន់ ឯកសារ ប្រភព សំខាន់របស់ Bootstrapstyle
- ផ្លូវទៅកាន់ CSS ដែលមិនត្រូវបានបង្រួមតូចរបស់ Bootstrap ដែលត្រូវបានចងក្រងជាមុនដោយប្រើការកំណត់លំនាំដើម (គ្មានការប្ដូរតាមបំណង)អ្នកក៏អាចដំឡើង និងគ្រប់គ្រង Bootstrap's Less, CSS, JavaScript និង fonts ដោយប្រើ Composer ៖
Bootstrap ប្រើ Autoprefixer ដើម្បីដោះស្រាយជាមួយ បុព្វបទអ្នកលក់ CSS ។ ប្រសិនបើអ្នកកំពុងចងក្រង Bootstrap ពីប្រភព Less/Sass របស់វា ហើយមិនប្រើ Gruntfile របស់យើងទេ អ្នកនឹងត្រូវបញ្ចូល Autoprefixer ទៅក្នុងដំណើរការបង្កើតរបស់អ្នកដោយខ្លួនឯង។ ប្រសិនបើអ្នកកំពុងប្រើ Bootstrap ដែលបានចងក្រងជាមុន ឬប្រើ Gruntfile របស់យើង អ្នកមិនចាំបាច់ព្រួយបារម្ភអំពីបញ្ហានេះទេ ព្រោះ Autoprefixer ត្រូវបានបញ្ចូលទៅក្នុង Gruntfile របស់យើង។
Bootstrap អាចទាញយកបានក្នុងទម្រង់ពីរ ដែលក្នុងនោះអ្នកនឹងរកឃើញថតឯកសារ និងឯកសារខាងក្រោម ដោយដាក់ជាក្រុមដោយឡូជីខលនៃធនធានទូទៅ និងផ្តល់ទាំងបំរែបំរួលដែលបានចងក្រង និងបង្រួមតូច។
សូមចំណាំថា កម្មវិធីជំនួយ JavaScript ទាំងអស់តម្រូវឱ្យបញ្ចូល jQuery ដូចដែលបានបង្ហាញនៅក្នុង គំរូចាប់ផ្តើម ។ ពិគ្រោះជាមួយពួកយើងbower.json
ដើម្បីមើលថាតើ jQuery កំណែណាដែលត្រូវបានគាំទ្រ។
នៅពេលទាញយករួច ពន្លាថតឯកសារដែលបានបង្ហាប់ ដើម្បីមើលរចនាសម្ព័ន្ធរបស់ Bootstrap (ដែលបានចងក្រង)។ អ្នកនឹងឃើញអ្វីមួយដូចនេះ៖
នេះគឺជាទម្រង់មូលដ្ឋានបំផុតនៃ Bootstrap៖ ឯកសារដែលបានចងក្រងជាមុនសម្រាប់ការប្រើប្រាស់ទម្លាក់ចុះរហ័សនៅក្នុងគម្រោងបណ្ដាញស្ទើរតែទាំងអស់។ យើងផ្តល់ CSS និង JS ( bootstrap.*
) ដែលបានចងក្រង ព្រមទាំង CSS និង JS ( bootstrap.min.*
) ដែលបានចងក្រង និងបង្រួមតូច។ ផែនទីប្រភព CSS ( bootstrap.*.map
) មានសម្រាប់ប្រើជាមួយឧបករណ៍អ្នកអភិវឌ្ឍន៍មួយចំនួនរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត។ ពុម្ពអក្សរពី Glyphicons ត្រូវបានរួមបញ្ចូល ក៏ដូចជាប្រធានបទ Bootstrap ស្រេចចិត្ត។
ការទាញយកកូដប្រភព Bootstrap រួមមាន CSS, JavaScript, និងទ្រព្យសម្បត្តិពុម្ពអក្សរដែលបានចងក្រងជាមុន រួមជាមួយនឹងប្រភព Less, JavaScript និងឯកសារ។ ពិសេសជាងនេះទៅទៀត វារួមបញ្ចូលដូចខាងក្រោម និងច្រើនទៀត៖
នេះ less/
, js/
និង fonts/
ជាកូដប្រភពសម្រាប់ពុម្ពអក្សរ CSS, JS និងរូបតំណាងរបស់យើង (រៀងគ្នា)។ ថត dist/
រួមបញ្ចូលអ្វីគ្រប់យ៉ាងដែលបានរាយក្នុងផ្នែកទាញយកដែលបានចងក្រងជាមុនខាងលើ។ docs/
ថតរួមមានកូដប្រភពសម្រាប់ឯកសាររបស់យើង និង ការប្រើប្រាស់ examples/
Bootstrap ។ លើសពីនេះ ឯកសារដែលរួមបញ្ចូលផ្សេងទៀតផ្តល់នូវការគាំទ្រសម្រាប់កញ្ចប់ព័ត៌មានអាជ្ញាប័ណ្ណ និងការអភិវឌ្ឍន៍។
Bootstrap ប្រើ Grunt សម្រាប់ប្រព័ន្ធសាងសង់របស់វា ជាមួយនឹងវិធីសាស្រ្តងាយស្រួលសម្រាប់ធ្វើការជាមួយក្របខ័ណ្ឌ។ វាជារបៀបដែលយើងចងក្រងកូដរបស់យើង ដំណើរការតេស្ត និងច្រើនទៀត។
ដើម្បីដំឡើង Grunt ដំបូង អ្នកត្រូវតែ ទាញយក និងដំឡើង node.js (ដែលរួមបញ្ចូល npm) ។ npm តំណាងឱ្យ node packed modules និងជាវិធីមួយដើម្បីគ្រប់គ្រង develop dependencies តាមរយៈ node.js។
បន្ទាប់មកពីបន្ទាត់ពាក្យបញ្ជា៖grunt-cli
ជាសកលជាមួយ npm install -g grunt-cli
./bootstrap/
ថត root បន្ទាប់មកដំណើរការ npm install
។ npm នឹងមើល package.json
ឯកសារ ហើយដំឡើងដោយស្វ័យប្រវត្តិនូវភាពអាស្រ័យមូលដ្ឋានចាំបាច់ដែលបានរាយបញ្ជីនៅទីនោះ។នៅពេលបញ្ចប់ អ្នកនឹងអាចដំណើរការពាក្យបញ្ជា 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 ប្រឆាំងនឹងឯកសារ បង្កើតទ្រព្យសកម្មរបស់អ្នកប្ដូរតាមបំណង និងអ្វីៗជាច្រើនទៀត។ ទាមទារ Jekyll ។ ជាធម្មតាចាំបាច់តែប្រសិនបើអ្នកកំពុងលួចចូល Bootstrap ខ្លួនឯង។
ប្រសិនបើអ្នកជួបប្រទះបញ្ហាក្នុងការដំឡើងភាពអាស្រ័យ ឬដំណើរការពាក្យបញ្ជា Grunt ដំបូងត្រូវលុប /node_modules/
ថតដែលបង្កើតដោយ npm។ បន្ទាប់មក ដំណើរការឡើងវិញ npm install
។
ចាប់ផ្តើមជាមួយគំរូ HTML មូលដ្ឋាននេះ ឬកែប្រែ ឧទាហរណ៍ទាំងនេះ ។ យើងសង្ឃឹមថាអ្នកនឹងកែប្រែគំរូ និងគំរូរបស់យើងតាមបំណង ដោយសម្របពួកវាឱ្យសមនឹងតម្រូវការរបស់អ្នក។
ចម្លង HTML ខាងក្រោមដើម្បីចាប់ផ្តើមធ្វើការជាមួយឯកសារ Bootstrap តិចតួចបំផុត។
បង្កើតនៅលើគំរូមូលដ្ឋានខាងលើជាមួយនឹងសមាសធាតុជាច្រើនរបស់ Bootstrap ។ យើងលើកទឹកចិត្តអ្នកឱ្យប្ដូរតាមបំណង និងកែសម្រួល Bootstrap ដើម្បីបំពេញតម្រូវការគម្រោងនីមួយៗរបស់អ្នក។
ទទួលបានកូដប្រភពសម្រាប់រាល់ឧទាហរណ៍ខាងក្រោមដោយ ទាញយកឃ្លាំង Bootstrap ។ ឧទាហរណ៍អាចរកបាននៅក្នុង docs/examples/
ថត។
Bootlint គឺជាឧបករណ៍ ផ្ទុកឯកសារ HTML ផ្លូវការរបស់ Bootstrap។ វាពិនិត្យដោយស្វ័យប្រវត្តិនូវកំហុស HTML ទូទៅមួយចំនួននៅក្នុងគេហទំព័រដែលកំពុងប្រើ Bootstrap តាមរបៀប "vanilla" ។ សមាសធាតុ/ធាតុក្រាហ្វិករបស់ Vanilla Bootstrap ទាមទារផ្នែករបស់ពួកគេនៃ DOM ដើម្បីអនុលោមតាមរចនាសម្ព័ន្ធជាក់លាក់។ Bootlint ពិនិត្យមើលថាឧទាហរណ៍នៃសមាសធាតុ Bootstrap មាន HTML ដែលមានរចនាសម្ព័ន្ធត្រឹមត្រូវ។ ពិចារណាបន្ថែម Bootlint ទៅក្នុងខ្សែសង្វាក់ឧបករណ៍អភិវឌ្ឍន៍គេហទំព័រ Bootstrap របស់អ្នក ដើម្បីកុំឱ្យកំហុសទូទៅណាមួយធ្វើឱ្យការអភិវឌ្ឍន៍គម្រោងរបស់អ្នកយឺតយ៉ាវឡើយ។
ទទួលបានព័ត៌មានថ្មីៗអំពីការអភិវឌ្ឍន៍ Bootstrap និងទាក់ទងសហគមន៍ជាមួយនឹងធនធានដ៏មានប្រយោជន៍ទាំងនេះ។
irc.freenode.net
server ក្នុង ##bootstrap channel ។twitter-bootstrap-3
។bootstrap
នៅលើកញ្ចប់ដែលកែប្រែ ឬបន្ថែមមុខងាររបស់ Bootstrap នៅពេលចែកចាយតាមរយៈ npm ឬយន្តការចែកចាយស្រដៀងគ្នាសម្រាប់ការរកឃើញអតិបរមា។អ្នកក៏អាចតាមដាន @getbootstrap នៅលើ Twitter សម្រាប់ការនិយាយដើម និងវីដេអូតន្ត្រីដ៏អស្ចារ្យបំផុត។
Bootstrap សម្របទំព័ររបស់អ្នកដោយស្វ័យប្រវត្តិសម្រាប់ទំហំអេក្រង់ផ្សេងៗ។ នេះជារបៀបបិទមុខងារនេះ ដើម្បីឱ្យទំព័ររបស់អ្នកដំណើរការដូច ឧទាហរណ៍ដែលមិនឆ្លើយតបនេះ ។
<meta>
ដែលបានរៀបរាប់នៅក្នុង ឯកសារ CSSwidth
លើ .container
ក្រឡាចត្រង្គសម្រាប់ក្រឡាចត្រង្គនីមួយៗដែលមានទទឹងតែមួយ ឧទាហរណ៍ width: 970px !important;
ត្រូវប្រាកដថាវាមកបន្ទាប់ពី Bootstrap CSS លំនាំដើម។ អ្នកអាចជៀសវាងជាជម្រើស !important
ជាមួយនឹងសំណួរមេឌៀ ឬជម្រើសមួយចំនួន។.col-xs-*
ថ្នាក់បន្ថែមលើ ឬជំនួស មធ្យម/ធំ។ កុំបារម្ភ ឧបករណ៍តូចបន្ថែមក្រឡាចត្រង្គធ្វើមាត្រដ្ឋានទៅគ្រប់ដំណោះស្រាយទាំងអស់។អ្នកនឹងនៅតែត្រូវការ Respond.js សម្រាប់ IE8 (ចាប់តាំងពីសំណួរប្រព័ន្ធផ្សព្វផ្សាយរបស់យើងនៅតែមាន ហើយត្រូវការដំណើរការ)។ វាបិទទិដ្ឋភាព "គេហទំព័រចល័ត" នៃ Bootstrap ។
យើងបានអនុវត្តជំហានទាំងនេះទៅជាឧទាហរណ៍មួយ។ អានកូដប្រភពរបស់វា ដើម្បីមើលការផ្លាស់ប្តូរជាក់លាក់ដែលបានអនុវត្ត។
កំពុងរកមើលដើម្បីផ្លាស់ប្តូរពីកំណែចាស់របស់ Bootstrap ទៅ v3.x? សូមពិនិត្យមើល ការណែនាំអំពីការធ្វើចំណាកស្រុករបស់យើង ។
Bootstrap ត្រូវបានបង្កើតឡើងដើម្បីដំណើរការបានល្អបំផុតនៅក្នុងកម្មវិធីរុករកតាមកុំព្យូទ័រ និងឧបករណ៍ចល័តចុងក្រោយបំផុត មានន័យថាកម្មវិធីរុករកចាស់ៗអាចបង្ហាញរចនាប័ទ្មខុសគ្នា ទោះបីជាមានមុខងារពេញលេញក៏ដោយ ការបង្ហាញនៃសមាសធាតុមួយចំនួន។
ជាពិសេស យើងគាំទ្រ កំណែចុងក្រោយបំផុត នៃកម្មវិធីរុករក និងវេទិកាខាងក្រោម។
កម្មវិធីរុករកជំនួសដែលប្រើកំណែចុងក្រោយបំផុតរបស់ WebKit, Blink ឬ Gecko មិនថាដោយផ្ទាល់ ឬតាមរយៈ API ទិដ្ឋភាពបណ្ដាញរបស់វេទិកានោះ មិនត្រូវបានគាំទ្រយ៉ាងច្បាស់នោះទេ។ ទោះជាយ៉ាងណាក៏ដោយ Bootstrap គួរតែ (ក្នុងករណីភាគច្រើន) បង្ហាញ និងដំណើរការត្រឹមត្រូវនៅក្នុងកម្មវិធីរុករកទាំងនេះផងដែរ។ ព័ត៌មានជំនួយជាក់លាក់បន្ថែមត្រូវបានផ្តល់ជូនខាងក្រោម។
និយាយជាទូទៅ Bootstrap គាំទ្រកំណែចុងក្រោយបំផុតនៃកម្មវិធីរុករកលំនាំដើមរបស់វេទិកាសំខាន់ៗនីមួយៗ។ ចំណាំថាកម្មវិធីរុករកប្រូកស៊ី (ដូចជា Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) មិនត្រូវបានគាំទ្រទេ។
Chrome | Firefox | សាហ្វារី | |
---|---|---|---|
ប្រព័ន្ធប្រតិបត្តិការ Android | គាំទ្រ | គាំទ្រ | គ្មាន |
ប្រព័ន្ធប្រតិបត្តិការ iOS | គាំទ្រ | គាំទ្រ | គាំទ្រ |
ស្រដៀងគ្នានេះដែរ កំណែចុងក្រោយបំផុតនៃកម្មវិធីរុករកលើតុភាគច្រើនត្រូវបានគាំទ្រ។
Chrome | Firefox | Internet Explorer | ល្ខោនអូប៉េរ៉ា | សាហ្វារី | |
---|---|---|---|---|---|
ម៉ាក់ | គាំទ្រ | គាំទ្រ | គ្មាន | គាំទ្រ | គាំទ្រ |
វីនដូ | គាំទ្រ | គាំទ្រ | គាំទ្រ | គាំទ្រ | មិនគាំទ្រ |
នៅលើ 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 ក៏ត្រូវបានគាំទ្រផងដែរ ទោះជាយ៉ាងណាក៏ដោយ សូមដឹងថាលក្ខណៈសម្បត្តិ CSS3 និងធាតុ HTML5 មួយចំនួនមិនត្រូវបានគាំទ្រទាំងស្រុងដោយកម្មវិធីរុករកទាំងនេះទេ។ លើសពីនេះ Internet Explorer 8 ទាមទារការប្រើប្រាស់ Respond.js ដើម្បីបើកការគាំទ្រសំណួរមេឌៀ។
លក្ខណៈ | Internet Explorer ៨ | Internet Explorer ៩ |
---|---|---|
border-radius |
មិនគាំទ្រ | គាំទ្រ |
box-shadow |
មិនគាំទ្រ | គាំទ្រ |
transform |
មិនគាំទ្រ | គាំទ្រ ដោយមាន -ms បុព្វបទ |
transition |
មិនគាំទ្រ | |
placeholder |
មិនគាំទ្រ |
សូមចូលទៅកាន់ Can I use... សម្រាប់ព័ត៌មានលម្អិតអំពីមុខងារ browser support របស់ CSS3 និង HTML5។
សូមប្រយ័ត្នចំពោះការព្រមានខាងក្រោមនៅពេលប្រើ Respond.js នៅក្នុងបរិយាកាសអភិវឌ្ឍន៍ និងផលិតកម្មរបស់អ្នកសម្រាប់ Internet Explorer 8។
ការប្រើប្រាស់ Respond.js ជាមួយ CSS ដែលបង្ហោះនៅលើដែន (sub) ផ្សេងគ្នា (ឧទាហរណ៍ នៅលើ CDN) ទាមទារការដំឡើងបន្ថែមមួយចំនួន។ សូមមើលឯកសារ Respond.js សម្រាប់ព័ត៌មានលម្អិត។
file://
ដោយសារច្បាប់សុវត្ថិភាពរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត Respond.js មិនដំណើរការជាមួយទំព័រដែលបានមើលតាមរយៈ file://
ពិធីការ (ដូចជាពេលបើកឯកសារ HTML ក្នុងស្រុក)។ ដើម្បីសាកល្បងមុខងារឆ្លើយតបនៅក្នុង IE8 សូមមើលទំព័ររបស់អ្នកតាមរយៈ HTTP(S)។ សូមមើលឯកសារ Respond.js សម្រាប់ព័ត៌មានលម្អិត។
@import
Respond.js មិនដំណើរការជាមួយ CSS ដែលត្រូវបានយោងតាមរយៈ @import
. ជាពិសេស ការកំណត់រចនាសម្ព័ន្ធ Drupal មួយចំនួនត្រូវបានគេដឹងថាប្រើ @import
។ សូមមើលឯកសារ Respond.js សម្រាប់ព័ត៌មានលម្អិត។
IE8 មិនគាំទ្រពេញលេញទេ box-sizing: border-box;
នៅពេលរួមបញ្ចូលជាមួយ min-width
, max-width
, min-height
, ឬ max-height
. សម្រាប់ហេតុផលនោះ គិតត្រឹម v3.0.1 យើងលែងប្រើ max-width
នៅលើ .container
s.
IE8 មានបញ្ហាមួយចំនួនជាមួយ @font-face
នៅពេលរួមបញ្ចូលជាមួយ :before
. Bootstrap ប្រើការរួមបញ្ចូលគ្នាជាមួយ Glyphicons របស់វា។ ប្រសិនបើទំព័រមួយត្រូវបានទុកក្នុងឃ្លាំងសម្ងាត់ ហើយបានផ្ទុកដោយគ្មានកណ្ដុរលើបង្អួច (ឧ. ចុចប៊ូតុង ធ្វើឱ្យស្រស់ ឬផ្ទុកអ្វីមួយនៅក្នុង iframe) នោះទំព័រនឹងត្រូវបានបង្ហាញមុនពេលផ្ទុកពុម្ពអក្សរ។ ការដាក់លើទំព័រ (តួ) នឹងបង្ហាញរូបតំណាងមួយចំនួន ហើយការដាក់លើរូបតំណាងដែលនៅសល់នឹងបង្ហាញរូបតំណាងទាំងនោះផងដែរ។ សូមមើលលេខ 13863 សម្រាប់ព័ត៌មានលម្អិត។
Bootstrap មិនត្រូវបានគាំទ្រនៅក្នុងរបៀបភាពឆបគ្នារបស់ Internet Explorer ចាស់ទេ។ ដើម្បីប្រាកដថាអ្នកកំពុងប្រើរបៀបបង្ហាញចុងក្រោយបំផុតសម្រាប់ IE សូមពិចារណារួមបញ្ចូល <meta>
ស្លាកដែលសមរម្យនៅក្នុងទំព័ររបស់អ្នក៖
បញ្ជាក់របៀបឯកសារដោយបើកឧបករណ៍បំបាត់កំហុស៖ ចុច F12ហើយពិនិត្យមើល "របៀបឯកសារ" ។
ស្លាកនេះត្រូវបានរួមបញ្ចូលនៅក្នុងឯកសារ និងឧទាហរណ៍ទាំងអស់របស់ Bootstrap ដើម្បីធានាបាននូវការបង្ហាញដ៏ល្អបំផុតដែលអាចធ្វើទៅបាននៅក្នុងកំណែដែលគាំទ្រនីមួយៗនៃ Internet Explorer ។
សូមមើល សំណួរ StackOverflow នេះ សម្រាប់ព័ត៌មានបន្ថែម។
Internet Explorer 10 មិនខុសគ្នាទេ។ ទទឹងឧបករណ៍ ពី ទទឹងច្រកចូល ទេ ហើយដូច្នេះមិនអនុវត្តសំណួរមេឌៀនៅក្នុង CSS របស់ Bootstrap ឱ្យបានត្រឹមត្រូវទេ។ ជាធម្មតា អ្នកគ្រាន់តែបន្ថែមអត្ថបទខ្លីៗនៃ CSS ដើម្បីដោះស្រាយបញ្ហានេះ៖
ទោះជាយ៉ាងណាក៏ដោយ វាមិនដំណើរការសម្រាប់ឧបករណ៍ដែលដំណើរការ Windows Phone 8 កំណែចាស់ជាង Update 3 (aka GDR3) ព្រោះវាបណ្តាលឱ្យឧបករណ៍បែបនេះបង្ហាញទិដ្ឋភាពផ្ទៃតុភាគច្រើនជំនួសឱ្យទិដ្ឋភាព "ទូរស័ព្ទ" តូចចង្អៀត។ ដើម្បីដោះស្រាយបញ្ហានេះ អ្នកនឹងត្រូវ បញ្ចូល CSS និង JavaScript ខាងក្រោម ដើម្បីដោះស្រាយបញ្ហានេះ។ ។
សម្រាប់ព័ត៌មានបន្ថែម និងការណែនាំអំពីការប្រើប្រាស់ សូមអាន Windows Phone 8 និង Device-Width ។
ជាបឋម យើងរួមបញ្ចូលវានៅក្នុងឯកសារ និងឧទាហរណ៍ទាំងអស់របស់ Bootstrap ជាការបង្ហាញមួយ។
ម៉ាស៊ីនបង្ហាញកំណែរបស់ Safari មុន v7.1 សម្រាប់ OS X និង Safari សម្រាប់ iOS v8.0 មានបញ្ហាខ្លះជាមួយចំនួនខ្ទង់ទសភាគដែលប្រើក្នុង .col-*-1
ថ្នាក់ក្រឡាចត្រង្គរបស់យើង។ ដូច្នេះ ប្រសិនបើអ្នកមានជួរក្រឡាក្រឡាចត្រង្គចំនួន 12 អ្នកនឹងសម្គាល់ឃើញថាពួកវាមានខ្លីបើធៀបនឹងជួរជួរផ្សេងទៀតនៃជួរឈរ។ ក្រៅពីធ្វើបច្ចុប្បន្នភាព Safari/iOS អ្នកមានជម្រើសមួយចំនួនសម្រាប់ដំណោះស្រាយ៖
.pull-right
ទៅជួរក្រឡាក្រឡាចត្រង្គចុងក្រោយរបស់អ្នក ដើម្បីទទួលបានការតម្រឹមរឹង-ស្ដាំការគាំទ្រសម្រាប់ overflow: hidden
នៅលើ <body>
ធាតុគឺមានកម្រិតណាស់នៅក្នុង iOS និង Android ។ ដល់ទីបញ្ចប់នេះ នៅពេលអ្នករមូរឆ្លងកាត់ផ្នែកខាងលើ ឬខាងក្រោមនៃម៉ូឌុលនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់ឧបករណ៍ទាំងនោះ <body>
ខ្លឹមសារនឹងចាប់ផ្តើមរមូរ។ សូមមើល កំហុសរបស់ Chrome #175502 (ជួសជុលនៅក្នុង Chrome v40) និង កំហុស WebKit #153852 ។
ចាប់ពី iOS 9.3 ខណៈពេលដែលម៉ូឌុលមួយត្រូវបានបើក ប្រសិនបើការប៉ះដំបូងនៃកាយវិការរមូរស្ថិតនៅក្នុងព្រំដែននៃអត្ថបទ <input>
ឬ a <textarea>
នោះ <body>
ខ្លឹមសារនៅក្រោមម៉ូឌុលនឹងត្រូវបានរមូរជំនួសឱ្យម៉ូឌុលខ្លួនឯង។ សូមមើល កំហុស WebKit #153856 ។
សូមចំណាំផងដែរថា ប្រសិនបើអ្នកកំពុងប្រើរបាររុករកថេរ ឬប្រើធាតុបញ្ចូលក្នុងម៉ូឌុល ប្រព័ន្ធប្រតិបត្តិការ iOS មានកំហុសក្នុងការបង្ហាញ ដែលមិនធ្វើបច្ចុប្បន្នភាពទីតាំងនៃធាតុថេរ នៅពេលដែលក្តារចុចនិម្មិតត្រូវបានកេះ។ ដំណោះស្រាយមួយចំនួនសម្រាប់បញ្ហានេះរួមមានការបំប្លែងធាតុរបស់អ្នកទៅជា position: absolute
ឬហៅកម្មវិធីកំណត់ម៉ោងលើការផ្តោតអារម្មណ៍ ដើម្បីព្យាយាមកែតម្រូវទីតាំងដោយដៃ។ នេះមិនត្រូវបានគ្រប់គ្រងដោយ Bootstrap ទេ ដូច្នេះវាអាស្រ័យលើអ្នកក្នុងការសម្រេចចិត្តថាតើដំណោះស្រាយមួយណាដែលល្អបំផុតសម្រាប់កម្មវិធីរបស់អ្នក។
ធាតុ នេះ .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 ទទឹងថេរ .container
s អាចបណ្តាលឱ្យ Safari ប្រើទំហំពុម្ពអក្សរតូចខុសពីធម្មតានៅពេលបោះពុម្ព។ សូមមើល #14868 និង កំហុស WebKit #138192 សម្រាប់ព័ត៌មានលម្អិត។ ដំណោះស្រាយសក្តានុពលមួយសម្រាប់ការនេះគឺការបន្ថែម CSS ខាងក្រោម៖
ក្រៅប្រអប់ ប្រព័ន្ធប្រតិបត្តិការ Android 4.1 (និងសូម្បីតែការចេញផ្សាយថ្មីជាងនេះជាក់ស្តែង) ដឹកជញ្ជូនជាមួយកម្មវិធី Browser ជាកម្មវិធីរុករកតាមអ៊ីនធឺណិតលំនាំដើមនៃជម្រើស (ផ្ទុយពី Chrome) ។ ជាអកុសល កម្មវិធី Browser មានកំហុសជាច្រើន និងភាពមិនស៊ីសង្វាក់គ្នាជាមួយ CSS ជាទូទៅ។
នៅលើ <select>
ធាតុ កម្មវិធីរុករកភាគហ៊ុន Android នឹងមិនបង្ហាញការគ្រប់គ្រងចំហៀង ប្រសិនបើមាន border-radius
និង/ឬ border
ត្រូវបានអនុវត្ត។ (សូមមើល សំណួរ StackOverflow នេះ សម្រាប់ព័ត៌មានលម្អិត។) ប្រើព័ត៌មានខ្លីៗនៃកូដខាងក្រោមដើម្បីលុប CSS ដែលបំពាន ហើយបង្ហាញ <select>
ជាធាតុដែលគ្មានរចនាប័ទ្មនៅលើកម្មវិធីរុករកតាមអ៊ីនធឺណិត Android ។ ការស្រូបភ្នាក់ងារអ្នកប្រើប្រាស់ជៀសវាងការជ្រៀតជ្រែកជាមួយកម្មវិធីរុករក Chrome, Safari និង Mozilla ។
ចង់មើលឧទាហរណ៍ទេ? សូមពិនិត្យមើលការបង្ហាញ 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)។
Bootstrap អនុវត្តតាមស្តង់ដារគេហទំព័រទូទៅ ហើយ — ជាមួយការខិតខំប្រឹងប្រែងបន្ថែមតិចតួចបំផុត—អាចត្រូវបានប្រើដើម្បីបង្កើតគេហទំព័រដែលអាចចូលប្រើបានសម្រាប់អ្នកដែលប្រើ AT ។
ប្រសិនបើការរុករករបស់អ្នកមានតំណភ្ជាប់ជាច្រើន ហើយមកមុនខ្លឹមសារសំខាន់នៅក្នុង DOM សូមបន្ថែម Skip to main content
តំណមួយមុនពេលការរុករក (សម្រាប់ការពន្យល់សាមញ្ញ សូមមើល អត្ថបទគម្រោង A11Y នេះនៅលើរំលងតំណរុករក )។ ការប្រើ .sr-only
ថ្នាក់នឹងលាក់តំណរំលងដោយមើលឃើញ ហើយ .sr-only-focusable
ថ្នាក់នឹងធានាថាតំណនឹងអាចមើលឃើញនៅពេលផ្តោតអារម្មណ៍ (សម្រាប់អ្នកប្រើប្រាស់ក្តារចុចដែលមើលឃើញ)។
ដោយសារការខ្វះខាត/កំហុសដែលមានរយៈពេលយូរនៅក្នុង Chrome (សូមមើល បញ្ហា 262171 នៅក្នុងកម្មវិធីតាមដានកំហុស Chromium ) និង Internet Explorer (សូមមើលអត្ថបទនេះនៅលើ តំណភ្ជាប់ក្នុងទំព័រ និងលំដាប់ផ្តោត ) អ្នកនឹងត្រូវប្រាកដថាគោលដៅនៃតំណរំលងរបស់អ្នក យ៉ាងហោចណាស់អាចផ្តោតតាមកម្មវិធីដោយការបន្ថែមtabindex="-1"
.
លើសពីនេះ អ្នកប្រហែលជាចង់បង្រ្កាបយ៉ាងច្បាស់នូវការបង្ហាញការផ្តោតអារម្មណ៍ដែលអាចមើលឃើញនៅលើគោលដៅ (ជាពិសេសនៅពេលបច្ចុប្បន្ន Chrome ក៏កំណត់ការផ្តោតទៅលើធាតុ tabindex="-1"
នៅពេលដែលពួកគេត្រូវបានចុចដោយប្រើកណ្តុរ) ជាមួយ #content:focus { outline: none; }
.
សូមចំណាំថា កំហុសនេះក៏នឹងប៉ះពាល់ដល់តំណភ្ជាប់ក្នុងទំព័រផ្សេងទៀតដែលគេហទំព័ររបស់អ្នកអាចនឹងកំពុងប្រើ ដែលធ្វើឱ្យវាគ្មានប្រយោជន៍សម្រាប់អ្នកប្រើប្រាស់ក្តារចុច។ អ្នកអាចពិចារណាបន្ថែមការកែតម្រូវចន្លោះឈប់ស្រដៀងគ្នាទៅនឹងឧបករណ៍សម្គាល់យុថ្កា/បំណែកដែលមានឈ្មោះផ្សេងទៀត ដែលដើរតួជាគោលដៅនៃតំណភ្ជាប់។
នៅពេលដាក់ចំណងជើង ( <h1>
- <h6>
) បឋមកថាឯកសារចម្បងរបស់អ្នកគួរតែជា <h1>
. ចំណងជើងបន្តបន្ទាប់គួរតែប្រើឡូជីខលនៃ <h2>
-<h6>
ដូចជាអ្នកអានអេក្រង់អាចបង្កើតតារាងមាតិកាសម្រាប់ទំព័ររបស់អ្នក។
ស្វែងយល់បន្ថែមនៅ HTML CodeSniffer និង Penn State's AccessAbility ។
បច្ចុប្បន្ន បន្សំពណ៌លំនាំដើមមួយចំនួនដែលមាននៅក្នុង Bootstrap (ដូចជាប្រភេទ ប៊ូតុងដែលមានរចនាប័ទ្ម ផ្សេងៗ ពណ៌បន្លិចកូដមួយចំនួនដែលប្រើសម្រាប់ ប្លុកកូដមូលដ្ឋាន ថ្នាក់ ជំនួយ .bg-primary
ផ្ទៃខាងក្រោយបរិបទ និងពណ៌តំណលំនាំដើមនៅពេលប្រើនៅលើផ្ទៃខាងក្រោយពណ៌ស) មានសមាមាត្រកម្រិតពណ៌ទាប (ក្រោម សមាមាត្រដែលបានណែនាំ 4.5: 1 ) ។ វាអាចបង្កបញ្ហាដល់អ្នកប្រើប្រាស់ដែលមានចក្ខុវិស័យទាប ឬខ្វាក់ពណ៌។ ពណ៌លំនាំដើមទាំងនេះអាចនឹងត្រូវកែប្រែ ដើម្បីបង្កើនកម្រិតពណ៌ និងភាពងាយស្រួលរបស់វា។
Bootstrap ត្រូវបានចេញផ្សាយក្រោមអាជ្ញាប័ណ្ណ MIT និងត្រូវបានរក្សាសិទ្ធិ 2016 Twitter ។ ដាំឱ្យពុះទៅជាកំណាត់តូចៗ វាអាចត្រូវបានពិពណ៌នាជាមួយនឹងលក្ខខណ្ឌដូចខាងក្រោម។
អាជ្ញាប័ណ្ណ Bootstrap ពេញលេញមានទីតាំង នៅក្នុងឃ្លាំងគម្រោង សម្រាប់ព័ត៌មានបន្ថែម។
សមាជិកសហគមន៍បានបកប្រែឯកសាររបស់ Bootstrap ទៅជាភាសាផ្សេងៗ។ គ្មាននរណាម្នាក់ត្រូវបានគាំទ្រជាផ្លូវការទេ ហើយពួកវាប្រហែលជាមិនទាន់មានបច្ចុប្បន្នភាពជានិច្ច។
យើងមិនជួយរៀបចំ ឬរៀបចំការបកប្រែទេ យើងគ្រាន់តែភ្ជាប់ទៅពួកគេ។
បានបញ្ចប់ការបកប្រែថ្មី ឬប្រសើរជាង? បើកសំណើទាញដើម្បីបន្ថែមវាទៅក្នុងបញ្ជីរបស់យើង។