BootStrap实用代码片段之一
如题,持续总结自己在使用BootStrap中遇到的问题,并记录解决方法,希望能帮到需要的小伙伴。
应用场景:经典上下布局中,顶部导航条固定,下部填充不显示滚动条
解决方案:导航条固定在顶部,同时为body设置内边距(padding-top),内边距为导航条高度(默认50px,可自己调整高度),html代码如下:
<!--html页面布局--> <div class="container-fluid page-wrapper"> <!--导航栏--> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!--logo图标--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myMenu"> <span class="sr-only">切换导航条</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href=""> <img src="images/logo_2.png" alt=""> </a> </div> <!--导航栏菜单--> <div class="collapse navbar-collapse" id="myMenu"> <ul class="nav navbar-nav"> <li> <a href="index.html" style="">主页</a> </li> <li> <a href="#" data-toggle="modal">河道站点</a> </li> <li> <a href="#" data-toggle="modal">水库站点</a> </li> <li> <a href="#">气象站点</a> </li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">降雨量<span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a data-toggle="modal">1小时降雨</a> </li> <li> <a href="#">3小时降雨</a> </li> <li> <a href="#">24小时降雨</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" id="datetimepicker" class="form-control" placeholder="选择日期"> </div> <button type="button" class="btn btn-default">确定</button> </form> </div> </div> </div> <!--地图窗口--> <div class="container-fluid" id="map"></div> </div> </body> </html>
CSS代码:
*{ margin:0; padding:0; border:0; } html, body{ height:100%; width:100%; overflow:hidden; } body{ padding-top:50px; } .page-wrapper{ margin:0; padding:0; height:100%; overflow:hidden; } #map{ width:100%; height:100%; }
实现效果:
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程
希望本文所述对大家学习Bootstrap有所帮助。
相关文章
javascript设计模式 – 命令模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 命令模式,结合实例形式分析了javascript命令模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04javascript学数组中的foreach方法和some方法
这篇文章主要介绍了 javascript学数组中的foreach方法和some方法,文章相关内容和代码详细,具有一定的参考价值,需要的小伙伴可以参考一下,希望对你的学习有所帮助2022-03-03用javascript获取任意颜色的更亮或更暗颜色值示例代码
最近在工作中遇到的一个需求,发现网上没有相对应的解决方法,索性自己写一个,所以这篇文章主要给大家介绍了关于利用javascript获取任意颜色更亮或更暗颜色值的相关资料,文中给出了详细的示例代码,需要的朋友可以参考借鉴,下面来一起看看吧。2017-07-07JavaScript判断textarea值是否为空并给出相应提示
假如用户没有输入数据则给出相应提示,那么该如何来判断呢?下面以判断textarea值是否为空为例2014-09-09
最新评论