CSS ပြောင်းလဲမှုများ၊ တုံ့ပြန်မှုရှိသော offcanvas၊ အသုံးဝင်မှုအသစ်များနှင့် အခြားအရာများ။

Bootstrap ဖြင့် မြန်ဆန်ပြီး တုံ့ပြန်နိုင်သော ဝဘ်ဆိုက်များကို တည်ဆောက်ပါ။

အစွမ်းထက်၊ တိုးချဲ့နိုင်သော၊ နှင့် အင်္ဂါရပ်များပါရှိသော ရှေ့တန်းကိရိယာအစုံ။ Sass ဖြင့် တည်ဆောက်ပြီး စိတ်ကြိုက်ပြင်ဆင်ပါ၊ ကြိုတင်တည်ဆောက်ထားသော ဂရစ်စနစ်နှင့် အစိတ်အပိုင်းများကို အသုံးပြုကာ အစွမ်းထက် JavaScript ပလပ်အင်များဖြင့် ပရောဂျက်များကို အသက်ဝင်စေပါသည်။

npm i [email protected]

စာရွက်စာတမ်းများကိုဖတ်ပါ။

လောလောဆယ် v5.2.1 · ဒေါင်းလုဒ် · v4.6.x docs · ထုတ်ဝေမှုအားလုံး

သင်အလိုရှိသည့်အတိုင်း စတင်လိုက်ပါ။

Bootstrap ဖြင့် တည်ဆောက်ခြင်းသို့ ခုန်ဆင်းပါ— CDN ကိုသုံးပါ၊ ၎င်းကို ပက်ကေ့ဂျ်မန်နေဂျာမှတစ်ဆင့် ထည့်သွင်းပါ သို့မဟုတ် အရင်းအမြစ်ကုဒ်ကို ဒေါင်းလုဒ်လုပ်ပါ။

တပ်ဆင်မှုစာရွက်စာတမ်းများကိုဖတ်ပါ။

ပက်ကေ့ဂျ်မန်နေဂျာမှတစ်ဆင့် ထည့်သွင်းပါ။

npm၊ RubyGems၊ Composer သို့မဟုတ် Meteor မှတစ်ဆင့် Bootstrap ၏အရင်းအမြစ် Sass နှင့် JavaScript ဖိုင်များကို ထည့်သွင်းပါ။ စီမံထည့်သွင်းထားသော ပက်ကေ့ဂျ်များတွင် စာရွက်စာတမ်း သို့မဟုတ် ကျွန်ုပ်တို့၏ တည်ဆောက်မှု script အပြည့်အစုံ မပါဝင်ပါ။ npm မှတစ်ဆင့် Bootstrap ပရောဂျက်တစ်ခုကို လျင်မြန်စွာထုတ်လုပ်ရန် ကျွန်ုပ်တို့၏ npm နမူနာပုံစံ repo ကိုလည်း အသုံးပြုနိုင်ပါသည်။

npm install [email protected]

gem install bootstrap -v 5.2.1

နောက်ထပ်အချက်အလက်များနှင့် နောက်ထပ်ပက်ကေ့ဂျ်မန်နေဂျာများအတွက် ကျွန်ုပ်တို့၏ထည့်သွင်းခြင်းစာရွက်စာတမ်းများကို ဖတ်ပါ ။

CDN မှတဆင့်ထည့်သွင်းပါ။

Bootstrap ၏ compiled CSS သို့မဟုတ် JS ကိုသာ ထည့်သွင်းရန်လိုအပ်သောအခါ၊ သင်သည် 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 သည် Modular နှင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်သော ဗိသုကာတစ်ခုအတွက် Sass ကို အသုံးပြုသည်။ သင်လိုအပ်သော အစိတ်အပိုင်းများကိုသာ တင်သွင်းပါ၊ gradients နှင့် shadows များကဲ့သို့ ကမ္ဘာလုံးဆိုင်ရာ ရွေးချယ်မှုများကို ဖွင့်ပြီး ကျွန်ုပ်တို့၏ variables၊ maps၊ functions နှင့် mixins တို့နှင့်အတူ သင့်ကိုယ်ပိုင် CSS ကို ရေးသားပါ။

စိတ်ကြိုက်ပြင်ဆင်ခြင်းအကြောင်း ပိုမိုလေ့လာပါ။

Bootstrap ၏ Sass အားလုံးကို ထည့်သွင်းပါ။

စတိုင်စာရွက်တစ်ခုကို တင်သွင်းပြီး ကျွန်ုပ်တို့၏ 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";

Sass ဖြင့် Bootstrap အသုံးပြုခြင်း အကြောင်း ပိုမိုလေ့လာပါ ။

CSS variable များဖြင့် အချိန်နှင့်တပြေးညီ တည်ဆောက်ပြီး တိုးချဲ့ပါ။

ကမ္ဘာလုံးဆိုင်ရာအခင်းအကျင်းစတိုင်များ၊ အစိတ်အပိုင်းတစ်ခုချင်းစီနှင့် အသုံးဝင်မှုများပင်လျှင် CSS variables များကို ပိုမိုကောင်းမွန်စွာအသုံးပြုနိုင်ရန် Bootstrap 5 သည် ထုတ်ဝေမှုတစ်ခုစီနှင့်အတူ ပြောင်းလဲနေသည်။ :rootကျွန်ုပ်တို့သည် မည်သည့်နေရာတွင်မဆို အသုံးပြုရန်အတွက် အဆင့် တစ်ခုတွင် အရောင်များ၊ ဖောင့်စတိုင်များနှင့် အခြားအရာများအတွက် ကိန်းရှင်များစွာကို ပံ့ပိုး ပေးပါသည်။ အစိတ်အပိုင်းများနှင့် အသုံးအဆောင်များတွင် CSS variable များကို သက်ဆိုင်ရာ class တွင် ကန့်သတ်ထားပြီး အလွယ်တကူ ပြင်ဆင်နိုင်သည်။

CSS ကိန်းရှင်များအကြောင်း ပိုမိုလေ့လာပါ။

CSS variable များကိုအသုံးပြုခြင်း။

ပုံစံအသစ်များရေးရန် ကျွန်ုပ်တို့၏ ကမ္ဘာလုံးဆိုင်ရာ :rootကိန်းရှင်များ ကို အသုံးပြု ပါ။ CSS variable များသည် var(--bs-variableName)syntax ကိုအသုံးပြုပြီး ကလေးဒြပ်စင်များဖြင့် အမွေဆက်ခံနိုင်ပါသည်။

.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 variable များမှတစ်ဆင့် စိတ်ကြိုက်ပြင်ဆင်ခြင်း။

Bootstrap ကို သင်နှစ်သက်သလို စိတ်ကြိုက်ပြင်ဆင်ရန် global၊ အစိတ်အပိုင်း သို့မဟုတ် utility class variable များကို အစားထိုးပါ။ စည်းမျဉ်းတစ်ခုစီကို ပြန်လည်ကြေငြာရန်မလိုအပ်ပါ၊ ကိန်းရှင်တန်ဖိုးအသစ်တစ်ခုသာဖြစ်သည်။

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 မြေပုံတစ်ခုအဖြစ် ဖန်တီးထားပါသည်။ မည်သည့် utility classes များကိုမဆို ထည့်ရန်၊ ဖယ်ရှားရန် သို့မဟုတ် ပြင်ဆင်ရန် လွယ်ကူသည်မဟုတ်ပေ။ အသုံးအဆောင်များကို တုံ့ပြန်မှုပြုလုပ်ပါ၊ 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,
    )
  )
);

jQuery မပါဘဲ အစွမ်းထက်သော JavaScript ပလပ်အင်များ

ပြောင်းလဲနိုင်သော လျှို့ဝှက်ဒြပ်စင်များ၊ modals များနှင့် offcanvas မီနူးများ၊ popovers နှင့် tooltips နှင့် jQuery မပါဘဲ အခြားအရာများစွာကို အလွယ်တကူထည့်ပါ။ dataBootstrap ရှိ JavaScript သည် HTML ပထမဖြစ်ပြီး၊ ဆိုလိုသည်မှာ plugins များထည့် ခြင်းသည် attribute များ ထည့်ခြင်းကဲ့သို့လွယ်ကူသည် ။ ထိန်းချုပ်မှု ပိုလိုပါသလား။ ပရိုဂရမ်တစ်ခုစီတွင် ပလပ်အင်များကို ထည့်သွင်းပါ။

Bootstrap JavaScript အကြောင်းပိုမိုလေ့လာပါ။

ဒေတာ attribute API

HTML ရေးနိုင်တဲ့အခါ ဘာကြောင့် JavaScript ပိုရေးတာလဲ။ dataBootstrap ၏ JavaScript ပလပ်အင်များ အားလုံးနီးပါးတွင် attribute များ ထည့်ရုံဖြင့် JavaScript ကိုအသုံးပြုရန် ပထမတန်းစားဒေတာ API ပါရှိသည်။

<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 ကို module များအဖြစ် နှင့် programmatic API ကိုအသုံးပြုခြင်း အကြောင်းပိုမိုလေ့လာပါ ။

ပြည့်စုံသော ပလပ်အင်များ

Bootstrap သည် မည်သည့်ပရောဂျက်သို့မဆို သင်ချနိုင်သော ပလပ်အင်များ ဒါဇင်ပါရှိသည်။ ၎င်းတို့အားလုံးကို တစ်ပြိုင်နက်တည်း ချပေးပါ၊ သို့မဟုတ် သင်လိုအပ်သည့်အရာများကိုသာ ရွေးချယ်ပါ။

Bootstrap Icons များဖြင့် စိတ်ကြိုက်ပြင်ဆင်ပါ။

Bootstrap Icons သည် ထုတ်ဝေမှုတိုင်းတွင် ထပ်လောင်းထည့်သွင်းထားသော 1,500 glyphs ကျော်ပါဝင်သည့် open source SVG icon စာကြည့်တိုက်တစ်ခုဖြစ်သည်။ သင် Bootstrap ကိုယ်တိုင်သုံးသည်ဖြစ်စေ မသုံးသည်ဖြစ်စေ မည်သည့်ပရောဂျက်တွင်မဆို အလုပ်လုပ်ရန် ဒီဇိုင်းထုတ်ထားသည်။ ၎င်းတို့ကို SVGs သို့မဟုတ် အိုင်ကွန်ဖောင့်များအဖြစ် အသုံးပြုပါ—ရွေးချယ်မှုများ နှစ်ခုစလုံးသည် သင့်အား CSS မှတစ်ဆင့် vector scaling နှင့် လွယ်ကူသော စိတ်ကြိုက်ပြင်ဆင်ခြင်းကို ပေးပါသည်။

Bootstrap အိုင်ကွန်များကို ရယူပါ။

တရားဝင် Bootstrap Themes ဖြင့် ၎င်းကို သင့်အတွက် ပြုလုပ်ပါ။

တရားဝင် Bootstrap Themes စျေးကွက် မှ ပရီမီယံအခင်းအကျင်းများဖြင့် နောက်တစ်ဆင့်သို့ Bootstrap ကို ယူပါ ။ Themes များကို ၎င်းတို့၏ ကိုယ်ပိုင် တိုးချဲ့ဘောင်များအဖြစ် Bootstrap ပေါ်တွင် တည်ဆောက်ထားပြီး၊ အစိတ်အပိုင်းအသစ်များနှင့် ပလပ်အင်များ၊ စာရွက်စာတမ်းများနှင့် အစွမ်းထက်သော တည်ဆောက်ရေးကိရိယာများ ကြွယ်ဝသည်။

Bootstrap Themes ကိုကြည့်ပါ။

Bootstrap ဖြင့် မြန်ဆန်ပြီး တုံ့ပြန်နိုင်သော ဝဘ်ဆိုက်များကို တည်ဆောက်ပါ။

သင်အလိုရှိသည့်အတိုင်း စတင်လိုက်ပါ။

ပက်ကေ့ဂျ်မန်နေဂျာမှတစ်ဆင့် ထည့်သွင်းပါ။

CDN မှတဆင့်ထည့်သွင်းပါ။

ကျွန်ုပ်တို့၏ စတင်ခြင်းလမ်းညွှန်များကို ဖတ်ပါ။

Sass ဖြင့် အရာအားလုံးကို စိတ်ကြိုက်လုပ်ပါ။

Bootstrap ၏ Sass အားလုံးကို ထည့်သွင်းပါ။

သင်လိုအပ်သောအရာကိုထည့်သွင်းပါ။

CSS variable များဖြင့် အချိန်နှင့်တပြေးညီ တည်ဆောက်ပြီး တိုးချဲ့ပါ။

CSS variable များကိုအသုံးပြုခြင်း။

CSS variable များမှတစ်ဆင့် စိတ်ကြိုက်ပြင်ဆင်ခြင်း။

အစိတ်အပိုင်းများ၊ Utility API ကို ဖြည့်ဆည်းပါ။

အစိတ်အပိုင်းများကို အမြန်စိတ်ကြိုက်ပြင်ဆင်ပါ။

jQuery မပါဘဲ အစွမ်းထက်သော JavaScript ပလပ်အင်များ

ဒေတာ attribute API

ပြည့်စုံသော ပလပ်အင်များ

သတိပေးချက်

ခလုတ်

ဝိုင်းလေး

ပြိုကျသည်။

ကျသည်

မော်ဒယ်

ကင်းဗတ်

Popover

Scrollspy

တက်ဘ်

ဆန္ဒပြုပါ။

Tooltip

Bootstrap Icons များဖြင့် စိတ်ကြိုက်ပြင်ဆင်ပါ။

တရားဝင် Bootstrap Themes ဖြင့် ၎င်းကို သင့်အတွက် ပြုလုပ်ပါ။