如何使用排序图标显示Bootstrap表

qpgpyjmq 于 2022-12-28 发布在 Bootstrap

关注(0)|答案(3)|浏览(323)

我是新的 Bootstrap ，我有一个要求，显示一个表与排序向上和向下箭头附近的表标题。这是我的表结构

<table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th><b>#</b>  <i class='icon-arrow-up'></i><i class='icon-arrow-down'></th> **// tried** 
            <th ><b>Name</b></th>
            <th><b>Email</b></th>
            <th><b>Team</b></th>
            <th ><b>Role</b></th>
            <th ><b>Timezone</b></th>
            <th><b>Connections</b></th>
            <th><b># Posts available</b></th>
            <th><b>Last Login</b></th>
            <th><b>Posts</b></th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

我希望显示与下图类似的向上/向下排序箭头。x1c 0d1x
请帮我解决这个问题，非常感谢您的帮助，谢谢。

twitter-bootstrap

来源：https://stackoverflow.com/questions/25131336/how-to-show-bootstrap-table-with-sort-icon

3条答案

按热度按时间

falq053o1#

您可以尝试使用FontAwesome。它包含排序图标（http://fontawesome.io/icon/sort/）。
为此，您需要
1.需要包括字体：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

1.然后简单地使用fontawesome图标代替th中的默认引导图标：

<th><b>#</b> <i class="fa fa-fw fa-sort"></i></th>

赞(0）回复(0）举报 2022-12-28

ekqde3dh2#

将此图标与 Bootstrap 一起使用（glyphicon）：

<span class="glyphicon glyphicon-triangle-bottom"></span>
<span class="glyphicon glyphicon-triangle-top"></span>

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_glyph_triangle-bottom&stacked=h
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_glyph_triangle-bottom&stacked=h

赞(0）回复(0）举报 2022-12-28

n6lpvg4x3#

** Bootstrap 4**

您可以使用以下组合

第一个月
fa-sort-down, fa-sort-up

<th class="text-center">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-xs btn-link py-0 pl-0 pr-1">
             Some Text OR icon
        </button>
        <div class="btn-group-vertical">
            <a href="?sort=asc" class="btn btn-xs btn-link p-0">
                <i class="fas fa-sort-up"></i>
            </a>
            <a href="?sort=desc" class="btn btn-xs btn-link p-0">
                <i class="fas fa-sort-down"></i>
            </a>
        </div>
    </div>
</th>

赞(0）回复(0）举报 2022-12-28

我来回答

如何使用排序图标显示Bootstrap表

3条答案

相关问题

热门标签

最新问答