బూస్ట్రాప్ 5 బటన్ గ్రూప్
కోర్సు పరిశీలన:
బటన్ గ్రూప్
ఉపయోగించండి క్లాస్ తో బటన్ గ్రూప్ లో ఒక శ్రేణి బటన్లను కలిపివేయవచ్చు (ఒక పంక్తిలో): .btn-group క్లాస్ యొక్క <div> బటన్ గ్రూప్ నిర్మించడానికి ఉపయోగించండి అంశం లో ఉపయోగించండి:
ఉదాహరణ
<div class="btn-group"> <button type="button" class="btn btn-primary">హోవ్యు</button> <button type="button" class="btn btn-primary">డాజ్యుంగ్</button> <button type="button" class="btn btn-primary">మిశో</button> </div>
సూచన:ప్రతి బటన్ యొక్క పరిమాణాన్ని గ్రూప్ లోని ప్రతి బటన్ పైన వాడకండి, బదులుగా క్లాస్ ఉపయోగించండి: .btn-group-lg పెద్ద బటన్ గ్రూప్ లేదా ఉపయోగించండి: .btn-group-sm చిన్న బటన్ గ్రూప్ కొరకు ఉపయోగించబడుతుంది:
ఉదాహరణ
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">హోవ్యు</button> <button type="button" class="btn btn-primary">డాజ్యుంగ్</button> <button type="button" class="btn btn-primary">మిశో</button> </div>
ప్రారంభించండి వర్తికించే బటన్ గ్రూపులు
Bootstrap 5 వర్తికించే ప్రారంభించండి వర్తికించే బటన్ గ్రూపులు కూడా ఉన్నాయి:
క్లాస్సును ఉపయోగించండి .btn-group-vertical ప్రారంభించండి ప్రారంభించండి వర్తికించే బటన్ గ్రూపులు సృష్టించండి:
ఉదాహరణ
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">హోవ్యు</button> <button type="button" class="btn btn-primary">డాజ్యుంగ్</button> <button type="button" class="btn btn-primary">మిశో</button> </div>
పక్కపక్క బటన్ గ్రూపులు
అప్రమేయంగా, బటన్ గ్రూపులు "inline" ఉంటాయి, అనేక బటన్ గ్రూపులు ఉన్నప్పుడు పక్కపక్కగా చూపబడతాయి:
ఉదాహరణ
<div class="btn-group"> <button type="button" class="btn btn-primary">హోవ్యు</button> <button type="button" class="btn btn-primary">డాజ్యుంగ్</button> <button type="button" class="btn btn-primary">మిశో</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">జిలీ</button> <button type="button" class="btn btn-primary">చంగ్ చూంగ్</button> <button type="button" class="btn btn-primary">హోంగ్ క్వా</button> </div>
అంతర్గత బటన్ గ్రూపులు మరియు డౌన్ మ్యాన్ ప్యానల్
అంతర్గత బటన్ గ్రూపులు, డౌన్ మ్యాన్ ప్యానల్ను సృష్టించవచ్చు (మీరు తర్వాతి చాప్టర్స్ లో డౌన్ మ్యాన్ ప్యానల్ గురించి మరింత తెలుసుకోవచ్చు):
ఉదాహరణ
<div class="btn-group">
<button type="button" class="btn btn-primary">హోవ్యు</button>
<button type="button" class="btn btn-primary">డాజ్యుంగ్</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">మిశో</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">మొబైల్</a>
<a class="dropdown-item" href="#">ప్లాట్ కర్ట్</a>
</div>
</div>
</div>
