boostrap按钮总结

作者在 2018-09-03 09:40:15 发布以下内容

样式 说明
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>

如图所示:

TIM图片20180903073335.png (上传于2018-09-03 09:40:15)
TIM图片20180903073335.png



bootstrap | 阅读 1282 次
文章评论,共0条
游客请输入验证码
最新评论