1、利用bootstrap框架制作网站后台管理界面包括两个部分，一部分是响应式导航，包括左边侧边栏，主要包括输入框组（input-group）；另一部分是右边内容部分，包括面包屑导航（breadcrumb），面板组件（panel）、表格（table）、分页（Page）组件等。其中表格使用了条纹类（table-striped），鼠标悬停类（table-hover）。案例实现右边导航（登陆、注销、注册）和左边侧边栏在屏幕分辨率<768px时隐藏，通过点击相应的按钮显示与隐藏。本案例具体的效果如下：
2、网页文件manage1.html的代码如下：<!DOCTYPE html><html><head><m髫潋啜缅eta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>网站后台管理界面1</title><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><style type="text/css">/*媒体查询，小屏幕（平板，大于等于768px）*/@media (min-width:768px){#leftbar{width:240px;margin:55px 0px 0px 0px;position:absolute;/*z-index:1;*/height:500px;/*background:#B9DEF0;*/}.page-right{background:#ddd;margin:-5px 0px 0px 245px;}}/* */.left-dh{margin: 10px 0px;}@media (max-width:768px){body{background:#777;}}</style></head><body><!-- .navbar-static-top 去掉了由 .navbar-default 设置的左、右和顶部的边框，让它看起来更适合放在页面的头部。--><nav class="navbar navbar-default navbar-static-top"><div class="navbar-header"><a href="#" class="navbar-brand">网站后台管理1</a><button class="navbar-toggle" data-toggle="collapse" data-target="#login"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><button class="navbar-toggle" data-toggle="collapse" data-target="#leftbar"><span>设置</span></button></div><ul class="nav navbar-nav navbar-right navbar-collapse collapse" id="login" style="margin:0px 20px 0px 0px;"><li><a href="#"><span class="badge">登陆</span></a></li><li><a href="#">注销</a></li><li><a href="#">注册</a></li></ul><!--侧边栏 --><div class="navbar-collapse collapse" id="leftbar"><ul class="nav" id="mz"><li><div class="input-group left-dh"><input type="text" class="form-control"><span class="input-group-btn"><button class="btn btn-danger"><span class="glyphicon glyphicon-search"></span></button></sapn></div></li><li class="panel panel-default"><a href="#sys" data-toggle="collapse" data-parent="#mz">系统功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a><ul class="panel-collapse collapse nav" id="sys"><li><a href="#">系统信息</a></li><li><a href="#">管理员管理</a></li><li><a href="#">日志信息</a></li><li><a href="#">退出</a></li></ul></li><li class="panel panel-default"><a href="#lanmu" data-toggle="collapse" data-parent="#mz">栏目功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a><ul class="panel-collapse collapse nav" id="lanmu"><li><a href="#">栏目管理</a></li><li><a href="#">栏目修改</a></li><li><a href="#">退出</a></li></ul></li></ul></div></nav><!--右边主要区域 --><div class="page-right"><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-md-6"><div class="panel panel-default"><div class="panel-heading">最新订单</div><div class="panel-body"><table class="table table-striped table-hover table-responsive"><thead><tr><th>id</th><th>订单号</th> <th>订单日期</th><th>总价</th><th>状态</th></tr></thead><tbody><tr><td>1</td><td>01</td><td>2017-1-3 7:10:30</td><td>177.0</td><td>出库</td></tr><tr><td>2</td><td>03</td><td>2017-4-1 21:01:10</td><td>899.3</td><td>出库</td></tr><tr><td>3</td><td>04</td><td>2017-5-1 20:12:11</td><td>1999.0</td><td>未确认</td></tr></tbody></table></div></div></div><div class="col-md-6"><div class="panel panel-default"><div class="panel-heading">订单1</div><div class="panel-body"><table class="table table-striped table-hover table-responsive"><thead><tr><th>id</th><th>订单号</th> <th>订单日期</th><th>总价</th><th>状态</th></tr></thead><tbody><tr><td>1</td><td>01</td><td>2017-1-3 7:10:30</td><td>177.0</td><td>出库</td></tr><tr><td>2</td><td>02</td><td>2017-8-1 21:01:10</td><td>1700</td><td>出库</td></tr><tr><td>3</td><td>03</td><td>2017-10-2 20:12:11</td><td>2450</td><td>未确认</td></tr></tbody></table></div></div></div></div><div class="row"><div class="col-sm-12"><div class="panel panel-default"><div class="panel-heading">订单2</div><div class="panel-body"><table class="table table-striped table-hover table-responsive"><thead><tr><th>id</th><th>订单号</th><th>订单日期</th><th>总价</th><th>状态</th></tr></thead><tbody><tr><td>1</td><td>01</td><td>2017-1-3 7:10:30</td><td>177.0</td><td>出库</td></tr><tr><td>2</td><td>02</td><td>2017-11-5 21:01:10</td><td>1899</td><td>出库</td></tr><tr><td>3</td><td>03</td><td>2017-12-5 20:12:11</td><td>3500</td><td>未确认</td></tr></tbody></table></div></div></div></div><ul class="pagination pull-right"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">»</a></li></ul></div><script type="text/javascript" src="js/jquery-3.1.1.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script></body></html>
3、读者制作案例时可能先把结构div敲出来，然后逐步添加相应的类，边操作边预览效果。至此，案例制作完成。