ចាប់ផ្តើមជាមួយ Bootstrap

Bootstrap គឺជាកញ្ចប់ឧបករណ៍ផ្នែកខាងមុខដែលមានមុខងារដ៏មានឥទ្ធិពល។ បង្កើតអ្វីទាំងអស់ - ពីគំរូរហូតដល់ការផលិត - ក្នុងរយៈពេលប៉ុន្មាននាទី។

នៅលើទំព័រនេះ។

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

ចាប់ផ្តើមដោយរួមបញ្ចូល CSS និង JavaScript ដែលត្រៀមរួចជាស្រេចក្នុងការផលិតរបស់ Bootstrap តាមរយៈ CDN ដោយមិនចាំបាច់មានជំហានសាងសង់ណាមួយឡើយ។ សូមមើលវានៅក្នុងការអនុវត្តជាមួយការ បង្ហាញ Bootstrap CodePen នេះ ។

បង្កើត index.htmlឯកសារថ្មីនៅក្នុង root គម្រោងរបស់អ្នក។ រួមបញ្ចូល <meta name="viewport">ស្លាកផងដែរសម្រាប់ ឥរិយាបថឆ្លើយតបត្រឹមត្រូវ នៅក្នុងឧបករណ៍ចល័ត។
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

រួមបញ្ចូល CSS និង JS របស់ Bootstrap ។ ដាក់ <link>ស្លាកនៅក្នុង <head>CSS របស់យើង និង <script>ស្លាកសម្រាប់បាច់ JavaScript របស់យើង (រួមទាំង Popper សម្រាប់ការកំណត់ទីតាំងទម្លាក់ចុះ ផ្ទាំងលោត និងព័ត៌មានជំនួយ) មុនពេលបិទ </body>។ ស្វែងយល់បន្ថែមអំពី តំណ CDN របស់យើង ។

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

អ្នកក៏អាចរួមបញ្ចូល Popper និង JS របស់យើងដោយឡែកពីគ្នា។ ប្រសិនបើអ្នកមិនមានគម្រោងប្រើ dropdowns, popovers, or tooltips រក្សាទុកគីឡូបៃមួយចំនួនដោយមិនរាប់បញ្ចូល Popper។

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

សួស្តីពិភពលោក! បើកទំព័រនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់អ្នកដើម្បីមើលទំព័រ Bootstrapped របស់អ្នក។ ឥឡូវនេះ អ្នកអាចចាប់ផ្តើមបង្កើតជាមួយ Bootstrap ដោយបង្កើត ប្លង់ ផ្ទាល់ខ្លួនរបស់អ្នក បន្ថែម សមាសធាតុ រាប់សិប និងប្រើប្រាស់ ឧទាហរណ៍ផ្លូវការរបស់យើង ។

តំណភ្ជាប់ CDN

ជាឯកសារយោង នេះគឺជាតំណភ្ជាប់ CDN ចម្បងរបស់យើង។

ការពិពណ៌នា	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
ច.ស	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

អ្នកក៏អាចប្រើ CDN ដើម្បីទាញយកការស្ថាបនា បន្ថែមណាមួយរបស់យើងដែលបានរាយក្នុងទំព័រមាតិកា ។

ជំហានបន្ទាប់

សូមអានបន្ថែមអំពី ការកំណត់បរិស្ថានសកលសំខាន់ៗ មួយចំនួន ដែល Bootstrap ប្រើប្រាស់។
សូមអានអំពីអ្វីដែលរួមបញ្ចូលនៅក្នុង Bootstrap នៅក្នុង ផ្នែកមាតិកា របស់យើង និងបញ្ជីនៃ សមាសភាគដែលត្រូវការ JavaScript ខាងក្រោម។
ត្រូវការថាមពលបន្ថែមបន្តិច? ពិចារណាបង្កើត Bootstrap ដោយ បញ្ចូលឯកសារប្រភពតាមរយៈកម្មវិធីគ្រប់គ្រងកញ្ចប់ ។
ចង់ប្រើ Bootstrap ជាម៉ូឌុលជាមួយ <script type="module">? សូមយោងទៅលើ ការប្រើប្រាស់ Bootstrap របស់យើងជាផ្នែកម៉ូឌុល ។

សមាសធាតុ JS

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

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

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

សកលសំខាន់ៗ

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

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

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

ទំហំប្រអប់

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

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