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 相关文章推荐
一个基于jquery的文本框记数器
Sep 19 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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中多维数组的foreach遍历示例
2014/06/13 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python3实现跳一跳点击跳跃
2018/01/08 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
时尚休闲吧创业计划书
2014/01/25 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
党代会心得体会
2014/09/04 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
音乐教师求职信范文
2015/03/20 职场文书
建国大业观后感600字
2015/06/01 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
python实现层次聚类的方法
2021/11/01 Python
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android