BootStrap实用代码片段之一


Posted in Javascript onMarch 22, 2016

如题,持续总结自己在使用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实战教程

希望本文所述对大家学习Bootstrap有所帮助。

Javascript 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
原生JS实现拖拽效果
Dec 04 Javascript
Javascript中的几种继承方式对比分析
Mar 22 #Javascript
JS函数定义方式的区别介绍
Mar 22 #Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 #Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 #Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 #Javascript
JS中多种方式创建对象详解
Mar 22 #Javascript
基于jquery实现无限级树形菜单
Mar 22 #Javascript
You might like
php FPDF类库应用实现代码
2009/03/20 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
css sprite简单实例
2016/05/23 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
业务代表的岗位职责
2013/11/16 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
新农村建设标语
2014/06/24 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
导游词范文
2015/02/13 职场文书
学生会干部任命书
2015/09/21 职场文书
python 提取html文本的方法
2021/05/20 Python