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使用技巧精萃[代码非常实用]
Nov 21 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
angular.js分页代码的实例
Jul 27 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
javascript实现前端成语点击验证优化
Jun 24 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计算年龄精准到年月日
2015/11/17 PHP
PHP数组实例详解
2016/06/26 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python with标签使用方法解析
2020/01/17 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
经典c++面试题六
2012/01/18 面试题
中间件的定义
2016/08/09 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
英语自我评价范文
2014/01/24 职场文书
元旦晚会邀请函
2014/01/27 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
就业意向书范文
2014/04/01 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
中学生运动会口号
2014/06/07 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
客户经理岗位职责
2015/01/31 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL
python数据处理之Pandas类型转换
2022/04/28 Python
python开发制作好看的时钟效果
2022/05/02 Python