Bootstrap Grid - Stacked-to-horizontal
Bootstrap Grid ဥပမာ- Stacked-to-horizontal
ကျွန်ုပ်တို့သည် ပိုကြီးသောစက်ပစ္စည်းများတွင် အလျားလိုက်မဖြစ်မီ အပိုကိရိယာငယ်များပေါ်တွင် အစီအစဥ်ချထားသည့် အခြေခံဂရစ်စနစ်တစ်ခုကို ဖန်တီးပါမည်။
အောက်ဖော်ပြပါ ဥပမာသည် ရိုးရှင်းသော "စတန်းမှ-အလျားလိုက်" ကော်လံနှစ်ခု အပြင်အဆင်ကို ပြသထားပြီး ဆိုလိုသည်မှာ ၎င်းသည် အပိုသေးငယ်သည့်စခရင်များမှလွဲ၍ ဖန်သားပြင်အားလုံးတွင် 50%/50% ကွဲသွားမည်ဖြစ်ပြီး၊ ၎င်းသည် အလိုအလျောက် (100%) စီစုလိမ့်မည်-
ဥပမာ- အထပ်လိုက်-အလျားလိုက်
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
အကြံပြုချက်- အတန်းများရှိ နံပါတ်များ .col-sm-*သည် div ကော်လံမည်မျှကို ချဲ့သင့်သည် (12 အနက်မှ) ကိုညွှန်ပြသည်။ ထို့ကြောင့်၊ .col-sm-1ကော်လံ 1 ခု၊ .col-sm-4ကော်လံ 4 ခု၊
.col-sm-6အပိုင်း 6 ကော်လံ စသဖြင့်။
မှတ်ချက်- ပေါင်းလဒ်သည် အမြဲတမ်း 12 အထိ ပေါင်းထားကြောင်း သေချာပါစေ။
အကြံပြုချက်- အတန်းအစားသို့ ပြောင်းလဲခြင်းဖြင့် ပုံသေအ နံ ကိုမဆို အကျယ်အဝန်းအဖြစ်သို့ ပြောင်းလဲနိုင်သည် ။.container.container-fluid
ဥပမာ- အရည်ပုံး
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>