pc移动端自适应布局html页面（二）
效果图
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>biPcMobile</title>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<!-- build:css styles/vendor.css -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="styles/font-awesome-ie7.min.css">
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- /*ie低版本兼容问题*/ -->
<!--[if lte IE 8]>
<style>
.main{padding-left:40px;}
.sidebar {
position: relative;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
</style>
<![endif]-->
</head>
<body>
<!--[if lt IE 10]>
<p class="browserupgrade">您正在使用 <strong>低版本的</strong> 浏览器. 点击这里 <a href="http://browsehappy.com/">升级您的浏览器</a> 以获得更好的体验</p>
<![endif]-->
<nav class="navbar bi-director 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="#bi-phone-navbar" aria-expanded="false" aria-controls="navbar" id="right-top-button">
<span class="icon-reorder"></span>
</button>
<span class="navbar-brand" id="navbar-brand" >董事局门户</span>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-2 bi-director-left sidebar">
<div class="nav nav-sidebar navbar-collapse collapse" aria-expanded="false" id="bi-phone-navbar">
<span class="dataPick">这里放时间选择控件</span>
<div class="first-leve-div">
<span class="active fisrt-leve-span" >
<i class="icon-folder-close left-first-leve-icon"></i>
<a>董事局事项</a>
</span>
<ul class="second-leve-ul">
<li><i class="icon-folder-open-alt left-second-leve-icon"></i><a>1.1珠江股份集团</a></li>
<li><i class="icon-folder-open-alt left-second-leve-icon"></i><a>1.2合生集团公告</a></li>
</ul>
</div>
<div class="first-leve-div">
<span class="active fisrt-leve-span" >
<i class="icon-folder-close left-first-leve-icon"></i>
<a>珠江投资股份集团</a>
</span>
<ul class="second-leve-ul">
<li>
<i class="icon-folder-open-alt left-second-leve-icon"></i>
<a>2.1珠江股份集团公告</a>
</li>
<ul class="third-leve-ul">
<li><i class="icon-file-alt left-third-leve-icon"></i><a>2.1经营指标分析1标分析</a></li>
<li><i class="icon-file-alt left-third-leve-icon"></i><a>2.2经营指标分析</a></li>
</ul>
<li>
<i class="icon-folder-open-alt left-third-leve-icon"></i>
<a>2.2合生集团公告</a>
</li>
<ul class="third-leve-ul">
<li><i class="icon-file-alt left-third-leve-icon"></i><a>2.1经营指标分析</a></li>
<li><i class="icon-file-alt left-third-leve-icon"></i><a>2.2经营指标分析</a></li>
</ul>
</ul>
</div>
<div class="first-leve-div">
<span class="active fisrt-leve-span" >
<i class="icon-folder-close left-first-leve-icon"></i>
<a>珠江投资股份集团</a>
</span>
<ul class="second-leve-ul">
<li>
<i class="icon-folder-open-alt left-second-leve-icon"></i>
<a>2.1珠江股份集团公告</a>
</li>
<ul class="third-leve-ul">
<li><i class="icon-file-alt left-third-leve-icon"></i><a>2.1经营指标分析</a></li>
<li><i class="icon-file-alt left-third-leve-icon"></i><a>2.2经营指标分析</a></li>
</ul>
<li>
<i class="icon-folder-open-alt left-third-leve-icon"></i>
<a>2.2合生集团公告</a>
</li>
<ul class="third-leve-ul">
<li><i class="icon-file-alt left-third-leve-icon"></i><a>2.1经营指标分析</a></li>
<li><i class="icon-file-alt left-third-leve-icon"></i><a>2.2经营指标分析</a></li>
</ul>
</ul>
</div>
</div>
</div>
<div class="col-sm-9 col-md-9 col-lg-10 main">
<!-- <div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 main"> -->
<i class="icon-caret-left pull-left-target" id="left-button-flex"></i>
<div class="page-header">
<button type="button" class="btn btn-primary pull-left-btn pull-left-target">
<span class="icon-caret-left"></span>
</button>
<div class="bi-top-tabs">这里放页签</div>
</div>
<div class="row " >
<img src="./images/1.png" alt="" id="testimg">
<table class="table" id="widttest">
<caption>上下文表格布局</caption>
<thead>
<tr>
<th>产品</th>
<th>付款日期</th>
<th>状态</th></tr>
</thead>
<tbody>
<tr class="active">
<td style="width: 450px;">产品1</td>
<td style="width: 650px;margin-left: 250px;">23/11/2013</td>
<td style="width: 450px;">待发货</td></tr>
<tr class="success">
<td>产品2</td>
<td>10/11/2013</td>
<td>发货中</td></tr>
<tr class="warning">
<td>产品3</td>
<td>20/10/2013</td>
<td>待确认</td></tr>
<tr class="danger">
<td>产品4</td>
<td>20/10/2013</td>
<td>已退货</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<!-- 根据ie浏览器版本加入jq版本 -->
<!--[if lte IE 8]>
<script src="/bower_components/jquery/dist/jquery-1.11.3min.js"></script>
<![endif]-->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<!-- <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/button.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js"></script> -->
<!-- endbuild -->
<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- endbuild -->
</body>
</html>
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
