Question

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

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

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

https://gyazo.com/da61f52bae9336c34a9f89d69db5f5d4

有什么想法吗？谢谢！

Answer 1

2部分答案：

李克特 - 使用已禁用的.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>

颜色 - 只需覆盖＆＃39; .btn＆＃39;着色：

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

彩色编码bootstrap Likert scale

1 个答案: