BootStrap响应式导航条实例介绍

 更新时间:2016年05月06日 14:44:09   作者:fiona0425  
响应式导航条就是可以在不同的设备下查看不同的效果。这篇文章主要介绍了BootStrap响应式导航条实例介绍的相关资料,小编认为本文介绍的非常的不错,特此分享给大家,供大家参考

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。响应式导航条就是可以在不同的设备下查看不同的效果。

下面给大家分享代码:

<header role="banner">
<nav role="navigation" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Bootstrappin'</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav>
</header>

data-toggle=”collapse” 预期行为

浏览器的显示结果
点击按钮有下拉菜单
随浏览器宽度改变样式

以上内容是小编给大家介绍的BootStrap响应式导航条实例介绍,希望对大家有所帮助!

相关文章

  • Firefox outerHTML实现代码

    Firefox outerHTML实现代码

    firefox没有outerHTML用以下方法解决
    2009-06-06
  • 快速学习JavaScript的6个思维技巧

    快速学习JavaScript的6个思维技巧

    在这篇文章中,我将介绍六个思维技巧来帮助你更快地学习JavaScript,并成为一个更快乐、更富有成效的程序员。
    2015-10-10
  • es6 symbol的实现方法示例

    es6 symbol的实现方法示例

    这篇文章主要介绍了es6 symbol的实现方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javascript 公用拖拽类代码

    javascript 公用拖拽类代码

    兼容Event对象等 拖拽类代码
    2008-12-12
  • 微信小程序实现之手势锁功能实例代码

    微信小程序实现之手势锁功能实例代码

    这篇文章主要介绍了微信小程序实现之手势锁功能的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 多附件上传组件演示

    多附件上传组件演示

    多附件上传组件演示...
    2006-09-09
  • js实现的万能flv网页播放器代码

    js实现的万能flv网页播放器代码

    这篇文章主要介绍了js实现的万能flv网页播放器代码,以简单示例形式分析了JavaScript使用swfobject.js实现在线播放flv视频的相关技巧,需要的朋友可以参考下
    2016-04-04
  • Knockout自定义绑定创建方法

    Knockout自定义绑定创建方法

    这篇文章主要介绍了Knockout自定义绑定创建方法的相关资料,需要的朋友可以参考下
    2015-12-12
  • gojs实现蚂蚁线动画效果

    gojs实现蚂蚁线动画效果

    这篇文章介绍了gojs实现蚂蚁线动画效果的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • 20多个小事例带你重温ES10新特性(小结)

    20多个小事例带你重温ES10新特性(小结)

    这篇文章主要介绍了20多个小事例带你重温ES10新特性(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论