Knowing about Bootstrap
Knowing about Bootstrap #What is Bootstrap Boostrap ဆိုတာဘာလဲ ကျတော်တို့ HTML CSS javascript လေ့လာနေတုန်း ဆိုရင် သိပြီးပြီဆိုရင် Bootstrap ကိုသိဖို့ အချိန်ရောက်ပါပြီဗျ။ Bootstrap ဆိုတာကတော့ HTML, CSS, Javascript ပေါင်းပြီး ရေးထားတဲ့ framework တစ်ခုပါ။ Bootstrap လိုမျိုးပဲတခြား Frameworkတွေလဲရှိပါတယ်။ eg. Skeleton, Bulma, Pure.cssစသဖြင့်၊ Bootstrap ကို responsive လို့ ခေါ်တဲ့ Screen size အမျိုး မျိုးပေါ်မူတည်ပြီး ကြည့်ကောင်းအောင် ပြသနိုင်အောင် ရေးလို့ရတဲ့ frameworkပါ။ အခ မဲ့ free သုံးလို့ ရပြီးတော့ web development အတွက် ပိုလျင် မြန်စေပါတယ်၊ #Why bootstrap? - သုံးရတာအရမ်းလွယ်ကူလို့ပါ - Responsive ဖြစ်စေလို့ပါ - website တစ်ခု buildဖို့ အတွက် လိုအပ်တဲ basic feature တော်တ်ောများများပါပြီးသားဖြစ်လို့ပါ။ - ဒါ့အပြင် browserအများစုမှာလဲ အဆင်ပြေပြေ runနိုင်လို့ပါ။ eg. Chrome, Firefox, Opera, Safari,etc #How to start using it? ဘယ်လိုစသုံးရမလဲဆိုရင်တော့ bootstrap file တွေက်ု အခ မဲ့ download ဆွဲပြီးဖြစ်ဖြစ် CDN လို့ေခါ် တဲ့ online link နဲ့ ချိတ်ဆက်အသုံးပြုတာမျိုးလဲရပါတယ်။ bootstrap က documentation လဲ အဆင်ပြေပြီးကောင်းတဲထဲပါပါတယ်။ Bootstrap က version 5 ထိ ထွက်နေပါပြီ featureတွေပိုများလာပြီး ပို stable ဖြစ်လာတာပါတယ် version 4, version 5 ကရွေးဖို့ recommend ပေးပါတယ် Bootstrap စအသုံးခင်ဘာသိထားဖိူ့လိုလဲဆိုရင်တော့ - HTML , CSS, Javascript အခြေခံသိထားပြီဆိုရင် စသုံးလို့ရပါပြီ။ - Class, Id စတဲ့ သဘောတရားသိရင်ရပါပြီ။ စဘာလုပ်ရမလဲဆိုရင် - အရင်ဆုံး Bootstrap CSS, Javascript, စတဲ့ fileတွေကို ထည့်ရပါတယ်။ https://getbootstrap.com/docs/4.6/getting-started/introduction/ Getting start pageကိုသွားပါ Bootstrap cdn link template ကိုအရင်ချိတ်ပြီးဖန်တီးရပါတယ် <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> </body> </html> - ပြီးရင်တော့စ ရေးလို့ရပါပြီ ဘာတွေစကြည့်ရမလဲဆိုရင်တော့ စမ်းကြည့်ရပါမယ်။ project လေးတွေ စရေးကြည့်ရပါမယ်။ ပျော်ဖို့ ကောင်းတာမို့ရေးကြည့်ပါဗျ။ Bootstrap မှာ Layout , Content , COmponents, Unititles ဆိုပြီးအပိုင်းလေးတေွ ပြီးစုပေးထားပါတယ်။ Bootstrap မှာ Grid view, Form, Alerts, Navs, Card, Button စတဲ့အသုံးဝင်တဲ့ classတွေအများကြီးရှိပါတယ်။ - Bootstrap ကို class နဲ့သုံးရပါတယ်။ ဥပမာ button တစ်ခုကို အရောင်ထည့်ချင်တယ်ဆိုရင် <button type="button" class="btn btn-primary">Primary</button> ဆိုပြီး ရေးပါတယ်။ အလားတူပဲ အခြား classတွေကိုလေ့လာရင်သုံးကြည့်လို့ရပါတယ် - Color ကိုလဲ default ပေးထားတာနဲ့လဲသုံးလို့ရပါတယ်။ Class မှာ btn btn-primary လို့ရေးထားတာကတော့ primary ဆိုရင်အပြာရင့်ပါ စသဖြင့် primary, secondary, success, danger, warning စသဖြင့်အမျိုးမျိုးရှိပါတယ်။ - sizeတွေကိုကျတော့ btn-lg, btn-md, btn-sm စသဖြင့် ရှိပါတယ်။ lg large, md medium, sm small စသဖြင့် ကိုသုံးတဲ့ classနဲ့တွဲသုံးရတာပေါ - grib view ကိုကြည့်ရပါမယ်။ Class ထဲမှာ container, row, col ဆိုတဲ့သဘော တရားကိုနားလည့်အောင်လုပ်ရမယ် ပြီးရင် size ကို lg, md, sm နဲ့ပေါင်းပြီးသုံးရပါတယ်။ Grib view က table လိုမျိုးပါပဲ rowတစ်ခု အတွက် row class သုံးပြီး အထဲမှာ col သုံးပါတယ်။ Padding, marginတွေအတွက် ကြည့်ကော်ငးအောင် container သုံးရပါတယ်။ <div class="container"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> </div> </div> Responsive အတွက်လဲသုံးပါတယ်။ .col (သာမန်), col-sm (screen size small, col-md, col-lg, col-xl စသဖြင့် သုံးပါတယ်။ Col-sm-6 , ဆိုရင်တော့ moble screen small sizeမှာ 6 screen တစ်ဝက်ပြမယ်ပေါ့။ Width တစ်ခုမှာ 12 unitလို့သတ်မှတ်ထားပါတယ်, https://getbootstrap.com/docs/4.6/layout/grid/ - contentတွေ ဖြစ်တဲ့ typography, image, table စတာတွေလဲရှိပါတယ်။ https://getbootstrap.com/docs/4.6/content/reboot/ - Nav ကိုသုံဂပြီး navigation ကိုလဲဖန်တီးလို့ရပါတ်။ nav-item, nav-link စသဖြင့်အသုံးဝင်ပါတယ်။ Navbar ကတော့ menu bar ကို responsive အနေအထားနဲ့ သုံးလို့ရပါတယ် https://getbootstrap.com/docs/4.6/components/navs/ https://getbootstrap.com/docs/4.6/components/navbar/ - Formsမှာ လိုတဲ့ input တွေကို ကလဲအသုံးဝင်ပါတယ်။ form control, options, radio, စသဖြင့်အသုံးတင်တာတွေရှိပါတယ်။ https://getbootstrap.com/docs/4.6/components/forms/ - bootstrap icon လဲရှိပါတယ်။ icon ကတော့ class နဲ့ လဲ သုံးလို့ရသလို့ svg လဲ down လို့ရသလို svg html codeလဲသုံးလို့ရပါတယ်။ Class icon <i class="bi bi-123"></i> Svg html icon <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-123" viewBox="0 0 16 16"> <path d="M2.873 11.297V4.142H1.699L0 5.379v1.137l1.64-1.18h.06v5.961h1.174Zm3.213-5.09v-.063c0-.618.44-1.169 1.196-1.169.676 0 1.174.44 1.174 1.106 0 .624-.42 1.101-.807 1.526L4.99 10.553v.744h4.78v-.99H6.643v-.069L8.41 8.252c.65-.724 1.237-1.332 1.237-2.27C9.646 4.849 8.723 4 7.308 4c-1.573 0-2.36 1.064-2.36 2.15v.057h1.138Zm6.559 1.883h.786c.823 0 1.374.481 1.379 1.179.01.707-.55 1.216-1.421 1.21-.77-.005-1.326-.419-1.379-.953h-1.095c.042 1.053.938 1.918 2.464 1.918 1.478 0 2.642-.839 2.62-2.144-.02-1.143-.922-1.651-1.551-1.714v-.063c.535-.09 1.347-.66 1.326-1.678-.026-1.053-.933-1.855-2.359-1.845-1.5.005-2.317.88-2.348 1.898h1.116c.032-.498.498-.944 1.206-.944.703 0 1.206.435 1.206 1.07.005.64-.504 1.106-1.2 1.106h-.75v.96Z"/> </svg> https://icons.getbootstrap.com/ ဒိလောက်ကြားဖူးနားဝရှိပြီဆိုရင် စပြီး ရေးကြည့်လို့ရပါပြီ များပါစေကူးကြည့်ပါ အလုပ်လုပ်ပြီဆိုရင် ပြင်ရေးကြည့်ပါ နားလည်လာပါလိုက်မယ်။ မှားမှာမကြောက်ပါနဲ့။ Facebook မှာရော Telegramမှာပါ ဝင်ရောက်ဆွေးနွေးပေးကြပါဗျ။Facebook page ၊ telegram channel ကို follow subscribe လုပ်သွားနိုင်ပါတယ်ဗျ။ Facebook - @callmedevbypeter Telegram - @callmedevbypeter သိချင်တဲ့အကြောင်းအရာရှိရင် comment မှာရေးသွားပါဗျ။ Thanks you ပါ။ #callmedevbypeter #bootstrap
Knowing about Bootstrap
Knowing about Bootstrap #What is Bootstrap Boostrap ဆိုတာဘာလဲ ကျတော်တို့ HTML CSS javascript လေ့လာနေတုန်း ဆိုရင် သိပြီးပြီဆိုရင် Bootstrap ကိုသိဖို့ အချိန်ရောက်ပါပြီဗျ။ Bootstrap ဆိုတာကတော့ HTML, CSS, Javascript ပေါင်းပြီး ရေးထားတဲ့ framework တစ်ခုပါ။ Bootstrap လိုမျိုးပဲတခြား Frameworkတွေလဲရှိပါတယ်။ eg. Skeleton, Bulma, Pure.cssစသဖြင့်၊ Bootstrap ကို responsive လို့ ခေါ်တဲ့ Screen size အမျိုး မျိုးပေါ်မူတည်ပြီး ကြည့်ကောင်းအောင် ပြသနိုင်အောင် ရေးလို့ရတဲ့ frameworkပါ။ အခ မဲ့ free သုံးလို့ ရပြီးတော့ web development အတွက် ပိုလျင် မြန်စေပါတယ်၊ #Why bootstrap? - သုံးရတာအရမ်းလွယ်ကူလို့ပါ - Responsive ဖြစ်စေလို့ပါ - website တစ်ခု buildဖို့ အတွက် လိုအပ်တဲ basic feature တော်တ်ောများများပါပြီးသားဖြစ်လို့ပါ။ - ဒါ့အပြင် browserအများစုမှာလဲ အဆင်ပြေပြေ runနိုင်လို့ပါ။ eg. Chrome, Firefox, Opera, Safari,etc #How to start using it? ဘယ်လိုစသုံးရမလဲဆိုရင်တော့ bootstrap file တွေက်ု အခ မဲ့ download ဆွဲပြီးဖြစ်ဖြစ် CDN လို့ေခါ် တဲ့ online link နဲ့ ချိတ်ဆက်အသုံးပြုတာမျိုးလဲရပါတယ်။ bootstrap က documentation လဲ အဆင်ပြေပြီးကောင်းတဲထဲပါပါတယ်။ Bootstrap က version 5 ထိ ထွက်နေပါပြီ featureတွေပိုများလာပြီး ပို stable ဖြစ်လာတာပါတယ် version 4, version 5 ကရွေးဖို့ recommend ပေးပါတယ် Bootstrap စအသုံးခင်ဘာသိထားဖိူ့လိုလဲဆိုရင်တော့ - HTML , CSS, Javascript အခြေခံသိထားပြီဆိုရင် စသုံးလို့ရပါပြီ။ - Class, Id စတဲ့ သဘောတရားသိရင်ရပါပြီ။ စဘာလုပ်ရမလဲဆိုရင် - အရင်ဆုံး Bootstrap CSS, Javascript, စတဲ့ fileတွေကို ထည့်ရပါတယ်။ https://getbootstrap.com/docs/4.6/getting-started/introduction/ Getting start pageကိုသွားပါ Bootstrap cdn link template ကိုအရင်ချိတ်ပြီးဖန်တီးရပါတယ် <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> </body> </html> - ပြီးရင်တော့စ ရေးလို့ရပါပြီ ဘာတွေစကြည့်ရမလဲဆိုရင်တော့ စမ်းကြည့်ရပါမယ်။ project လေးတွေ စရေးကြည့်ရပါမယ်။ ပျော်ဖို့ ကောင်းတာမို့ရေးကြည့်ပါဗျ။ Bootstrap မှာ Layout , Content , COmponents, Unititles ဆိုပြီးအပိုင်းလေးတေွ ပြီးစုပေးထားပါတယ်။ Bootstrap မှာ Grid view, Form, Alerts, Navs, Card, Button စတဲ့အသုံးဝင်တဲ့ classတွေအများကြီးရှိပါတယ်။ - Bootstrap ကို class နဲ့သုံးရပါတယ်။ ဥပမာ button တစ်ခုကို အရောင်ထည့်ချင်တယ်ဆိုရင် <button type="button" class="btn btn-primary">Primary</button> ဆိုပြီး ရေးပါတယ်။ အလားတူပဲ အခြား classတွေကိုလေ့လာရင်သုံးကြည့်လို့ရပါတယ် - Color ကိုလဲ default ပေးထားတာနဲ့လဲသုံးလို့ရပါတယ်။ Class မှာ btn btn-primary လို့ရေးထားတာကတော့ primary ဆိုရင်အပြာရင့်ပါ စသဖြင့် primary, secondary, success, danger, warning စသဖြင့်အမျိုးမျိုးရှိပါတယ်။ - sizeတွေကိုကျတော့ btn-lg, btn-md, btn-sm စသဖြင့် ရှိပါတယ်။ lg large, md medium, sm small စသဖြင့် ကိုသုံးတဲ့ classနဲ့တွဲသုံးရတာပေါ - grib view ကိုကြည့်ရပါမယ်။ Class ထဲမှာ container, row, col ဆိုတဲ့သဘော တရားကိုနားလည့်အောင်လုပ်ရမယ် ပြီးရင် size ကို lg, md, sm နဲ့ပေါင်းပြီးသုံးရပါတယ်။ Grib view က table လိုမျိုးပါပဲ rowတစ်ခု အတွက် row class သုံးပြီး အထဲမှာ col သုံးပါတယ်။ Padding, marginတွေအတွက် ကြည့်ကော်ငးအောင် container သုံးရပါတယ်။ <div class="container"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> </div> </div> Responsive အတွက်လဲသုံးပါတယ်။ .col (သာမန်), col-sm (screen size small, col-md, col-lg, col-xl စသဖြင့် သုံးပါတယ်။ Col-sm-6 , ဆိုရင်တော့ moble screen small sizeမှာ 6 screen တစ်ဝက်ပြမယ်ပေါ့။ Width တစ်ခုမှာ 12 unitလို့သတ်မှတ်ထားပါတယ်, https://getbootstrap.com/docs/4.6/layout/grid/ - contentတွေ ဖြစ်တဲ့ typography, image, table စတာတွေလဲရှိပါတယ်။ https://getbootstrap.com/docs/4.6/content/reboot/ - Nav ကိုသုံဂပြီး navigation ကိုလဲဖန်တီးလို့ရပါတ်။ nav-item, nav-link စသဖြင့်အသုံးဝင်ပါတယ်။ Navbar ကတော့ menu bar ကို responsive အနေအထားနဲ့ သုံးလို့ရပါတယ် https://getbootstrap.com/docs/4.6/components/navs/ https://getbootstrap.com/docs/4.6/components/navbar/ - Formsမှာ လိုတဲ့ input တွေကို ကလဲအသုံးဝင်ပါတယ်။ form control, options, radio, စသဖြင့်အသုံးတင်တာတွေရှိပါတယ်။ https://getbootstrap.com/docs/4.6/components/forms/ - bootstrap icon လဲရှိပါတယ်။ icon ကတော့ class နဲ့ လဲ သုံးလို့ရသလို့ svg လဲ down လို့ရသလို svg html codeလဲသုံးလို့ရပါတယ်။ Class icon <i class="bi bi-123"></i> Svg html icon <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-123" viewBox="0 0 16 16"> <path d="M2.873 11.297V4.142H1.699L0 5.379v1.137l1.64-1.18h.06v5.961h1.174Zm3.213-5.09v-.063c0-.618.44-1.169 1.196-1.169.676 0 1.174.44 1.174 1.106 0 .624-.42 1.101-.807 1.526L4.99 10.553v.744h4.78v-.99H6.643v-.069L8.41 8.252c.65-.724 1.237-1.332 1.237-2.27C9.646 4.849 8.723 4 7.308 4c-1.573 0-2.36 1.064-2.36 2.15v.057h1.138Zm6.559 1.883h.786c.823 0 1.374.481 1.379 1.179.01.707-.55 1.216-1.421 1.21-.77-.005-1.326-.419-1.379-.953h-1.095c.042 1.053.938 1.918 2.464 1.918 1.478 0 2.642-.839 2.62-2.144-.02-1.143-.922-1.651-1.551-1.714v-.063c.535-.09 1.347-.66 1.326-1.678-.026-1.053-.933-1.855-2.359-1.845-1.5.005-2.317.88-2.348 1.898h1.116c.032-.498.498-.944 1.206-.944.703 0 1.206.435 1.206 1.07.005.64-.504 1.106-1.2 1.106h-.75v.96Z"/> </svg> https://icons.getbootstrap.com/ ဒိလောက်ကြားဖူးနားဝရှိပြီဆိုရင် စပြီး ရေးကြည့်လို့ရပါပြီ များပါစေကူးကြည့်ပါ အလုပ်လုပ်ပြီဆိုရင် ပြင်ရေးကြည့်ပါ နားလည်လာပါလိုက်မယ်။ မှားမှာမကြောက်ပါနဲ့။ Facebook မှာရော Telegramမှာပါ ဝင်ရောက်ဆွေးနွေးပေးကြပါဗျ။Facebook page ၊ telegram channel ကို follow subscribe လုပ်သွားနိုင်ပါတယ်ဗျ။ Facebook - @callmedevbypeter Telegram - @callmedevbypeter သိချင်တဲ့အကြောင်းအရာရှိရင် comment မှာရေးသွားပါဗျ။ Thanks you ပါ။ #callmedevbypeter #bootstrap
CallMeDevbyPeter
Since 2022