网站首页 > 编程文章 正文
本案例综合运用bootstrap框架中多个知识点实现较为复杂的网站前端效果，对大家的学习有一定的促进作用。
案件中涉及到的知识点包括导航（nav）、栅格、警告框（alert）、面板（panel）、下拉菜单（dropdown）等，网页部分只做了首页和用户管理，其他页面类似。案例效果如下：
制作的步骤大致是先制作后台首页，然后以另存为的方式制作其他分页。
后台首页index.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>网站后台管理2</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand logo">网站后台管理2</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#dh">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class=" navbar-collapse collapse" id="dh">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">后台首页</a></li>
<li><a href="use-m.html">用户管理</a></li>
<li><a href="cont-m.html">内容管理</a></li>
<li><a href="tag-m.html">标签管理</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown">admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">前台首页</a></li>
<li><a href="#">个人设置</a></li>
<li><a href="#">帐户中心</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li><a href="#">退出</a></li>
</ul>
</div>
</div>
</nav>
<!-- -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger fade in">
<button class="close" data-dismiss="alert"><span>×</span></button>
<h4>提示：</h4>
<p>此部分模块升级中...</p>
<p>
<button class="btn btn-danger" data-dismiss="alert">关闭</button>
</p>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
网站数据统计
</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr><th>统计项目</th><th>今日</th><th>昨日</th></tr>
</thead>
<tbody>
<tr><td>注册会员</td><td>340</td><td>200</td></tr>
<tr><td>VIP会员</td><td>305</td><td>170</td></tr>
<tr><td>发帖数量</td><td>450</td><td>210</td></tr>
<tr><td>转载数量</td><td>810</td><td>520</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
网站热贴
</div>
<!--<div>-->
<ul class="list-group">
<li class="list-group-item">
<a href="#">爱学习资源网，学习随时随地<small class="pull-right">2017/10/15</small></a>
</li>
<li class="list-group-item">
<a href="#">爱学习资源网，学习随时随地<small class="pull-right">2017/10/15</small></a>
</li>
<li class="list-group-item">
<a href="#">爱学习资源网，学习随时随地<small class="pull-right">2017/10/15</small></a>
</li>
<li class="list-group-item">
<a href="#">爱学习资源网，学习随时随地<small class="pull-right">2017/10/15</small></a>
</li>
<li class="list-group-item">
<a href="#">爱学习资源网，学习随时随地<small class="pull-right">2017/10/15</small></a>
</li>
</ul>
</div>
</div>
</div>
</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>
用户管理页use-m.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>网站后台管理2</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand logo">网站后台管理2</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#dh">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class=" navbar-collapse collapse" id="dh">
<ul class="nav navbar-nav">
<li><a href="index.html">后台首页</a></li>
<li class="active"><a href="use-m.html">用户管理</a></li>
<li><a href="cont-m.html">内容管理</a></li>
<li><a href="tag-m.html">标签管理</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" data-toggle="dropdown">admin<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">前台首页</a></li>
<li><a href="#">个人设置</a></li>
<li><a href="#">帐户中心</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
<li><a href="#">退出</a></li>
</ul>
</div>
</div>
</nav>
<!-- -->
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active">
<a href="use-m.html">用户列表</a>
</li>
</ul>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>小明</td>
<td>4365645353@qq.com</td>
<td>
<div role="presentation" class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
操作<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">编辑</a></li>
<li><a href="#">删除</a></li>
<li><a href="#">锁定</a></li>
<li><a href="#">修改密码</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>小新</td>
<td>121265489@qq.com</td>
<td>
<div role="presentation" class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
操作<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">编辑</a></li>
<li><a href="#">删除</a></li>
<li><a href="#">锁定</a></li>
<li><a href="#">修改密码</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<nav class="pull-right">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><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="#">6 </a></li>
<li><a href="#"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
</div>
</div>
</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-table 使用总结（bootstraptable refreshoptions）
- 2024-10-15 网站技术干货之bootstrap框架实现网站后台管理界面
- 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)
本文暂时没有评论，来添加一个吧(●'◡'●)