<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap组件</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<style>
.glyphicon-asterisk{
color: green;
font-size: 100px;
}
</style>
<body>
<span class="glyphicon glyphicon-asterisk"></span>
<!-- 字体图标 -->
<button class="btn btn-default">
<span class="glyphicon glyphicon-thumbs-up"></span>
这是一个按钮
</button>
<!-- 下拉菜单 -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">这是按钮
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="http://www.baidu.com">
百度
</a>
</li>
<li>
<a href="http://www.baidu.com">
百度
</a>
</li>
<li>
<a href="http://www.baidu.com">
百度
</a>
</li>
</ul>
</div>
<!-- 控件组 -->
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
</div>
<!-- 导航 -->
<ul class="nav nav-tabs">
<li class="active"><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
</ul>
<ul class="nav nav-pills">
<li class="active"><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">百度</a></li>
</ul>
<!-- 分页 -->
<nav>
<ul class="pager">
<li class="previous">
<a href="http://www.baidu.com">向左</a>
</li>
<li class="next">
<a href="http://www.baidu.com">向右</a>
</li>
</ul>
<ul class="pagination pagination-lg">
<li>
<a href="http://www.baidu.com">1</a>
</li>
<li>
<a href="http://www.baidu.com">2</a>
</li>
<li>
<a href="http://www.baidu.com">3</a>
</li>
<li>
<a href="http://www.baidu.com">4</a>
</li>
<li>
<a href="http://www.baidu.com">5</a>
</li>
</ul>
</nav>
<!-- 进度条 -->
<div class="progress">
<div class="progress-bar" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width:60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:60%">60%</div>
</div>
<!-- 列表 -->
<ul class="list-group">
<li class="list-group-item active">
这是一个列表
<span class="badge">14</span>
</li>
<li class="list-group-item disabled">
这是一个列表
<span class="badge">14</span>
</li>
<li class="list-group-item list-group-item-info">
这是一个列表
<span class="badge">14</span>
</li>
</ul>
<!-- 面板 -->
<div class="panel panel-danger">
<div class="panel-heading">弹出层！</div>
<div class="panel-body">内容</div>
<div class="panel-footer">脚注</div>
</div>
<!-- 弹窗 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
弹窗
</button>
<!-- <button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger">
这是测试按钮
</button>
<div id="danger">这是一个内容</div> -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>$times;</span><span class="sr-only">关闭弹窗</span></button>
<h4 class="modal-title" id="myModalLabel">标题</h4>
</div>
<div class="modal-body">
学习
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
</div>
</div>
</div>
</div>
</body>
</html>
