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**を使ってみてはいかがでしょうか。sort-icon(http://fontawesome.io/icon/sort/)が入っています。
そのためには、次のようにします。
fontawesomeをインクルードする必要があります。
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
そして、th
'内のデフォルトのbootstrap-iconsの代わりにfontawesome-iconを使うだけでいいのです。
<th><b>#</b> <i class="fa fa-fw fa-sort"></i></th>
お役に立てれば幸いです。
このアイコンは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
上下の矢印だけ表示させればよいのであれば、これで解決です。 もし、それらを機能させたいのであれば、このBOOTSTRAP TABLEを使用することができます。