用Bootstrap设计后端页面模板
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>网站后台管理</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../static/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style type="text/css">
#li1{
list-style: none;
font-size: 16px;
}
</style>
<style type="text/css">
@media (min-width:768px) {
#slider_sub{
width:180px;
margin-top: 55px;
position: absolute;
z-index: 1;
height:650px;
}
.page_main{margin-left: 180px;margin-top: -18px;}
}
</style>
</head>
<body>
<!--先设置个响应式导航条-->
<nav class="navbar navbar-default navbar-static-top" style="background: #204d74">
<div class="navbar-header" >
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand" style="color:white;margin-top: -25px"><h2>数据中心采集系统</h2></a>
</div>
<ul class="navbar-nav navbar-right" style="margin-right:25px; margin-top: 20px">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-home"></span> 退出</a></li>
</ul>
<!--侧边功能栏-->
<div class="navbar-default navbar-collapse" id="slider_sub">
<ul class="nav">
<li>
<a href="#" data-toggle="collapse" data-target="#sub1">用户信息 <span class="glyphicon glyphicon-chevron-right"></span></a>
<ul id="sub1" class="collapse">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-user"></span> 个人信息</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#sub2">店铺信息 <span class="glyphicon glyphicon-chevron-right"></span></a>
<ul id="sub2" class="collapse">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-book"></span> 基础档案</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 区域分布</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#sub3">数据信息 <span class="glyphicon glyphicon-chevron-right"></span></a>
<ul id="sub3" class="collapse">
<li id="li1"><a href="#"><span class="glyphicon glyphicon-yen"></span> 银行现金</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-usd"></span> 外卖收入</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-gbp"></span> 小程序</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-ruble"></span> 成本费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-btc"></span> 经营费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-paperclip"></span> 报销费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-random"></span> 人事费用</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-euro"></span> 初始投资</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-remove"></span> 未返款</a></li>
<li id="li1"><a href="#"><span class="glyphicon glyphicon-magnet"></span> 净利润</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--中间部分-->
<div class="page_main">
<!--面包导航-->
<ol class="breadcrumb" style="background: #265a88;">
<li style="margin-left: 10px;color: white" >您当前的位置：</li>
<li><a href="#">用户信息</a></li>
<li><a href="#">人个信息</a></li>
</ol>
<!--表格内容-->
<div class="container" style="margin-left: -5px;">
<!--筛选条件框-->
<form method="post" style="margin-top: -20px;">
<h5>
<div class="appNameSelect" style="width:1300px;">
<label >店铺名称:</label>
<input id="appName_1" name="appName_1" placeholder="输入店铺名称" type="text" list="appNamelist" style="padding:0.3em;border-radius:3px;" >
<datalist id="appNamelist">
<option>桂源铺(大华乐购店) </option>
<option>桂源铺(大华第一坊) </option>
</datalist>
<label >店铺代码:</label>
<input id="appName_5" name="appName_5" placeholder="输入店铺代码" type="text" list="appNamelist_5" style="padding:0.3em;border-radius:3px;" >
<datalist id="appNamelist_5">
<option>G1057 </option>
<option>G1022 </option>
</datalist>
<label>    年份:</label>
<select id="appName_2" style="width:120px ;padding:0.3em;border-radius:3px;">
<option value="" disabled selected hidden >-请选择-</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<label >-- 月份:</label>
<select id="appName_3" style="width:120px ;padding:0.3em;border-radius:3px;">
<option value="" disabled selected hidden >-请选择-</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<label >    科目类型:</label>
<select id="appName_4" style="width:120px ;padding:0.3em;border-radius:3px;">
<option value="" disabled selected hidden >-请选择-</option>
<option>现金 </option>
<option>货币 </option>
</select>
<button type="submit" class="btn btn-primary" id="btn">查 询</button>
<button type="submit" class="btn btn-success" id="btn">新 增</button>
</div>
</h5>
</form>
<!--表格内容框-->
<div class="panel panel-default" style="width:1200px;">
<div class="panel-heading">最新订单</div>
<div class="panel-body ">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>ID</th>
<th>日期</th>
<th>店铺名称</th>
<th>店铺代码</th>
<th>金额</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
<tr>
<td>2</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
<tr>
<td>3</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
</tr>
<tr>
<td>4</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
<tr>
<td>5</td>
<td>2021-09-21</td>
<td>桂源铺(大华乐购店)</td>
<td>G1005</td>
<td>10000</td>
<td>修改、删除</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination" style="margin-top: 2px;">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../static/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
用Bootstrap设计后端页面模板的更多相关文章
- 15个最好的Bootstrap设计工具推荐
摘要:Bootstrap不单单是一个框架,更确切的说,它改变了整个游戏规则.该框架使得许多应用和网站的设计开发变得简便许多,而且它将大量的HTML框架普及成了产品. Bootstrap是由前Twitt ...
- 12 款最好的 Bootstrap 设计工具
作为一位设计师,会经常追寻新鲜有趣的设计工具,这些工具会提高工作的效率,使得工作更有效, 最重要的是使工作变得更方便.非常肯定的说,随着日益增长的工具和应用的数量,设计和开发变得越来越简单了. 其中最 ...
- 使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑 Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案 ...
- 分享12款最佳的Bootstrap设计工具
设计师总会渴望有一些新奇有趣的设计工具来提高工作效率,而Bootstrap就是您的不二选择.2013年Bootstrap得到了广泛普及, 它是开发者较为常用的框架之一,本文我们将分享12款最佳的Boo ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- MVC+Bootstrap设计
MVC+Bootstrap) 二 框架设计 文章目录: 一.前言 二.结构图 三.项目搭建 四.代码生成 五.实现接口 六.依赖倒置 七.登录实现 八.最后 一.前言 这个框架是从最近几年做过的项目中 ...
- 基于Bootstrap设计网页
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- [转]Bootstrap table后端分页（ssm版）
原文地址:https://www.cnblogs.com/flyins/p/6752285.html 说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分 ...
随机推荐
- dotnet总结——类型系统
包括2种大的类型: 引用类型和值类型, 放一张图说明继承层次: 一 值类型: 内置的值类型,如下 用户自定义值类型就是用户定义的枚举或者结构类型. 可空类型(Nullable<T>)属于 ...
- CCRD_TOC_2008年第1期
中信国健临床通讯 2008年第1期 目 录 类风湿关节炎 1 一种新型.实用的RA活动度评估方法:完成评估只需三分钟 Fleischmann RM, Schiff MH, Keystone EC, ...
- vue-cli 更新遇到的问题，卸载不掉旧版本2.9.6（可行）
今天更新vue-cli时,遇到问题:卸载不掉旧版本2.9 官网给的信息是:Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x ...
- 禁用a标签点击事件
a标签是没有disable属性的 ,如果想用disable 禁用a标签的点击事件,也可以实现: 1.a标签要用disable属性,必须和pointer-events属性一起使用, html代码: &l ...
- ubuntu 启动脚本变化
ubuntu-16.10 开始不再使用initd管理系统,改用systemd- 快速看了 systemd 的使用方法,发现改动有点大, 包括用 systemctl 命令来替换了 service 和 c ...
- 【剑指Offer】【树】序列化二叉树
题目:请实现两个函数,分别用来序列化和反序列化二叉树 二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得内存中建立起来的二叉树可以持久保存.序列化可以基于先序. ...
- linux中进程和线程简单介绍
进程和线程的简单知识 进程是用来申请内核资源的,只有资源到位,进程才会进行,进程包含线程,线程是进程内部的调度单位,所以在业内有这样一句话,进程是资源分配最基本单位,线程是系统调度的最基本的单位,进程 ...
- spring boot创建多线程定时任务
@Component@EnableScheduling // 1.开启定时任务@EnableAsync // 2.开启多线程public class MultithreadScheduleTask { ...
- Unity流水账2：视频播放之Video Player
https://blog.csdn.net/shiyuedyx/article/details/81170309
- wendows 批量修改文件后缀（含递归下级）
for /r %%a in (*.jpg)do ren "%%a" "%%~na.png" //-- or :for /r %a in (*.jpg)do re ...