使用Bootstrap，我如何將無線電輸入顯示爲按鈕？

我目前的形式包含此代碼：使用Bootstrap，我如何將無線電輸入顯示爲按鈕？

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

我有收音機，我想讓它們看起來像可切換的按鈕。我該怎麼用Bootstrap來做這件事？

來源

2016-01-07 Likk

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

來源

2016-01-07 15:58:01

這節省了我的一天！ - 替換按鈕組中舊的

@Shibu Thomas，是否可以在bootstrap 3中顯示下拉菜單？ – Keynes

@凱恩斯你可以參考這個https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp –

您可以嘗試查看按鈕組，這是一個良好的按鈕組合，它可以像單選按鈕那樣切換。

JSFiddle

HTML

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

希望這有助於！

來源

2016-01-07 15:57:55 Simplicity

這可以工作，但：1。如果我點擊一個按鈕，它不保持選中狀態; 2.沒有''元素，我無法提交表格 – Likk

<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

來源

2016-01-07 16:08:11

使用Bootstrap，我如何將無線電輸入顯示爲按鈕？

回答

相關問題