僅需 3 行代碼就能將 Gitter集成到個人網站中，實現一個 IM 功能
一、前言從很早以前就有寫博文的習慣，不過那個時候，也沒咋認真地寫，倒是挺喜歡倒騰，從最初在 CSDN 寫博客，寫了得有 100 多篇後，那時，CSDN 開...
利用bootstrap框架製作網站後臺管理界面包括兩個部分，一部分是響應式導航，包括左邊側邊欄，主要包括輸入框組（input-group）；另一部分是右邊內容部分，包括麵包屑導航（breadcrumb），面板組件（panel）、表格（table）、分頁（Page）組件等。其中表格使用了條紋類（table-striped），鼠標懸停類（table-hover）。
讀者製作案例時可能先把結構div敲出來，然後逐步添加相應的類，邊操作邊預覽效果。
案例實現右邊導航（登陸、註銷、註冊）和左邊側邊欄在屏幕分辨率<768px時隱藏，通過點擊相應的按鈕顯示與隱藏。本案例具體的效果如下：
網頁文件manage1.html的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>網站後臺管理界面1</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<style type="text/css">
/*媒體查詢，小屏幕（平板，大於等於768px）*/
@media (min-width:768px){
#leftbar{
width:240px;
margin:55px 0px 0px 0px;
position:absolute;
/*z-index:1;*/
height:500px;
/*background:#B9DEF0;*/
}
.page-right{
background:#ddd;
margin:-5px 0px 0px 245px;
}
}
/* */
.left-dh{
margin: 10px 0px;
}
@media (max-width:768px){
body{
background:#777;
}
}
</style>
</head>
<body>
<!-- .navbar-static-top 去掉了由 .navbar-default 設置的左、右和頂部的邊框，讓它看起來更適合放在頁面的頭部。-->
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<a href="#" class="navbar-brand">網站後臺管理1</a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#login">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button class="navbar-toggle" data-toggle="collapse" data-target="#leftbar">
<span>設置</span>
</button>
</div>
<ul class="nav navbar-nav navbar-right navbar-collapse collapse" id="login" style="margin:0px 20px 0px 0px;">
<li><a href="#"><span class="badge">登陸</span></a></li>
<li><a href="#">註銷</a></li>
<li><a href="#">註冊</a></li>
</ul>
<!--側邊欄 -->
<div class="navbar-collapse collapse" id="leftbar">
<ul class="nav" id="mz">
<li>
<div class="input-group left-dh">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-danger">
<span class="glyphicon glyphicon-search"></span>
</button>
</sapn>
</div>
</li>
<li class="panel panel-default">
<a href="#sys" data-toggle="collapse" data-parent="#mz">系統功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul class="panel-collapse collapse nav" id="sys">
<li><a href="#">系統信息</a></li>
<li><a href="#">管理員管理</a></li>
<li><a href="#">日誌信息</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
<li class="panel panel-default">
<a href="#lanmu" data-toggle="collapse" data-parent="#mz">欄目功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul class="panel-collapse collapse nav" id="lanmu">
<li><a href="#">欄目管理</a></li>
<li><a href="#">欄目修改</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--右邊主要區域 -->
<div class="page-right">
<ol class="breadcrumb">
<li><a href="#">首頁管理</a></li>
<li><a href="#">欄目</a></li>
<li><a href="#">增加欄目</a></li>
</ol>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
最新訂單
</div>
<div class="panel-body">
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>id</th><th>訂單號</th> <th>訂單日期</th><th>總價</th><th>狀態</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>01</td><td>2017-1-3 7:10:30</td><td>177.0</td><td>出庫</td>
</tr>
<tr>
<td>2</td><td>03</td><td>2017-4-1 21:01:10</td><td>899.3</td><td>出庫</td>
</tr>
<tr>
<td>3</td><td>04</td><td>2017-5-1 20:12:11</td><td>1999.0</td><td>未確認</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
訂單1
</div>
<div class="panel-body">
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>id</th><th>訂單號</th> <th>訂單日期</th><th>總價</th><th>狀態</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>01</td><td>2017-1-3 7:10:30</td><td>177.0</td><td>出庫</td>
</tr>
<tr>
<td>2</td><td>02</td><td>2017-8-1 21:01:10</td><td>1700</td><td>出庫</td>
</tr>
<tr>
<td>3</td><td>03</td><td>2017-10-2 20:12:11</td><td>2450</td><td>未確認</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
訂單2
</div>
<div class="panel-body">
<table class="table table-striped table-hover table-responsive">
<thead>
<tr>
<th>id</th><th>訂單號</th><th>訂單日期</th><th>總價</th><th>狀態</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>01</td><td>2017-1-3 7:10:30</td><td>177.0</td><td>出庫</td>
</tr>
<tr>
<td>2</td><td>02</td><td>2017-11-5 21:01:10</td><td>1899</td><td>出庫</td>
</tr>
<tr>
<td>3</td><td>03</td><td>2017-12-5 20:12:11</td><td>3500</td><td>未確認</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<ul class="pagination pull-right">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
至此，案例製作完成。
相關推薦
'JavaScript實現第三方登錄網站原理在這呢'
"點關注，不迷路，每天更新大量前端資料前端實現第三方登錄之OAuth2.0協議OAuth 2.0 規定了四種獲得令牌的流程。我們可以選擇最適合自己的那一種，向第三方應用頒發令牌。下面就是這四種授權方式。授權碼模式（authorization-code）簡化模式（implic...
Java框架從入門到裝逼，用EasyUI繪製主界面
1.引入資源包在上一節中，我們把基本的框架都搭好了，用了Spring，SPringMVC。這一節，我們先來畫頁面，前端框架採用EasyUI來實現。 eas...
這是我見過最牛叉的代碼，整理公司網站後臺管理系統源碼時看到的
“<a href="javascript:alert('清除成功')">清除緩存</a>”不要太牛掰！程序員有3個法寶，分別是Ct...
Python圖形化界面編程寫軟件之windows窗口
這幾天來記錄下Python的界面編程，其實就是用Python來寫軟件，作為安全小白的我應該一步一步向黑客大神邁進，很多的黑客大牛都是自己動手寫軟件，在這裡...
用戶界面框架jQuery EasyUI v1.5.2發佈｜附下載
jQuery EasyUI致力於幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI界面。jQuery EasyUI提供了基於當下流行的jQuery core和HTML5的控件，助您打造適合當今網絡的應用程序。具體更新內容如下：改進：datagrid: Mac鍵盤支持ctr...
php實現網站縮略圖的功能，文章末尾附實現代碼
縮略圖與原始圖片一樣，只是圖片大小不一樣而已。縮略圖的使用1.在顯示的時候用來代替原圖，節省帶寬2.為了在小的顯示屏幕上顯示怎麼製作縮略圖？PHP需要藉助...
福州網站優化之移動站點排名規則（收錄篇）
隨著人們逐漸習慣於手機生活，網絡世界也發生著翻天覆地的變化。最顯而易見的一點是，人們利用移動端進行上網的比例正不斷爬升。以至於不少國外電腦廠商曾提出，PC...
推薦中...