<!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">
<title>某管理系统</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
.leftrow{
background-color: #f5f5f5;
position: fixed;
left: 0px;
bottom: 0px;
top: 51px;
padding: 20px 0 0 0;
}

.rightrow{
top: 30px;
}

.gourpbtn {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}

.gourpan {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 6px;
}

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}

.panlhead{
color: #fff;
background-color: #428bca;
}

</style>

</head>

<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-navbar-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">某管理系统</span>
</div>
<div class="collapse navbar-collapse" id="example-navbar-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">首页</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">功能<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 class="divider"></li>
<li><a href="#">设置</a></li>
</ul>
</li>
<li>
<a href="#">帮助</a>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="用户名">
<input type="text" class="form-control" placeholder="密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 leftrow">
<ul class="nav nav-sidebar">
<li class="active">
<a href="#">首页</a>
</li>
<li><a href="#"></a></li>
<li><a href="#">信息建立</a></li>
<li><a href="#">消息查询</a></li>
<li><a href="#">信息管理</a></li>
<li><a href="#"></a></li>
<li><a href="#">设置</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
<div class="col-md-10 col-md-offset-2 rightrow">
<div class="page-header">
<h1>管理控制台</h1>
</div>
<div class="row gourpbtn">
<button type="button" class="btn btn-default">操作1</button>

<button type="button" class="btn btn-primary">操作2</button>

<button type="button" class="btn btn-success">操作3</button>

<button type="button" class="btn btn-info">操作4</button>

<button type="button" class="btn btn-warning">操作5</button>

<button type="button" class="btn btn-danger">操作6</button>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">最新提醒</div>
<div class="panel-body">
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">提示 您的订单（2014001）已经审核过！</a>
</div>

<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">提示 您的订单（2014002）被打回！</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">提示 您的订单（2014001）客户付款延迟！</a>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">我的任务</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item list-group-item-info">订单审批<span class="badge">42</span></li>
</ul>
<ul class="list-group">
<li class="list-group-item list-group-item-info">收款确认<span class="badge">20</span></li>
</ul>
<ul class="list-group">
<li class="list-group-item list-group-item-info">付款确认<span class="badge">10</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
最近订单
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>产品</th>
<th>数量</th>
<th>总金额</th>
<th>业务员</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple Macbook air</td>
<td>10</td>
<td>80000</td>
<td>王小贱</td>
</tr>
<tr>
<td>2</td>
<td>Apple iPad air</td>
<td>20</td>
<td>65000</td>
<td>尹开花</td>
</tr>
<tr>
<td>3</td>
<td>Apple Macbook pro</td>
<td>5</td>
<td>50000</td>
<td>刘老根</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary">查看详细>></button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
工程进度
</div>
<div class="panel-body">
<div class="row gourpan">
<div class="col-md-12">
<label class="label label-primary">水井挖掘工程</label>
</div>
</div>
<div class="row gourpan">
<div class="col-md-12">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
<div class="row gourpan">
<div class="col-md-12">
<label class="label label-danger">基建工程</label>
</div>
</div>
<div class="row gourpan">
<div class="col-md-12">
<div class="progress">
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>

<script src=" http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap页面效果图的更多相关文章

  1. Bootstrap 页面标题(Page Header)

    Bootstrap页面标题(PageHeader)是个不错功能,它会网页的标题的四周添加适当的间距,当一个网页中有多个标题并且每个标题之间需要添加一定适当的间距,使用页面标题是非常有用的.如果需要使用 ...

  2. bootstrap 页面标题

    页面标题会突出显示,当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题显得特别有用,页面标题会给不是页面标题之间的元素加上横线 加以区分,以突出标题显示. 页面标题类 显示效果图 代码 ...

  3. Bootstrap~页面的布局

    回到目录 Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要 ...

  4. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  5. Bootstrap页面布局9 - BS列表

    列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...

  6. 让你快速搭建一个bootstrap页面

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  7. bootstrap页面布局

    首先,我们必须明确,在这四种角色登录网站,看到页面是不同,这里不仅涉及到后端的权限控制,还涉及到前端页面的布局,区分好这些角色看的东西哪些是相同的,哪些又是不同的呢,这个必须在这里想明白,所以要做好页 ...

  8. Bootstrap页面响应式设计

    关键词:viewport.栅格布局.媒体查询(Media Queries) 一.关于栅格布局的说明: 1.基本图解 extra small devices phones  超小型设备手机small d ...

  9. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...

随机推荐

  1. return super(ParamValueInline,self).formfield_for_foreignkey(db_field,request,**kwargs)自己返回自己的父类

    作者:刘强胜链接:https://www.zhihu.com/question/30361435/answer/83940591来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  2. 阿里云接口异常-Can not find endpoint to access

    最近在做公司的资产盘点,需要请求阿里云的接口获取公司的云服务器信息.在获取实例列表的过程中,通过异常机制捕获了 Can not find endpoint to access 这个错误.经过多次排查, ...

  3. 【转】使用Jmeter测试Webservice简单示例

    1.webservice 先简单开发webservice,参考文档 http://www.cnblogs.com/xwdreamer/archive/2011/12/07/2296914.html w ...

  4. spring-session之一：简介、使用及实现原理

    一.背景 http session(企业)一直都是我们做集群时需要解决的一个难题,我们知道HttpSession是通过Servlet容器创建和管理的,像Tomcat/Jetty都是保存在内存中的.而如 ...

  5. 合并石子(dp)

    合并石子 时间限制: 1 Sec  内存限制: 128 MB提交: 7  解决: 7[提交][状态][讨论版][命题人:quanxing] 题目描述 在一个操场上一排地摆放着N堆石子.现要将石子有次序 ...

  6. 概念与用法-cookie,session,auth (认证系统)

    COOKIE 与 SESSION 概念 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cookie ...

  7. JavaScript笔记——BOM的操作和浏览器的检测

    BOM的操作 BOM 也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,就可能存在浏览器不兼容的情况,那么浏览器共有对象就成了事实的 ...

  8. Lambda语句的嵌套

    // 获取所有长度最短的名字(注意:可能有多个) string[] names = { "Tom", "Dick", "Harry", &q ...

  9. leetcode905

    vector<int> sortArrayByParity(vector<int>& A) { vector<int> EVEN;//偶数 vector&l ...

  10. [原创]JMeter初次使用总结

    引言 最近开发 java 后端项目,对外提供Restful API接口,完整功能开发现已完成. 目前通过单测(68%行覆盖率)已保证业务逻辑正确性,同时也尝试使用JMeter进行压力测试以保证并发性能 ...