រំលងទៅមាតិកាសំខាន់
Check
ថ្មីនៅក្នុង v5.2 អថេរ CSS, offcanvas ឆ្លើយតប, ឧបករណ៍ប្រើប្រាស់ថ្មី និងច្រើនទៀត! Bootstrap

បង្កើត​គេហទំព័រ​ឆ្លើយតប​រហ័ស​ជាមួយ Bootstrap

កញ្ចប់ឧបករណ៍ផ្នែកខាងមុខដ៏មានអានុភាព ពង្រីកបាន និងមានលក្ខណៈពិសេស។ បង្កើត និងប្ដូរតាមបំណងជាមួយ Sass ប្រើប្រាស់ប្រព័ន្ធ និងសមាសធាតុក្រឡាចត្រង្គដែលបានសាងសង់រួចជាស្រេច ហើយនាំមកនូវគម្រោងជីវិតជាមួយនឹងកម្មវិធីជំនួយ JavaScript ដ៏មានឥទ្ធិពល។

npm i [email protected]
អានឯកសារ

បច្ចុប្បន្ន v5.2.1 · ទាញយក · v4.6.x docs · ការចេញផ្សាយទាំងអស់។

ចាប់ផ្តើមតាមវិធីដែលអ្នកចង់បាន

ចូលទៅកាន់ការកសាងជាមួយ Bootstrap - ប្រើ CDN ដំឡើងវាតាមរយៈកម្មវិធីគ្រប់គ្រងកញ្ចប់ ឬទាញយកកូដប្រភព។

អានឯកសារដំឡើង

ដំឡើងតាមរយៈកម្មវិធីគ្រប់គ្រងកញ្ចប់

ដំឡើងឯកសារ Sass និង JavaScript ប្រភពរបស់ Bootstrap តាមរយៈ npm, RubyGems, Composer ឬ Meteor ។ ការដំឡើងដែលគ្រប់គ្រងដោយកញ្ចប់មិនរួមបញ្ចូលឯកសារ ឬស្គ្រីបបង្កើតពេញលេញរបស់យើងទេ។ អ្នកក៏អាច ប្រើ npm template repo របស់យើង ដើម្បីបង្កើតគម្រោង Bootstrap យ៉ាងរហ័សតាមរយៈ npm។

npm install [email protected]
gem install bootstrap -v 5.2.1

សូមអានឯកសារដំឡើងរបស់យើង សម្រាប់ព័ត៌មានបន្ថែម និងអ្នកគ្រប់គ្រងកញ្ចប់បន្ថែម។

រួមបញ្ចូលតាមរយៈ CDN

នៅពេលអ្នកគ្រាន់តែបញ្ចូល CSS ឬ JS ដែលបានចងក្រងរបស់ Bootstrap អ្នកអាចប្រើ jsDelivr ។ មើលវានៅក្នុងសកម្មភាពជាមួយនឹង ការចាប់ផ្តើមរហ័ស សាមញ្ញរបស់យើង ឬ រកមើលឧទាហរណ៍ ដើម្បីលោតចាប់ផ្តើមគម្រោងបន្ទាប់របស់អ្នក។ អ្នកក៏អាចជ្រើសរើសបញ្ចូល Popper និង JS របស់យើង ដោយឡែកពីគ្នា ។

<!-- CSS only -->
<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">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

សូមអានការណែនាំអំពីការចាប់ផ្តើមរបស់យើង។

ទទួលបានការលោតឡើងរួមទាំងឯកសារប្រភពរបស់ Bootstrap នៅក្នុងគម្រោងថ្មីជាមួយនឹងការណែនាំផ្លូវការរបស់យើង។

Webpack កញ្ចប់ វីត

ប្ដូរអ្វីៗគ្រប់យ៉ាងតាម Sass

Bootstrap ប្រើប្រាស់ Sass សម្រាប់ស្ថាបត្យកម្មម៉ូឌុល និងអាចប្ដូរតាមបំណងបាន។ នាំចូលតែសមាសធាតុដែលអ្នកត្រូវការ បើកជម្រើសសកលដូចជា ជម្រាល និងស្រមោល ហើយសរសេរ CSS ផ្ទាល់ខ្លួនរបស់អ្នកជាមួយនឹងអថេរ ផែនទី មុខងារ និង mixins របស់យើង។

ស្វែងយល់បន្ថែមអំពីការប្ដូរតាមបំណង

រួមបញ្ចូល Sass របស់ Bootstrap ទាំងអស់។

នាំចូលសន្លឹករចនាប័ទ្មមួយ ហើយអ្នកបានទៅការប្រណាំងជាមួយនឹងលក្ខណៈពិសេសទាំងអស់នៃ CSS របស់យើង។

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

ស្វែងយល់បន្ថែមអំពី ជម្រើស Sass សកល របស់យើង ។

រួមបញ្ចូលអ្វីដែលអ្នកត្រូវការ

វិធីងាយស្រួលបំផុតដើម្បីប្ដូរ Bootstrap តាមបំណង - រួមបញ្ចូលតែ CSS ដែលអ្នកត្រូវការ។

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

ស្វែងយល់បន្ថែមអំពី ការប្រើប្រាស់ Bootstrap ជាមួយ Sass ។

បង្កើត និងពង្រីកក្នុងពេលវេលាជាក់ស្តែងជាមួយអថេរ CSS

Bootstrap 5 កំពុងវិវឌ្ឍជាមួយនឹងការចេញផ្សាយនីមួយៗ ដើម្បីប្រើប្រាស់អថេរ CSS ឱ្យកាន់តែប្រសើរឡើងសម្រាប់រចនាប័ទ្មប្រធានបទសកល ធាតុផ្សំនីមួយៗ និងសូម្បីតែឧបករណ៍ប្រើប្រាស់។ យើងផ្តល់អថេររាប់សិបសម្រាប់ពណ៌ រចនាប័ទ្មពុម្ពអក្សរ និងច្រើនទៀតនៅ :rootកម្រិតមួយសម្រាប់ប្រើប្រាស់គ្រប់ទីកន្លែង។ នៅលើសមាសធាតុ និងឧបករណ៍ប្រើប្រាស់ អថេរ CSS ត្រូវបានកំណត់ទៅថ្នាក់ពាក់ព័ន្ធ ហើយអាចកែប្រែបានយ៉ាងងាយស្រួល។

ស្វែងយល់បន្ថែមអំពីអថេរ CSS

ការប្រើប្រាស់អថេរ CSS

ប្រើ អថេរ សកល:root ណាមួយរបស់យើង ដើម្បីសរសេររចនាប័ទ្មថ្មី។ អថេរ CSS ប្រើ var(--bs-variableName)វាក្យសម្ព័ន្ធ ហើយអាចត្រូវបានទទួលមរតកដោយធាតុកុមារ។

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

ប្ដូរតាមបំណងតាមរយៈអថេរ CSS

បដិសេធអថេរថ្នាក់សកល សមាសភាគ ឬឧបករណ៍ប្រើប្រាស់ ដើម្បីប្ដូរ Bootstrap តាមដែលអ្នកចូលចិត្ត។ មិនចាំបាច់ប្រកាសច្បាប់នីមួយៗឡើងវិញទេ គ្រាន់តែតម្លៃអថេរថ្មី។

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
}

.table {
  --bs-table-color: var(--bs-gray-600);
  --bs-table-bg: var(--bs-gray-100);
  --bs-table-border-color: transparent;
}

សមាសភាគ បំពេញតាម Utility API

ថ្មីនៅក្នុង Bootstrap 5 ឧបករណ៍ប្រើប្រាស់របស់យើងឥឡូវនេះត្រូវបានបង្កើតឡើងដោយ Utility API របស់យើង ។ យើងបានសាងសង់វាជាផែនទី Sass ដែលមានលក្ខណៈពិសេស ដែលអាចប្ដូរតាមបំណងបានយ៉ាងរហ័ស និងងាយស្រួល។ វាមិនង��យស្រួលទេក្នុងការបន្ថែម ដកចេញ ឬកែប្រែថ្នាក់ឧបករណ៍ប្រើប្រាស់ណាមួយឡើយ។ ធ្វើឱ្យឧបករណ៍ប្រើប្រាស់ឆ្លើយតប បន្ថែមវ៉ារ្យ៉ង់ pseudo-class និងផ្តល់ឱ្យពួកគេនូវឈ្មោះផ្ទាល់ខ្លួន។

ស្វែងយល់បន្ថែមអំពីឧបករណ៍ប្រើប្រាស់ រុករកសមាសធាតុដែលបានប្ដូរតាមបំណង

កំណត់សមាសធាតុតាមបំណងយ៉ាងឆាប់រហ័ស
// Create and extend utilities with the Utility API

@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

កម្មវិធីជំនួយ JavaScript ដ៏មានអានុភាពដោយគ្មាន jQuery

ងាយស្រួលបន្ថែមធាតុលាក់ដែលអាចបិទបើកបាន ម៉ូឌុល និងម៉ឺនុយ offcanvas, popovers និងព័ត៌មានជំនួយ និងច្រើនទៀត - ទាំងអស់ដោយគ្មាន jQuery ។ JavaScript នៅក្នុង Bootstrap គឺជា HTML-first ដែលមានន័យថាការបន្ថែមកម្មវិធីជំនួយគឺងាយស្រួលដូចការបន្ថែម dataគុណលក្ខណៈដែរ។ ត្រូវការការគ្រប់គ្រងបន្ថែម? រួមបញ្ចូលកម្មវិធីជំនួយនីមួយៗតាមកម្មវិធី។

ស្វែងយល់បន្ថែមអំពី Bootstrap JavaScript

API គុណលក្ខណៈទិន្នន័យ

ហេតុអ្វីត្រូវសរសេរ JavaScript បន្ថែមពេលអ្នកអាចសរសេរ HTML? ស្ទើរតែទាំងអស់នៃកម្មវិធីជំនួយ JavaScript របស់ Bootstrap មានលក្ខណៈពិសេស API ទិន្នន័យថ្នាក់ទីមួយ ដែលអនុញ្ញាតឱ្យអ្នកប្រើ JavaScript ដោយគ្រាន់តែបន្ថែម dataគុណលក្ខណៈ។

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
    <li><a class="dropdown-item" href="#">Dropdown item</a></li>
  </ul>
</div>

ស្វែងយល់បន្ថែមអំពី JavaScript របស់យើងជាម៉ូឌុល និង ការប្រើប្រាស់ API កម្មវិធី ។

សំណុំកម្មវិធីជំនួយដ៏ទូលំទូលាយ

Bootstrap មានកម្មវិធីជំនួយរាប់សិបដែលអ្នកអាចទម្លាក់ទៅក្នុងគម្រោងណាមួយ។ ទម្លាក់ពួកវាទាំងអស់ក្នុងពេលតែមួយ ឬជ្រើសរើសតែអ្វីដែលអ្នកត្រូវការ។

ដាស់តឿន

បង្ហាញ និងលាក់សារដាស់តឿនដល់អ្នកប្រើប្រាស់របស់អ្នក។

ប៊ូតុង

កម្មវិធីគ្រប់គ្រងស្ថានភាពសកម្មសម្រាប់ប៊ូតុង។

វង់

បន្ថែមការបញ្ចាំងស្លាយទៅទំព័រណាមួយ រួមទាំងការគាំទ្រសម្រាប់ crossfade ។

ដួលរលំ

ពង្រីក និងបង្រួមតំបន់នៃមាតិកា ឬបង្កើត accordions ។

ទម្លាក់​ចុះ

បង្កើតម៉ឺនុយនៃតំណ សកម្មភាព ទម្រង់ និងច្រើនទៀត។

ម៉ូឌុល

បន្ថែមប្រអប់ដែលអាចបត់បែនបាន និងឆ្លើយតបទៅនឹងគម្រោងរបស់អ្នក។

ផ្ទាំងក្រណាត់

បង្កើត និងបិទបើករបារចំហៀងដែលលាក់ទៅក្នុងទំព័រណាមួយ។

Popover

បង្កើតការត្រួតលើគ្នាផ្ទាល់ខ្លួន។ បានសាងសង់នៅលើ Popper ។

រមូរ

ធ្វើបច្ចុប្បន្នភាពតំណភ្ជាប់ nav សកម្មដោយស្វ័យប្រវត្តិដោយផ្អែកលើការរមូរទំព័រ។

ផ្ទាំង

អនុញ្ញាតឱ្យសមាសធាតុ Bootstrap nav បិទបើកមាតិកា។

នំបុ័ង​អាំង

បង្ហាញ និងលាក់ការជូនដំណឹងដល់អ្នកទស្សនារបស់អ្នក។

ព័ត៌មានជំនួយ

ជំនួសព័ត៌មានជំនួយកម្មវិធីរុករកតាមអ៊ីនធឺណិតដោយប្រើព័ត៌មានជំនួយផ្ទាល់ខ្លួន។ បានសាងសង់នៅលើ Popper ។

ធ្វើបដិរូបកម្មវាដោយប្រើរូបតំណាង Bootstrap

Bootstrap Icons គឺជាបណ្ណាល័យរូបតំណាង SVG ប្រភពបើកចំហដែលមានជាង 1,500 glyphs ជាមួយនឹងការបន្ថែមបន្ថែមទៀតរាល់ការចេញផ្សាយ។ ពួកវាត្រូវបានរចនាឡើងដើម្បីធ្វើការនៅក្នុងគម្រោងណាមួយ មិនថាអ្នកប្រើ Bootstrap ខ្លួនឯងឬអត់នោះទេ។ ប្រើពួកវាជា SVGs ឬពុម្ពអក្សររូបតំណាង—ជម្រើសទាំងពីរផ្តល់ឱ្យអ្នកនូវទំហំវ៉ិចទ័រ និងការប្ដូរតាមបំណងយ៉ាងងាយស្រួលតាមរយៈ CSS ។

ទទួលបានរូបតំណាង Bootstrap

រូបតំណាង Bootstrap

Make it yours with official Bootstrap Themes

Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.

Browse Bootstrap Themes

ស្បែក Bootstrap