????：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>后臺(tái)管理</title>
<link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
<link rel="stylesheet" href="../lib/admin.css">
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class=" dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 個(gè)人主頁(yè)</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> 個(gè)人設(shè)置</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> 賬戶中心</a></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> 收藏中心</a></li>
</ul>
</li>
<li><a href="">退出 <span class="glyphicon glyphicon-off"></span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
<!-- 側(cè)邊功能欄 -->
<div class=" navbar-default navbar-collapse" id="slider_sub">
<ul class="nav" >
<li>
<!-- 搜索-->
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<span class="input-group-btn" >
<button class=" btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</li>
<li>
<a href="#declear1" data-toggle="collapse"><span class="glyphicon glyphicon-menu-right"></span>管理員管理</span></a>
<ul class="nav collapse" id="declear1">
<li> <a href="javascript:;" src="admin.html" onclick="menuFlie(this)">管理員列表</a> </li>
</ul>
</li>
<li>
<a href="#declear2" data-toggle="collapse"><span class="glyphicon glyphicon-menu-right"></span>權(quán)限管理</a>
<ul class="nav collapse" id="declear2">
<li> <a href="javascript:;" src="roles.html" onclick="menuFlie(this)">角色管理</a> </li>
<li> <a href="javascript:;" src="menu.html" onclick="menuFlie(this)">菜單管理</a> </li>
</ul>
</li>
<li>
<a href="#declear3" data-toggle="collapse"><span class="glyphicon glyphicon-menu-right"></span>員工信息管理</a>
<ul class="nav collapse" id="declear3">
<li> <a href="javascript:;" src="staff.html" onclick="menuFlie(this)">員工列表</a> </li>
<li> <a href="javascript:;" src="welcome.html" onclick="menuFlie(this)">員工基本信息</a> </li>
<li> <a href="javascript:;" src="welcome.html" onclick="menuFlie(this)">添加員工</a> </li>
</ul>
</li>
<li>
<a href="#declear4" data-toggle="collapse"><span class="glyphicon glyphicon-menu-right"></span>考勤管理</a>
<ul class="nav collapse" id="declear4">
<li> <a href="javascript:;" src="welcome.html" onclick="menuFlie(this)">考勤信息</a> </li>
<li> <a href="javascript:;" src="welcome.html" onclick="menuFlie(this)">菜單管理</a> </li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="main_page">
<iframe src="sub/welcome.html" frameborder="0" style="width: 100%;height: 100%;" scrolling="0"></iframe>
</div>
</div>
<script src="../lib/jquery-3.3.1.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
<script type="text/javascript">
//菜單點(diǎn)擊
function menuFlie(obj){
//獲取url
var src=$(obj).attr('src');
//改變框架內(nèi)的頁(yè)面
$('iframe').attr('src',src);
}
</script>
</body>
</html>
學(xué)習(xí)總結(jié)：
bootstrap框架是基于響應(yīng)式的
1.bootstrap的導(dǎo)入
01.導(dǎo)入bootstrap樣式文件css;
02.導(dǎo)入支持文件：jquery.js;
03.導(dǎo)入bootstrap的js文件
2.images的內(nèi)樣式
img-response/響應(yīng)式 img-circle/圓形
3.表格：基類 修飾類1/主題1 修飾類2/主題
4.按鈕：給button添加dropdown-toggle樣式,可以讓按鈕左邊有對(duì)稱的圓角,與是否彈出無(wú)關(guān)
分裂式按鈕必須使用二個(gè)按鈕制作,將下拉樣式添加到第二個(gè)按鈕上
5.標(biāo)簽和徽章：標(biāo)簽類似于由背景的文本,可用在分類說明,標(biāo)題的聲明
徽章和標(biāo)簽非常相似，都是放在一對(duì)span標(biāo)簽內(nèi)
6.導(dǎo)航條：導(dǎo)航條的基類：navbar作為主容器，支持一個(gè)修飾類主體 navbar-default/navbar-inverse反色
7.分頁(yè)：分頁(yè)通常寫到一對(duì)nav標(biāo)簽中，居中顯示
分頁(yè)聚類容器：pagination
8.警告框：警告框分兩種：一種是純提示，這個(gè)叫組件，還有一種叫插件，帶一個(gè)關(guān)閉按鈕
9.列表組的分類：
基本樣式，支持添加徽章的
帶有鏈接的列表項(xiàng)，注意不要用ul，應(yīng)該用div+a這種組合
列表項(xiàng)全部由按鈕組成 div+button
10.輪播圖的制作步驟：
創(chuàng)建輪播圖的容器 carousel slide
設(shè)置播放順序
設(shè)置圖片
控制播放
11.面板的基類：panel
12.輸入框組：輸入框組僅適合input[type="text"],必須放在.input-group的基類中，并且可以設(shè)置大小
13.縮略圖的基類：thumbnail
14.選項(xiàng)卡：選項(xiàng)卡有兩個(gè)必須設(shè)置的屬性
a標(biāo)簽的href設(shè)置錨點(diǎn)：#和標(biāo)簽頁(yè)對(duì)應(yīng)的內(nèi)容區(qū)的id對(duì)應(yīng)
data-toggle="tab"
?? ???：韋小寶?? ??：2019-03-13 09:09:58
???? ??：代碼寫的很規(guī)范 總結(jié)的也很完整 使用bootstrap來(lái)搭建后臺(tái)總結(jié)的來(lái)說并沒有使用layui方便 而且樣式也沒有l(wèi)ayui好看 不過這個(gè)可以當(dāng)做額外的技能去學(xué)習(xí)