用bootstrap布置一个简易的网站后台
后台管理.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理系统</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>
<!-- 导航条 -->
<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="#">数字管理系统</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="#">网络信息管理系统</a></li>
<li><a href="#">后台管理系统</a></li>
<li><a href="#">信息科技管理系统</a></li>
<li><a href="#">网络管理系统</a></li>
<li><a href="#">数字管理系统</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">关闭</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>
<!-- 中间主体内容 -->
<div class="content">
<!-- 左侧导航栏 -->
<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">用户管理</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">分类管理</a>
<a href="" class="btn btn-default">订单管理</a>
<a href="" class="btn btn-default">促销管理</a>
</div>
</div>
</div>
<!-- 正文内容 -->
<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;">欢迎来到数字管理系统</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">个人信息</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">学历:</label>
<select class="form-control" name="select" id="select">
<option value="0">高中</option>
<option value="1">大学</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="">选择爱好:</label>
<div class="checkbox">
<label >
<input type="checkbox" checked="">读书
</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="">读书
</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="用户名">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="name" aria-label="用户名">
</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">信息注册表</h2>
</div>
<table class="table table-bordered table-hover text-center">
<thead>
<tr class="bg-success">
<td>ID</td>
<td>用户名</td>
<td>昵称</td>
<td>籍贯</td>
<td>毕业院校</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. 导入Bootstrap样式文件css
2. 导入支持文件:jquery.js
3. 导入Bootstrap的js文件
二、Bootstrap需要为页面内容和栅格系统包裹一个container容器
1. .container类用于固定宽度并支持响应式布局的容器
2. .container-fluid类用于100%宽度,占据全部视口的容器
三、 栅格系统
1. 系统会自动分为最多12列
2. .container类下面第一行代码必须是添加一个行样式 class="row"
行里面必须是列 class="col-"
3. 基本的HTML元素均可以通过 class 设置样式并得到增强效果。