Bootstrap 网页实例
代码:
<!DOCTYPE html>
<html>
<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>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
body {
padding-top: 50px;
padding-bottom: 40px;
color: #5a5a5a;
} /* 下面是左侧导航栏的代码 */
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #ddd;
border-right: 1px solid #eee;
} .nav-sidebar {
margin-right: -21px;
margin-bottom: 20px;
margin-left: -20px;
} .nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
} .nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
已久 .main {
padding: 20px;
} .main .page-header {
margin-top: 0;
}
</style> </head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">某管理系统</a>
</div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-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" role="menu">
<li class="dropdown-header">业务功能</li>
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查询</a></li>
<li><a href="#">信息管理</a></li>
<li class="divider"></li>
<li class="dropdown-header">系统功能</li>
<li><a href="#">设置</a></li>
</ul>
</li>
<li><a href="#">帮助</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<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-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">首页</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查询</a></li>
<li><a href="#">信息管理</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="#">设置</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
<!—右侧管理控制台-->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">管理控制台</h1> <p>
<!—一组按钮控件-->
<button type="button" class="btn btn-lg btn-default">操作1</button>
<button type="button" class="btn btn-lg btn-primary">操作2</button>
<button type="button" class="btn btn-lg btn-success">操作3</button>
<button type="button" class="btn btn-lg btn-info">操作4</button>
<button type="button" class="btn btn-lg btn-warning">操作5</button>
<button type="button" class="btn btn-lg btn-danger">操作6</button>
</p> <div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">最新提醒</h3>
</div>
<div class="panel-body">
<div class="alert alert-success" role="alert">
<p><strong>提示</strong>您的订单(2014001)已经审批通过! </p> </div>
<div class="alert alert-info" role="alert">
<p><strong>提示</strong>您的订单(2014002)被打回! </p>
</div>
<div class="alert alert-warning" role="alert">
<p><strong>提示</strong>您的订单(2013001)客户付款延迟!
</div>
<div class="alert alert-danger" role="alert"> <p><strong>提示</strong>您的订单(2013001)客户付款延迟! </p> </div> </div> </div>
</div> <div class="col-md-6"> <div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">我的任务</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li role="presentation">
<a href="#" class="alert alert-info">
<span class="badge pull-right">42</span>
订单审批
</a>
</li>
<li role="presentation">
<a href="#" class="alert alert-info">
<span class="badge pull-right">20</span>
收款确认
</a>
</li>
<li role="presentation">
<a href="#" class="alert alert-info">
<span class="badge pull-right">10</span>
付款确认
</a>
</li>
<li role="presentation">
<a href="#" class="alert alert-info">
<span class="badge pull-right">1</span>
退款确认
</a>
</li>
</ul>
</div>
</div>
</div>
</div> <div class="row">
<div class="col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">最新订单</h3>
</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>小米</td>
<td>10 </td>
<td>20000</td>
<td>流苏</td>
</tr> </tbody> </table>
<p><a class="btn btn-primary" href="#" role="button">查看详细»</a></p>
</div>
</div> </div>
<div class="col-md-6"> <div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">工程进度</h3>
</div>
<div class="panel-body">
<h3><span class="label label-primary">水井挖掘工程</span></h3>
<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>
<h3><span class="label label-danger">软件工程</span></h3>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
</div>
</div> </div> </div> <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</body>
</html>
效果:
Bootstrap 网页实例的更多相关文章
- Bootstrap历练实例:轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例:响应式导航(带有表单)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例:响应式导航
<!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...
- Bootstrap 历练实例-轮播(carousel)插件的事件
事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- Bootstrap 历练实例 - 折叠(Collapse)插件事件
事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...
- Bootstrap 历练实例 - 折叠(Collapse)插件方法
方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...
- Bootstrap历练实例:简单的可折叠
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap 历练实例 - 按钮(Button)插件复选框
复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...
随机推荐
- Jmeter --Json Extractor (后置处理器)
一.使用场景 Json Extractor 后置处理器用在返回格式为json的HTTP请求中, 用来获取返回的json中的某个值.并保存成变量供后面的请求进行调用或者断言等. 二.使用方法 1.创建H ...
- 牛客网NOIP赛前集训营-提高组(第六场)B-选择题
题目描述 有一道选择题,有 a,b,c,d 四个选项. 现在有 n 个人来做这题,第 i 个人有 pi,j 的概率选第 j 个选项. 定义\(cnt(x)\)为选第$ x $个选项的人数. 令\(mx ...
- win7系统下IIS7.5配置MVC5环境注意事项与CentOS的MVC5设置
注意事项: 1.IIS程序应用池更换为4.0net集成 2.网站目录加入IIS帐号的权限(基本设置里是administrators组帐号)注:服务器拒绝时是这里的问题 3.在“ISAPI和CGI限制” ...
- Linux复制命令cp进阶
cp -a:连同属性和权限也一起复制 cp -i:如果不带该参数,默认覆盖同名文件而不会提醒. cp -u:只拷贝符合以下条件的文件到目标目录:目标目录中不存在的文件或目标目录中文件版本较旧的文件. ...
- Python3解leetcode Binary Tree PathsAdd DigitsMove Zeroes
问题描述: Given an array nums, write a function to move all 0's to the end of it while maintaining the r ...
- 【LeetCode 42】接雨水
题目链接 [题解] 考虑每个位置它最后能接多少单位的水. 显然就是这个min(位置左边最高的位置,位置右边最高的位置)-当前这个位置的高度. 这就是这个位置最后水上涨的高度. 两个边界注意是不会储水的 ...
- HDU 6638 - Snowy Smile 线段树区间合并+暴力枚举
HDU 6638 - Snowy Smile 题意 给你\(n\)个点的坐标\((x,\ y)\)和对应的权值\(w\),让你找到一个矩形,使这个矩阵里面点的权值总和最大. 思路 先离散化纵坐标\(y ...
- opencc模块用langconv替换
将一下两个py下载并放入代码目录:https://raw.githubusercontent.com/skydark/nstools/master/zhtools/langconv.py https: ...
- TP中如何用IF
将TP中这个容易忘的知识点记下来以便日后翻阅 $memberField = "ID, NAME, MOBILE, MEMBER_STATUS as status, IF (MEMBER_ST ...
- 如何保留小数点后N位?
2014年10月17日09:48:39 在做项目中遇到的,要把想显示的数据进行规定小数位的保留,下面写一下用过的方法: 1. BigDecimal 方法(我做项目的时候用的方法) 代码: java.m ...