Source

ဂရစ်စနစ်

ကော်လံဆယ်ခုစနစ်၊ ပုံသေတုံ့ပြန်မှုအဆင့်ငါးခု၊ Sass variable များနှင့် mixins နှင့် ကြိုတင်သတ်မှတ်ထားသော အတန်းများစွာတို့ကြောင့် ပုံစံမျိုးစုံနှင့် အရွယ်အစားအားလုံး၏ အပြင်အဆင်များကို တည်ဆောက်ရန် ကျွန်ုပ်တို့၏ အစွမ်းထက်သော မိုဘိုင်း-ပထမ flexbox ဂရစ်ကို အသုံးပြုပါ။

ဘယ်လိုအလုပ်လုပ်လဲ

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

Flexbox နှင့် မရင်းနှီးသူ အသစ်လား။ နောက်ခံ၊ အသုံးအနှုန်းများ၊ လမ်းညွှန်ချက်များနှင့် ကုဒ်အတိုအထွာများအတွက် ဤ CSS Tricks flexbox လမ်းညွှန်ကို ဖတ်ပါ ။

ကော်လံသုံးခုထဲက တစ်ခု

<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>

အထက်ဖော်ပြပါ ဥပမာသည် ကျွန်ုပ်တို့၏ ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများကို အသုံးပြု၍ အသေးစား၊ အလတ်စား၊ အကြီးနှင့် ပိုကြီးသော စက်များတွင် အညီအမျှ အနံ ကော်လံသုံးခုကို ဖန်တီးပေးပါသည်။ ထိုကော်လံများကို မိဘနှင့်အတူ စာမျက်နှာတွင် ဗဟိုပြုထားသည် .container။

၎င်းကို ဖြိုခွဲပါ၊ ၎င်းအလုပ်လုပ်ပုံမှာ ဤသို့ဖြစ်သည်-

ကွန်တိန်နာများသည် သင့်ဆိုဒ်၏ အကြောင်းအရာများကို ဗဟိုပြု၍ အလျားလိုက် စီရန် နည်းလမ်းကို ပံ့ပိုးပေးပါသည်။ .containerတုံ့ပြန်မှုရှိသော pixel အကျယ် .container-fluidအတွက် သို့မဟုတ် width: 100%မြင်ကွင်းပို့တ်နှင့် စက်အရွယ်အစားအားလုံးအတွက် အသုံးပြုပါ ။
အတန်းများသည် ကော်လံများအတွက် ထုပ်ပိုးမှုများဖြစ်သည်။ ကော်လံတစ်ခုစီတွင် padding၎င်းတို့ကြားရှိနေရာများကို ထိန်းချုပ်ရန်အတွက် ရေပြင်ညီ (ရေမြောင်းဟုခေါ်သည်) ရှိသည်။ ၎င်းကို paddingအနုတ်လက္ခဏာအနားသတ်များဖြင့် အတန်းများပေါ်တွင် တန်ပြန်ထားသည်။ ဤနည်းအားဖြင့်၊ သင့်ကော်လံများရှိ အကြောင်းအရာအားလုံးကို ဘယ်ဘက်အောက်သို့ အမြင်အာရုံဖြင့် ညှိထားသည်။
ဇယားကွက်အပြင်အဆင်တွင် အကြောင်းအရာကို ကော်လံများအတွင်း ထားရှိရမည်ဖြစ်ပြီး ကော်လံများသာ အတန်းများ၏ ချက်ချင်းကလေးများ ဖြစ်နိုင်သည်။
flexbox ကြောင့်၊ သတ်မှတ်ထားသော ဇယားကွက်များ မပါသော ကော်လံများသည် widthတူညီသော အကျယ်ကော်လံများအဖြစ် အလိုအလျောက် အပြင်အဆင်ကို ထုတ်ပေးပါမည်။ ဥပမာအားဖြင့်၊ လေးခု .col-smတစ်ခုစီသည် ခွဲမှတ်ငယ်မှ 25% အလိုအလျောက်ကျယ်ပြန့်မည်ဖြစ်သည်။ နောက်ထပ်ဥပမာများအတွက် အလိုအလျောက်ပုံစံကော်လံများ ကဏ္ဍ ကို ကြည့်ပါ ။
ကော်လံအတန်းများသည် အတန်းတစ်ခုလျှင် ဖြစ်နိုင်သည့် 12 ခုထဲမှ သင်အသုံးပြုလိုသော ကော်လံအရေအတွက်ကို ညွှန်ပြသည်။ ဒါကြောင့် အညီအမျှ ကော်လံသုံးခုကို ဖြတ်ပြီး လိုချင်ရင် သုံးနိုင်ပါတယ် .col-4။
ကော်လံ widths ကို ရာခိုင်နှုန်းများဖြင့် သတ်မှတ်ထားသောကြောင့် ၎င်းတို့သည် ၎င်းတို့၏ ပင်မဒြပ်စင်နှင့် အမြဲအရည်ကျပြီး အရွယ်အစားဖြစ်သည်။
paddingကော်လံများသည် ကော်လံ တစ်ခုစီကြားရှိ ရေမြောင်းများကို ဖန်တီးရန် အလျားလိုက် ရှိသော်လည်း၊ marginအတန်း paddingများမှ ကော်လံ .no-guttersများမှ ဖယ်ရှားနိုင်သည် .row။
ဂရစ်ကို တုံ့ပြန်မှုဖြစ်စေရန်၊ တုံ့ပြန်မှု ဖြတ်တောက်မှု တစ်ခုစီအတွက် တစ်ခုစီအတွက် ဂရစ်အမှတ်ငါးခု ရှိသည် - ခွဲမှတ်များအားလုံး (အသေးစား၊ အလတ်စား၊ ကြီးနှင့် ပိုကြီး)။
ဇယားကွက်ခွဲမှတ်များသည် အနိမ့်ဆုံး width media queries များအပေါ် အခြေခံထားခြင်းဖြစ်သည်၊ ဆိုလိုသည်မှာ ၎င်းတို့သည် အဆိုပါ breakpoint တစ်ခုနှင့် ၎င်းအထက်ရှိအရာအားလုံးကို အသုံးပြုသည် (ဥပမာ၊ .col-sm-4အသေးစား၊ အလတ်စား၊ အကြီး၊ နှင့် အပိုကြီးမားသော စက်များတွင် အသုံးပြုနိုင်သော်လည်း ပထမ xsbreakpoint မဟုတ်ပါ။)
နောက်ထပ် အဓိပ္ပါယ်ဖွင့်ဆိုချက်များအတွက် ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများ (ကဲ့သို့ .col-4) သို့မဟုတ် Sass mixins ကို သင်သုံးနိုင်သည် ။

HTML ဒြပ်စင်အချို့ကို flex containers အဖြစ် အသုံးမပြုနိုင်ခြင်း ကဲ့သို့ flexbox ဝန်းကျင် ကန့်သတ်ချက်များနှင့် ချွတ်ယွင်းချက်များကို သတိထားပါ ။

ဂရစ်ရွေးချယ်စရာများ

Bootstrap သည် အရွယ်အစားအများစုကိုသတ်မှတ်ရန်အတွက် ems သို့မဟုတ် s ကိုအသုံးပြုသော်လည်း၊ s ကို grid breakpoints နှင့် container widths အတွက်အသုံးပြုသည်။ အဘယ်ကြောင့်ဆိုသော် viewport အကျယ်သည် pixels တွင်ရှိပြီး ဖောင့်အရွယ်အစား နှင့် မပြောင်းလဲသောကြောင့် ဖြစ်သည်။rempx

Bootstrap grid စနစ်၏ ရှုထောင့်များသည် အဆင်ပြေသောဇယားဖြင့် စက်များစွာတွင် မည်သို့အလုပ်လုပ်သည်ကို ကြည့်ပါ။

	အပိုသေးငယ်သော <576px	အသေးစား ≥576px	အလယ်အလတ် ≥768px	ကြီးမားသော ≥992px	ပိုကြီးသော ≥1200px
အများဆုံး ကွန်တိန်နာအကျယ်	မရှိ (အလိုအလျောက်)	540px	720px	960px	1140px
အတန်းရှေ့ဆက်	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
ကော်လံ # ခု	၁၂
ရေမြောင်းအကျယ်	30px (ကော်လံတစ်ခု၏တစ်ဖက်စီတွင် 15px)
အသိုက်အမြုံ	ဟုတ်ကဲ့
ကော်လံအော်ဒါမှာတယ်။	ဟုတ်ကဲ့

အလိုအလျောက် အပြင်အဆင် ကော်လံများ

တိကျသေချာသော နံပါတ်တပ်ထားသော အတန်းအစား မလိုအပ်ဘဲ ကော်လံအရွယ်အစားကို လွယ်ကူစေရန် breakpoint-specific ကော်လံအတန်းများကို အသုံးပြုပါ .col-sm-6။

အကျယ်

ဥပမာအားဖြင့်၊ ဤနေရာတွင် စက်ပစ္စည်းတိုင်းနှင့် viewport တစ်ခုစီအတွက် အသုံးပြုသည့် ဂရစ်ကွက်အပြင်အဆင် နှစ်ခုသည် ဤနေရာတွင် xsဖြစ်သည် xl။ သင်လိုအပ်သော breakpoint တစ်ခုစီအတွက် ယူနစ်နည်းသော အတန်းအရေအတွက်ကို ပေါင်းထည့်ကာ ကော်လံတိုင်းသည် တူညီမည်ဖြစ်သည်။

1 မှ 2

2 ၏ 2

1 မှ 3

2 မှ 3

3 ၏ 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

အနံ ညီတူညီမျှ လိုင်းပေါင်းစုံ

.w-100ကော်လံများကို စာကြောင်း အသစ်တစ်ခုသို့ ချိုးဖျက်လိုသည့်နေရာတွင် ထည့်သွင်းခြင်းဖြင့် မျဉ်းများစွာကို ချဲ့ထွင်နိုင်သော အနံညီသောကော်လံများကို ဖန်တီးပါ ။ တုံ့ပြန်မှုရှိသော display utilities.w-100 အချို့နှင့် ရောနှောခြင်းဖြင့် အနားယူမှုများကို တုံ့ပြန်မှုပြုလုပ်ပါ ။

၎င်းကို ရှင်းလင်းပြတ်သားစွာ သို့မဟုတ် ရှင်းရှင်းလင်းလင်းမရှိဘဲ လုပ်ဆောင်ခြင်းမှ ဟန့ ်တား သည့် Safari flexbox ချို့ယွင်းချက်တစ်ခု ရှိခဲ့သည် ။ ဘရောက်ဆာဗားရှင်းအဟောင်းများအတွက် ဖြေရှင်းနည်းများ ရှိပါသည်၊ သို့သော် သင်၏ပစ်မှတ်ဘရောက်ဆာများသည် buggy ဗားရှင်းများထဲသို့ မကျရောက်ပါက ၎င်းတို့သည် မလိုအပ်ပါ။flex-basisborder

ကော

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

ကော်လံအကျယ်ကို သတ်မှတ်ခြင်း။

flexbox grid ကော်လံများအတွက် အလိုအလျောက် အပြင်အဆင်ကို ဆိုလိုသည်မှာ သင်သည် ကော်လံတစ်ခု၏ အကျယ်ကို သတ်မှတ်နိုင်ပြီး ပေါက်ဖော်ကော်လံများကို ၎င်းအနီးတစ်ဝိုက်တွင် အလိုအလျောက် အရွယ်အစား ပြောင်းလဲစေနိုင်သည်။ သင်သည် ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများကို (အောက်တွင်ပြထားသည့်အတိုင်း)၊ grid mixins သို့မဟုတ် inline widths ကို အသုံးပြုနိုင်သည်။ အခြားကော်လံများသည် အလယ်ကော်လံ၏ အကျယ်အဝန်းအတိုင်း အရွယ်အစားပြောင်းလဲမည်ကို သတိပြုပါ။

1 မှ 3

3 မှ 2 (ပိုကျယ်)

3 ၏ 3

1 မှ 3

3 မှ 2 (ပိုကျယ်)

3 ၏ 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ပြောင်းလဲနိုင်သော အကျယ်အကြောင်းအရာ

col-{breakpoint}-auto၎င်းတို့၏အကြောင်းအရာ၏သဘာဝအကျယ်ကိုအခြေခံ၍ ကော်လံများကိုအရွယ်အစားပြုလုပ်ရန် အတန်းများကို အသုံးပြု ပါ။

1 မှ 3

ပြောင်းလဲနိုင်သော အကျယ်အကြောင်းအရာ

3 ၏ 3

1 မှ 3

ပြောင်းလဲနိုင်သော အကျယ်အကြောင်းအရာ

3 ၏ 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

တုံ့ပြန်မှုသင်တန်းများ

Bootstrap ၏ဇယားကွက်တွင် ရှုပ်ထွေးသောတုံ့ပြန်မှုအပြင်အဆင်များကိုတည်ဆောက်ရန်အတွက် ကြိုတင်သတ်မှတ်ထားသောအတန်းငါးဆင့်ပါဝင်သည်။ ပိုသေးငယ်သော၊ အသေးစား၊ အလတ်စား၊ ကြီးမားသော သို့မဟုတ် ပိုကြီးသော စက်များတွင် သင့်ကော်လံများ၏ အရွယ်အစားကို သင်စိတ်ကြိုက်ပြင်ဆင်ပါ။

ခွဲမှတ်အားလုံး

စက်များ၏အသေးဆုံးမှအကြီးဆုံးအထိတူညီသောဂရစ်များအတွက်၊ .colနှင့် .col-*အတန်းများကိုသုံးပါ။ အထူးအရွယ်အစား ကော်လံတစ်ခု လိုအပ်သောအခါတွင် နံပါတ်တပ်ထားသော အတန်းကို သတ်မှတ်ပါ။ မဟုတ်ရင် အားမနာနဲ့ မှီဝဲပါ .col။

ကော

col-8

col-4

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

အလျားလိုက် တွဲထားသည်။

အတန်း အစုံကို အသုံးပြု၍ သေးငယ်သော breakpoint ( ) .col-sm-*တွင် stacked စတင်ပြီး အလျားလိုက်ဖြစ်သွားသည့် အခြေခံဂရစ်စနစ်တစ်ခုကို သင်ဖန်တီးနိုင်သည် ။sm

col-sm-8

col-sm-4

col-sm

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

ရောသမမွှေပါ။

သင့်ကော်လံများကို အချို့ဇယားကွက်အဆင့်များတွင် ရိုးရိုးတန်းတန်းမတင်စေချင်ဘူးလား။ အဆင့်တစ်ခုစီအတွက် မတူညီသောအတန်းများကို လိုအပ်သလို ပေါင်းစပ်အသုံးပြုပါ။ အားလုံးဘယ်လိုအလုပ်လုပ်လဲဆိုတာကို ပိုကောင်းတဲ့စိတ်ကူးအတွက် အောက်က ဥပမာကို ကြည့်ပါ။

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

ရေတံလျှောက်

breakpoint-specific padding နှင့် negative margin utility classes များဖြင့် ရေတံလျှောက်များကို တုံ့ပြန်မှုဖြင့် ချိန်ညှိနိုင်သည်။ ပေးထားသော အတန်းတစ်ခုရှိ ရေတံလျှောက်များကို ပြောင်းလဲရန်၊ s ပေါ်ရှိ အနှုတ်အနားသတ်ကိရိယာ .rowနှင့် ကိုက်ညီသော padding utility ကို တွဲချိတ်ပါ .col။ ထပ်တူထပ်မျှသော padding utility ကို အသုံးပြု၍ မလိုလားအပ်သော လျှံထွက်ခြင်းကို ရှောင်ရှားရန် သို့မဟုတ် မိဘကိုလည်း ချိန်ညှိရန် လိုအပ် နိုင်သည် .container။.container-fluid

ဤသည်မှာ ကြီးမားသော ( lg) breakpoint နှင့် အထက်တွင် Bootstrap grid ကို စိတ်ကြိုက်ပြင်ဆင်ခြင်း ဥပမာတစ်ခုဖြစ်သည်။ .colကျွန်ုပ်တို့သည် padding ကို တိုးမြှင့် ထားပြီး၊ ၎င်းကို မိဘအပေါ် .px-lg-5ဆန့်ကျင် ပြီး wrapper ဖြင့် ချိန်ညှိ ထားသည် ။.mx-lg-n5.row.container.px-lg-5

စိတ်ကြိုက်ကော်လံအကွက်များ

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

အတန်းကော်လံများ

.row-cols-*သင့်အကြောင်းအရာနှင့် အပြင်အဆင်ကို အကောင်းဆုံးတင်ဆက်ပေးမည့် ကော်လံအရေအတွက်ကို အမြန်သတ်မှတ်ရန် တုံ့ပြန်မှုရှိသောအတန်းများကို အသုံးပြု ပါ။ ပုံမှန် .col-*အတန်းများသည် ကော်လံတစ်ခုစီ .col-md-4တွင် သက်ရောက်သော်လည်း .row၊

အခြေခံဇယားကွက်များကို လျင်မြန်စွာဖန်တီးရန် သို့မဟုတ် သင့်ကတ်အပြင်အဆင်များကို ထိန်းချုပ်ရန် ဤအတန်းကော်လံအတန်းများကို အသုံးပြုပါ။

ကော်လံ

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ကော်လံ

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ကော်လံ

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ကော်လံ

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ကော်လံ

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ပူးတွဲပါ Sass mixin ကိုလည်း အသုံးပြုနိုင်ပါတယ် row-cols()၊

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

တန်းညှိခြင်း။

ကော်လံများကို ဒေါင်လိုက်နှင့် အလျားလိုက် ချိန်ညှိရန် flexbox ချိန်ညှိမှု utilities ကိုသုံးပါ။ flex container တွင် min-heightအောက်ဖော်ပြပါအတိုင်း ပါရှိသည့်အခါ Internet Explorer 10-11 သည် ဒေါင်လိုက်ချိန်ညှိမှုကို မပံ့ပိုးပါ။ အသေးစိတ်အချက်အလက်များအတွက် Flexbugs #3 ကိုကြည့်ပါ။

ဒေါင်လိုက် ချိန်ညှိခြင်း။

ကော်လံသုံးခုထဲက တစ်ခု

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

ကော်လံသုံးခုထဲက တစ်ခု

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

အလျားလိုက် ချိန်ညှိခြင်း။

ကော်လံနှစ်ခုထဲက တစ်ခု

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ရေမြောင်းများမရှိပါ။

ကျွန်ုပ်တို့၏ ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများအတွင်းရှိ ကော်လံများကြားရှိ ရေမြောင်းများကို ဖယ်ရှားနိုင်သည် .no-gutters။ ၎င်းသည် အနုတ်လက္ခဏာ margins .rowနှင့် အလျားလိုက် paddingကို ချက်ချင်းကလေးကော်လံများအားလုံးမှ ဖယ်ရှားသည်။

ဤစတိုင်များကို ဖန်တီးရန်အတွက် အရင်းအမြစ်ကုဒ်ဖြစ်သည်။ ကော်လံကို အစားထိုးခြင်းများကို ပထမကလေးများကော်လံများသာ ကန့်သတ်ထားပြီး attribute ရွေးပေးစနစ်မှတစ်ဆင့် ပစ်မှတ်ထားခြင်းဖြစ်ကြောင်း သတိပြုပါ ။ ၎င်းသည် ပိုမိုတိကျသောရွေးချယ်မှုတစ်ခုကို ထုတ်ပေးသော်လည်း၊ ကော်လံ padding ကို spacing utilities ဖြင့် နောက်ထပ်စိတ်ကြိုက်ပြင်ဆင်နိုင်သေးသည် ။

edge-to-edge ဒီဇိုင်းလိုပါသလား။ မိဘကို စွန့်ပစ် .containerပါ .container-fluid။

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

လက်တွေ့မှာတော့ ဒါက ဘယ်လိုပုံစံမျိုးလဲ။ အခြားကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများ (ကော်လံအကျယ်များ၊ တုံ့ပြန်မှုအဆင့်များ၊ ပြန်လည်မှာယူမှုများ နှင့် အခြားအရာများအပါအဝင်) ၎င်းကို သင်သည် ဆက်လက်အသုံးပြုနိုင်ကြောင်း သတိပြုပါ။

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ကော်လံထုပ်

အတန်းတစ်ခုတွင် ကော်လံ 12 ခုထက်ပိုထားပါက၊ အပိုကော်လံအုပ်စုတစ်ခုစီသည် ယူနစ်တစ်ခုအနေဖြင့် လိုင်းအသစ်တစ်ခုသို့ ထုပ်ပိုးမည်ဖြစ်သည်။

.col-9

.col-4
9 + 4 = 13 > 12 မှစ၍၊ ဤ 4 ကော်လံ-ကျယ်ပြန့်သော div သည် ဆက်တိုက်ယူနစ်တစ်ခုအဖြစ် မျဉ်းအသစ်တစ်ခုပေါ်သို့ ထုပ်ပိုးထားသည်။

.col-6
နောက်ဆက်တွဲ ကော်လံများသည် စာကြောင်းအသစ်အတိုင်း ဆက်သွားကြသည်။

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

ကော်လံကွဲ

flexbox ရှိ စာကြောင်းအသစ်တစ်ခုသို့ ကော်လံများကို ချိုးဖျက်ရန်အတွက် အသေးစားဟက်ခ်တစ်ခု လိုအပ်သည်- width: 100%သင့်ကော်လံများကို မျဉ်းအသစ်တစ်ခုသို့ ပတ်လိုသည့်နေရာတိုင်းတွင် အစိတ်အပိုင်းတစ်ခု ထည့်ပါ။ ပုံမှန်အားဖြင့် ၎င်းကို .rows အများအပြားဖြင့် ပြီးမြောက်စေသော်လည်း အကောင်အထည်ဖော်မှုနည်းလမ်းတိုင်းသည် ၎င်းအတွက် တွက်ချက်နိုင်မည်မဟုတ်ပေ။

.col-6 .col-sm-3

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

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

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

ကျွန်ုပ်တို့၏ တုံ့ပြန်မှုရှိသောပြသမှုအသုံးအဆောင်များ နှင့်အတူ သတ်မှတ်ထားသော breakpoints များတွင်လည်း ဤအနားယူခြင်းကို သင် အသုံးပြုနိုင်ပါသည် ။

.col-6 .col-sm-4

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

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

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

ပြန်လည်စီစစ်ခြင်း။

အော်ဒါအတန်းများ

သင့်အကြောင်းအရာ ၏ အမြင်အစီအစဥ်.order- ကို ထိန်းချုပ်ရန်အတွက် အတန်းများကို အသုံးပြု ပါ။ ဤအတန်းများသည် တုံ့ပြန်မှုရှိသောကြောင့် သင် breakpoint (ဥပမာ၊ ) ဖြင့် သတ်မှတ်နိုင်သည်။ ဇယားကွက် အဆင့်ငါး ဆင့်စ လုံး အတွက် ပံ့ပိုးမှု ပါဝင်သည် ။order.order-1.order-md-2112

ပထမဦးစွာ DOM တွင် မည်သည့်အမိန့်ကိုမျှ မသုံးပါ။

DOM တွင် ဒုတိယ၊ ပိုကြီးသော အမှာစာဖြင့်

အမှာစာ 1 ဖြင့် DOM တွင် တတိယ

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

အသုံးချခြင်း .order-firstနှင့် ( ) တို့ကို အသီးသီး .order-lastပြောင်းလဲစေသော တုံ့ပြန်မှုရှိသော အတန်း များလည်း ရှိပါသည် ။ ဤအတန်းများကို လိုအပ်သလို နံပါတ်တပ်ထားသော အတန်းများနှင့်လည်း ရောနှောနိုင်သည် ။orderorder: -1order: 13order: $columns + 1.order-*

DOM တွင် ပထမ၊ နောက်ဆုံးအမိန့်

DOM တွင် ဒုတိယ၊ စီစဥ်ထားခြင်းမရှိပါ။

DOM တွင် တတိယ၊ ပထမအမိန့်

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

နှိမ်ခံကော်လံ

.offset-ကျွန်ုပ်တို့၏တုံ့ပြန်မှု ဇယားကွက်အတန်းများနှင့် ကျွန်ုပ်တို့၏အနားသတ်အသုံးအဆောင်များ ကို နည်းလမ်းနှစ်မျိုးဖြင့် သင် ချေဖျက်နိုင်သည် ။ Grid အတန်းများသည် ကော်လံများနှင့် ကိုက်ညီရန် အရွယ်အစားရှိပြီး အနားသတ်များသည် offset ၏ အကျယ်ကို ပြောင်းလဲနိုင်သော အမြန်လက်ကွက်များအတွက် ပိုအသုံးဝင်ပါသည်။

အော့ဖ်ဆက်အတန်းများ

.offset-md-*အတန်း များကို အသုံးပြု၍ ကော်လံများကို ညာဘက်သို့ ရွှေ့ပါ ။ ဤအတန်းများသည် ကော်လံတစ်ခု၏ ဘယ်ဘက်အနားသတ်ကို *ကော်လံများအလိုက် တိုးစေသည်။ ဥပမာ၊ ကော်လံလေးခုကို .offset-md-4ရွှေ့ ပါ။.col-md-4

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

တုံ့ပြန်မှုရှိသော breakpoints များတွင် ကော်လံရှင်းလင်းခြင်းအပြင်၊ သင်သည် အော့ဖ်ဆက်များကို ပြန်လည်သတ်မှတ်ရန် လိုအပ်နိုင်သည်။ ဇယားကွက်နမူနာ တွင် ဤလုပ်ဆောင်ချက်ကို ကြည့်ပါ ။

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

အနားသတ်အသုံးအဆောင်များ

v4 တွင် flexbox သို့ ရွှေ့ခြင်းဖြင့်၊ .mr-autoမောင်နှမ ကော်လံများကို တစ်ခုနှင့်တစ်ခု ဝေးရာသို့ အတင်းတွန်းပို့လိုသည့် margin utilities ကို သင်သုံးနိုင်သည်။

.col-md-4

.col-md-4 .ml-အော်တို

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

အသိုက်

သင့်အကြောင်းအရာကို မူရင်းဇယားကွက်ဖြင့် ချုပ်ထားရန်၊ ရှိပြီးသား ကော်လံတစ်ခုအတွင်း ကော်လံ အသစ် .rowနှင့် ကော်လံအစုံကို ပေါင်းထည့်ပါ ။ Nested အတန်းများတွင် 12 သို့မဟုတ် ထို့ထက်နည်းသော ကော်လံများ ပေါင်းထည့်သင့်သည် (သင်ရရှိနိုင်သည့် ကော်လံ 12 ခုလုံးကို အသုံးပြုရန် မလိုအပ်ပါ)။.col-sm-*.col-sm-*

အဆင့် 1: .col-sm-9

အဆင့် 2: .col-8 .col-sm-6

အဆင့် 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass mixins

Bootstrap ၏အရင်းအမြစ် Sass ဖိုင်များကိုအသုံးပြုသောအခါ၊ သင့်တွင် စိတ်ကြိုက်၊ အခေါ်အဝေါ်နှင့် တုံ့ပြန်မှုရှိသော စာမျက်နှာအပြင်အဆင်များဖန်တီးရန် Sass variables နှင့် mixins ကိုအသုံးပြုရန် ရွေးချယ်ခွင့်ရှိသည်။ ကျွန်ုပ်တို့၏ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများသည် လျင်မြန်သောတုံ့ပြန်မှုအပြင်အဆင်များအတွက် အဆင်သင့်အသုံးပြုနိုင်သောအတန်းအစုံအားလုံးကိုပေးဆောင်ရန် ဤတူညီသော variable များနှင့် mixins ကိုအသုံးပြုပါသည်။

ကိန်းရှင်များ

ကိန်းရှင်များနှင့် မြေပုံများသည် ကော်လံအရေအတွက်၊ ရေမြောင်းအကျယ်နှင့် ပေါ်နေသော ကော်လံများကို စတင်မည့် မီဒီယာမေးမြန်းမှုအမှတ်ကို ဆုံးဖြတ်သည်။ အထက်တွင်ဖော်ပြထားသော ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများအပြင် အောက်တွင်ဖော်ပြထားသော စိတ်ကြိုက် mixins အတွက် ၎င်းတို့ကို ကျွန်ုပ်တို့အသုံးပြုပါသည်။

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Mixin ကို ဂရစ်ကော်လံတစ်ခုစီအတွက် semantic CSS ကိုထုတ်လုပ်ရန်အတွက် grid variable များနှင့် တွဲဖက်အသုံးပြုပါသည်။

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

နမူနာအသုံးပြုမှု

သင်သည် ကိန်းရှင်များကို သင့်စိတ်ကြိုက်တန်ဖိုးများသို့ မွမ်းမံပြင်ဆင်နိုင်သည်၊ သို့မဟုတ် ၎င်းတို့၏မူလတန်ဖိုးများဖြင့် ရောစပ်ထားသော မင်များကိုသာ အသုံးပြုနိုင်သည်။ ဤသည်မှာ ကော်လံနှစ်ခုကြားရှိ ကွက်လပ်တစ်ခု ဖန်တီးရန် ပုံသေဆက်တင်များကို အသုံးပြုခြင်း၏ ဥပမာတစ်ခုဖြစ်သည်။

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

အဓိကအကြောင်းအရာ

အလယ်တန်းအကြောင်းအရာ

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ဇယားကွက်ကို စိတ်ကြိုက်ပြင်ဆင်ခြင်း။

ကျွန်ုပ်တို့၏ built-in grid Sass variables များနှင့် maps ကိုအသုံးပြုခြင်းဖြင့်၊ ကြိုတင်သတ်မှတ်ထားသော grid အတန်းများကို လုံးဝစိတ်ကြိုက်ပြင်ဆင်နိုင်မည်ဖြစ်ပါသည်။ အဆင့်အရေအတွက်၊ မီဒီယာမေးမြန်းမှုအတိုင်းအတာနှင့် ကွန်တိန်နာ widths ကိုပြောင်းပါ—ပြီးနောက် ပြန်လည်ပေါင်းစည်းပါ။

ကော်လံများနှင့် ရေမြောင်းများ

ဇယားကွက်ကော်လံအရေအတွက်ကို Sass variable များမှတစ်ဆင့် ပြင်ဆင်နိုင်သည်။ $grid-columnsကော်လံရေမြောင်းများအတွက် အကျယ်ကို သတ်မှတ် နေစဉ်တွင် ကော်လံတစ်ခုစီ၏ အကျယ် (ရာခိုင်နှုန်း) ထုတ်ပေးရန် အသုံးပြုသည် $grid-gutter-width။

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

ဇယားကွက် အလျှိုလျှို

ကော်လံများကို ကျော်လွန်၍ ဇယားကွက် အဆင့်များ ကိုလည်း စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။ အကယ်၍ သင်သည် ဇယားကွက်အလွှာလေးခုသာ လိုချင်ပါက၊ သင်သည် ၎င်းနှင့် ဤကဲ့သို့သော အရာများကို အပ်ဒိတ်လုပ် $grid-breakpointsရမည် $container-max-widths-

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass ကိန်းရှင်များ သို့မဟုတ် မြေပုံများကို အပြောင်းအလဲတစ်ခုခု ပြုလုပ်သည့်အခါ၊ သင်သည် သင်၏ပြောင်းလဲမှုများကို သိမ်းဆည်းပြီး ပြန်လည်ပေါင်းစည်းရန် လိုအပ်မည်ဖြစ်သည်။ ထိုသို့ပြုလုပ်ခြင်းဖြင့် ကော်လံအကျယ်များ၊ အော့ဖ်ဆက်များနှင့် မှာယူမှုများအတွက် ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အမျိုးအစားအသစ်စက်စက်ကို ထုတ်ပေးပါမည်။ တုံ့ပြန်မှုရှိသော မြင်နိုင်စွမ်းရှိသော အသုံးအဆောင်ပစ္စည်းများကိုလည်း စိတ်ကြိုက်ခွဲထွက်မှတ်များကို အသုံးပြုရန် အပ်ဒိတ်လုပ်ပါမည်။ pxဂရစ်တန်ဖိုးများကို (not rem, em, or %) တွင် သတ်မှတ်ရန် သေချာပါစေ ။