顏色編碼bootstrap likert刻度

Question

與按鈕工具欄類似，我試圖在我的視圖（我正在使用ASP.net）中實現顏色編碼的likert刻度，並在兩側都貼上標籤。

「不危險」[1] [2] [3] [4] [5] 「危險」

[深綠] [淺綠] [黃色] [橙] [紅色]

https://gyazo.com/da61f52bae9336c34a9f89d69db5f5d4

任何想法？謝謝！

Answer 1

2部分答案：

1. 李克特 - 使用禁用.btn-link任一側

<div class="btn-toolbar" role="toolbar" aria-label="..."> 
     <div class="btn-group" role="group" aria-label="..."> 
     <a class="btn btn-link disabled" disabled>Safe</a> 
     <button type="button" class="btn btn-default likert-1">1</button> 
     <button type="button" class="btn btn-default likert-2">2</button> 
     <button type="button" class="btn btn-default likert-3">3</button> 
     <button type="button" class="btn btn-default likert-4">4</button> 
     <button type="button" class="btn btn-default likert-5">5</button> 
     <a class="btn btn-link disabled" disabled>Dangerous</a> 
     </div> 
    </div> 

顏色 - 只是覆蓋 '.btn' 着色：

.btn.likert-1 { background-color: darkgreen; color: yellow; } 
    .btn.likert-2 { background-color: lightgreen; color: brown; } 
    .btn.likert-3 { background-color: yellow; color: brown; } 
    .btn.likert-4 { background-color: orange; color: white; } 
    .btn.likert-5 { background-color: red; color: white; } 
    /* Choose better colors tho! */ 

查看此JSFiddle爲例。