Bootstrap 4 ကတ်
ကတ်များ
Bootstrap 4 ရှိ ကတ်တစ်ခုသည် ၎င်း၏ အကြောင်းအရာ ပတ်လည်တွင် အကွက်အချို့ပါရှိသော ဘောင်တစ်ခုဖြစ်သည်။ ၎င်းတွင် ခေါင်းစီးများ၊ အောက်ခံများ၊ အကြောင်းအရာ၊ အရောင်များ စသည်တို့အတွက် ရွေးချယ်စရာများ ပါဝင်သည်။
မောင်လှ
အချို့သောဥပမာစာသားအချို့ဥပမာစာသား။ မောင်လှသည် ဗိသုကာနှင့် အင်ဂျင်နီယာဖြစ်သည်။
Profile ကိုကြည့်ပါ။အခြေခံကတ်
အခြေခံကတ်ကို အတန်းအစားဖြင့် ဖန်တီးထားပြီး .cardကတ်အတွင်းရှိ အကြောင်းအရာ .card-bodyအတန်းတစ်ခု ရှိသည်-
ဥပမာ
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Bootstrap 3 နှင့် ရင်းနှီးပါက၊ ကတ်များသည် အကန့်ဟောင်းများ၊ ရေတွင်းများနှင့် ပုံသေးများကို အစားထိုးပါ။
ခေါင်းစီးနှင့်အောက်ခြေ
.card-headerအတန်းသည် ကတ်သို့ ခေါင်းစီးတစ်ခုကို ပေါင်းထည့်ကာ အတန်းသည် ကတ် သို့ .card-footerအောက်ခြေမှတ်တစ်ခုကို ပေါင်းထည့်သည်-
ဥပမာ
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
ဆက်စပ်ကတ်များ
ကတ်ကို နောက်ခံအရောင်ထည့်ရန်၊ ဆက်စပ်အတန်းများ ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkနှင့် .bg-light.
ဥပမာ
ခေါင်းစဉ်များ၊ စာသားများနှင့် လင့်ခ်များ
.card-titleမည်သည့်ခေါင်းစဉ်မဆို ကတ်ခေါင်းစဉ်များထည့်ရန် အသုံးပြုပါ ။ အတွင်းတွင် နောက်ဆုံး .card-textကလေး (သို့မဟုတ် တစ်ခုတည်းသော) ဖြစ်ပါက <p> ဒြပ်စင်အတွက် အောက်ခြေအနားသတ်များကို ဖယ်ရှားရန် အတန်းကို အသုံးပြုသည် .card-body။ အတန်း သည် .card-linkမည်သည့်လင့်ခ်တွင်မဆို အပြာရောင်ကို ပေါင်းထည့်ကာ hover effect ကိုပေးသည်။
ဥပမာ
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
ကတ်ပုံများ
မောင်လှ
အချို့သောဥပမာစာသားအချို့ဥပမာစာသား။ မောင်လှသည် ဗိသုကာနှင့် အင်ဂျင်နီယာဖြစ်သည်။
Profile ကိုကြည့်ပါ။
ကတ်အတွင်းတွင် ပုံကို ထိပ် သို့မဟုတ် အောက်ခြေတွင် ထည့်ရန် .card-img-topသို့မဟုတ် .card-img-bottomတစ်ခုသို့ ထည့်ပါ ။ အကျယ်တစ်ခုလုံးကိုချဲ့ရန် ကျွန်ုပ်တို့သည်
<img>ပုံ၏အပြင်ဘက်တွင် ထည့်ထားကြောင်း သတိပြုပါ ။.card-body
ဥပမာ
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
ဆန့်တန်းလင့်
အတန်းကို ကတ်အတွင်းရှိ လင့်ခ်တစ်ခုသို့ ထည့်ပါ .stretched-link၊ ၎င်းသည် ကတ်တစ်ခုလုံးကို ကလစ်နှိပ်၍ ပျံဝဲနိုင်စေလိမ့်မည် (ကတ်သည် လင့်ခ်တစ်ခုအဖြစ် လုပ်ဆောင်ပါမည်--
မောင်လှ
အချို့သောဥပမာစာသားအချို့ဥပမာစာသား။ မောင်လှသည် ဗိသုကာနှင့် အင်ဂျင်နီယာဖြစ်သည်။
Profile ကိုကြည့်ပါ။ဥပမာ
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
ကတ်ပုံ အထပ်များ
ပုံတစ်ပုံကို ကတ်နောက်ခံအဖြစ်ပြောင်းပြီး .card-img-overlay
ပုံ၏ထိပ်တွင် စာသားထည့်ရန် အသုံးပြုပါ-
ဥပမာ
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
ကတ်ကော်လံများ
ပထမကတ်အတွင်းမှ စာသားအချို့
ဒုတိယကတ်အတွင်းမှ စာသားအချို့
တတိယကတ်အတွင်းမှ စာသားအချို့
စတုတ္ထကတ်အတွင်းမှ စာသားအချို့
ပဉ္စမကတ်အတွင်းမှ စာသားအချို့
ဆဋ္ဌမကတ်အတွင်းမှ စာသားအချို့
အတန်းသည် ပန်း .card-columnsရံနှင့်တူသော ကတ်များ (pinterest ကဲ့သို့) ဖန်တီးသည်။ ကတ်များထပ်ထည့်သည့်အခါ အပြင်အဆင်သည် အလိုအလျောက်ချိန်ညှိမည်ဖြစ်သည်။
မှတ်ချက်- ကတ်များကို သေးငယ်သော စခရင်များ (576px အောက်) တွင် ဒေါင်လိုက်ပြသသည်-
ဥပမာ
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
ဖဲချပ်
ပထမကတ်အတွင်းမှ စာသားအချို့
အမြင့်ကိုတိုးရန် နောက်ထပ်စာသားအချို့
အမြင့်ကိုတိုးရန် နောက်ထပ်စာသားအချို့
အမြင့်ကိုတိုးရန် နောက်ထပ်စာသားအချို့
ဒုတိယကတ်အတွင်းမှ စာသားအချို့
တတိယကတ်အတွင်းမှ စာသားအချို့
စတုတ္ထကတ်အတွင်းမှ စာသားအချို့
အတန်းသည် အ မြင့်နှင့် အနံညီ.card-deck သော ကတ်ဇယားကွက်တစ်ခုကို ဖန်တီးသည် ။ ကတ်များထပ်ထည့်သည့်အခါ အပြင်အဆင်သည် အလိုအလျောက်ချိန်ညှိမည်ဖြစ်သည်။
မှတ်ချက်- ကတ်များကို သေးငယ်သော စခရင်များ (576px အောက်) တွင် ဒေါင်လိုက်ပြသသည်-
ဥပမာ
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
ကတ်အုပ်စု
ပထမကတ်အတွင်းမှ စာသားအချို့
အမြင့်ကိုတိုးရန် နောက်ထပ်စာသားအချို့
အမြင့်ကိုတိုးရန် နောက်ထပ်စာသားအချို့
အမြင့်ကိုတိုးရန် နောက်ထပ်စာသားအချို့
ဒုတိယကတ်အတွင်းမှ စာသားအချို့
တတိယကတ်အတွင်းမှ စာသားအချို့
စတုတ္ထကတ်အတွင်းမှ စာသားအချို့
.card-groupအတန်းကတော့ အတူတူပါပဲ .card-deck။ တစ်ခုတည်းသော ကွာခြားချက်မှာ .card-groupကတ်တစ်ခုစီကြားရှိ ဘယ်ညာ အနားသတ်များကို အတန်းက ဖယ်ရှားပေးခြင်းဖြစ်သည်။
မှတ်ချက်- ကတ်များကို အပေါ် နှင့် အောက်ခြေအနားသတ်ဖြင့် သေးငယ်သောစခရင်များ (576px အောက်) တွင် ဒေါင်လိုက်ပြသသည် -
ဥပမာ
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>