<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scaleable=no">
<title>按钮</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
</head>
<body>
<!-- 有按钮效果的标签，<input type="button" value="按钮">或者<button>按钮</button>或者链接加按钮样式<a href="#">内容</a>-->
<h3 class="page-header">按钮</h3>
<div class="container" style="background:#e6e6e6">
<button class="btn btn-primary">确定要删除吗？</button>
<input class="btn btn-default" type="button" value="修改">
<a href="#" class="btn btn-danger btn-lg">修改内容</a>
<a href="#" class="btn btn-warning btn-sm">修改内容</a>
<a href="#" class="btn btn-success btn-md">修改内容</a>
<a href="#" class="btn btn-success active btn-xs">修改内容</a>
<p>"btn"是按钮样式的基类，在添加其他样式前，必须先添加btn</p>
<p>.btn-primary .btn-default .btn-success .btn-warning .btn-danger active 激活</p>
<p>设置按钮大小 .btn-lg .btn-md .btn-sm(常用) .btn-xs</p>
<h3 class="page-header">按钮组</h3>
<p> 按钮组btn-group给父元素加</p>
<div class="btn-group">
<button class="btn btn-success">按钮内容</button>
<button class="btn btn-info">按钮内容</button>
<button class="btn btn-warning">按钮内容</button>
<button class="btn btn-default">按钮内容</button>
<button class="btn btn-primary">按钮内容</button>
</div>
<h3 class="page-header">缩略图</h3>
<p>响应式内容通常给标题和内容加caption，表示为--加标题和内容</p>
<div class="row">
<!--开头-->
<div class="col=lg-3 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail">
<img src="ff.jpg" class="img-responsive">
<div class="caption">
<h3 class="bg-info">Thumbnail label</h3>
<p class="text-muted">A good morning text doesn't only mean "Good morning". It has a silent, loving message that says..."I think of you when I wake up.”</p>
</div>
<div class="text-left"> <!--左对齐-->
<button class="btn btn-success btn-xs">去看看</button>
<button class="btn btn-info btn-xs">可以购买</button>
</div>
</div>
</div>
<!--结尾-->
<!--开头-->
<div class="col=lg-3 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail">
<img src="ff.jpg" class="img-responsive">
<div class="caption">
<h3 class="bg-info">Thumbnail label</h3>
<p class="text-muted">A good morning text doesn't only mean "Good morning". It has a silent, loving message that says..."I think of you when I wake up.”</p>
</div>
<div class="text-left"> <!--左对齐-->
<button class="btn btn-success btn-xs">去看看</button>
<button class="btn btn-info btn-xs">可以购买</button>
</div>
</div>
</div>
<!--结尾-->
<!--开头-->
<div class="col=lg-3 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail">
<img src="ff.jpg" class="img-responsive">
<div class="caption">
<h3 class="bg-info">Thumbnail label</h3>
<p class="text-muted">A good morning text doesn't only mean "Good morning". It has a silent, loving message that says..."I think of you when I wake up.”</p>
</div>
<div class="text-left"> <!--左对齐-->
<button class="btn btn-success btn-xs">去看看</button>
<button class="btn btn-info btn-xs">可以购买</button>
</div>
</div>
</div>
<!--结尾-->
</div>
</div>
</body>
</html>
