返回 bootstr...... 登陆

bootstrap后台布局和总结

1Pong 2018-11-13 17:02:18 721

通过对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=""> &nbsp;</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    
    

最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网