pc移動端自適應佈局html頁面（二）
阿新 • • 發佈：2018-12-29
效果圖<!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>