詳解Bootstrap的純CSS3箭頭按鈕樣式

簡要教程

這是一款基於Bootstrap的純CSS3箭頭按鈕樣式。該按鈕通過修改原生Bootstrap的按鈕樣式，來產生指向左側或右側的箭頭按鈕。

安裝

可以通過npm或bower來安裝該Bootstrap箭頭按鈕檔案。

npm install bootstrap-directional-buttons bower install bootstrap-directional-buttons

使用方法

在頁面中引入bootstrap樣式檔案和bootstrap-directional-buttons.css檔案

<link rel="stylesheet" type="text/css" href="path/to/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="path/to/css/bootstrap-directional-buttons.css">

HTML結構

使用是只需要為按鈕添加btn-arrow-left或btn-arrow-rightclass類即可。如果希望一組箭頭按鈕之間沒有空隙，可以將它們放置在一個帶btn-group的class類的容器中。

<button type="button" class="btn btn-primary btn-arrow-left">箭頭向左的按鈕</button><button type="button" class="btn btn-success btn-arrow-right">箭頭向右的按鈕</button>