网站首页 > 编程文章 正文
利用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>
至此，案例制作完成。
猜你喜欢
- 2024-10-15 如何使用Bootstrap框架进行网站开发
- 2024-10-15 SpringBoot-4-Web开发（springboot web3j）
- 2024-10-15 是时候学习Web开发了，1小时用Python开发一个博客系统
- 2024-10-15 Bootstrap4如何动态切换主题（bootstrap主题怎么用）
- 2024-10-15 网站技术干货之Bootstrap框架实现通用版网站后台管理界面
- 2024-10-15 Bootstrap-table 使用总结（bootstraptable refreshoptions）
- 2024-10-15 网站前端技术干货之bootstrap环境制作手风琴效果
- 2024-10-15 Bootstrap框架入门（bootstrap框架教程）
- 2024-10-15 第24章 Django开发有便捷，模板升级改造
- 2024-10-15 Vue.js入门篇（vue.js教程）
欢迎 你 发表评论:
- 05-09Spring Boot3 RESTful 接口参数校验，这篇吃透就够了!
- 05-09《Spring6》第02节:基于XML方式搭建Spring6框架开发环境
- 05-09MapStruct架构设计（mapstruct @mapping）
- 05-09分布式微服务架构组件（分布式微服务架构设计）
- 05-09Java Swing组件下的JButton实例（java swing 组件）
- 05-09java基础都在这了，小主们拿去吧（java基础是指什么）
- 05-09AOP的实现落地(拦截过滤)，一切都要从Servlet说起
- 05-09【Spring Boot】WebSocket 的 6 种集成方式
- 最近发表
-
- Spring Boot3 RESTful 接口参数校验，这篇吃透就够了!
- 《Spring6》第02节:基于XML方式搭建Spring6框架开发环境
- MapStruct架构设计（mapstruct @mapping）
- 分布式微服务架构组件（分布式微服务架构设计）
- Java Swing组件下的JButton实例（java swing 组件）
- java基础都在这了，小主们拿去吧（java基础是指什么）
- AOP的实现落地(拦截过滤)，一切都要从Servlet说起
- 【Spring Boot】WebSocket 的 6 种集成方式
- Java 中五种最常见加密算法:原理、应用与代码实现
- 用注解进行参数校验，spring validation介绍、使用、实现原理分析
- 标签列表
-
- spire.doc (59)
- system.data.oracleclient (61)
- 按键小精灵源码提取 (66)
- pyqt5designer教程 (65)
- 联想刷bios工具 (66)
- c#源码 (64)
- graphics.h头文件 (62)
- mysqldump下载 (66)
- sqljdbc4.jar下载 (56)
- libmp3lame (60)
- maven3.3.9 (63)
- 二调符号库 (57)
- 苹果ios字体下载 (56)
- git.exe下载 (68)
- diskgenius_winpe (72)
- pythoncrc16 (57)
- solidworks宏文件下载 (59)
- qt帮助文档中文版 (73)
- satacontroller (66)
- hgcad (64)
- bootimg.exe (69)
- android-gif-drawable (62)
- axure9元件库免费下载 (57)
- libmysqlclient.so.18 (58)
- springbootdemo (64)
本文暂时没有评论，来添加一个吧(●'◡'●)