Bootstrap 5 စက်တင် နံပါတ်

နှိပ်ခြင်း အအုံး

Bootstrap 5 တွင် မတူညီသော နှိပ်ခြင်း အမျိုးအစားများ ပြည့်ပြည်းစွာ ပေးသည်:

实例

<button type="button" class="btn">အခြေခံ</button>
<button type="button" class="btn btn-primary">ပြင်ပ</button>
<button type="button" class="btn btn-secondary">တက်ခတ်</button>
<button type="button" class="btn btn-success">အောင်မြင်</button>
<button type="button" class="btn btn-info">သတင်း</button>
<button type="button" class="btn btn-warning">သတိပေး</button>
<button type="button" class="btn btn-danger">အဆိုး</button>
<button type="button" class="btn btn-dark">မျက်နှာပြင်</button>
<button type="button" class="btn btn-light">ပုံမှန်</button>
<button type="button" class="btn btn-link">လွှတ်ခွင့်ပေးရန်</button>

亲自试一试

နှိပ်ခြင်း အမျိုးအစား: <a>နှင့်<button> သို့မဟုတ် <input> အရာ:

实例

<a href="#" class="btn btn-success">လွှတ်ခွင့်ပေးရန် နှိပ်ခြင်း</a>
<button type="button" class="btn btn-success">နှိပ်ခြင်း</button>
<input type="button" class="btn btn-success" value="ဖိတ်သိမ်းရန်">
<input type="submit" class="btn btn-success" value="ဝေးစွတ်ရန်">
<input type="reset" class="btn btn-success" value="သုံးသပ်ရန်">

亲自试一试

ကျွန်တော်တို့ ချွန့်ပြီး လေ့လာ စာမျက်နှာ မရှိဘဲ နှင့် "404" အမှတ် ခွင့်ပြုချက် မရရှိဘဲ အတွက် ကျွန်တော်တို့ သည် # ကို ချွန့်ပြီး လေ့လာနိုင် စာမျက်နှာ ဖြစ်သည်။ လက်ရှိ အခြေအနေတွင် သူတို့ ဖြစ်သည် မှာ "ရှာဖွေ" စာမျက်နှာ အချို့ ဖြစ်သည်။

ကျွန်တော်တို့ ချွန့်ပြီး လေ့လာနိုင် စာမျက်နှာ မရှိဘဲ နှင့် "404" အမှတ် ခွင့်ပြုချက် မရရှိဘဲ အတွက် ကျွန်တော်တို့ သည် # ကို ချွန့်ပြီး လေ့လာနိုင် စာမျက်နှာ ဖြစ်သည်။ လက်ရှိ အခြေအနေတွင် သူတို့ ဖြစ်သည် မှာ "ရှာဖွေ" စာမျက်နှာ အချို့ ဖြစ်သည်။

ဘေ့စ် အဖက်အရုံး

Bootstrap 5 တွင် သုံးဆောင်နိုင် အဖက်အရုံး/အကြီးအတန်း ဘေ့စ် တွေ နှစ်ဆယ့်လေးခု ပါဝင်သည်。

သူတို့အပေါ် မိတ်ဆက်ပေးရာတွင် အပြင်းအထန် ဖြစ်ပေါ်လာသော "hover" အကျိုးသက်ရောက်မှု မြင်ရတယ်:

实例

<button type="button" class="btn btn-outline-primary">အခြေခံ</button>
<button type="button" class="btn btn-outline-secondary">ကျော်လွှား</button>
<button type="button" class="btn btn-outline-success">အောင်မြင်</button>
<button type="button" class="btn btn-outline-info">သတင်း</button>
<button type="button" class="btn btn-outline-warning">အခြေအနေ</button>
<button type="button" class="btn btn-outline-danger">အကြမ်းဖတ်</button>
<button type="button" class="btn btn-outline-dark">ပြီးပြည့်</button>
<button type="button" class="btn btn-outline-light text-dark">ပြီးပြည့်</button>

亲自试一试

ဘေ့စ် အဆင်းရဲ

အကြီး ဘေ့စ် အသုံး .btn-lg အမျိုးတွင် သန်းကြီး ဘေ့စ် အသုံး .btn-sm အမျိုး:

实例

<button type="button" class="btn btn-primary btn-lg">အကြီး</button>
<button type="button" class="btn btn-primary">မူကျခဏ</button>
<button type="button" class="btn btn-primary btn-sm">သန်းကြီး</button>

亲自试一试

ဘေ့စ် အဆင်းရဲ

အဖိုင်ပိုင်ရှိ အရွယ်အစား အဆင်းတူ အဆင်းရဲ ဘေ့စ် တွေ ကို ဖန်တီးရန် အဖိုင်ပိုင် ပေါ်တွင် .d-grid helper အမျိုး:

实例

亲自试一试

如果您有很多块级按钮，你可以用 .gap-* 类控制它们之间的间距：

实例

亲自试一试

活动/禁用按钮

按钮可以设置为活动（显示为被按下）或禁用（不可点击）状态：

类 .active 使按钮显示为被按下的状态，而 disabled 属性使按钮不可点击。请注意， 元素不支持 disabled 属性，因此必须使用 .disabled 类使其在视觉上显示为禁用。

实例



Disabled Link

亲自试一试

加载器按钮

您还可以向按钮添加 "spinner"，您将在我们的 BS5 Spinner 教程中学到更多内容：

实例

亲自试一试