<!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. 类数组对象：arguments

    在js中调用一个函数的时候,我们经常会给这个函数传递一些参数,js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面,那它到底是什么呢? 一.描述 arguments 是一个对应于传 ...

  2. unity drawcall测试

    unity引擎影响drawcall的元素(使用Quad和Cube对比测试) 1.相机的background(没有渲染元素区域的颜色),4Verts.2Tris.1SetPass calls:      ...

  3. iOS侧滑返回到隐藏导航栏的VC，导航栏会闪现一次

    VCA:是一个隐藏导航栏的页面:VCA在ViewWillAppear生命周期函数中设置导航栏隐藏: //隐藏导航栏 [self.navigationController setNavigationBa ...

  4. .NET 应用程序域？

    为了提升windows系统的稳定性与可靠性,windows通过进程来实现.所有的可执行代码.数据以及其他资源都被包含在进程中,不允许其他进程对它进行访问(除非有足够的权限).对于.NET应用程序,还进 ...

  5. 本地连接远程环境mysql报错：Host'xxx.xxx.xxx.xxx' is not allowed to connect to this MySQL server

    问题现象:本机连接远程环境的mysql数据库报错,提示本机ip无法连接到mysql服务器. 问题原因:本机对远程mysql数据库没有访问权限. 解决方法:在远程mysql数据库添加本机ip的访问权限: ...

  6. CentOS 7 Update GCC G++

    curl https://ftp.gnu.org/gnu/gcc/gcc-5.4.0/gcc-5.4.0.tar.bz2 -O echo "extracting files..." ...

  7. git fatal: remote origin already exists. 报错解决

    在研究git的时候,随便输了个 git remote add origin xxx; 然后再真正add 远程仓库的时候,报了git fatal: remote origin already exist ...

  8. 你知道SOCKET吗

    要想理解socket首先得熟悉一下TCP/IP协议族, TCP/IP(Transmission Control Protocol/Internet Protocol)即传输控制协议/网间协议,定义了主 ...

  9. .net中webconfig自定义配置

    在configuration节点,也就是文件的根节点下,增加如下节点 <appSettings> <!--<add key="propPath" value ...

  10. java代码实现鼠标双击出现画图-----------paint()方法由系统自动调用，且一定是小写的字母p

    总结:在运行过程中,自己不是很认真,没有检查自己写的代码,结果是无论你怎么运行,双击 frame都没用,因为系统根本就没有调用paint()方法绘图.所以很重要的是实现这个方法 package com ...