Bootstrap 按钮

2017-08-19 09:01:06 来源: 点击:站内收藏

本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:

以下样式可用于a, button , 或 input 元素上:

描述 实例
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式(未被操作)
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮

下面的实例演示按钮

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 按钮选项</title>
<link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</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-info">信息按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-link">链接按钮</button>

<p>
   <button type="button" class="btn btn-default btn-lg">默认大按钮</button>
</p>
<p>
   <button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
   <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
   <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>
<p>
   <button type="button" class="btn btn-default btn-lg active">激活的按钮</button>
</p>
<p>
   <button type="button" class="btn btn-default" disabled="disabled">禁用按钮</button>
</p>
<p>
   <a href="#" class="btn btn-default disabled" role="button">禁用链接</a>
</p>

<p>
<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">提交</button>
<input class="btn btn-default" type="submit" value="提交">
</p>

</body>
</html>
相关热词搜索:
评论正在载入