初学 Bootstrap 简陋的后台管理页面
0 / 4 / 创建于 6年前
ㅤㅤ 的个人博客
学了这几天,试着做一个管理页面,顺带在这里做个记录,方便日后查阅
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的后台管理</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
#sidebar{
width: 200px;
position: absolute;
z-index: 1;
}
#main{
margin-left: 210px;
margin-right: 10px;
width: 1200px;
margin-top: 74px;
}
</style>
</head>
<body>
<!--导航-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a href="#" class="navbar-brand">后台管理</a>
</div>
<ul class="nav navbar-nav" style="margin-right: 20px">
<li><a href="#"> 注销</span></a></li>
</ul>
</div>
<!--侧边栏-->
<div class="navbar-default navbar-collapse" id="sidebar">
<ul class="nav">
<li>
<a href="#sub1" data-toggle="collapse">系统功能<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul id="sub1" class="nav collapse">
<li><a href=""> 系统信息</a></li>
<li><a href=""> 管理员</a></li>
<li><a href=""> 日志</a></li>
</ul>
</li>
<li>
<a href="#sub2" data-toggle="collapse">系统功能<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
<ul id="sub2" class="nav collapse">
<li><a href=""> 系统信息</a></li>
<li><a href=""> 管理员</a></li>
<li><a href=""> 日志</a></li>
</ul>
</li>
</ul>
</div>
<!--主页面-->
<div id="main">
<!--面包导航-->
<ol class="breadcrumb">
<li><a href="#">新闻</a></li>
<li><a href="#">国内新闻</a></li>
<li><a href="#">体育新闻</a></li>
</ol>
<!-- 第一行-->
<div class="row">
<div class="col-sm-12">
<!--表格-->
<div class="panel panel-default">
<div class="panel-heading">测试</div>
<div class="panel-body">
<table class="table table-striped table-bordered">
<thead><tr><th>编号</th><th>商品</th><th>数量</th></tr></thead>
<tbody>
<tr><td>1</td><td>苹果</td><td>3</td></tr>
<tr><td>2</td><td>西瓜</td><td>5</td></tr>
<tr><td>3</td><td>香蕉</td><td>1</td></tr>
</tbody>
<tfoot><tr><td colspan="2">合计</td><td>9</td></tr></tfoot>
</table>
</div>
</div>
</div>
</div><!-- 第一行-->
</div>
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
果然很简洁！
@花蝴蝶 称之为简陋也不为过
@刘天承 果然没令点进来的你失望😓