????：后臺(tái)管理.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>后臺(tái)管理系統(tǒng)</title> <link rel="stylesheet" type="t
后臺(tái)管理.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后臺(tái)管理系統(tǒng)</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
<style>
body{
width: 100%;
height: 100%;
overflow: hidden;
}
.navbar{
border-radius: 0px;
}
.color{
float: left;
width:30px;
height: 30px;
margin: 10px;
}
.quit{
font-size:14px;
font-weight: normal;
}
.main{
width: 200px;
height: 150px;
padding: 20px;
padding-bottom: 50px;
margin-left:160px;
}
a[href="#declare1"],a[href="#declare2"],#declare1 *,#declare2 *{
border-radius: 0px;
}
.menu{
width: 200px;
height: 100%;
background: #ccc;
position: absolute;
top: 52px;
}
.menu_1{
width: 200px;
height: 30px;
}
.menu_1_1{
width: 200px;
}
.pageContent{
height: 100%;
width: 1200px;
position: absolute;
left: 200px;
top:52px;
}
</style>
</head>
<body>
<!-- 導(dǎo)航條 -->
<nav class="navbar navbar-inverse">
<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" 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="#">數(shù)字管理系統(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">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">網(wǎng)絡(luò)信息管理系統(tǒng)</a></li>
<li><a href="#">后臺(tái)管理系統(tǒng)</a></li>
<li><a href="#">信息科技管理系統(tǒng)</a></li>
<li><a href="#">網(wǎng)絡(luò)管理系統(tǒng)</a></li>
<li><a href="#">數(shù)字管理系統(tǒng)</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">admin</a></li>
<li>
<a href="" class="close quit" data-toggle="modal" data-target="#myModal">退出</a>
<div class="modal fade " id="myModal">
<div class="modal-dialog" >
<div class="modal-content main">
<div class="modal-body">
確定要退出嗎？<br><br>
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary">退出</button>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">皮膚 <span class="caret"></span></a>
<ul class="dropdown-menu">
<span class="bg-success color"></span>
<span class="bg-info color"></span>
<span class="bg-danger color"></span>
<span class="bg-primary color"></span>
<span class="bg-warning color"></span>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- 中間主體內(nèi)容 -->
<div class="content">
<!-- 左側(cè)導(dǎo)航欄 -->
<div class="menu">
<form class="navbar-form navbar-right">
<div class="form-group ">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
<a href="#declare1" class="btn btn-info menu_1" data-toggle="collapse">用戶(hù)管理</a>
<div class="collapse" id="declare1">
<div class="btn-group-vertical menu_1_1">
<a href="form.html" class="btn btn-default" target="mainFrame">表單</a>
<a href="table.html" class="btn btn-default" target="mainFrame">表格</a>
<a href="" class="btn btn-default">積分</a>
</div>
</div>
<a href="#declare2" class="btn btn-info menu_1" data-toggle="collapse">商品管理</a>
<div class="collapse" id="declare2">
<div class="btn-group-vertical menu_1_1">
<a href="" class="btn btn-default">分類(lèi)管理</a>
<a href="" class="btn btn-default">訂單管理</a>
<a href="" class="btn btn-default">促銷(xiāo)管理</a>
</div>
</div>
</div>
<!-- 正文內(nèi)容 -->
<div class="pageContent">
<iframe src="index.html" frameborder="0" id="mainFrame" name="mainFrame" style="width: 100%;height: 100%" scrolling="0"></iframe>
</div>
</div>
</body>
</html>
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12" style="padding: 0px;">
<div class="jumbotron" style="border-radius: 0px;background: #fff;">
<h1 style="font-size:50px;color: #ccc;text-align:center; font-weight: bolder;">歡迎來(lái)到數(shù)字管理系統(tǒng)</h1>
</div>
</div>
</div>
</div>
</body>
</html>
form.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3 class="text-center">個(gè)人信息</h3>
<form>
<div class="form-group">
<label for="username">姓名</label>
<input type="text" class="form-control" name="username" id="uername" placeholder="姓名">
</div>
<div class="form-group">
<label for="native">民族</label>
<input type="text" class="form-control" name="native" id="native" placeholder="民族">
</div>
<div class="form-group">
<label for="file">選擇文件</label>
<input type="file" name="file" id="file">
<p class="help-block">選擇jpg/png.gif圖片格式</p>
</div>
<div class="form-group">
<label for="level">學(xué)歷:</label>
<select class="form-control" name="select" id="select">
<option value="0">高中</option>
<option value="1">大學(xué)</option>
<option value="2">研究生</option>
</select>
</div>
<div class="form-group">
<label for="comment">留言</label>
<textarea class="form-control" name="textarea" id="textarea" rows="3"></textarea>
</div>
<label for="">選擇愛(ài)好:</label>
<div class="checkbox">
<label >
<input type="checkbox" checked="">讀書(shū)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox">游泳
</label>
</div>
<div class="checkbox" disabled>
<label>
<input type="checkbox" disabled>下棋
</label>
</div>
<div class="checkbox-inline">
<label >
<input type="checkbox" checked="">讀書(shū)
</label>
</div>
<div class="checkbox-inline">
<label>
<input type="checkbox">游泳
</label>
</div>
<div class="checkbox-inline" disabled>
<label>
<input type="checkbox" disabled>下棋
</label>
</div>
<label>選擇性別:</label>
<div class="radio">
<label>
<input type="radio" name="sex" checked>男
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sex">女
</label>
</div>
<div class="radio" disabled>
<label>
<input type="radio" name="sex" disabled>待定
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="name" aria-label="用戶(hù)名">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="name" aria-label="用戶(hù)名">
</label>
</div>
<br>
<button type="button" class="btn btn-primary">提交</button>
</form>
</div>
</div>
</div>
</body>
</html>
table.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12" style="padding-top: 50px;">
<div class="panel panel-warning">
<div class="panel-heading">
<h2 class="panel-title text-center">信息注冊(cè)表</h2>
</div>
<table class="table table-bordered table-hover text-center">
<thead>
<tr class="bg-success">
<td>ID</td>
<td>用戶(hù)名</td>
<td>昵稱(chēng)</td>
<td>籍貫</td>
<td>畢業(yè)院校</td>
<td>出生日期</td>
<td>是否審核</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
<div class="panel-footer">
<ul class="pagination">
<li>
<a href=""><span>«</span></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=""><span>»</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>一、Bootstrap
1. 導(dǎo)入Bootstrap樣式文件css
2. 導(dǎo)入支持文件:jquery.js
3. 導(dǎo)入Bootstrap的js文件
二、Bootstrap需要為頁(yè)面內(nèi)容和柵格系統(tǒng)包裹一個(gè)container容器
1. .container類(lèi)用于固定寬度并支持響應(yīng)式布局的容器
2. .container-fluid類(lèi)用于100%寬度,占據(jù)全部視口的容器
三、 柵格系統(tǒng)
1. 系統(tǒng)會(huì)自動(dòng)分為最多12列
2. .container類(lèi)下面第一行代碼必須是添加一個(gè)行樣式 class="row"
行里面必須是列 class="col-"
3. 基本的HTML元素均可以通過(guò) class 設(shè)置樣式并得到增強(qiáng)效果。
?? ???：天蓬老師?? ??：2019-01-13 16:19:30
???? ??：bootstrap是一個(gè)全球使用最廣泛的前端框架, 現(xiàn)在市場(chǎng)上很多前端框架,底層其實(shí)就是基于它的,例如 H-ui