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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

ច.ស

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

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 សម្រាប់វីដេអូចម្រៀងថ្មីៗ និងពិរោះៗផងដែរ។