Bootstrap စတင်လိုက်ပါ။
Bootstrap ဆိုတာဘာလဲ။
- Bootstrap သည် ပိုမိုမြန်ဆန်လွယ်ကူသော ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုအတွက် အခမဲ့ front-end framework တစ်ခုဖြစ်သည်။
- Bootstrap တွင် စာစီစာရိုက်ခြင်း၊ ဖောင်များ၊ ခလုတ်များ၊ ဇယားများ၊ လမ်းညွှန်ချက်၊ ပုံစံများ၊ ရုပ်ပုံအဝိုင်းနှင့် အခြားရွေးချယ်နိုင်သော JavaScript ပလပ်အင်များအတွက် HTML နှင့် CSS အခြေခံ ဒီဇိုင်းပုံစံများ ပါ၀င်သည်
- Bootstrap သည် သင့်အား တုံ့ပြန်မှုရှိသော ဒီဇိုင်းများကို အလွယ်တကူ ဖန်တီးနိုင်စေပါသည်။
Responsive Web Design ဆိုတာ ဘာလဲ။
တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်းသည် ဖုန်းအသေးမှသည် ဒက်စတော့ကြီးများအထိ စက်အားလုံးတွင် ကောင်းမွန်စေရန် ၎င်းတို့ကိုယ်ကို အလိုအလျောက် ချိန်ညှိပေးသည့် ဝဘ်ဆိုက်များကို ဖန်တီးခြင်းအကြောင်းဖြစ်သည်။
Bootstrap နမူနာ
<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 မှတ်တမ်း
Bootstrap ကို Twitter တွင် Mark Otto နှင့် Jacob Thornton မှတီထွင်ခဲ့ပြီး 2011 ခုနှစ် သြဂုတ်လတွင် GitHub တွင် open source ထုတ်ကုန်တစ်ခုအဖြစ် ထုတ်ပြန်ခဲ့သည်။
ဇွန်လ 2014 တွင် Bootstrap သည် GitHub တွင် နံပါတ် 1 ပရောဂျက်ဖြစ်သည်။
ဘာကြောင့် Bootstrap ကိုသုံးတာလဲ။
Bootstrap ၏အားသာချက်များ
- အသုံးပြုရလွယ်ကူသည်- HTML နှင့် CSS တို့ကို အခြေခံဗဟုသုတရှိသူတိုင်း Bootstrap ကို စတင်အသုံးပြုနိုင်ပါသည်။
- တုံ့ပြန်မှုအင်္ဂါရပ်များ- Bootstrap ၏တုံ့ပြန်မှု CSS သည် ဖုန်းများ၊ တက်ဘလက်များနှင့် ဒက်စတော့များဆီသို့ ချိန်ညှိသည်
- မိုဘိုင်း-ပထမချဉ်းကပ်နည်း- Bootstrap 3 တွင်၊ မိုဘိုင်း-ပထမပုံစံများသည် ပင်မဘောင်၏ တစ်စိတ်တစ်ပိုင်းဖြစ်သည်
- ဘရောက်ဆာ လိုက်ဖက်မှု- Bootstrap သည် ခေတ်မီဘရောက်ဆာများအားလုံး (Chrome၊ Firefox၊ Internet Explorer၊ Edge၊ Safari၊ နှင့် Opera) တို့နှင့် တွဲဖက် အသုံးပြုနိုင်ပါသည်။
Bootstrap ဗားရှင်းများ
ဤသင်ခန်းစာသည် 2013 ခုနှစ်တွင်ထွက်ရှိခဲ့သော Bootstrap 3 ကိုလိုက်နာပါသည်။ သို့သော်၊ ကျွန်ုပ်တို့သည် အသစ်သောဗားရှင်းများကိုလည်း အကျုံးဝင်ပါသည်။ Bootstrap 4 (2018 တွင်ထွက်ရှိ) နှင့် Bootstrap 5 (2021 တွင်ထုတ်ဝေခဲ့သည်) ။
Bootstrap 5 သည် Bootstrap ၏ နောက်ဆုံးဗားရှင်းဖြစ်သည် ။ အစိတ်အပိုင်းအသစ်များ၊ ပိုမိုမြန်ဆန်သောပုံစံစာရွက်များ၊ ပိုမိုတုံ့ပြန်မှုစသည်တို့နှင့်အတူ၊ ၎င်းသည် နောက်ဆုံးထွက်၊ တည်ငြိမ်သော အဓိကဘရောက်ဆာများနှင့် ပလပ်ဖောင်းအားလုံးကို ပံ့ပိုးပေးပါသည်။ သို့သော်၊ Internet Explorer 11 နှင့် အထက်ကို မပံ့ပိုးပါ။
Bootstrap 5 နှင့် Bootstrap 3 & 4 အကြား အဓိက ကွာခြားချက်မှာ Bootstrap 5 သည် jQuery အစား JavaScript သို့ ပြောင်းသွားခြင်း ဖြစ်သည်။
မှတ်ချက်- Bootstrap 3 နှင့် Bootstrap 4 သည် အရေးကြီးသော ချွတ်ယွင်းချက်များနှင့် စာရွက်စာတမ်းပြောင်းလဲမှုများအတွက် အဖွဲ့မှ ပံ့ပိုးပေးနေဆဲဖြစ်ပြီး ၎င်းတို့ကို ဆက်လက်အသုံးပြုနိုင်ရန် လုံးဝ ဘေးကင်းပါသည်။ သို့သော်၊ ဝန်ဆောင်မှုအသစ်များကို ၎င်းတို့တွင် ထည့်သွင်းမည်မဟုတ်ပါ။
Bootstrap ဘယ်မှာရနိုင်မလဲ။
သင်၏ကိုယ်ပိုင်ဝဘ်ဆိုက်တွင် Bootstrap ကိုစတင်အသုံးပြုရန်နည်းလမ်းနှစ်ခုရှိသည်။
သင်လုပ်နိုင်သည်:
- getbootstrap.com မှ Bootstrap ကိုဒေါင်းလုဒ်လုပ်ပါ။
- CDN တစ်ခုမှ Bootstrap ထည့်သွင်းပါ။
Bootstrap ကိုဒေါင်းလုဒ်လုပ်ခြင်း။
သင်ကိုယ်တိုင် Bootstrap ကိုဒေါင်းလုဒ်လုပ်ပြီး လက်ခံ ရယူလိုပါက getbootstrap.com သို့သွားကာ ၎င်းတွင် ညွှန်ကြားချက်များကို လိုက်နာပါ။
Bootstrap CDN
သင်သည် Bootstrap ကို သင်ကိုယ်တိုင်ဒေါင်းလုဒ်လုပ်ပြီး မလက်ခံလိုပါက CDN (Content Delivery Network) မှ ထည့်သွင်းနိုင်ပါသည်။
MaxCDN သည် Bootstrap ၏ CSS နှင့် JavaScript အတွက် CDN ပံ့ပိုးမှုပေးသည်။ jQuery လည်း ပါဝင်ရပါမယ်။
MaxCDN-
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Bootstrap CDN ကိုအသုံးပြုခြင်း၏အားသာချက်တစ်ခုမှာ-
အသုံးပြုသူအများအပြားသည်အခြားဆိုက်ကိုလည်ပတ်သောအခါ MaxCDN မှ Bootstrap ကိုဒေါင်းလုဒ်လုပ်ထားပြီးဖြစ်သည်။ ရလဒ်အနေဖြင့်၊ ၎င်းတို့သည် သင့်ဆိုက်ကို ဝင်ကြည့်သောအခါတွင် ၎င်းကို ကက်ရှ်မှ ဒေါင်းလုဒ်လုပ်မည်ဖြစ်ပြီး တင်ချိန်ပိုမိုမြန်ဆန်စေသည်။ ထို့အပြင်၊ CDN အများစုသည် အသုံးပြုသူတစ်ဦးမှ ဖိုင်တစ်ခုတောင်းဆိုသည်နှင့် ၎င်းတို့နှင့်အနီးဆုံးဆာဗာမှ ၎င်းကို ဝန်ဆောင်မှုပေးမည်ဖြစ်ကြောင်း သေချာစေမည်ဖြစ်ပြီး ၎င်းသည် တင်ချိန်ပိုမိုမြန်ဆန်စေသည်။
jQuery
Bootstrap သည် JavaScript plugins (modals၊ tooltips စသည်ဖြင့်) အတွက် jQuery ကိုအသုံးပြုသည်။ သို့သော်၊ သင်သည် Bootstrap ၏ CSS အစိတ်အပိုင်းကို အသုံးပြုပါက jQuery မလိုအပ်ပါ။
Bootstrap ဖြင့် ပထမဆုံး ဝဘ်စာမျက်နှာကို ဖန်တီးပါ။
1. HTML5 doctype ကိုထည့်ပါ။
Bootstrap သည် HTML5 doctype လိုအပ်သော HTML အစိတ်အပိုင်းများနှင့် CSS ဂုဏ်သတ္တိများကို အသုံးပြုသည်။
စာမျက်နှာ၏အစတွင် HTML5 doctype ကို lang attribute နှင့် မှန်ကန်သောစာလုံးအစုံနှင့်အတူ အမြဲတမ်းထည့်သွင်းပါ-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 သည် မိုဘိုင်း-ပထမဖြစ်သည်။
Bootstrap 3 သည် မိုဘိုင်းလ်စက်ပစ္စည်းများအတွက် တုံ့ပြန်မှုဖြစ်စေရန် ဒီဇိုင်းထုတ်ထားသည်။ မိုဘိုင်း-ပထမစတိုင်များသည် ပင်မဘောင်၏ တစ်စိတ်တစ်ပိုင်းဖြစ်သည်။
မှန်ကန်သော သရုပ်ဖော်ခြင်းနှင့် ထိခြင်း ချဲ့ခြင်းတို့ကို သေချာစေရန်၊ အစိတ်အပိုင်း <meta>အတွင်း အောက်ပါ tag ကို
ထည့်ပါ-<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
အပိုင်းသည် စက် ၏ width=device-widthစခရင်အကျယ်ကို လိုက်နာရန် စာမျက်နှာ၏ အကျယ်ကို သတ်မှတ်သည် (၎င်းသည် စက်ပေါ် မူတည်၍ ကွဲပြားလိမ့်မည်)။
စာမျက်နှာ initial-scale=1ကို ဘရောက်ဆာမှ ပထမဆုံး တင်သောအခါ အပိုင်းသည် ကနဦးချုံ့ချဲ့မှုအဆင့်ကို သတ်မှတ်ပေးသည်။
3. ကွန်တိန်နာများ
ဆိုက်အကြောင်းအရာများကို ချုပ်ရန် Bootstrap ပါ၀င်သော အစိတ်အပိုင်းတစ်ခုလည်း လိုအပ်ပါသည်။
ရွေးချယ်ရန် ကွန်တိန်နာ အတန်းအစား နှစ်ခု ရှိသည်-
.containerအတန်းသည် တုံ့ပြန်မှု ပုံသေပုံသေ အကျယ်ကွန်တိန်နာ ကို ပံ့ပိုးပေးသည် ။.container-fluidအတန်းသည် မြင်ကွင်းပို့တ်၏ အကျယ်တစ်ခုလုံးကို လွှမ်းခြုံထားသည့် အကျယ်အဝန်းကို အပြည့်ထည့် ထားသည် ။
အခြေခံ Bootstrap စာမျက်နှာနှစ်ခု
အောက်ဖော်ပြပါ ဥပမာသည် အခြေခံ Bootstrap စာမျက်နှာအတွက် ကုဒ်ကို ပြသသည် (တုံ့ပြန်မှု ပုံသေပုံသေ အကျယ်ကွန်တိန်နာဖြင့်)
ဥပမာ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
အောက်ဖော်ပြပါ ဥပမာသည် အခြေခံ Bootstrap စာမျက်နှာအတွက် ကုဒ်ကို ပြသည် (အနံအပြည့်ထည့်ထားသော ကွန်တိန်နာ)
ဥပမာ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>