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

Question

我是 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>

我想显示类似于下图的向上/向下排序箭头。


请帮我解决这个问题。非常感谢您的帮助。谢谢你。

Answer 1

您可以尝试使用 FontAwesome .它包含一个排序图标 (http://fontawesome.io/icon/sort/)。

为此，您将

需要包括fontawesome:

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

然后在你的 th 中简单地使用 fontawesome-icon 而不是 default-bootstrap-icons的:

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

希望有帮助。