軌道單選按鈕引導風格

Question

我有一個單選按鈕，看起來像這樣：

代碼：

= f.input :status, as: :radio_buttons, collection: ["Active", "Frozen", "Finished"] 

我希望它添加一些造型爲它是這樣的：

如何能不能做到？

Answer 1

簡單的解決方案，我發現： 在形式：

= f.collection_radio_buttons :status, [[1, "Qualification"] ,[2, "Active"] ,[3, "Frozen"] ,[4, "Finished"] ,[5, "Requalified"]], :first, :last 

在樣式表：

input[type="radio"] { 
    display:none; 
} 

label { 
    ///color of borders 
    border: 0.5px solid #DDD; 
    border-radius:0px; 
} 

label:hover { 
    cursor:pointer; 
    background-color:red; 
} 

input[type="radio"]:checked + label { 
    background-color: green; 
} 

給我們：

Answer 2

加載自舉

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

定義單選按鈕選項

<% collection = [ { name: "Active", id: 1 }, 
        { name: "Frozen", id: 2 }, 
        { name: "Finished", id: 3 } 
       ] %> 

顯示所有選項，切換按鈕

<div class="btn-group" data-toggle="buttons"> 
    <% collection.each do |status| %> 
    <label class="btn btn-primary"> 
     <input type="radio" name="options" id="<%= status[:id] %>" autocomplete="off"> 
     <%= status[:name] %> 
     </input> 
    </label> 
    <% end %> 
</div> 

集類按下按鈕時

<script> 
    $('.btn').on('click', function() { 
    <!-- deselect all buttons and set normal color --> 
    $('.btn').removeClass('active'); 
    $('.btn').removeClass('btn-danger'); 

    <!-- set current button as active and change color --> 
    $(this).addClass('active'); 
    $(this).addClass('btn-danger'); 
    }); 
</script>