各種分辨率適配
柵格系統(tǒng)還得多用。。。少寫一種分辨率的適配都會出問題，還有響應式表格，不做響應式表格會溢出。。。
Heson
2014-12-04
1 回答
舉報
0/150
提交
取消
2016-03-03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>某管理系統(tǒng)</title>
<link href="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>
??????? body {
??????????? padding-top: 50px;
??????????? padding-bottom: 40px;
??????????? color: #5a5a5a;
??????? }
/* 下面是左側(cè)導航欄的代碼 */
.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="#">某管理系統(tǒng)</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">業(yè)務功能</li>
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查詢</a></li>
<li><a href="#">信息管理</a></li>
<li class="divider"></li>
<li class="dropdown-header">系統(tǒng)功能</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">
<!―左側(cè)導航欄-->
<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>
<!―右側(cè)管理控制臺-->
<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">
<!―panel面板，里面放置一些控件，下同-->
<div class="panel panel-primary">
<!―panel面板的標題，下同-->
<div class="panel-heading">
<h3 class="panel-title">最新提醒</h3>
</div>
<!―panel面板的內(nèi)容，下同-->
<div class="panel-body">
<div class="alert alert-success" role="alert">
<strong>提示</strong>您的訂單（2014001）已經(jīng)審批通過！
</div>
<div class="alert alert-danger" role="alert">
<strong>提示</strong>您的訂單（2014002）被打回！
</div>
<div class="alert alert-warning" role="alert">
<strong>提示</strong>您的訂單（2013001）客戶付款延遲！
</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>
</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 table-striped">
<thead>
<tr>
<th>#</th>
<th>產(chǎn)品</th>
<th>數(shù)量</th>
<th>總金額</th>
<th>業(yè)務員</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>
<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 progress-bar-striped" role="progressbar" aria-valuenow="80"
???????????????????????????????????? aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">80% 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="30"
???????????????????????????????????? aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">30% Complete (danger)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>