BootStrap实用代码片段(持续总结)
来源:互联网 发布:windows jdk环境变量 编辑:程序博客网 时间:2024/06/14 21:37
> 如题,持续总结自己在使用BootStrap中遇到的问题,并记录解决方法。希望能帮到需要的小伙伴
1、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%;}
实现效果:
2、修改默认导航条背景色、字体样式大小颜色等
- 应用场景:bootstrap提供了两种导航条(default、inverse),但是常常需要调整背景色以及字体样式。
- 解决方案:使用CSS类选择器、后代选择器、子元素选择器以及伪类选择器
W3CSchool详细讲解,常用的是自定义导航菜单字体大小以及鼠标悬浮字体颜色或大小改变,CSS代码示例:
.navbar-nav li{font:微软雅黑;font-size:20px;font-weight:bolder;font-style:normal;color:#d58512;padding:0px;margin:0;text-align:center;margin-left:10px;}.navbar-default .navbar-nav > li > a:hover,.navbar-default .navbar-nav > li > a:focus{color:#2a68ff;}
同样,修改其他组件默认样式也是同样的方式,要熟练运用CSS各种选择器,这里我自己的一点技巧就是,在chrome中查看网页源代码,直接修改CSS文件可立即看到修改后的效果,自己感觉合适了,再替换源代码里的CSS部分即可,如下图所示:
2 0
- BootStrap实用代码片段(持续总结)
- 实用代码片段---持续记录
- 实用代码片段(一)
- bootstrap 代码片段
- iOS代码片段(持续更新)
- processing 常用代码片段(持续更新)
- PHP代码片段(持续更新)
- Android 实用代码片段(一)
- Android实用代码片段(一)
- android实用代码片段(二)
- android实用代码片段(三)
- android实用代码片段(四)
- android实用代码片段(五)
- 实用代码片段(包括jquery,php)
- Android开发实用代码片段(一)
- Android开发实用代码片段(二)
- 实用代码片段
- Android实用代码片段
- Android视频推流直播学习【二】
- 配置zookeeper
- 线程池(VC_Win32)
- CSS清除浮动_清除float浮动
- Eclipse+Git搭建小型团队开发环境(二)云端代码和本地代码冲突的处理方法
- BootStrap实用代码片段(持续总结)
- 运维监控信息收集
- POJ 1006
- AndFix 热补丁修复 操作方法
- Java 线程中的Join、wait、notify,sleep
- 程序员高薪
- codeforces_622C. Not Equal on a Segment
- Hexo添加RSS和评论插件
- 揭秘webdriver实现原理