बूटस्ट्रैप के साथ, मैं बटन के रूप में रेडियो इनपुट कैसे दिखा सकता हूं?

Question

मेरे प्रपत्र वर्तमान में इस कोड में शामिल हैं: रेडियो बटन के रूप में रेडियो बटन दिखाने के बजाय

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<label for="opt-0"><input type="radio" name="opt" id="opt-0" checked>Option 0</label> 
 
<label for="opt-1"><input type="radio" name="opt" id="opt-1">Option 1</label> 
 
<label for="opt-2"><input type="radio" name="opt" id="opt-2">Option 2</label>

, मैं उन्हें नियमित रूप से बटन की तरह लग रहे बनाने के लिए इस तरह करना चाहते हैं:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button class="btn btn-primary">Option 0</button> 
 
<button class="btn btn-default">Option 1</button> 
 
<button class="btn btn-default">Option 2</button>

मेरे पास रेडियो हैं और मैं उन्हें टॉगल करने योग्य बटन की तरह दिखाना चाहता हूं। बूटस्ट्रैप के साथ मुझे ऐसा कैसे करना चाहिए?

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  
<div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
     <input type="radio" name="options" id="option1"> Option 1 
     </label> 
     <label class="btn btn-primary"> 
     <input type="radio" name="options" id="option2"> Option 2 
     </label> 
     <label class="btn btn-primary"> 
     <input type="radio" name="options" id="option3"> Option 3 
     </label> 
</div> 

Answer 2

आप बटन समूह को देखने का प्रयास कर सकते हैं, यह एक गुच्छा है - अच्छी तरह से बटन ... जो एक रेडियोबूटन की तरह टॉगल करने योग्य है।

JSFiddle

एचटीएमएल

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<script src="https://code.jquery.com/jquery.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script> 

<div class="btn-group" role="group" aria-label="..."> 
    <button type="button" class="btn btn-primary">Left</button> 
    <button type="button" class="btn btn-primary">Middle</button> 
    <button type="button" class="btn btn-primary">Right</button> 
</div> 

आशा इस मदद करता है!

Answer 3

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary active"> 
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked) 
    </label> 
    <label class="btn btn-primary"> 
    <input type="checkbox" autocomplete="off"> Checkbox 2 
    </label> 
    <label class="btn btn-primary"> 
    <input type="checkbox" autocomplete="off"> Checkbox 3 
    </label> 
</div> 

jsfiddle-link
getbootstrap