<!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. AppScan 8.0.3安全漏洞扫描总结

    本文记录了通过AppScan 8.0.3工具进行扫描的安全漏洞问题以及解决方案, 1.使用SQL注入的认证旁路 问题描述: 解决方案: 一般通过XSSFIlter过滤器进行过滤处理即可,通过XSSFI ...

  2. Hadoop体系结构之 Yarn

    1.1 YARN 基本架构 YARN是Hadoop 2.0中的资源管理系统,它的基本设计思想是将MRv1中的JobTracker拆分成了两个独立的服务:一个全局的资源管理器ResourceManage ...

  3. 转载：解决eclipse导出javadoc时的“错误: 编码GBK的不可映射字符”问题

    转自:http://blog.csdn.net/psy1100/article/details/51179342 今天要将自己的API接口和MODEL导出来一份java doc参考文档, 但是在导出的 ...

  4. pmap命令 查看进程用了多少内存

    pmap命令   查看进程用了多少内存                                     用法       pmap [ -x | -d ] [ -q ] pids       ...

  5. further occurrences of HTTP header parsing errors will be logged at DEBUG level.

    1.   获取参数Json的值为null String json=request.getParameter("Json"); 首先检查是否有下面的东东, 信息: Error par ...

  6. Spring Cloud Eureka 注册，发布，调用服务

    Spring Cloud为服务治理做了一层抽象接口,所以在Spring Cloud应用中可以支持多种不同的服务治理框架,如Netflix Eureka.Consul和Zookeeper.在Spring ...

  7. java输入月份，年份，显示对应月份的天数，

    总结:1,输入月份,年份,这需要用Scanner   2.我们已知道12个月份的天数,有30天,31天   3.判断闰年 用switch -case-break语句  4.注意不要忘了写break;判 ...

  8. zabbix 在linux上安装以及一些配置

    本文章将演示zabbix 3.2版本的安装,供有需要的伙伴们参考: 网络也有很多关于zabbix的安装文档,甚至每一步的配置都有详细的截图,我这里就不演示截图了,多配置几次自然就熟练了.多折腾. 楼主 ...

  9. tomcat7.0在centos7下中文乱码问题解决汇总

    1. 系统级的中文设置 Centos7跟之前的6和5安装的中文字符命令都不一样 [root@iZ25bdzgev8Z ~]# locale #查看当前系统的语言环境 [root@iZ25bdzgev8 ...

  10. DOM对象与JQuery对象

    在初学JAVA时,经常会迷惑,分不清DOM/JQuery对象,以及可以调用的方法. 1.什么是DOM/JQuery对象 DOM对象,即是我们用传统的方法(javascript)获得的对象: eg:va ...