网站首页 > 技术文章 正文
利用bootstrap框架制作网站后台管理界面包括两个部分，一部分是响应式导航，包括左边侧边栏，主要包括输入框组（input-group）；另一部分是右边内容部分，包括面包屑导航（breadcrumb），面板组件（panel）、表格（table）、分页（Page）组件等。其中表格使用了条纹类（table-striped），鼠标悬停类（table-hover）。
读者制作案例时可能先把结构div敲出来，然后逐步添加相应的类，边操作边预览效果。
案例实现右边导航（登陆、注销、注册）和左边侧边栏在屏幕分辨率<768px时隐藏，通过点击相应的按钮显示与隐藏。本案例具体的效果如下：
网页文件manage1.html的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta 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>
至此，案例制作完成。
猜你喜欢
- 2025-07-02 ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
- 2025-07-02 bootstrap的提示插件tooltip的使用
- 2025-07-02 用 Bootstrap4 制作响应式网页二(导航菜单)
- 2025-07-02 bootstrap 的滚动监听（监听滚动条滚动事件）
- 2025-07-02 BootstrapBlazor :使用 .NET 生成交互式客户端 Web UI 的框架
- 2025-07-02 Bootstrap技巧之跟随导航（bootstrap官网入口制作一个导航栏）
- 2025-07-02 bootstrap的tab标签页的使用（bootstrap标签页垂直方向）
- 2025-07-02 原生ajax和django结合bootstrap-table，jquery与ajax的使用
- 2025-07-02 新书速览|Bootstrap 5从入门到精通(视频教学版)
- 2025-07-02 基于bootstrap实现的在线商城前端整站源码，页面齐全
欢迎 你 发表评论:
- 586℃几个Oracle空值处理函数 oracle处理null值的函数
- 580℃Oracle分析函数之Lag和Lead()使用
- 568℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 564℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 561℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 553℃【数据统计分析】详解Oracle分组函数之CUBE
- 539℃最佳实践 | 提效 47 倍，制造业生产 Oracle 迁移替换
- 534℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论，来添加一个吧(●'◡'●)