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

BS4 ပင်မစာမျက်နှာ BS4 ကို စတင်လိုက်ပါ။ BS4 ကွန်တိန်နာများ BS4 Grid အခြေခံ BS4 စာစီစာရိုက် BS4 အရောင်များ BS4 ဇယားများ BS4 ရုပ်ပုံများ BS4 Jumbotron BS4 သတိပေးချက်များ BS4 ခလုတ်များ BS4 ခလုတ်အုပ်စုများ BS4 တံဆိပ်များ BS4 တိုးတက်မှုဘားများ BS4 Spinners BS4 Pagination BS4 စာရင်းအုပ်စုများ BS4 ကတ်များ BS4 ဆွဲချမှုများ BS4 ခေါက်သိမ်းပါ။ BS4 ရေတပ် BS4 Navbar BS4 ပုံစံများ BS4 ထည့်သွင်းမှုများ BS4 ထည့်သွင်းမှုအုပ်စုများ BS4 စိတ်ကြိုက်ပုံစံများ BS4 ချားရဟတ် BS4 Modal BS4 Tooltip BS4 Popover BS4 ဆန္ဒပြုခြင်း။ BS4 Scrollspy BS4 အသုံးအဆောင်များ BS4 Flex BS4 သင်္ကေတများ BS4 မီဒီယာအရာဝတ္ထုများ BS4 စစ်ထုတ်မှုများ

Bootstrap 4 Grid

BS4 Grid စနစ် BS4 သည် အထပ်လိုက်/အလျားလိုက် BS4 Grid XSmall BS4 Grid အသေး BS4 Grid Medium BS4 Grid အကြီး BS4 Grid XLarge BS4 Grid နမူနာများ

Bootstrap 4 အခြား

BS4 အခြေခံ Template BS4 လေ့ကျင့်ခန်းများ BS4 Quiz

Bootstrap 4 Ref

အတန်းအားလုံး JS သတိပေးချက် JS ခလုတ် JS ချားရဟတ် JS ခေါက်သိမ်းပါ။ JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Toasts JS Tooltip


Bootstrap 4 Grids


Bootstrap 4 Grid စနစ်

Bootstrap ၏ဇယားကွက်စနစ်သည် flexbox ဖြင့်တည်ဆောက်ထားပြီး စာမျက်နှာတစ်လျှောက်တွင် ကော်လံ 12 ခုအထိခွင့်ပြုထားသည်။

ကော်လံ 12 ခုလုံးကို တစ်ဦးချင်း မသုံးလိုပါက၊ ပိုကျယ်သော ကော်လံများ ဖန်တီးရန် ကော်လံများကို အတူတကွ အုပ်စုဖွဲ့နိုင်သည်-

ထွာ ၁ ထွာ ၁ ထွာ ၁ ထွာ ၁ ထွာ ၁ ထွာ ၁ ထွာ ၁ ထွာ ၁ ထွာ ၁ ထွာ ၁ ထွာ ၁ ထွာ ၁
 ထွာ ၄  ထွာ ၄  ထွာ ၄
ထွာ ၄ ထွာ ၈
ထွာ ၆ ထွာ ၆
ထွာ ၁၂

ဇယားကွက်စနစ်သည် တုံ့ပြန်မှုဖြစ်ပြီး မျက်နှာပြင်အရွယ်အစားပေါ် မူတည်၍ ကော်လံများကို အလိုအလျောက် ပြန်လည်စီစဉ်ပေးပါမည်။

ပေါင်းလဒ်သည် 12 သို့မဟုတ် ထို့ထက်နည်းအောင် ပေါင်းထည့်ကြောင်း သေချာပါစေ။ (သင်ရနိုင်သော ကော်လံ 12 ခုလုံးကို အသုံးပြုရန် မလိုအပ်ပါ)။


Grid သင်တန်းများ

Bootstrap 4 grid စနစ်တွင် အတန်းငါးခုရှိသည်။

  • .col- (အပိုပစ္စည်းများ - မျက်နှာပြင်အကျယ် 576px အောက်)
  • .col-sm- (စက်ပစ္စည်းငယ်များ - မျက်နှာပြင်အကျယ် 576px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်)
  • .col-md- (အလတ်စား စက်ပစ္စည်းများ - မျက်နှာပြင် အကျယ်သည် 768px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်)
  • .col-lg- (စက်ပစ္စည်းကြီးများ - မျက်နှာပြင်အကျယ် 992px နှင့် ညီမျှသော သို့မဟုတ် ပိုကြီးသည်)
  • .col-xl- (xlarge စက်များ - မျက်နှာပြင်အကျယ် 1200px နှင့် ညီသော သို့မဟုတ် ပိုကြီးသည်)

ပိုမိုသွက်လက်ပြီး လိုက်လျောညီထွေရှိသော အပြင်အဆင်များဖန်တီးရန် အထက်ဖော်ပြပါ အတန်းများကို ပေါင်းစပ်နိုင်ပါသည်။

အကြံပြုချက်- အတန်းတစ်ခုစီသည် စကေးတက်လာသောကြောင့် တူညီသော widths များကို smသတ်မှတ် mdလိုပါက သတ်မှတ်ရန်သာ လိုအပ်ပါသည် sm


Bootstrap 4 Grid ၏ အခြေခံဖွဲ့စည်းပုံ

အောက်ဖော်ပြပါသည် Bootstrap 4 grid ၏ အခြေခံဖွဲ့စည်းပုံဖြစ်သည် ။

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

ပထမဥပမာ- row ( <div class="row">) ကိုဖန်တီးပါ။ ထို့နောက် လိုချင်သော ကော်လံအရေအတွက် (သင့်လျော်သော .col-*-*အတန်းများပါသော တက်ဂ်များ) ကို ထည့်ပါ။ ပထမကြယ် (*) သည် တုံ့ပြန်နိုင်စွမ်းကို ကိုယ်စားပြုသည်- sm, md, lg သို့မဟုတ် xl သည် နံပါတ်တစ်ခုကို ကိုယ်စားပြုပြီး ဒုတိယကြယ်သည် အတန်းတစ်ခုစီအတွက် 12 အထိ ပေါင်းသင့်သည်။

ဒုတိယဥပမာ- တစ်ခုစီသို့ နံပါတ်တစ်ခုထည့်မည့်အစား col၊ တူညီသော width ကော်လံများဖန်တီးရန် bootstrap သည် layout ကိုစီမံခွင့်ပြုပါ- "col"ဒြပ်စင်နှစ်ခု = col တစ်ခုစီအတွက် 50% အကျယ်။ cols သုံးခု = col တစ်ခုစီသို့ 33.33% အကျယ်။ cols လေးခု = 25% အကျယ် စ .col-sm|md|lg|xlသည်

အောက်တွင် ကျွန်ုပ်တို့သည် အခြေခံ Bootstrap 4 grid layouts ၏ နမူနာအချို့ကို စုစည်းထားပါသည်။



တူညီသောကော်လံသုံးခု

.col
.col
.col

အောက်ဖော်ပြပါ ဥပမာသည် စက်အားလုံးနှင့် မျက်နှာပြင်အကျယ်များတွင် အညီအမျှ ကော်လံသုံးခုကို ဖန်တီးနည်းကို ပြသသည်-

ဥပမာ

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

တုံ့ပြန်မှုကော်လံများ

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

အောက်ဖော်ပြပါ ဥပမာသည် တက်ဘလက်များမှအစပြု၍ တူညီသောအနံကော်လံလေးခုကို ဖန်တီးရန်နှင့် ပိုကြီးသော ဒက်စတော့များအထိ ချဲ့ထွင်ပုံကို ပြသထားသည်။ 576px ထက်နည်းသော မိုဘိုင်းဖုန်းများ သို့မဟုတ် စခရင်များတွင်၊ ကော်လံများသည် တစ်ခုနှင့်တစ်ခုအပေါ်တွင် အလိုအလျောက်စုနေလိမ့်မည် -

ဥပမာ

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

မညီမျှသော တုံ့ပြန်မှုကော်လံနှစ်ခု

.col-sm-4
.col-sm-၈

အောက်ဖော်ပြပါ ဥပမာသည် တက်ဘလက်များမှအစပြု၍ အမျိုးမျိုးသော အကျယ်ကော်လံနှစ်ခုကို မည်သို့ရရှိနိုင်ကြောင်းနှင့် ကြီးမားသောအပိုဒက်စ်တော့များအထိ ချဲ့ထွင်ပုံကို ပြသသည်-

ဥပမာ

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

အကြံပြုချက်- ဤသင်ခန်းစာတွင် Bootstrap 4 ဂရစ်များအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည်။