您的位置: 主页 > Office教程 >

Bootstrap实现的经典栅格布局效果实例

时间:2017-05-18 12:47 来源:Word教程网 阅读:报告错误

     
     分享给大家供大家参考,具体撤回:
     先来看看效果图:
     具体代码撤回:
     <!DOCTYPE html PUBLIC '--transitional.dtd'><'><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312' /><meta http-equiv='X-' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1'><title>XXXXX系统</title><link href='css/bootstrap.min.css' rel='external nofollow' rel='stylesheet'><!--><script src='js/html5shiv.js'></script><script src='js/respond.min.js'></script><!--><style> body { padding-top: 50px; padding-bottom: 40px; color: #5a5a5a; }/ 下面是左侧导航栏的代码 /.sidebar { position: fixed; top: 51px; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; background-color: #ddd; border-right: 1px solid #eee; } .nav-sidebar { margin-right: -21px; margin-bottom: 20px; margin-left: -20px; } .nav-sidebar > li > a { padding-right: 20px; padding-left: 20px; } .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > { color: #fff; background-color: #428bca; } .main { padding: 20px; } .main .page-header { margin-top: 0; }</style></head><body><!--下面是顶部导航栏的代码--><nav class='navbar navbar-default navbar-inverse navbar-fixed-top' role='navigation'><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'><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='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >某管理系统</a></div><div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'><ul class='nav navbar-nav'><li class='active'><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >首页</a></li><li class='dropdown'><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' class='dropdown-toggle' data-toggle='dropdown'>功能<span class='caret'></span></a><ul class='dropdown-menu' role='menu'><li class='dropdown-header'>业务功能</li><li><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >信息? 恳求</a></li><li><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >信息查询</a></li><li><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >信息管理</a></li><li class='divider'></li><li class='dropdown-header'>系统功能</li><li><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >设置</a></li></ul></li><li><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >提名表扬</a></li></ul><form class='navbar-form navbar-right' role='search'><div class='form-group'><input type='text' class='form-control' placeholder='用户名...'><input type='text' class='form-control' placeholder='密码...'></div><button type='submit' class='btn btn-default'>提名表扬</button></form></div></div></nav><!—自适应布局--><div class='container-fluid'><div class='row'><!—左侧导航栏--><div class='col-sm-3 col-md-2 sidebar'><ul class='nav nav-sidebar'><li class='active'><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >首页</a></li></ul><ul class='nav nav-sidebar'><li><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >信息? 恳求</a></li><li><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >信息查询</a></li><li><a href='#' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' >信息管理</a></li></ul&g

    最新评论

    • 昵称:
    • 验证码:点击我更换图片
    • Word

    • Excel

    • PowerPoint

    Word2003视频教程

    Word2003视频教程

    《全集共50课》分别有基础入门和高级两部教程,让你从零开始学起,从菜鸟变成高手[详情]

    Word2007视频教程

    Word2007视频教程

    《全集共43课》从Word发展历史到文档操作应用到打印,教程风趣幽默通俗易懂[详情]

    Word2010视频教程

    Word2010视频教程

    《全集共47课》由微软官方提供的视频教程,详细讲解了Word2010的新功能[详情]

    Excel2003视频教程

    Excel2003视频教程

    《全集共65课》详细讲解了Excel表格的基础操作与图表、图形、数据、打印等[详情]

    Excel2007视频教程

    Excel2007视频教程

    《全集共36课》从Excel的初步了解到表格透视图表制作和函数公式应用[详情]

    Excel2010视频教程

    Excel2010视频教程

    《全集共22课》Excel2010最新功能介绍和使用,还在不断更新,尽情关注[详情]

    PowerPoint2003视频教程

    PowerPoint2003视频教程

    《全集共22课》PowerPoint软件的介绍和应用每篇都讲解了多个功能的使用[详情]

    PowerPoint2007视频教程

    PowerPoint2007视频教程

    《全集共29课》不会制作幻灯片不用担心,本篇视频教程详细讲解幻灯片制作和动画制作[详情]

    PowerPoint2010视频教程

    PowerPoint2010视频教程

    《全集共29课》新版本的PPT中增添了许多意想不到的功能,让你设计幻灯片时更加轻松[详情]

    Word教程网-最近更新-网站地图-RSS地图-意见反馈 - 粤ICP备14012962号-3