【Bootstrap】两个常用布局，居中布局和全屏左右布局，响应式布局

article/2025/10/12 19:08:29

居中布局

居中布局，上面为菜单，下面为内容，内容居中，无论屏幕多宽，内容总是在中间

代码

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Test</title><link href="/Content/bootstrap.css" rel="stylesheet" /><style type="text/css">body {padding-top: 50px;padding-bottom: 20px;}.body-content {padding-left: 15px;padding-right: 15px;}</style><script src="/Scripts/modernizr-2.8.3.js"></script></head>
<body><div class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="/">Test</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="/">菜单1</a></li><li><a href="/">菜单2</a></li><li><a href="/">菜单3</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="/">注册</a></li><li><a href="/">登录</a></li></ul></div></div></div><div class="container body-content"><h1>内容</h1><hr /><footer><p>&copy; Test</p></footer></div><script src="/Scripts/jquery-3.3.1.js"></script><script src="/Scripts/bootstrap.js"></script></body>
</html>

全屏左右布局

参考：http://www.jq22.com/jquery-info4155

其中还用到Flat-UI(界面工具组件库)

https://www.runoob.com/manual/Flat-UI/

这种布局，根据浏览器大小显示，数据显示较全，适用于后台管理系统

代码

<!doctype html>
<html lang="ch">
<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>项目名称</title><link href="~/Content/bootstrap.css" rel="stylesheet" /><link href="~/Content/Test3/common.css" rel="stylesheet" /><link href="~/Content/Test3/flat-ui.css" rel="stylesheet" />
</head>
<body><div id="wrap"><div class="leftMeun" id="leftMeun"><div id="logoDiv"><p id="logoP"><span>项目名称</span></p></div><div class="meun-title">账号管理</div><div class="meun-item meun-item-active" href="#user" aria-controls="user" role="tab" data-toggle="tab">用户管理</div><div class="meun-item" href="#chan" aria-controls="chan" role="tab" data-toggle="tab">修改密码</div></div><div id="rightContent"><a class="toggle-btn" id="nimei"><i class="glyphicon glyphicon-align-justify"></i></a><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="user"><div class="check-div"></div><div class="data-div"><div class="row tableHeader"><div class="col-xs-2 ">用户名</div><div class="col-xs-2">地区</div><div class="col-xs-2">真实姓名</div><div class="col-xs-2">电话</div><div class="col-xs-2">状态</div><div class="col-xs-2">操作</div></div><div class="tablebody"><div class="row"><div class="col-xs-2 ">wwz</div><div class="col-xs-2">地区</div><div class="col-xs-2">哈哈</div><div class="col-xs-2">13700000000</div><div class="col-xs-2">状态</div><div class="col-xs-2"><button class="btn btn-success btn-xs" data-toggle="modal" data-target="#reviseUser">修改</button><button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteUser">删除</button></div></div></div></div></div><div role="tabpanel" class="tab-pane" id="chan"><div class="check-div"></div><div style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;"><form class="form-horizontal"><div class="form-group"><label for="sKnot" class="col-xs-4 control-label">原密码：</label><div class="col-xs-5"><input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="" style="margin-top: 7px;"></div></div><div class="form-group"><label for="sKnot" class="col-xs-4 control-label">新密码：</label><div class="col-xs-5"><input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="" style="margin-top: 7px;"></div></div><div class="form-group"><label for="sKnot" class="col-xs-4 control-label">重复密码：</label><div class="col-xs-5"><input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="" style="margin-top: 7px;"></div></div><div class="form-group text-right"><div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;"><button type="reset" class="btn btn-xs btn-white">取 消</button><button type="submit" class="btn btn-xs btn-green">保存</button></div></div></form></div></div></div></div></div><script src="~/Scripts/jquery-3.3.1.js"></script><script src="~/Scripts/bootstrap.js"></script><script>$(function () {$(".meun-item").click(function () {$(".meun-item").removeClass("meun-item-active");$(this).addClass("meun-item-active");});$(".toggle-btn").click(function () {$("#leftMeun").toggleClass("show");$("#rightContent").toggleClass("pd0px");})})</script>
</body>
</html>

css代码

@charset "utf-8";body {min-width: 100%;height: auto
}#wrap {min-width: 100%;position: absolute;background: #eff3f6 bottom;min-height: 100%;overflow: hidden
}.leftMeun {position: absolute;box-sizing: border-box;width: 200px;height: 100%;background: #4d5e70 bottom
}.leftMeun > div {padding-left: 20px}#rightContent {box-sizing: border-box;float: left;box-sizing: border-box;padding-left: 200px;overflow-y: overlay;overflow-x: hidden;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
}.meun-title {color: #828e9a;padding-top: 10px;padding-bottom: 10px;font-size: 16px;font-weight: 700
}.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
}.tab-pane {color: #9095ab
}.toggle-btn {display: none;width: 52px;height: 50px;font-size: 20px;padding: 15px;cursor: pointer;float: left;color: #212121;-moz-transition: all .2s ease-out 0s;-webkit-transition: all .2s ease-out 0s;transition: all .2s ease-out 0s
}.tableHeader {height: 35px;line-height: 35px;font-size: 12px;font-weight: 700;color: #646987;background-color: #e3e8ee;padding: 0 30px;text-align: left
}.tablebody {margin: 20px 30px;text-align: left
}.tablebody .row {margin-top: 10px;background-color: #fff;height: 70px;line-height: 70px}.pd0px {padding-left: 200px !important
}/*屏幕宽度小于1123px时的样式*/
@media(max-width:1123px) {#rightContent {padding-left: 0}.tab-pane {min-width: 973px}.leftMeun {display: none}.toggle-btn {display: block}
}.btn-white {background: #fff;border: 1px solid #ccc !important;font-weight: 400 !important;margin-right: 10px
}.btn-green {border: 1px solid #ccc !important;font-weight: 400 !important;margin-right: 10px;color: #fff;background: #529373
}.duiqi {margin-left: -26px !important;margin-top: 7px;width: 200px !important
}.form-horizontal .form-group {margin-right: -100px !important
}