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

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

技术教程gslnedu2025-06-12 11:49:286A+A-

在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名称就可以了。

点击这里复制本文地址 以上内容由朽木教程网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
qrcode

朽木教程网 © All Rights Reserved.  蜀ICP备2024111239号-8