时间戳

首页 > 解决方案 > 如何使引导表列排序图标更明显？

bootstrap-4 - 如何使引导表列排序图标更明显？

问题描述

我正在使用bootstrap-table创建一个带有 Bootstrap 4 的表，并为列启用了排序。它工作得非常好，除了一个小细节：列标题中的小箭头几乎看不见。这是一个屏幕截图：

在此处输入图像描述

如何使向上/向下图标更大、更暗或更明显？

标签： bootstrap-4bootstrap-table

解决方案

Bootstrap-table 的默认箭头图像的颜色并没有提供太多的颜色对比，尤其是您的表格使用的浅灰色背景颜色（与 Bootstrap-table 在他们的示例中使用的白色背景相比），箭头是硬编码为base64图像，因此不易更改。

如果您想要符合 WCAG 2 AA 准则的具有更好颜色对比度的箭头，则需要覆盖 Bootstrap Table 在其 CSS 中具有的 base64 图像。您可以在 Bootstrap Table 的 CSS 文件之后添加自定义 CSS，以使用使用 SVG 图像的样式覆盖其样式，例如：

th {
    background-color: #e0e0e0;
}
.bootstrap-table .fixed-table-container .table thead th .both {
    background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='%23000000' opacity='0.56'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
    background-size: 1.1875rem, 1.1875rem;
}

.bootstrap-table .fixed-table-container .table thead th .asc {
    background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3C/svg%3E");
    background-size: 1.1875rem, 1.1875rem;
}

.bootstrap-table .fixed-table-container .table thead th .desc {
    background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
    background-size: 1.1875rem, 1.1875rem;
} /* IE10 & 11 want URL encoded open and close characters */

Bootstrap Table 的双箭头图像使用浅灰色 #DCDCDC。在白色背景下，灰色只有 1.4 比 1 的对比度。在您的灰色标题背景下，该比率仅为 1.2 比 1。WCAG 指南建议普通文本的对比度为 4.5 比 1。升/降箭头使用石板蓝色 #7A80DD。在白色背景下，石板蓝的对比度为 3.5 比 1，但仍低于推荐的 4.5 比 1。在您的灰色标题背景下，该比率为 3.0 比 1。

我已将 SVG 图像设置为使用黑色 (#000000) 填充，并改变不透明度以获得足够的对比度（谷歌在其Material Design 规范中推荐的方式）。

在白色背景下，对于双箭头，54% 的不透明度将产生 4.6 的对比度，对于单箭头，65% 的不透明度将产生 7.0 的对比度。这两个值足以让大多数人能够看到指标。

在浅灰色背景下（例如#e0e0e0，这是用于 Material Design 标题的灰色），不透明度为 56% 和 69% 将提供 4.6 和 7.3 的对比度，这是我配置演示代码使用的。

背景 SVG 图像对字符串中的小于“< 和大于”> 符号使用 URL 编码以与 IE 10 和 11 一起使用（我在 Chrome、Firefox 和 Edge 上测试了这些样式，它适用于那些三个浏览器）。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

<style>
    th {
        background-color: #e0e0e0;
    }
    .bootstrap-table .fixed-table-container .table thead th .both {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='%23000000' opacity='0.56'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
        background-size: 19px, 19px;
    }

    .bootstrap-table .fixed-table-container .table thead th .asc {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3C/svg%3E");
        background-size: 19px, 19px;
    }

    .bootstrap-table .fixed-table-container .table thead th .desc {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
        background-size: 19px, 19px;
    } /* IE10 & 11 want URL encoded open and close characters */
</style>

<table data-toggle="table">
    <thead>
    <tr>
        <th data-sortable="true" data-field="id">Item ID</th>
        <th data-sortable="true" data-field="name">Item Name</th>
        <th data-sortable="true" data-field="price">Item Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Item 1</td>
        <td>$1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Item 2</td>
        <td>$2</td>
    </tr>
    </tbody>
</table>

虽然双箭头与 asc 和 decs 箭头之间没有明显的对比，但它们都比 Bootstrap Table 的标准图像对更多用户可见，并且如果需要，可以增加不透明度。

推荐阅读