按钮也是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。而且不同的Web页面具有不同的按钮风格,甚至说同一个Web网站或应用程序具有多种按钮风格,比如说不同的按钮颜色、大小和状态等。那么Bootstrap框架也考虑了这些因素,接下来和bootstrap教程网我们一起来探讨Bootstrap框架中的另一核心部分内容——按钮。
Bootstrap框架的按钮也是一个独立部分,我们同样在不同的版本之中能找到对应的代码:
演示代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定制风格</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<br> <br>
<button class="btn" type="button">基础按钮.btn</button>
<br> <br>
<button class="btn btn-default" type="button">默认按钮.btn-default</button> <br> <br>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <br> <br>
<button class="btn btn-success" type="button">成功按钮.btn-success</button> <br> <br>
<button class="btn btn-info" type="button">信息按钮.btn-info</button> <br> <br>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <br> <br>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <br> <br>
<button class="btn btn-link" type="button">链接按钮.btn-link</button> <br>
</body>
</html>
效果图:
新起点博客





评论前必须登录!
注册