用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分页.这里讲的是后端分 ...
随机推荐
- MVC3三层架构
以上部分来自黑马
- Vulhub 漏洞学习之：ActiveMQ
Vulhub 漏洞学习之:ActiveMQ 目录 Vulhub 漏洞学习之:ActiveMQ 1 ActiveMQ反序列化漏洞(CVE-2015-5254): 1.1 漏洞利用过程 2 ActiveM ...
- Mars3D入门示例
1. 引言 Mars3D是基于Cesium的Web端的三维GIS库,对Cesium做了进一步封装和扩展 Mars3D官网:Mars3D三维可视化平台 | 火星科技 Mars3D开发手册:开发教程 - ...
- unity 音频曲线
jp--------------- https://techblog.kayac.com/dynamic-waveform-generation-without-audio-clip https:// ...
- TouchableOpacity无效
错误代码如下: <TouchableOpacity onPress={this.handleConfirmPress} activeOpacity={0.6} > <Text sty ...
- Day 13 13.2 requests之请求参数与请求体
请求参数与请求体参数 一.什么是params参数(请求参数) get 方法是可以向服务器发送信息的,除了可以请求需要的页面之外,也可以发送我们指定的内容,这就是通过 params 参数实现的 requ ...
- ChatGPT is at capacity right now.ChatGPT Plus subscriber login Add your email for a personalized login link的解决办法
原因 你的ip地区用的人过多. 解决办法 在右侧页面填入邮箱,能收到邮件立刻就能登录,如果没有,就换地区试试,不行就等等吧 邮件示例:
- goland 无法跳转 struct等
goland 提示: Cannot find declaration to go to 表现为:无法跳转,标红 但实际上对应文件是存在该struct或var 解决办法: ref:https://sta ...
- Java定义一个方法处理公司的迟到问题的相关代码
/** * 定义一个方法处理公司的迟到问题 * 1.输入迟到时间和月薪 * 2.处理逻辑: * 迟到1-10分钟,警告 * 迟到11-20分钟,罚款100 * 迟到21-30分钟,罚款200 * 迟到 ...
- Django中遇到的问题
1.如右上角无Dj的 Django标识 解决方法1: 关闭Pycharm 重启创建项目,进入到Django的所在目录下 解决方法2: 方法3: 第一步: 第二步: 第三步: 第四步: 2.如下图:显示 ...