Как показать таблицу Bootstrap со значком сортировки

Я новичок в 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>

Я хочу показать сортировку стрелок вверх/вниз, похожих на следующее изображение.

Пожалуйста, помогите мне решить эту проблему. Ваша помощь очень ценится. Спасибо.

Ответы

Ответ 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">

а затем просто используйте значок fontawesome, а не значки по умолчанию - bootstrap в th:
```
<th><b>#</b> <i class="fa fa-fw fa-sort"></i></th>
```

Надеюсь, что это поможет.

Ответ 2

Используйте эти значки с бутстрапом (глификон):

<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

Ответ 3

Если вам нужно только показать стрелки вверх/вниз, у вас есть решение. Если вы хотите, чтобы они работали, вы можете использовать этот BOOTSTRAP TABLE