Bootstrap响应式导航由768px变成992px的实现代码


Posted in Javascript onJune 15, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!--响应式导航部分--> 
<header role="banner"> 
  <nav role="navigation" class="navbar navbar-static-top navbar-default"> 
    <div class="container "> 
      <div class="navbar-header"> 
        <!--设置手风琴式的navbar,然后类navbar-toggle包装在屏幕大于992px,隐藏--> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
          <!--这里的span.icon-bar 是用来在按钮中画三条线--> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="index.html" rel="external nofollow" rel="external nofollow" ><img src="img/logo.png" alt="Bootstrappin'" width="120"></a> 
        <!--这里的商标图一定要设置宽度--> 
      </div> 
      <!--这里的类collapse保证默认包裹的菜单是隐藏的,如果 替换为 in 则显示--> 
      <div class="navbar-collapse collapse" id="navbar-collapse"> 
        <ul class="nav navbar-nav"> 
          <li class="active"><a href="index.html" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-home "></span> Home</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-desktop"></span> Portfolio</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-group "></span> Team</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-envelope "></span> Contact</a></li> 
        </ul> 
      </div><!--/.nav-collapse --> 
    </div><!--/.container --> 
  </nav> 
</header>

这是我跟着做的一个实例,看上面第一个注释,button定义了类navbar-toggle。navbar-toggle其中的一个样式是媒体查询。

//bootstrap.css 
@media (min-width: 992px) { 
 .navbar-toggle { 
  display: none; 
 } 
}

然后我又查看了下navbar.less文件。发现

//navbar.less  
.navbar-toggle { 
 position: relative; 
 float: right; 
 margin-right: @navbar-padding-horizontal; 
 padding: 9px 10px; 
 .navbar-vertical-align(34px); 
 background-color: transparent; 
 border: 1px solid transparent; 
 border-radius: @border-radius-base; 
 // Bars 
 .icon-bar { 
  display: block; 
  width: 22px; 
  height: 2px; 
  border-radius: 1px; 
 } 
 .icon-bar + .icon-bar { 
  margin-top: 4px; 
 } 
 @media (min-width: @grid-float-breakpoint) { //@grid-float-breakpoint 
  display: none; 
 } 
} 
//variables.less 
@grid-float-breakpoint:   @screen-sm-min;  //想要改成992px这里就要用这个 @grid-float-breakpoint:   @screen-md-min; 
//-------- 
@screen-sm:         768px; 
@screen-sm-min:       @screen-sm; 
@screen-md:         992px; 
@screen-md-min:       @screen-md; 
@screen-desktop:       @screen-md-min; 
// Large screen / wide desktop 
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 
@screen-lg:         1200px; 
@screen-lg-min:       @screen-lg; 
@screen-lg-desktop:     @screen-lg-min;

所以,如果你想修改默认的折叠断点,就将上面的媒体查询变量 @grid-float-breakpoint:     @screen-sm-min;

修改为其他Bootstrap定义的断点,当然也可以自定义一个断点变量。然后重新编译为css文件即可。

注:最好把 variables.less 复制一份为 _variables.lss。navbar.less 复制一份 _navbar.less。然后在复制的文件上修改。最后将 bootstrap.less 复制一份 __bootstrap 将其中的导入

//__bootstrap.less 
//@import "navbar.less";  
@import "_navbar.less"; 
//@import "variables.less"; 
@import "_variables.less";

修改完,编译自定义的 __bootstrap.less 即可。

以上所述是小编给大家介绍的Bootstrap响应式导航由768px变成992px的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
Prototype中dom对象方法汇总
Sep 17 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 #Javascript
JS自动生成动态HTML验证码页面
Jun 14 #Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 #Javascript
详解AngularJS 模块化
Jun 14 #Javascript
JS判断时间段的实现代码
Jun 14 #Javascript
bootstrap选项卡扩展功能详解
Jun 14 #Javascript
zTree树形插件异步加载方法详解
Jun 14 #Javascript
You might like
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
python 获取图片分辨率的方法
2019/01/08 Python
如何基于线程池提升request模块效率
2020/04/18 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
python 动态绘制爱心的示例
2020/09/27 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
班主任寄语大全
2014/04/04 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
运动会通讯稿600字
2015/07/20 职场文书
2015中学教学工作总结
2015/07/22 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs