ဂရစ်စနစ်

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

ဤစာမျက်နှာတွင်

ဥပမာ

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

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

ကော်လံ

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

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

အဲဒါကို ခွဲထုတ်လိုက်ရင် ဇယားကွက်စနစ်က ဘယ်လို ပေါင်းစပ်လာသလဲ၊

ကျွန်ုပ်တို့၏ဇယားကွက်သည် တုံ့ပြန်မှုရှိသော breakpoints ခြောက်ခု ကို ပံ့ပိုး ပေးပါသည်။ Breakpoints များသည် media queries များအပေါ် အခြေခံ၍ min-widthဆိုလိုသည်မှာ ၎င်းတို့သည် အဆိုပါ breakpoint နှင့် ၎င်းအထက်ရှိအရာအားလုံးကို အကျိုးသက်ရောက်သည် (ဥပမာ၊ .col-sm-4၊ sm၊ md၊ lgနှင့် xl) xxlတို့ဖြစ်သည်။ ဆိုလိုသည်မှာ breakpoint တစ်ခုစီဖြင့် ကွန်တိန်နာနှင့် ကော်လံအရွယ်အစားနှင့် အပြုအမူတို့ကို သင်ထိန်းချုပ်နိုင်သည်။
ကွန်တိန်နာများကို အလယ်ဗဟိုတွင်ထားပြီး သင့်အကြောင်းအရာကို အလျားလိုက် ဖြန့်ပါ။ .containerတုံ့ပြန်မှုရှိသော pixel width .container-fluidအတွက် ၊ width: 100%viewports နှင့် devices များအားလုံးအတွက်၊ သို့မဟုတ် .container-mdfluid နှင့် pixel widths ပေါင်းစပ်မှုအတွက် အသုံးပြုပါ ။
အတန်းများသည် ကော်လံများအတွက် ထုပ်ပိုးမှုများဖြစ်သည်။ ကော်လံတစ်ခုစီတွင် padding၎င်းတို့ကြားရှိနေရာများကို ထိန်းချုပ်ရန်အတွက် ရေပြင်ညီ (ရေမြောင်းဟုခေါ်သည်) ရှိသည်။ ထို့နောက် paddingသင့်ကော်လံများရှိ အကြောင်းအရာကို ဘယ်ဘက်အခြမ်းမှ အမြင်အာရုံဖြင့် ချိန်ညှိထားကြောင်း သေချာစေရန် ၎င်းကို အနုတ်အနားစွန်းများဖြင့် တန်းများပေါ်တွင် တန်ပြန်ထားသည်။ သင့်အကြောင်းအရာ၏အကွာအဝေးကိုပြောင်းလဲရန် ကော်လံအရွယ်အစား နှင့် ရေ မြောင်းအတန်းများကို တစ်ပြေးညီအသုံးပြုရန် အတန်းများသည် ပြုပြင်မွမ်းမံအတန်းများကို ပံ့ပိုးပေးပါသည် ။
ကော်လံများသည် မယုံနိုင်လောက်အောင် ပြောင်းလွယ်သည်။ အတန်းတစ်ခုလျှင် နမူနာ ကော်လံ 12 ခု ရှိပြီး၊ ကော်လံ အရေအတွက် မည်မျှ ကျယ်ဝန်းသော ဒြပ်စင်များ၏ မတူညီသော ပေါင်းစပ်မှုများကို ဖန်တီးနိုင်သည်။ ကော်လံအတန်းများသည် အတိုင်းအတာတစ်ခုအထိ ပုံစံခွက်ကော်လံအရေအတွက်ကို ညွှန်ပြသည် (ဥပမာ၊ col-4အပိုင်းလေးပိုင်း)။ widths ကို ရာခိုင်နှုန်းများဖြင့် သတ်မှတ်ထားသောကြောင့် သင့်တွင် တူညီသော ဆွေမျိုးအရွယ်အစားရှိသည်။
ရေတံလျှောက်များသည်လည်း တုံ့ပြန်မှုရှိပြီး စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။ ကျွန်ုပ်တို့၏ အနားသတ်နှင့် padding အကွာအဝေး ကဲ့သို့ အရွယ်အစားအားလုံးဖြင့် ရေတံလျှောက် အတန်းများကို ခွဲထွက်မှတ်များအားလုံးတွင် ရနိုင်ပါသည် ။ အတန်းများ၊ ဒေါင်လိုက်ရေမြောင်းများ သို့မဟုတ် အတန်းများပါရှိသော ရေမြောင်းများအားလုံးကို အလျားလိုက်ရေမြောင်းများကို ပြောင်းလဲ ပါ ။ ရေမြောင်းများကိုဖယ်ရှားရန်လည်းရနိုင်သည်။.gx-*.gy-*.g-*.g-0
Sass variable များ၊ မြေပုံများနှင့် mixins များသည် grid ကို အားကောင်းစေသည်။ Bootstrap တွင် ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများကို မသုံးလိုပါက၊ သင်သည် ကျွန်ုပ်တို့၏ grid ၏အရင်းအမြစ် Sass ကို အသုံးပြု၍ အဓိပ္ပာယ်ပိုရှိသော markup ဖြင့် သင့်ကိုယ်ပိုင်ဖန်တီးနိုင်သည်။ သင့်အတွက် ပိုမိုပျော့ပျောင်းစေရန်အတွက် ဤ Sass variables များကိုစားသုံးရန် CSS စိတ်ကြိုက်ဂုဏ်သတ္တိအချို့ကိုလည်း ထည့်သွင်းထားပါသည်။

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

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

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

အပိုအသေး (xs)
အသေးစား (sm)
အလတ်စား (md)
အကြီး (lg)
အပိုကြီး (xl)
အပိုပိုကြီး (xxl)

အထက်တွင်ဖော်ပြထားသည့်အတိုင်း၊ ဤ breakpoints တစ်ခုစီတွင် ၎င်းတို့၏ကိုယ်ပိုင် container၊ ထူးခြားသောအတန်းရှေ့ဆက်နှင့် modifiers ရှိသည်။ ဤအပေါက်များကြားတွင် ဇယားကွက် ပြောင်းလဲပုံမှာ ဤအရာဖြစ်သည်-

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
ကွန်တိန်နာ`max-width`	မရှိ (အလိုအလျောက်)	540px	720px	960px	1140px	1320px
အတန်းရှေ့ဆက်	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
ကော်လံ # ခု	၁၂
ရေမြောင်းအကျယ်	1.5rem (ဘယ်ညာတွင် .75rem)
စိတ်ကြိုက်ရေမြောင်းများ	ဟုတ်ကဲ့
အသိုက်အမြုံ	ဟုတ်ကဲ့
ကော်လံအော်ဒါမှာတယ်။	ဟုတ်ကဲ့

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

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

အကျယ်

ဥပမာအားဖြင့်၊ ဤနေရာတွင် စက်ပစ္စည်းတိုင်းနှင့် viewport တစ်ခုစီအတွက် အသုံးပြုသည့် ဂရစ်ကွက်အပြင်အဆင် နှစ်ခုသည် ဤနေရာတွင် xsဖြစ်သည် xxl။ သင်လိုအပ်သော 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>

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

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>

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

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

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

ကော်လံ

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

ကော်လံ

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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);
  }
}

အသိုက်

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

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

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>

ဆူး

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

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

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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: 1.5rem !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 %) တွင် သတ်မှတ်ရန် သေချာပါစေ ။