Item actions extend Bootstrap button component. They are optimized for long lists of items where each item offers one or more actions to be taken. They look the best when used only with icons.
Example
Used in table:
Article | |
---|---|
Hotforwords Can Explain Lorem Ipsum far better than I can | |
Which to isn't lesser together years land heaven brought |
<p>
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
<a href="#" class="item-action">
<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
Share
</a>
<a href="#" class="item-action item-action-danger">
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
Remove
</a>
</p>
<p><strong>Used in table:</strong></p>
<table class="table">
<thead>
<tr>
<th>Article</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Hotforwords Can Explain Lorem Ipsum far better than I can</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<tr>
<td>Which to isn't lesser together years land heaven brought</td>
<td class="table-cell-actions">
<a href="#" class="item-action" title="Edit">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="#" class="item-action item-action-danger" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
</tbody>
</table>