+++++ Dear ….. Thank you for visiting our booth at the Myanmar Black Hacking. We hope you will have a good time and enjoyed your visit to Underground. In case we won't answer some of your questions about our Real Info, we encourage you to visit our website at www.myanmarblackhacking.com +++++ It will give you a good idea of what we can do for +++++

Jul 22, 2016

2 Bootstarp ဆိုတာ ?



Bootstarp  
                                ဆိုတာ HTML, CSS နဲ႔ JavaScript တို႔ပါ၀င္တဲ့ Framework တစ္ခုပါ။ သူ႔ကို Responsive Web Design ေတြ ဖန္တီးဖို႔ အသံုးျပဳၾကပါတယ္။
Responsive Web Design ဆိုတာ ဘာလဲ ?
အခုအခ်ိန္မွာ လူအမ်ားစုက Desktop Personal 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 ဆိုတာ Web page ကို ၾကည့္ရႈတဲ့ Screen အရြယ္အစားေပၚမူတည္ျပီး ခ်ိန္ညိွျပီး ေဖာ္ျပေပးတာပါ။ Menu Bar ေတြ Layout ေတြကို Screen အႀကီးအေသးအလိုက္ သပ္သပ္ရပ္ရပ္ ေျပာင္းလဲေစပါတယ္။ ဒီအတြက္ CSS3 မွာ ပါ၀င္လာတဲ့ Media Query အသံုး ျပဳရပါတယ္။ Web Content ေတြကို Screen Size အမ်ဳိးမ်ဳိးနဲ႔ သင့္ေလ်ာ္ေအာင္ ေဖာ္ျပေပးႏိုင္မယ့္ CSS style မ်ား ေရးသားရပါတယ္။ ဒါကို Responsive Web Design ေရးဆြဲတယ္လို႔ေခၚပါတယ္။ တကယ္တမ္း ေရးဆြဲတဲ့အခါ Webpage အေသးစားေလးေတြ အတြက္ သိပ္ျပႆနာမရွိေပမယ့္ နည္းနည္းရႈပ္ေထြးလာတဲ့အခါ CSS style ေတြ ေရးရတာ အနည္းငယ္အလုပ္မ်ားလာပါတယ္။
ဒီအတြက္ 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 သတ္မွတ္ေပးရံုနဲ႔ Responsive 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 မွာ ေအာက္ပါအတုိင္းခ်ိတ္ဆက္ေပးဖို႔လုိပါတယ္။
...
...
Credit : Senior Critical

2 comments:

Vweb Development said...

ဤသည်ဤကဲ့သို့သောအကြောင်းအရာများရှာဖွေနေသည်သူမည်သူမဆိုအဘို့အပြီးပြည့်စုံသောဘလော့ဖြစ်ပါသည်။ ဒါဟာသတင်းအချက်အလက်, အကျိုးခံစားခွင့်နှင့်ခြုံငုံသုံးသပ်ချက်ကအားလုံးကိုတယ်သိရသည်။ စာအရေးအသား၏အဖြေစုံလင်သောအပိုင်းအစ။ တော်တယ်။

စည်းလုံးပြည်နယ်များအတွက် ဝက်ဘ်ဆိုက်ဒီဇိုင်းကုမ္ပဏီ

Myanmar Black Hacking said...

Thz for Feedback :)

Post a Comment