您的位置：首页 > Web前端 > CSS

按钮的样式

2015-11-08 17:17 567 查看
对按钮的样式的设置方法有很多，在bootstrap中给出了这样的几种对样式的设置，其实也是就是对button这个标签的属性进行改变，我们可以设置class的值为btn tbn-default，表示默认的按钮。当class的值设置为btn btn-primary表示的原始的按钮，还可以是成功的按钮btn btn-success，还可以是警告的 按钮btn btn-warning，还可以设置其class的值为btn

btn-danger，也可以设置其中class的值为btn btn-link，当然我们也可以设置其中的按钮是禁用的。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">

<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script type="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<title>按钮选项</title>

</head>

<body>

<!-- 标准按钮 -->

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

<!-- 提供额外的视觉效果，标志一组按钮中的原始的动作 -->

<button type="button" class="btn btn-primary">原始的按钮</button>

<!-- 表示一个成功的积极的动作 -->

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

<!-- 信息按钮 -->

<button type="button" class="btn btn-warning">警告的按钮</button>

<!-- 危险按钮 -->

<button type="danger" class="btn btn-danger">危险的按钮</button>

<!-- 链接的按钮 -->

<button type="button" class="btn btn-link">链接的按钮</button>

<!-- 禁用的按钮 -->

<button type="button" disabled="disabled">禁用的按钮</button>

</body>

</html>

上面这个例子是我们对按钮的一个简单的设置。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航