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的无缝循环新闻列表插件
Mar 07 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
jQuery简单获取DIV和A标签元素位置的方法
Feb 07 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
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/09/06 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
js版本A*寻路算法
2006/12/22 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
Angular.js组件之input mask对input输入进行格式化详解
2017/07/10 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python读取键盘输入的2种方法
2015/06/16 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Python标准库itertools的使用方法
2020/01/17 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
python如何写try语句
2020/07/14 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
基层党支部整改方案
2014/10/25 职场文书
成本会计实训报告
2014/11/05 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电