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="పునఃసంస్థాపన బటన్">

మీరే ప్రయత్నించండి

\u4e3a\u4ec0\u4e48\u6211\u4eec\u5728\u94fe\u63a5\u7684\u5c06\u4e00\u4e2a\u23cf\u5f15\u7528\u3002

\u56e0\u4e3a\u6211\u4eec\u6ca1\u6709\u4efb\u4e8b\u53ef\u94fe\u5f15\u5230\u7684\u9875\u9762\u800c\u800c\u6211\u4eec\u4e5f\u4e0d\u60f3\u6536\u5230\u201c404\u201d\u6d88\u606f\u300c\u6211\u4eec\u5c06\u23cf\u5f15\u7528\u3002\u5728\u771f\u5b9e\u751f\u6d4b\u4e2d\u300c\u6211\u4eec\u5c06\u4f7f\u7528\u7684\u6b63\u786e\u9875\u9762\u7684\u771f\u5b9e\u5730\u5740\u3002

按钮轮廓

Bootstrap\u300a5\u300b\u8fd8\u63d0\u4f9b\u4e03\u4e2a\u8be6\u8ff9\/\u8fb9\u6846\u6309\u94ae\u3002

将\u9a6c\u6301\u79fb\u5230\u5b83\u4eec\u4e0a\u65f6\u53ef\u770b\u5230\u9884\u52a0\u7684\u201c\u6c14\u5c4f\u201d\u6548\u679c\uff1a

ఉదాహరణ

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

మీరే ప్రయత్నించండి

按钮尺寸

对\u5927\u6309\u94ae\u4f7f\u7528 .btn-lg 类\u3001\u5bf9\u5c0f\u6309\u94ae\u4f7f\u7528 .btn-sm 类\u3001：

ఉదాహరణ

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

మీరే ప్రయత్నించండి

块级按钮

\u5982\u8981\u521b\u5efa\u8ddf\u7f6e\u7236\u5143\u7b49\u5bb6\u5e26\u7684\u5757\u7c7b\u6309\u94ae\uff0c\u8bf7\u5728\u7f6e\u7236\u5143\u7b49\u5bb6\u4e0a\u4f7f\u7528 .d-grid helper\u3000\u7c7b\u3001：

ఉదాహరణ

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">పూర్తి వెడల్పు బటన్</button>
</div>

మీరే ప్రయత్నించండి

మీరు బ్లాక్ బటన్లు ఎక్కువగా ఉన్నట్లయితే, మీరు .gap-* క్లాస్ బటన్ల మధ్య అంతరాలను నియంత్రిస్తుంది:

ఉదాహరణ

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">పూర్తి వెడల్పు బటన్</button>
  <button type="button" class="btn btn-primary btn-block">పూర్తి వెడల్పు బటన్</button>
  <button type="button" class="btn btn-primary btn-block">పూర్తి వెడల్పు బటన్</button>
</div>

మీరే ప్రయత్నించండి

చేతన/నిలిచిపోయిన బటన్

బటన్ను చేతనమైన (నొక్కిన రూపంలో చూపిస్తుంది) లేదా నిలిచిపోయిన (క్లిక్ చేయలేని) స్థితిలో సెట్ చేయవచ్చు:

క్లాస్ .active బటన్ను నొక్కిన రూపంలో చూపిస్తుంది కాబట్టి disabled అత్యావసరమైన అంశం అనేది, <a> ఎలమెంట్ డిసేబుల్డ్ అట్రిబ్యూట్ ను మద్దతు ఇవ్వదు కాబట్టి, ఉపయోగించాలి: .disabled క్లాస్ బటన్ను విషువికి నిలిచిపోయిన రూపంలో చూపిస్తుంది.

ఉదాహరణ

<button type="button" class="btn btn-primary active">చేతనమైన ప్రధానం</button>
<button type="button" class="btn btn-primary" disabled>నిలిచిపోయిన ప్రధానం</button>
<a href="#" class="btn btn-primary disabled">నిలిచిపోయిన లింకు</a>

మీరే ప్రయత్నించండి

లోడర్ బటన్

మీరు బటన్లకు "spinner" జోడించవచ్చు, మీరు మా BS5 Spinner శిక్షణలో మరింత వివరాలను నేర్చుకుంటారు:

ఉదాహరణ

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading..
</button>

మీరే ప్రయత్నించండి