基于Bootstrap的纯CSS3箭头按钮样式

当前位置:主页 > CSS3库 > UI界面设计 > 基于Bootstrap的纯CSS3箭头按钮样式
基于Bootstrap的纯CSS3箭头按钮样式
分享:

    插件介绍

    这是一款基于Bootstrap的纯CSS3箭头按钮样式。该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮。

    浏览器兼容性

    浏览器兼容性
    时间:2017-03-01
    阅读:
麦子学院
简要教程

这是一款基于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-leftbtn-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>
                

基于Bootstrap的纯CSS3箭头按钮样式

bootstrap-directional-buttons箭头按钮的github地址为:https://github.com/westonganger/bootstrap-directional-buttons

网友评论