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

发布时间：2020-12-18 00:18:28 所属栏目：安全来源：网络整理

导读：对于Bootstrap来说,我是新的,我需要显示一个表格,上面和下面的箭头靠近桌子的标题.这是我的表结构 table class="table table-bordered table-striped" thead tr thb#/b i class='icon-arrow-up'/ii class='icon-arrow-down'/th **// tried** th bName/b/th t

对于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>

我想显示类似于以下图像的排序上/下箭头.

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

解决方法

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

要这样做,你会的

>需要包括fontawesome：

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

>然后只需使用fontawesome-icon,而不是您的th中的default-bootstrap-icons：

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

希望有帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!