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

How to show Bootstrap table with sort icon

提问by Dibish

Am new to Bootstrap, i have a requirement to show a table with sort up and down arrow near to title of the table. This is my table structure

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

I want to display sort up/down arrows similar to the following image.

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

Please help me to solve this issue. Your help is much appreciated. Thank you.

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

回答by nozzleman

You could try using FontAwesome. It contains a sort-icon (http://fontawesome.io/icon/sort/).

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

To do so, you would

这样做，你会

1. need to include fontawesome:

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

2. and then simply use the fontawesome-icon instead of the default-bootstrap-icons in your th's:

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

1. 需要包括 fontawesome：

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

2. 然后只需在您的th's 中使用 fontawesome-icon 而不是 default-bootstrap-icons ：

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

Hope that helps.

希望有帮助。

回答by Dudi

Use this icons with 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

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

回答by Tudor

If you only need to show up/down arrows you have the solution. If you want them to work, you can use this BOOTSTRAP TABLE

如果您只需要显示向上/向下箭头，您就有解决方案。如果你想让它们工作，你可以使用这个BOOTSTRAP TABLE

回答by incontriamoci.xxx

BOOTSTRAP 4

引导程序 4

you can use a combination of

• fa-chevron-down, fa-chevron-up

• fa-sort-down, fa-sort-up

你可以组合使用

• fa-chevron-down, fa-chevron-up

• 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>