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

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

Bootstrap Grids

BS Grid စနစ် BS Stacked/Horizontal BS Grid အသေး BS Grid Medium BS Grid အကြီး BS Grid နမူနာများ

Bootstrap အပြင်အဆင်များ

BS ပုံစံများ BS ဆောင်ပုဒ် "ရိုးရှင်းစွာ ကျွန်ုပ်" BS ဆောင်ပုဒ် "ကုမ္ပဏီ" BS Theme "Band"

Bootstrap နမူနာများ

BS နမူနာများ BS Quiz BS လေ့ကျင့်ခန်းများ BS လက်မှတ်

Bootstrap CSS Ref

CSS အတန်းအားလုံး CSS စာစီစာရိုက် CSS ခလုတ်များ CSS ပုံစံများ CSS အကူအညီပေးသူများ CSS ပုံများ CSS ဇယားများ CSS Dropdowns CSS Navs ဂလက်ဖကွန်များ

Bootstrap JS Ref

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


Bootstrap Grid - ကြီးမားသော စက်ပစ္စည်းများ


Bootstrap Grid ဥပမာ- ကြီးမားသော စက်ကိရိယာများ

  Extra small Small Medium Large
Class prefix .col-xs .col-sm .col-md .col-lg
Screen width <768px >=768px >=992px >=1200px

ယခင်အခန်းတွင်၊ အသေးစားနှင့်အလတ်စားစက်ပစ္စည်းများအတွက် အတန်းများပါသော ဇယားကွက်နမူနာတစ်ခုကို တင်ပြထားပါသည်။ ကျွန်ုပ်တို့သည် divs (ကော်လံ) နှစ်ခုကို အသုံးပြုပြီး ၎င်းတို့အား စက်ပစ္စည်းငယ်များတွင် 25%/75% ခွဲခြမ်းကာ အလယ်အလတ်စက်ပစ္စည်းများတွင် 50%/50% ခွဲခြမ်းပေးပါသည်။

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

သို့သော် စက်ကြီးများတွင် 33%/66% ခွဲ၍ ဒီဇိုင်းပိုကောင်းနိုင်သည်။

အကြံပြုချက်- ကြီးမားသောစက်ပစ္စည်းများကို မျက်နှာပြင်အကျယ် 1200 pixels နှင့်အထက် ရှိခြင်းဟု သတ်မှတ်သည်

စက်ကြီးများအတွက် .col-lg-*ကျွန်ုပ်တို့သည် အတန်းများကို အသုံးပြုပါမည်။

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

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

ယခု Bootstrap သည် "သေးငယ်သောအရွယ်အစားတွင်၊ ၎င်းတို့တွင် -sm- ပါသောအတန်းများကိုကြည့်ရှုပြီး၎င်းတို့ကိုအသုံးပြုပါ။ အလယ်အလတ်အရွယ်အစားတွင်၊ ၎င်းတို့တွင် -md- ရှိသောအတန်းများကိုကြည့်ရှုပြီး၎င်းတို့ကိုအသုံးပြုပါ။ ကြီးမားသောအရွယ်အစားတွင်ကြည့်ပါ၊ ၎င်းတို့တွင် -lg- ဟူသော စကားလုံးဖြင့် အတန်းများ နှင့် ၎င်းတို့ကို အသုံးပြုပါ။"

အောက်ဖော်ပြပါ ဥပမာသည် စက်ပစ္စည်းငယ်များတွင် 25%/75% ခွဲထုတ်ခြင်း၊ အလယ်အလတ်စက်ပစ္စည်းများတွင် 50%/50% နှင့် စက်ပစ္စည်းကြီးများတွင် 33%/66% ခွဲထွက်စေသည်-

ဥပမာ

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

မှတ်ချက်- ပေါင်းလဒ်သည် 12 အထိ အမြဲထည့်ထားကြောင်း သေချာပါစေ။


အကြီးစားကိုသာအသုံးပြုသည်။

အောက်ဖော်ပြပါ ဥပမာတွင်၊ ကျွန်ုပ်တို့သည် .col-lg-6အတန်းအစား ( .col-md-*နှင့်/သို့မဟုတ် မပါဘဲ .col-sm-*) ကိုသာ သတ်မှတ်ပေးပါသည်။ ဆိုလိုသည်မှာ ကြီးမားသော စက်ပစ္စည်းများသည် 50%/50% ကွဲသွားမည်ဖြစ်သည်။ သို့သော်၊ အလတ်စားနှင့် သေးငယ်သော စက်ပစ္စည်းများအတွက်၊ ၎င်းသည် ဒေါင်လိုက် (100% အကျယ်) ကို စုထားပါမည်။

ဥပမာ

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-lg-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-lg-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>