<!DOCTYPE html>
<html lang="zh-cn">
<head >
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>bootstra1p</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="../bootstrap/html5shiv.min.bootstrap"></script>
<script src="../bootstrap/respond.min.bootstrap"></script>
<![endif]-->
<script src="../scripts/jquery-1.12.2.min.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<p class="page-header">警告框</p>
<div id="divAlert" class="hide">
<p class="lead"></p>
</div>
<form>
<div class="form-group">
<label for="mes">评论内容</label>
<textarea rows="5" class="form-control" id="mes"></textarea>
</div>
<p>
<button id="btnSubmit" type="button" class="btn btn-primary btn-block">提交</button>
</p>
<div id="content" class="list-group"></div>
</form>
<script>
$(function () {
$("#btnSubmit").click(function () {
var msg=$("#mes").val();
if(msg==""){
$("#divAlert").removeClass().addClass("alert fade in alert-danger");
$("#divAlert p").html("提交失败");
}else{
$("#divAlert").removeClass().addClass("alert fade in alert-success");
$("#divAlert p").html("提交成功");
$("#content").prepend(
// 添加media glyphicon 可把列表组变成一排
$("<span>").addClass("media glyphicon")
.append($("<li>").addClass("list-group-item").html(msg))
);
}
});
});
</script>
<p class="page-header">展开折叠效果</p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
导航
</button>
<div class="collapse" id="collapseExample">
<div class="well">
内容
</div>
</div>
<p class="page-header">折叠效果二</p>
<div class="panel-group" id="accordion">
<!-- 计算机类面板 -->
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
计算机类
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item">HTML</a>
<a href="#" class="list-group-item">JS</a>
<a href="#" class="list-group-item">BS</a>
</div>
</div>
</div>
</div>
<!-- 文学类面板 -->
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
文学类
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item">西游记</a>
<a href="#" class="list-group-item">三国演义</a>
<a href="#" class="list-group-item">红楼梦</a>
</div>
</div>
</div>
</div>
</div>
<p class="page-header">底部</p>
<!--底部-->
</div>
</body>
</html>
浙公网安备 33010602011771号