in English

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

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

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

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

CSS

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

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

ច.ស

សមាសធាតុជាច្រើនរបស់យើងទាមទារការប្រើប្រាស់ JavaScript ដើម្បីដំណើរការ។ ជាពិសេស ពួកគេត្រូវការ jQuery , Popper.js និងកម្មវិធីជំនួយ JavaScript ផ្ទាល់របស់យើង។ យើងប្រើ ការស្ថាបនាស្ដើងរបស់ jQuery ប៉ុន្តែកំណែពេញលេញក៏ត្រូវបានគាំទ្រផងដែរ។

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

បាច់

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

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

ដាច់ដោយឡែក

ប្រសិនបើអ្នកសម្រេចចិត្តទៅជាមួយដំណោះស្រាយស្គ្រីបដាច់ដោយឡែកនោះ Popper.js ត្រូវតែមកមុន ហើយបន្ទាប់មកកម្មវិធីជំនួយ JavaScript របស់យើង។

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

សមាសធាតុ

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

បង្ហាញសមាសធាតុដែលទាមទារ JavaScript
  • ការជូនដំណឹងសម្រាប់ការបដិសេធ
  • ប៊ូតុងសម្រាប់បិទ/បើកស្ថានភាព និងមុខងារប្រអប់ធីក/វិទ្យុ
  • Carousel សម្រាប់ឥរិយាបថស្លាយ ការគ្រប់គ្រង និងសូចនាករទាំងអស់។
  • បង្រួមសម្រាប់បិទបើកលទ្ធភាពមើលឃើញនៃមាតិកា
  • ទម្លាក់ចុះសម្រាប់ការបង្ហាញ និងទីតាំង (ក៏ទាមទារ Popper.js ផងដែរ )
  • ម៉ូឌុលសម្រាប់ការបង្ហាញ ទីតាំង និងឥរិយាបថរមូរ
  • Navbar សម្រាប់ពង្រីកកម្មវិធីជំនួយការដួលរលំរបស់យើង ដើម្បីអនុវត្តឥរិយាបថឆ្លើយតប
  • Toasts សម្រាប់បង្ហាញ និងច្រានចោល
  • ព័ត៌មានជំនួយ និងការលេចឡើងសម្រាប់ការបង្ហាញ និងទីតាំង (ក៏ទាមទារ 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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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 សម្រាប់ការនិយាយដើម និងវីដេអូតន្ត្រីដ៏អស្ចារ្យបំផុត។