摘要：通过对bootstrap课程的学习，学会了用bootstrap快速搭建表格、创建表单、添加轮播图、添加分页模块，并在此基础上学习了表单里的控件和组件。通过学习，了解到bootstrap响应式布局的强大，可以通过引用bootstrap的文件，快速的搭建一个响应式的网站，提高建站效率。common.css代码：@charset "utf-8"; /* CSS&n
通过对bootstrap课程的学习，学会了用bootstrap快速搭建表格、创建表单、添加轮播图、添加分页模块，并在此基础上学习了表单里的控件和组件。通过学习，了解到bootstrap响应式布局的强大，可以通过引用bootstrap的文件，快速的搭建一个响应式的网站，提高建站效率。
common.css代码：
@charset "utf-8";
/* CSS Document */
/*外层框架样式*/
body {
min-width: 100%;
height: auto;
}
.container-fluid {
padding-left: 0!important;
}
#wrap {
min-width: 100%;
position: absolute;
background: #eff3f6 bottom;
min-height: 100%;
overflow: hidden;
}
/*@media (min-width: 660px) #wrap {
min-width: 650px;
}
@media (min-width: 768px) #wrap {
width: 100%;
min-width: 750px;
}
@media (min-width: 992px) #wrap {
width: 100%;
min-width: 970px;
}
@media (min-width: 1200px) #wrap {
width: 100%;
min-width: 1170px;
}*/
.leftMeun {
position: absolute;
box-sizing: border-box;
width: 200px;
height: 100%;
background: #4d5e70 bottom;
}
.leftMeun >div {
padding-left: 20px;
}
#rightContent {
/*position: absolute;*/
box-sizing: border-box;
float: left;
box-sizing: border-box;
padding-left: 200px;
overflow-y: overlay;
overflow-x: hidden;
/*background-color: #eff3f6;*/
clear: both;
color: #717592;
min-width: 100%;
min-height: 500px;
}
/*左侧菜单栏*/
#logoDiv {
padding-top: 20px;
padding-bottom: 20px;
height: 70px;
background-color: #354457;
font-size: 17px;
color: #fff;
vertical-align: bottom;
}
#logo {
height: 30px;
padding-right: 5px;
}
#logoDiv span {
vertical-align: bottom;
}
#personInfor {
padding: 10px 5px 10px;
margin: 0 5px;
color: #b3bcc5;
border-bottom: 1px solid #354457;
overflow-x: hidden;
padding-left: 20px;
}
#personInfor p {
font-size: 12px;
margin-left: -5px;
}
#personInfor a {
color: #B3BCC5;
text-decoration: underline;
}
#userName {
font-size: 15px!important;
padding: 0;
margin: 0;
}
.line-div {
color: #F00;
height: 5px;
}
.meun dl {
padding: 0 10px;
}
.meun-title {
color: #828e9a;
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.meun-item {
line-height: 40px;
height: 40px;
color: #aab1b7;
cursor: pointer;
}
.meun-item a {
color: #aab1b7;
display: block;
}
.meun-item-active a {
color: #c4c7cc;
display: block;
}
.meun-item img {
padding-right: 8px;
height: 20px;
}
.meun-item-active {
background-color: #3d4e60;
border-right: 4px solid #647f9d;
color: #fff;
}
/*右侧具体内容栏目*/
.check-div {
height: 70px;
line-height: 70px;
*line-height: 60px;
background-color: #fff;
padding-left: 30px;
min-width: 824px !important;
box-sizing: border-box;
}
.check-div button {
font-size: 12px;
font-weight: bold;
}
.check-div select {
height: 26px;
width: 120px!important;
display: inline;
color: #ccc;
}
.check-div input {
width: 200px !important;
display: inline;
}
.tab-pane {
color: #9095ab;
}
.tableHeader {
height: 35px;
line-height: 35px;
font-size: 12px;
font-weight: bold;
color: #646987;
background-color: #e3e8ee;
padding: 0 30px;
text-align: left;
}
.codeTop {
text-align: right;
}
.tablebody {
margin: 20px 30px;
text-align: left;
}
.tablebody .row {
margin-top: 10px;
background-color: #fff;
height: 70px;
line-height: 70px;
}
.footer {
float: right;
margin-right: 20px
}
.modal-header {
/*background-color: #e3e8ee;*/
}
.modal-title {
font-weight: bold;
}
.expand-col {
padding: 0;
margin-top: 30px;
}
.levl2 {
padding-left: 30px;
}
.levl3 {
padding-left: 40px;
}
.sitTable {
background-color: #fff;
padding-right: 30px;
}
.sitTable table {
border-top: none;
background-color: #FFF;
}
/*表格上部边框线*/
.sitTable .table>tbody>tr:first-child>td {
border-top: none;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
vertical-align: middle !important;
padding: 8px 15px!important;
}
.btn {
border: none;
}
.toggle-btn {
display: none;
width: 52px;
height: 50px;
font-size: 20px;
padding: 15px;
cursor: pointer;
float: left;
color: #212121;
-moz-transition: all 0.2s ease-out 0s;
-webkit-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.pd0px {
padding-left: 200px!important;
}
select {
padding: 0 auto!important;
}
@media (max-width: 1123px) {
#rightContent {
padding-left: 0;
}
.tab-pane {
min-width: 973px;
}
.leftMeun {
display: none;
}
.toggle-btn {
display: block;
}
}
.input-xs {
height: 25px;
line-height: 25px;
}
.btn-white {
background: #fff;
border: 1px solid #ccc!important;
font-weight: normal!important;
margin-right: 10px;
}
.btn-green {
border: 1px solid #ccc!important;
font-weight: normal!important;
margin-right: 10px;
color: #fff;
background: #529373;
}
.btn-yellow {
background: #fff;
border: 1px solid #ccc!important;
font-weight: normal!important;
margin-right: 10px;
color: #eab67c!important;
border: 1px solid #eab67c!important;
}
.gray {
color: #b7b7b7;
font-weight: normal;
padding: 0 10px;
}
.footer .glyphicon {
font-size: 12px;
color: #00BDEF;
padding: 4px;
background-color: #fff;
margin-right: 10px;
}
.zhi {
margin-top: 33px;
border-radius: 0!important;
width: 50px!important;
height: 21px!important;
line-height: 20px;
border: none;
box-shadow: none!important;
}
.duiqi {
margin-left: -26px!important;
margin-top: 7px;
width: 200px!important;
}
.form-horizontal .form-group {
margin-right: -100px!important;
}
.select-duiqi {
height: 25px!important;
color: #ccc!important;
margin-left: -25px;
margin-top: 6px;
width: 200px!important;
}
.linkCcc {
color: #9095ab!important;
text-decoration: underline;
padding-right: 10px;
}
.linkCcc:hover {
color: #000!important;
text-decoration: underline;
}
.modal {
color: #4b4b4b;
}
.top100 {
margin-top: -25px!important;
height: 40px!important;
line-height: 67px!important;
}
.left {
float: left;
}
.right {
float: right;
}主页面代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>Bootstrap后台管理模板</title>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function() {
$(".meun-item").click(function() {
$(".meun-item").removeClass("meun-item-active");
$(this).addClass("meun-item-active");
var itmeObj = $(".meun-item").find("img");
itmeObj.each(function() {
var items = $(this).attr("src");
items = items.replace("_grey.png", ".png");
items = items.replace(".png", "_grey.png")
$(this).attr("src", items);
});
var attrObj = $(this).find("img").attr("src");
;
attrObj = attrObj.replace("_grey.png", ".png");
$(this).find("img").attr("src", attrObj);
});
$("#topAD").click(function() {
$("#topA").toggleClass(" glyphicon-triangle-right");
$("#topA").toggleClass(" glyphicon-triangle-bottom");
});
$("#topBD").click(function() {
$("#topB").toggleClass(" glyphicon-triangle-right");
$("#topB").toggleClass(" glyphicon-triangle-bottom");
});
$("#topCD").click(function() {
$("#topC").toggleClass(" glyphicon-triangle-right");
$("#topC").toggleClass(" glyphicon-triangle-bottom");
});
$(".toggle-btn").click(function() {
$("#leftMeun").toggleClass("show");
$("#rightContent").toggleClass("pd0px");
})
})
</script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
<div id="wrap">
<!-- 左侧菜单栏目块 -->
<div id="leftMeun">
<div>账号管理</div>
<div class="meun-item meun-item-active" href="#char" aria-controls="char" role="tab" data-toggle="tab"><img src="images/icon_chara_grey.png">权限管理</div>
<div href="#sour" aria-controls="sour" role="tab" data-toggle="tab"><img src="images/icon_source.png">资源管理</div>
</div>
<!-- 右侧具体内容栏目 -->
<div id="rightContent">
<a id="nimei">
<i class="glyphicon glyphicon-align-justify"></i>
</a>
<!-- Tab panes -->
<div>
<!-- 资源管理模块 -->
<div role="tabpanel" class="tab-pane active" id="sour">
<div>
<div class="row tableHeader">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">
编码
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
名称
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
链接
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
操作
</div>
</div>
<div>
<div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
1
</div>
<div id="topAD" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSystem" aria-expanded="true" aria-controls="collapseOne">
<span id="topA" class="glyphicon glyphicon-triangle-bottom "></span> <span>系统管理</span>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
/admin/system/userlist/software/
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#changeSource">修改</button>
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteSource">删除</button>
</div>
</div>
<!--系统管理折叠框-->
<div id="collapseSystem" class="collapse in" aria-expanded="true">
<div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 levl2 ">
2
</div>
<div id="topBD" onClick="changeA()" class="col-lg-4 col-md-4 col-sm-4 col-xs-4 levl2" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseAccount" aria-expanded="true" aria-controls="collapseOne">
<span onClick="changeB()" id="topB" class="glyphicon glyphicon-triangle-bottom"></span> <span>账号管理</span>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
/rlist/
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#changeSource">修改</button>
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteSource">删除</button>
</div>
</div>
<!--用户管理折叠框-->
<div id="collapseAccount" class="collapse in" aria-expanded="true">
<div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 levl3 ">
1
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 levl3">
<span class=""> </span><span>资源管理</span>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
/admin/system/userlist/software/
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#changeSource">修改</button>
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteSource">删除</button>
</div>
</div>
<div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 levl3 ">
2
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 levl3">
<span></span><span>权限管理</span>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
/admin/system/userlist/software/
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button class="btn btn-success btn-xs" data-toggle="modal" data-target="#changeSource">修改</button>
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteSource">删除</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 权限管理模块 -->
<div role="tabpanel" id="char">
<div>
<div class="row tableHeader">
&am
批改老师：天蓬老师批改时间：2018-11-13 17:50:47
老师总结：Boostrap中的轮播图功能,其实是非常简陋的,建议掌握原理,以后在项目中,使用第三方的更好些
