Source

សេចក្តីផ្តើម

ចាប់ផ្តើមជាមួយ Bootstrap ដែលជាក្របខ័ណ្ឌដ៏ពេញនិយមបំផុតរបស់ពិភពលោកសម្រាប់ការកសាងគេហទំព័រដែលឆ្លើយតប គេហទំព័រទូរសព្ទដៃដំបូងជាមួយ jsDelivr និងទំព័រចាប់ផ្តើមគំរូ។

ការចាប់ផ្តើមរហ័ស

កំពុងរកមើលដើម្បីបន្ថែម Bootstrap យ៉ាងឆាប់រហ័សទៅគម្រោងរបស់អ្នក? ប្រើ jsDelivr ដែលផ្តល់ជូនដោយឥតគិតថ្លៃដោយមនុស្សនៅ jsDelivr ។ ប្រើកម្មវិធីគ្រប់គ្រងកញ្ចប់ ឬត្រូវការទាញយកឯកសារប្រភព? ទៅកាន់ទំព័រទាញយក ។

CSS

ចម្លង-បិទភ្ជាប់សន្លឹករចនាប័ទ្ម <link>ទៅក្នុងរបស់អ្នក <head>មុនសន្លឹករចនាប័ទ្មផ្សេងទៀតទាំងអស់ដើម្បីផ្ទុក CSS របស់យើង។

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

ច.ស

សមាសធាតុជាច្រើនរបស់យើងទាមទារការប្រើប្រាស់ JavaScript ដើម្បីដំណើរការ។ ជាពិសេស ពួកគេត្រូវការ jQuery , Popper.js និងកម្មវិធីជំនួយ JavaScript ផ្ទាល់របស់យើង។ ដាក់លេខខាងក្រោម <script>នៅជិតចុងបញ្ចប់នៃទំព័ររបស់អ្នក នៅពីមុខ </body>ស្លាកបិទ ដើម្បីបើកពួកវា។ jQuery ត្រូវតែមកមុន បន្ទាប់មក Popper.js ហើយបន្ទាប់មកកម្មវិធីជំនួយ JavaScript របស់យើង។

យើងប្រើ ការស្ថាបនាស្ដើងរបស់ jQuery ប៉ុន្តែកំណែពេញលេញក៏ត្រូវបានគាំទ្រផងដែរ។

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

ចង់ដឹងថាតើសមាសធាតុមួយណាដែលត្រូវការយ៉ាងច្បាស់លាស់ jQuery, JS របស់យើង និង Popper.js? ចុចលើតំណបង្ហាញសមាសធាតុខាងក្រោម។ ប្រសិនបើអ្នកមិនប្រាកដអំពីរចនាសម្ព័ន្ធទំព័រទូទៅទេ សូមបន្តអានគំរូទំព័រគំរូ។

របស់យើង bootstrap.bundle.jsនិង bootstrap.bundle.min.jsរួមបញ្ចូល Popper ប៉ុន្តែមិនមែន jQuery ទេ។ សម្រាប់ព័ត៌មានបន្ថែមអំពីអ្វីដែលរួមបញ្ចូលនៅក្នុង Bootstrap សូមមើល ផ្នែក មាតិកា របស់យើង ។

បង្ហាញសមាសធាតុដែលទាមទារ JavaScript

ការជូនដំណឹងសម្រាប់ការបដិសេធ
ប៊ូតុងសម្រាប់បិទ/បើកស្ថានភាព និងមុខងារប្រអប់ធីក/វិទ្យុ
Carousel សម្រាប់ឥរិយាបថស្លាយ ការគ្រប់គ្រង និងសូចនាករទាំងអស់។
បង្រួមសម្រាប់បិទបើកលទ្ធភាពមើលឃើញនៃមាតិកា
ទម្លាក់ចុះសម្រាប់ការបង្ហាញ និងទីតាំង (ក៏ទាមទារ Popper.js ផងដែរ )
ម៉ូឌុលសម្រាប់ការបង្ហាញ ទីតាំង និងឥរិយាបថរមូរ
Navbar សម្រាប់ពង្រីកកម្មវិធីជំនួយការដួលរលំរបស់យើង ដើម្បីអនុវត្តឥរិយាបថឆ្លើយតប
ព័ត៌មានជំនួយ និងការលេចឡើងសម្រាប់ការបង្ហាញ និងទីតាំង (ក៏ទាមទារ Popper.js ផងដែរ )
Scrollspy សម្រាប់ឥរិយាបថរមូរ និងបច្ចុប្បន្នភាពការរុករក

គំរូចាប់ផ្តើម

ត្រូវប្រាកដថាមានទំព័ររបស់អ្នករៀបចំជាមួយនឹងការរចនា និងស្តង់ដារអភិវឌ្ឍន៍ចុងក្រោយបំផុត។ នោះមានន័យថាការប្រើប្រាស់ឯកសារ HTML5 និងរួមទាំងស្លាកមេតានៃទិដ្ឋភាពច្រកសម្រាប់ឥរិយាបថឆ្លើយតបត្រឹមត្រូវ។ ដាក់វាទាំងអស់គ្នា ហើយទំព័ររបស់អ្នកគួរតែមើលទៅដូចនេះ៖

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

នោះហើយជាអ្វីដែលអ្នកត្រូវការសម្រាប់តម្រូវការទំព័រទាំងមូល។ សូមចូលមើល ឯកសារប្លង់ ឬ ឧទាហរណ៍ផ្លូវការរបស់យើង ដើម្បីចាប់ផ្តើមដាក់ចេញនូវខ្លឹមសារ និងសមាសធាតុនៃគេហទំព័ររបស់អ្នក។

សកលសំខាន់ៗ

Bootstrap ប្រើប្រាស់រចនាប័ទ្ម និងការកំណត់ជាសកលសំខាន់ៗមួយចំនួនដែលអ្នកនឹងត្រូវដឹងនៅពេលប្រើវា ដែលទាំងអស់នេះស្ទើរតែទាំងស្រុងឆ្ពោះទៅរកការធ្វើ ឱ្យមាន លក្ខណៈធម្មតា នៃរចនាប័ទ្មកម្មវិធីរុករកតាមអ៊ីនធឺណិត។ តោះចូលមុជ។

ប្រភេទឯកសារ HTML5

Bootstrap ទាមទារការប្រើប្រាស់ឯកសារ HTML5 ។ បើគ្មានវាទេ អ្នកនឹងឃើញរចនាប័ទ្មមិនពេញលេញដែលគួរឱ្យអស់សំណើច ប៉ុន្តែការរួមបញ្ចូលវាមិនគួរបង្កឱ្យមានការរំខានគួរឱ្យកត់សម្គាល់ណាមួយឡើយ។

<!doctype html>
<html lang="en">
  ...
</html>

ស្លាកមេតាដែលឆ្លើយតប

Bootstrap ត្រូវបានបង្កើត ទូរសព្ទដៃជាមុន សិន ដែលជាយុទ្ធសាស្ត្រមួយដែលយើងបង្កើនប្រសិទ្ធភាពកូដសម្រាប់ឧបករណ៍ចល័តជាមុនសិន ហើយបន្ទាប់មកពង្រីកសមាសភាគតាមការចាំបាច់ដោយប្រើសំណួរមេឌៀ CSS ។ ដើម្បីធានាបាននូវការបង្ហាញត្រឹមត្រូវ និងការពង្រីកដោយប៉ះសម្រាប់ឧបករណ៍ទាំងអស់ សូម បន្ថែមស្លាកមេតានៃច្រកមើលដែលឆ្លើយតប ទៅរបស់អ្នក <head>។

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

អ្នកអាចឃើញឧទាហរណ៍នៃសកម្មភាពនេះនៅក្នុង គំរូចាប់ផ្តើម ។

ទំហំប្រអប់

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

ក្នុងឱកាសដ៏កម្រដែលអ្នកត្រូវបដិសេធវា សូមប្រើអ្វីមួយដូចតទៅ៖

.selector-for-some-widget {
  box-sizing: content-box;
}

ជាមួយនឹងព័ត៌មានសង្ខេបខាងលើ ធាតុដែលបានដាក់ជាប់គ្នា—រួមទាំងខ្លឹមសារដែលបានបង្កើតតាមរយៈ ::beforeនិង ::after—នឹងទទួលមរតកនូវអ្វីដែលបានបញ្ជាក់ box-sizingសម្រាប់នោះ .selector-for-some-widget។

ស្វែងយល់បន្ថែមអំពី គំរូប្រអប់ និងទំហំនៅ CSS Tricks ។

ចាប់ផ្ដើមឡើងវិញ

សម្រាប់ការធ្វើឱ្យប្រសើរឡើងនូវការបង្ហាញឆ្លងកម្មវិធីរុករកតាមអ៊ីនធឺណិត យើងប្រើការ ចាប់ផ្ដើម ឡើងវិញដើម្បីកែតម្រូវការមិនស៊ីសង្វាក់គ្នានៅទូទាំងកម្មវិធីរុករកតាមអ៊ីនធឺណិត និងឧបករណ៍ ខណៈពេលដែលផ្ដល់ការកំណត់ឡើងវិញដែលយល់ឃើញបន្តិចបន្តួចទៅធាតុ HTML ធម្មតា។

សហគមន៍

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

តាម @getbootstrap នៅលើ Twitter ។
អាន និងជាវទៅកាន់ ប្លុក Bootstrap ផ្លូវការ ។
ជជែកជាមួយមិត្ត Bootstrappers ក្នុង IRC ។ នៅលើ irc.freenode.netម៉ាស៊ីនមេ នៅក្នុង ##bootstrapឆានែល។
ជំនួយក្នុងការអនុវត្តអាចត្រូវបានរកឃើញនៅ Stack Overflow (ដាក់ស្លាក bootstrap-4)។
អ្នកអភិវឌ្ឍន៍គួរតែប្រើពាក្យគន្លឹះ bootstrapនៅលើកញ្ចប់ដែលកែប្រែ ឬបន្ថែមមុខងាររបស់ Bootstrap នៅពេលចែកចាយតាមរយៈ npm ឬយន្តការចែកចាយស្រដៀងគ្នាសម្រាប់ការរកឃើញអតិបរមា។

អ្នកក៏អាចតាមដាន @getbootstrap នៅលើ Twitter សម្រាប់ការនិយាយដើម និងវីដេអូតន្ត្រីដ៏អស្ចារ្យបំផុត។