代码：

<!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 网页实例的更多相关文章

  1. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  4. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  5. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  6. Bootstrap 历练实例 - 折叠（Collapse）插件事件

    事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...

  7. Bootstrap 历练实例 - 折叠（Collapse）插件方法

    方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...

  8. Bootstrap历练实例：简单的可折叠

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Bootstrap 历练实例 - 按钮（Button）插件复选框

    复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...

随机推荐

  1. Python3.5-20190519-廖老师-自我笔记-面向对象中slots变量--@property的使用

    python是动态语言,可以随时随地给实例对象添加属性和方法,但是我们想限制属性的名字,可以使用__slots__特殊变量来限制 使用__slots__要注意,__slots__定义的属性仅对当前类实 ...

  2. Flutter中的日期、格式化日期、日期选择器组件

    Flutter中的日期和时间戳 //獲取當前日期 DateTime _nowDate = DateTime.now(); print(_nowDate);//2019-10-29 10:57:20.3 ...

  3. centos 6.5 解压 tar

    只查看 tar 文件内容而不解压 tar -tvf filename.tar 解压到指定目录(没有指定则为当前目录) tar xvf filename.tar -C /usr/file 压缩为 tar ...

  4. LeetCode算法题

    1.给两个整数数组 A 和 B ,返回两个数组中公共的.长度最长的子数组的长度. 时间复杂度待优化 class Solution { public int findLength(int[] A, in ...

  5. SSH框架整合-myeclipse

    项目结构   1.mysql数据库 stuinfo /* SQLyog 企业版 - MySQL GUI v8.14 MySQL - 5.5.40 : Database - stuinfo ****** ...

  6. 生成100个 "20180520" 这样的时间字符串 写入txt文件

    主要想记录一下 . 写NSString 到txt . 数组的去重 . 数组的截取 . 数组分割 代码如下: NSString *year = @"2018"; NSArray *m ...

  7. wangeditor 粘贴word内容带样式

    这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...

  8. Python基础教程（020）--集成开发环境IDE简介--Pycharm

    前言 学会掌握Pycharm工具 内容 集成了开发软件需要的所有工具 1,图形用户界面 2,代码编译器(支持代码补全,自动缩进) 3,编译器,解释器 4,调试器(断点,单步执行) Pycharm介绍 ...

  9. HDU 4812 (点分治)

    题目:https://vjudge.net/contest/307753#problem/E 题意:给你一颗树,树上每个点都有个权值,现在问你是否存在 一条路径的乘积 mod 1e6+3  等于 k的 ...

  10. Spring JDK动态代理

    1. 创建项目在 MyEclipse 中创建一个名称为 springDemo03 的 Web 项目,将 Spring 支持和依赖的 JAR 包复制到 Web 项目的 WEB-INF/lib 目录中,并 ...