Bootstrap
Bootstarp ဆိုတာ HTML, CSS နဲ႔ JavaScript တို႔ပါ၀င္တဲ့ Framework တစ္ခုပါ။ သူ႔ကို Responsive Web Design ေတြ ဖန္တီးဖို႔ အသံုးျပဳၾကပါတယ္။
Responsive Web Design ဆိုတာ ဘာလဲ ?
အခုအခ်ိန္မွာ လူအမ်ားစုက Desktop Persoanl Computer ေတြအစား Mobile Device ေတြကုိ ပိုျပီးအသံုးျပဳတာ ပိုမ်ားလာပါတယ္။ ဘာလုိ႔လဲဆိုေတာ့ အသံုးျပဳရလြယ္ကူမႈ၊ သယ္ေဆာင္ရလြယ္ကူမႈ အစရွိတာေတြေၾကာင့္ပါ။ Mobile Device ေတြေပၚမွာကလည္း အားလံုးနီးပါး ျပဳလုပ္ႏိုင္လာတာလည္း ပါ ပါတယ္။ Online Shopping, E-Mail , Mobile Banking, Social Network ေတြကို Mobile Device ေတြေပၚမွာ အသံုးျပဳႏိုင္ပါတယ္။ ဒါေၾကာင့္ Website တစ္ခုကို Desktop PC မွာသာမက Mobile Device ေတြမွာပါ ၾကည့္ရႈႏိုင္ဖုိ႔ လိုအပ္လာပါတယ္။ ဒီေနရာမွာ စျပီး ျပႆနာတက္ပါျပီ။ Desktop နဲ႔ Mobile Device ရဲ႕ Screen အရြယ္အစား မတူညီပါဘူး။ Screen Layout ပံုစံခ်င္းကလည္း မတူညီပါဘူး။ ဒီေတာ့ Desktop မွာ ျမင္ရတဲ့ Screen ပံုစံကို Mobile မွာလည္း တစ္ထပ္တည္းတူညီေအာင္ျမင္ရဖို႔ဆိုတာ အဆင္မေျပႏိုင္ပါဘူး။ ဒီလုိျပႆနာအတြက္ ေျဖရွင္းဖို႔နည္းလမ္း (၂)မ်ဳိးရွိပါတယ္။
ပထမတစ္ခုက add-on domain သံုးျပီး mobile သီးသန္႔ site တစ္ခု ဖန္တီးထားဖို႔ပါပဲ။ ဥပမာ Facebook ရဲ႕ ပံုမွ address က www.facebook.com ပါ။ Desktop PC ကေန ၀င္ေရာက္တဲ့အခါ web.facebook.com ကို ေရာက္သြားမွာျဖစ္ျပီး Mobile Phone ကေန ၀င္ေရာက္ရင္ mobile.facebook.com ကို ေရာက္ရွိသြားမွာပါ။ အရမ္းကို ရႈပ္ေထြးလြန္းတဲ့ Website မ်ဳိးေတြအတြက္သာ ဖန္တီးသင့္ပါတယ္။ Desktop PC အတြက္ website တစ္ခု၊ mobile အတြက္ website တစ္ခု ဖန္တီးရမွာျဖစ္တဲ့အတြက္ ပင္ပန္းပါတယ္။ ျပီးေတာ့ maintenance အတြက္လည္း ရွိပါေသးတယ္။ Desktop PC အတြက္ Post တစ္ခုအသစ္တိုးရင္ mobileဘက္မွာလည္း ထပ္တုိးရမွာပါ။
ဒုတိယတစ္မ်ဳိးကို Responsive Web Design လုိ႔ ေခၚပါတယ္။ Responsive Web Design ဆိုတာ Webpage ကို ၾကည့္ရႈတဲ့ Screen အရြယ္အစားေပၚမူတည္ျပီး ခ်ိန္ညိွျပီး ေဖာ္ျပေပးတာပါ။ Menu Bar ေတြ Layout ေတြကို Screen အႀကီးအေသးအလိုက္ သပ္သပ္ရပ္ရပ္ ေျပာင္းလဲေစပါတယ္။ ဒီအတြက္ CSS 3 မွာ ပါ၀င္လာတဲ့ Media Query အသံုး ျပဳရပါတယ္။ Web Content ေတြကို Screen Size အမ်ဳိးမ်ဳိးနဲ႔ သင့္ေလ်ာ္ေအာင္ ေဖာ္ျပေပးႏိုင္မယ့္ CSS style မ်ား ေရးသားရပါတယ္။ ဒါကို Responisve Web Design ေရးဆြဲတယ္လို႔ေခၚပါတယ္။ တကယ္တမ္းေရးဆြဲတဲ့အခါ Webpage အေသးစားေလးေတြ အတြက္ သိပ္ျပႆနာမရွိေပမယ့္ နည္းနည္းရႈပ္ေထြးလာတဲ့အခါ CSS styleေတြေရးရတာ အနည္းငယ္အလုပ္မ်ားလာပါတယ္ ( ကြ်န္ေတာ့္အတြက္ :P ) . ဒီအတြက္ Framework ေတြ အသံုးျပဳဖုိ႔လုိအပ္လာပါတယ္။ Popular အျဖစ္ဆံုးနဲ႔ အေကာင္းဆံုး Framework ကေတာ့ Bootstrap ျဖစ္ပါတယ္။
Bootstrap ကို Mark Otto နဲ႔ Jacob Thornton တို႔က Twitter မွာ develop ျပဳလုပ္ခဲ့ၾကျပီးေတာ့ 2011, August လေလာက္မွာ Open Source အျဖစ္ ျဖန္႔ေ၀ခဲ့ပါတယ္။ အဲ့အခ်ိန္တုန္းက Bootstrap ကို Twitter Bootstrap လုိ႔ ေခၚေ၀ၚခဲ့ၾကတာပါ။ အခုဆိုရင္ Bootstrap 3 အထိ ေရာက္ရွိေနပါျပီ။ Bootstrapမွာ Grid System , Typography , Navbar အစရွိတာေတြ ပါ၀င္ျပီးျဖစ္တဲ့အတြက္ class သတ္မွတ္ေပးရံုနဲ႔ Reponsive Web Design ေတြကို သပ္ရပ္လွပစြာ ဖန္တီးႏိုင္မွာပါ။
Bootstrap ရဲ႕ အဓိကအားသာခ်က္ေတြက -
- အသံုးျပဳရလြယ္ကူတယ္
သာမာန္ HTML / CSS knowledge ရွိသူတစ္ေယာက္အေနနဲ႔ Bootstrap ကို အသံုးျပဳႏိုင္ပါတယ္။
- Responsive အျဖစ္အသံုးျပဳႏိုင္တယ္
Bootstrap မွာ ပါ၀င္တဲ့ CSS style ေတြဟာ Responsive Web Design ေရးဆြဲဖုိ႔ လံုး၀ျပီးျပည့္စံုပါတယ္။
Bootstrap ကို getbootstrap.com မွ Download ယူျပီး သံုးႏိုင္သလို CDN (Content Delivery Network) အေနနဲ႔လည္း အသံုးျပဳႏိုင္ပါတယ္။ CDN အျဖစ္သံုးမွာဆုိရင္ေတာ့ <style> tag မွာ ေအာက္ပါအတုိင္းခ်ိတ္ဆက္ေပးဖို႔လုိပါတယ္။
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
