Bootstrap 4 ကို စတင်လိုက်ပါ။

Bootstrap ဆိုတာဘာလဲ။

Bootstrap သည် ပိုမိုမြန်ဆန်လွယ်ကူသော ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုအတွက် အခမဲ့ front-end framework တစ်ခုဖြစ်သည်။
Bootstrap တွင် စာစီစာရိုက်ခြင်း၊ ဖောင်များ၊ ခလုတ်များ၊ ဇယားများ၊ လမ်းညွှန်ချက်၊ ပုံစံများ၊ ရုပ်ပုံအဝိုင်းနှင့် အခြားရွေးချယ်နိုင်သော JavaScript ပလပ်အင်များအတွက် HTML နှင့် CSS အခြေခံ ဒီဇိုင်းပုံစံများ ပါ၀င်သည်
Bootstrap သည် သင့်အား တုံ့ပြန်မှုရှိသော ဒီဇိုင်းများကို အလွယ်တကူ ဖန်တီးနိုင်စေပါသည်။

Responsive Web Design ဆိုတာ ဘာလဲ။

တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်းသည် ဖုန်းအသေးမှသည် ဒက်စတော့ကြီးများအထိ စက်အားလုံးတွင် ကောင်းမွန်စေရန် ၎င်းတို့ကိုယ်ကို အလိုအလျောက် ချိန်ညှိပေးသည့် ဝဘ်ဆိုက်များကို ဖန်တီးခြင်းအကြောင်းဖြစ်သည်။

Bootstrap 4 ဥပမာ

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
<div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
</div>
</div>

Bootstrap ဗားရှင်းများ

ဤသင်ခန်းစာသည် 2018 ခုနှစ်တွင်ထွက်ရှိခဲ့သော Bootstrap 4 ၊ အစိတ်အပိုင်းအသစ်များ၊ ပိုမိုမြန်ဆန်သောစတိုင်စာရွက်c၊ ပိုမိုတုံ့ပြန်မှုစသည်ဖြင့် Bootstrap 3 သို့ အဆင့်မြှင့်တင်မှုအနေဖြင့် လုပ်ဆောင်ထားသည်။

Bootstrap 5 (2021 တွင်ထွက်ရှိထားသည်) သည် Bootstrap ၏နောက်ဆုံးဗားရှင်းဖြစ်သည် ။ ၎င်းသည် အဓိကဘရောက်ဆာများနှင့် ပလပ်ဖောင်းများအားလုံး၏ နောက်ဆုံးပေါ်၊ တည်ငြိမ်သော ဖြန့်ချိမှုများကို ပံ့ပိုးပေးသည်။ သို့သော်၊ Internet Explorer 11 နှင့် အထက်ကို မပံ့ပိုးပါ။

Bootstrap 5 နှင့် Bootstrap 3 & 4 အကြား အဓိက ကွာခြားချက်မှာ Bootstrap 5 သည် jQuery အစား JavaScript သို့ ပြောင်းသွားခြင်း ဖြစ်သည်။

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

ဘာကြောင့် Bootstrap ကိုသုံးတာလဲ။

Bootstrap ၏အားသာချက်များ

အသုံးပြုရလွယ်ကူသည်- HTML နှင့် CSS တို့ကို အခြေခံဗဟုသုတရှိသူတိုင်း Bootstrap ကို စတင်အသုံးပြုနိုင်ပါသည်။
တုံ့ပြန်မှုအင်္ဂါရပ်များ- Bootstrap ၏တုံ့ပြန်မှု CSS သည် ဖုန်းများ၊ တက်ဘလက်များနှင့် ဒက်စတော့များဆီသို့ ချိန်ညှိသည်
မိုဘိုင်း-ပထမချဉ်းကပ်နည်း- Bootstrap တွင်၊ မိုဘိုင်း-ပထမပုံစံများသည် ပင်မဘောင်၏ တစ်စိတ်တစ်ပိုင်းဖြစ်သည်။
ဘရောက်ဆာ လိုက်ဖက်မှု- Bootstrap 4 သည် ခေတ်မီဘရောက်ဆာများအားလုံး (Chrome၊ Firefox၊ Internet Explorer 10+၊ Edge၊ Safari၊ နှင့် Opera)

Bootstrap 4 ကိုဘယ်မှာရနိုင်မလဲ။

သင်၏ကိုယ်ပိုင်ဝဘ်ဆိုက်တွင် Bootstrap 4 ကိုစတင်အသုံးပြုရန်နည်းလမ်းနှစ်ခုရှိသည်။

သင်လုပ်နိုင်သည်:

CDN တစ်ခုမှ Bootstrap 4 ကို ထည့်သွင်းပါ။
getbootstrap.com မှ Bootstrap 4 ကိုဒေါင်းလုဒ်လုပ်ပါ။

Bootstrap 4 CDN

Bootstrap 4 ကို သင်ကိုယ်တိုင်ဒေါင်းလုဒ်လုပ်ပြီး မလက်ခံလိုပါက CDN (Content Delivery Network) မှ ထည့်သွင်းနိုင်ပါသည်။

jsDelivr သည် Bootstrap ၏ CSS နှင့် JavaScript အတွက် CDN ပံ့ပိုးမှုပေးသည်။ jQuery လည်း ပါဝင်ရပါမယ်။

jsDelivr-

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 4 CDN ကိုအသုံးပြုခြင်း၏အားသာချက်တစ်ခုမှာ-
အသုံးပြုသူအများအပြားသည်အခြားဆိုက်ကိုလည်ပတ်သောအခါ jsDelivr မှ Bootstrap 4 ကိုဒေါင်းလုဒ်လုပ်ထားပြီးဖြစ်သည်။ ရလဒ်အနေဖြင့်၊ ၎င်းတို့သည် သင့်ဆိုက်ကို ဝင်ကြည့်သောအခါတွင် ၎င်းကို ကက်ရှ်မှ ဒေါင်းလုဒ်လုပ်မည်ဖြစ်ပြီး တင်ချိန်ပိုမိုမြန်ဆန်စေသည်။ ထို့အပြင်၊ CDN အများစုသည် အသုံးပြုသူတစ်ဦးမှ ဖိုင်တစ်ခုတောင်းဆိုသည်နှင့် ၎င်းတို့နှင့်အနီးဆုံးဆာဗာမှ ၎င်းကို ဝန်ဆောင်မှုပေးမည်ဖြစ်ကြောင်း သေချာစေမည်ဖြစ်ပြီး ၎င်းသည် တင်ချိန်ပိုမိုမြန်ဆန်စေသည်။

jQuery နှင့် Popper ?
Bootstrap 4 သည် JavaScript အစိတ်အပိုင်းများအတွက် jQuery နှင့် Popper.js (modals၊ tooltips၊ popovers စသည်) ကိုအသုံးပြုသည်။ သို့သော်၊ သင်သည် Bootstrap ၏ CSS အစိတ်အပိုင်းကိုသာ အသုံးပြုပါက ၎င်းတို့ကို သင်မလိုအပ်ပါ။

ပိတ်နိုင်သော သတိပေးချက်များ
ခလုတ်များ နှင့် အမှတ်ခြစ်ပုံးများ/ ရေဒီယို ခလုတ်များ
ဆလိုက်များ၊ ထိန်းချုပ်မှုများ၊ နှင့် အညွှန်းများအတွက် ချားရဟတ်
အကြောင်းအရာပြောင်းရန် ခေါက်သိမ်းပါ။
Dropdowns (also requires Popper.js for perfect positioning)
Modals (open and close)
Navbar (for collapsible menus)
Tooltips and popovers (also requires Popper.js for perfect positioning)
Scrollspy for scroll behavior and navigation updates

Bootstrap 4 ကိုဒေါင်းလုဒ်လုပ်ခြင်း။

သင်သည် Bootstrap 4 ကို သင်ကိုယ်တိုင်ဒေါင်းလုဒ်လုပ်ပြီး လက်ခံရယူလိုပါက https://getbootstrap.com/ သို့သွားကာ ၎င်းတွင် ညွှန်ကြားချက်များကို လိုက်နာပါ။

Bootstrap 4 ဖြင့် ပထမဆုံး ဝဘ်စာမျက်နှာကို ဖန်တီးပါ။

1. HTML5 doctype ကိုထည့်ပါ။

Bootstrap 4 သည် HTML5 doctype လိုအပ်သော HTML အစိတ်အပိုင်းများနှင့် CSS ဂုဏ်သတ္တိများကို အသုံးပြုသည်။

စာမျက်နှာ၏အစတွင် HTML5 doctype ကို lang attribute နှင့် မှန်ကန်သောစာလုံးအစုံနှင့်အတူ အမြဲတမ်းထည့်သွင်းပါ-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

2. Bootstrap 4 သည် မိုဘိုင်း-ပထမဖြစ်သည်။

Bootstrap 4 သည် မိုဘိုင်းလ်စက်ပစ္စည်းများအတွက် တုံ့ပြန်မှုဖြစ်စေရန် ဒီဇိုင်းထုတ်ထားသည်။ မိုဘိုင်း-ပထမစတိုင်များသည် ပင်မဘောင်၏ တစ်စိတ်တစ်ပိုင်းဖြစ်သည်။

မှန်ကန်သော သရုပ်ဖော်ခြင်းနှင့် ထိခြင်း ချဲ့ခြင်းတို့ကို သေချာစေရန်၊ အစိတ်အပိုင်း <meta>အတွင်း အောက်ပါ tag ကို ထည့်ပါ-<head>

စက် width=device-width၏စခရင်အကျယ်ကိုလိုက်ရန် အပိုင်းသည် စာမျက်နှာ၏အကျယ်ကို သတ်မှတ်ပေးသည် (၎င်းသည် စက်ပေါ် မူတည်၍ ကွဲပြားလိမ့်မည်)။

စာမျက်နှာ initial-scale=1ကို ဘရောက်ဆာမှ ပထမဆုံး တင်သောအခါ အပိုင်းသည် ကနဦးချုံ့ချဲ့မှုအဆင့်ကို သတ်မှတ်ပေးသည်။

3. ကွန်တိန်နာများ

Bootstrap 4 သည် ဝဘ်ဆိုက်အကြောင်းအရာများကို ခြုံငုံရန် ပါဝင်သော အစိတ်အပိုင်းတစ်ခုလည်း လိုအပ်ပါသည်။

ရွေးချယ်ရန် ကွန်တိန်နာ အတန်းအစား နှစ်ခု ရှိသည်-

.containerအတန်းသည် တုံ့ပြန်မှု ပုံသေပုံသေ အကျယ်ကွန်တိန်နာ ကို ပံ့ပိုးပေးသည် ။
.container-fluidအတန်းသည် မြင်ကွင်းပို့တ်၏ အကျယ်တစ်ခုလုံးကို လွှမ်းခြုံထားသည့် အကျယ်အဝန်းကို အပြည့်ထည့် ထားသည် ။

.ကွန်တိန်နာ

.container-fluid

အခြေခံ Bootstrap 4 စာမျက်နှာ နှစ်ခု

အောက်ဖော်ပြပါ ဥပမာသည် အခြေခံ Bootstrap 4 စာမျက်နှာအတွက် ကုဒ်ကို ပြသသည် (တုံ့ပြန်မှုပုံသေ အကျယ်ကွန်တိန်နာဖြင့်)

ကွန်တိန်နာ နမူနာ

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

အောက်ဖော်ပြပါ ဥပမာသည် အခြေခံ Bootstrap 4 စာမျက်နှာအတွက် ကုဒ်ကို ပြသည် (အကျယ်အပြည့်ထည့်ထားသော ကွန်တိန်နာ)

Container Fluid နမူနာ

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

❮ ယခင် နောက်တစ်ခု ❯

Bootstrap 4 ကျူတိုရီရယ်

Bootstrap 4 Grid

Bootstrap 4 အခြား

Bootstrap 4 Ref