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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

ច.ស

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

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

បាច់

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

ដាច់ដោយឡែក

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

សមាសធាតុ

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

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

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

ត្រូវប្រាកដថាមានទំព័ររបស់អ្នករៀបចំជាមួយនឹងការរចនា និងស្តង់ដារអភិវឌ្ឍន៍ចុងក្រោយបំផុត។ នោះមានន័យថាការប្រើប្រាស់ឯកសារ 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.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-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 និងទាក់ទងសហគមន៍ជាមួយនឹងធនធានដ៏មានប្រយោជន៍ទាំងនេះ។

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

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

CSPs និង SVGs ដែលបានបង្កប់

សមាសធាតុ Bootstrap ជាច្រើនរួមមាន SVGs ដែលបានបង្កប់នៅក្នុង CSS របស់យើង ដើម្បីធ្វើរចនាប័ទ្មសមាសធាតុឱ្យជាប់លាប់ និងងាយស្រួលឆ្លងកាត់កម្មវិធីរុករក និងឧបករណ៍។ សម្រាប់ស្ថាប័នដែលមាន ការកំណត់រចនាសម្ព័ន្ធ CSP កាន់តែតឹងរ៉ឹង យើងបានចងក្រងឯកសារគ្រប់ករណីនៃ SVGs ដែលបានបង្កប់របស់យើង (ដែលទាំងអស់ត្រូវបានអនុវត្តតាមរយៈ background-image) ដូច្នេះអ្នកអាចពិនិត្យមើលជម្រើសរបស់អ្នកឱ្យបានហ្មត់ចត់ជាងមុន។

ដោយផ្អែកលើ ការសន្ទនាសហគមន៍ ជម្រើសមួយចំនួនសម្រាប់ដោះស្រាយវានៅក្នុងមូលដ្ឋានកូដផ្ទាល់ខ្លួនរបស់អ្នក រួមមានការជំនួស URLs ជាមួយនឹងទ្រព្យសកម្មដែលបានបង្ហោះក្នុងមូលដ្ឋាន ការលុបរូបភាព និងការប្រើប្រាស់រូបភាពក្នុងជួរ (មិនអាចធ្វើទៅបាននៅក្នុងសមាសធាតុទាំងអស់) និងការកែប្រែ CSP របស់អ្នក។ អនុសាសន៍របស់យើងគឺពិនិត្យមើលដោយប្រុងប្រយ័ត្ននូវគោលការណ៍សុវត្ថិភាពផ្ទាល់ខ្លួនរបស់អ្នក ហើយសម្រេចចិត្តលើផ្លូវដ៏ល្អបំផុតឆ្ពោះទៅមុខ ប្រសិនបើចាំបាច់។