Bootstrap 按钮

发布时间:2020-08-22 12:28:37 浏览量:34 标签: Bootstrap 按钮

本文将向大家讲解一下bootstrap框架的按钮样式及使用方式。


bootstrap框架中的按钮样式是基于类:btn来实现的。按钮样式可以用于以下样式可用于a,、button或 input元素上。


一、类的介绍

说明

.btn

为按钮添加基本样式

.btn-default

默认/标准按钮

.btn-primary

原始按钮样式

.btn-success

表示成功按钮

.btn-info

表示信息按钮,可用于弹层

.btn-warning

表示谨慎操作按钮

.btn-danger

表示危险操作按钮,较多应用于删除操作

.btn-link

链接样式按钮

.btn-lg

制作大按钮

.btn-xs

制作小按钮

.btn-sm

制作超小按钮

.btn-block

块级按钮(拉伸至父元素100%宽度)

.active

激活状态按钮

.disabled

禁用状态按钮


二、按钮样式演示

<button class="btn">为按钮添加基本样式</button>
<button class="btn btn-default">默认/标准按钮</button>
<button class="btn btn-primary">原始按钮样式</button>
<button class="btn btn-success">表示成功按钮</button>
<button class="btn btn-info">表示信息按钮,可用于弹层</button>
<button class="btn btn-warning">表示谨慎操作按钮</button>
<button class="btn btn-danger">表示危险操作按钮,较多应用于删除操作</button>
<button class="btn btn-link">链接样式按钮</button>

微信截图_20200822122151.png

三、按钮的大小演示

<button class="btn btn-lg">基本样式 - 大按钮</button>
<button class="btn btn-xs">基本样式 - 小按钮</button>
<button class="btn btn-sm">基本样式 - 超小按钮</button>


微信截图_20200822122421.png


四、按钮状态演示

<button class="btn btn-info">基本按钮</button>
<button class="btn btn-info active">激活按钮</button>
<button class="btn btn-info disabled">禁用按钮</button>

微信截图_20200822122715.png


搜索
关于我
吴英赫
最新标签
推广