新闻中心 Case每一个设计作品都举世无双

当前位置:中天首页 > 新闻资讯 > 专业知识 >

boostrap按钮介绍及演示

日期:2018-10-16 / 人气:

样式 说明
btn 原始样式按钮
btn-default 默认按钮
btn-primary 提交按钮
btn-success 成功按钮
btn-info 信息按钮
btn-warning 警告按钮
btn-danger 危险按钮
btn-link 表现为链接
btn-lg 大按钮
btn-sm 小按钮
btn-xs 最小按钮
btn-block 宽屏按钮
active 激活状态按钮
disabled 禁用按钮
disabled btn-danger btn-xs  多种按钮样式混用

如下案例代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<script src="js/bootstrap/3.3.6/bootstrap.js"></script>

<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">

<script src="js/bootstrap/3.3.6/bootstrap.js"></script>

<p>
<button type="button" class="btn">原始样式按钮</button>
</p>

<p>
<button type="button" class="btn btn-default">默认按钮</button>
</p>

<p>
<button type="button" class="btn btn-primary">提交按钮</button>
</p>

<p>
<button type="button" class="btn btn-success">成功按钮</button>
</p>

<p>
<button type="button" class="btn btn-info">信息按钮</button>
</p>

<p>
<button type="button" class="btn  btn-warning">危险按钮</button>
</p>
<p>
<button type="button" class="btn btn-link">表现为链接</button>
</p>
<p>
<button type="button" class="btn btn-lg">大按钮</button>
</p>

<p>
<button type="button" class="btn btn-sm ">小按钮</button>
</p>

<p>
<button type="button" class="btn btn-xs">最小按钮</button>
</p>

<p>
<button type="button" class="btn btn-block ">宽屏按钮</button>
</p>

<p>
<button type="button" class="btn btn-active">激活状态按钮</button>
</p>

<p>
<button type="button" class="btn btn-disabled">禁用按钮</button>
</p>

<p>
<button type="button" class="btn disabled btn-danger btn-xs">多种按钮样式混用</button>
</p>

</body>

</html>


boostrap按钮

编辑:重庆中天学院