bootstrap 中的按钮样式及源码解析

在bootstrap中按钮的样式不但可以大小、还可以规定颜色等。

下面是用法：

1、先引入bootstrap的css文件。

2、颜色：

• btn-default 默认按钮

• .btn-primary 原始按钮

• btn-success 成功按钮

• btn-info 信息按钮

• btn-warning 警告按钮

• btn-danger 危险按钮

3、大小：

上面是大小和颜色的组合；

• btn-lg 大的按钮

• btn-sm 小的按钮

• btn-xs 特别小的按钮

• btn-block 块级的按钮（会横跨父元素的全部宽度）

4、按钮的状态：

• active 激活的状态

• disabled 禁用的状态

5、组合用法：

• 先引入js和css文件；

• 书写html

• 显示的结果就是：

第二部分 -- css源码怎么写的呢？

1、用.btn 来书写公共样式，就是按钮都有的样式：

2、分别写颜色以默认的为例：

分别书写了颜色、状态，其他的都一样。

3、大小因为都是一样的。

把三种大小规定一下就可以。

使用的时候，可以是a链接，也可以是button；使用方法都是在后面加class名称就可以了。