颜色编码的引导李克特量表

Question

与按钮工具栏类似，我正在尝试在我的视图（我使用的是 ASP.net）中实现一个颜色编码的李克特比例尺，两边都有标签。

“不危险”[1][2][3][4][5]“危险”

[深绿色][浅绿色][黄色][橙色][红色]

https://gyazo.com/da61f52bae9336c34a9f89d69db5f5d4

有什么想法吗？谢谢！

Answer 1

两部分答案：

1. Likert - 在任一侧使用禁用的.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>

1. 颜色 - 只需覆盖“.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 以获取示例。