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 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
JS 网站性能优化笔记
2011/05/24 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python实现多层感知器
2019/01/18 Python
python3实现逐字输出的方法
2019/01/23 Python
python的列表List求均值和中位数实例
2020/03/03 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
村干部培训班主持词
2014/03/28 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
居住证明范文
2015/06/17 职场文书
学校远程教育工作总结
2015/08/11 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
ICOM R71E和R72E图文对比解说
2022/04/07 无线电