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 相关文章推荐
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
js中document.write的那点事
Dec 12 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
php安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
pandas 时间格式转换的实现
2019/07/06 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
交通安全标语
2014/06/06 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
新员工入职感言范文!
2019/07/04 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript