abstrak：<!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>后臺管理</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> 個人主頁</a></li>
<li><a href="#"><span class="glyphicon glyphicon-cog"></span> 個人設置</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 -->
<!-- 側邊功能欄 -->
<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>權限管理</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">
//菜單點擊
function menuFlie(obj){
//獲取url
var src=$(obj).attr('src');
//改變框架內的頁面
$('iframe').attr('src',src);
}
</script>
</body>
</html>
學習總結：
bootstrap框架是基于響應式的
1.bootstrap的導入
01.導入bootstrap樣式文件css;
02.導入支持文件：jquery.js;
03.導入bootstrap的js文件
2.images的內樣式
img-response/響應式 img-circle/圓形
3.表格：基類 修飾類1/主題1 修飾類2/主題
4.按鈕：給button添加dropdown-toggle樣式,可以讓按鈕左邊有對稱的圓角,與是否彈出無關
分裂式按鈕必須使用二個按鈕制作,將下拉樣式添加到第二個按鈕上
5.標簽和徽章：標簽類似于由背景的文本,可用在分類說明,標題的聲明
徽章和標簽非常相似，都是放在一對span標簽內
6.導航條：導航條的基類：navbar作為主容器，支持一個修飾類主體 navbar-default/navbar-inverse反色
7.分頁：分頁通常寫到一對nav標簽中，居中顯示
分頁聚類容器：pagination
8.警告框：警告框分兩種：一種是純提示，這個叫組件，還有一種叫插件，帶一個關閉按鈕
9.列表組的分類：
基本樣式，支持添加徽章的
帶有鏈接的列表項，注意不要用ul，應該用div+a這種組合
列表項全部由按鈕組成 div+button
10.輪播圖的制作步驟：
創(chuàng)建輪播圖的容器 carousel slide
設置播放順序
設置圖片
控制播放
11.面板的基類：panel
12.輸入框組：輸入框組僅適合input[type="text"],必須放在.input-group的基類中，并且可以設置大小
13.縮略圖的基類：thumbnail
14.選項卡：選項卡有兩個必須設置的屬性
a標簽的href設置錨點：#和標簽頁對應的內容區(qū)的id對應
data-toggle="tab"
Guru membetulkan：韋小寶Masa pembetulan：2019-03-13 09:09:58
Rumusan guru：代碼寫的很規(guī)范 總結的也很完整 使用bootstrap來搭建后臺總結的來說并沒有使用layui方便 而且樣式也沒有l(wèi)ayui好看 不過這個可以當做額外的技能去學習