Cara menampilkan tabel Bootstrap dengan ikon sortir

Saya baru mengenal Bootstrap, saya memiliki persyaratan untuk menampilkan tabel dengan panah atas dan bawah di dekat judul tabel. Ini adalah struktur tabel saya

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

Saya ingin menampilkan panah atas/bawah seperti gambar berikut.

Tolong bantu saya untuk menyelesaikan masalah ini. Bantuan Anda sangat dihargai. Terima kasih.

Dibish
Pertanyaan edit 5 Agustus 2014 в 4:49
Pemrograman
twitter-bootstrap-3 twitter-bootstrap
5 Agustus 2014 в 4:41
25 tayangan
Larutan

Anda bisa mencoba menggunakan FontAwesome. Ini berisi sort-icon (http://fontawesome.io/icon/sort/).

Untuk melakukannya, Anda akan

  1. perlu menyertakan fontawesome:

  2. dan kemudian cukup gunakan fontawesome-icon sebagai pengganti default-bootstrap-icons di th's Anda:

     <th># </th>

Semoga bisa membantu.

nozzleman
Jawaban edit 5 Agustus 2014 в 9:08
Komentar (4)

Gunakan ikon ini dengan 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

Dudi
Jawaban edit 19 September 2016 в 6:56
Komentar (5)

Jika Anda hanya perlu menampilkan panah atas/bawah, Anda memiliki solusinya. Jika Anda ingin mereka bekerja, Anda dapat menggunakan ini BOOTSTRAP TABLE

Tudor
Jawaban edit 29 Maret 2017 в 2:33
Komentar (0)