<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<style>
.c1 {
margin-top: 50px;
}
</style>
</head>
<body>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row c1">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-info">
<!-- Default panel contents -->
<div class="panel-heading">小清单</div>
<div class="panel-body">
<!-- 作为额外元素的按钮 -->
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入待办事项...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-plus"></span></button>
</span>
</div>
<hr>
<!-- 列表组 -->
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"> </span>
张瞾
<span class="glyphicon glyphicon-remove pull-right"></span>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-ok-sign"> </span>
吴晨钰
<span class="glyphicon glyphicon-remove pull-right"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
