bootstrap后台布局和总结

abstract：通过对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; }

主页面代码：

             
  
  
 
账号管理
 
权限管理
 
资源管理
 
  
     
  
 
 
 
 编码 
 
 名称 
 
 链接 
 
 操作 
 
 
 
 
 1 
 
  系统管理 
 
 /admin/system/userlist/software/ 
 
 修改 删除 
 
  
 
 
 2 
 
  账号管理 
 
 /rlist/ 
 
 修改 删除 
 
  
 
 
 1 
 
   资源管理 
 
 /admin/system/userlist/software/ 
 
 修改 删除 
 
 
 
 2 
 
 权限管理 
 
 /admin/system/userlist/software/ 
 
 修改 删除 
 
 
 
 
 
 
  
 
 
 &am
Correcting teacher：天蓬老师Correction time：2018-11-13 17:50:47
Teacher's summary：Boostrap中的轮播图功能,其实是非常简陋的,建议掌握原理,以后在项目中,使用第三方的更好些
        

         
WeChat
         
share