浏览器宽度缩小到一定值时,导航显示为

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!--折叠显示图标-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#a">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">tinyphp</a>
</div> <!--导航折叠-->
<div class="collapse navbar-collapse" id="a">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li class="dropdown">
<a href="#" class="btn dropdown-toggle" data-toggle="dropdown" >Address <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div> </nav>

详情:http://v3.bootcss.com/components/#navbar

Bootstrap响应式折叠导航的更多相关文章

  1. Bootstrap响应式的导航栏

    Bootstrap 导航栏 | 菜鸟教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  2. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  3. 关于禁用bootstrap响应式解决方法

    前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...

  4. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  5. bootstrap响应式网页设计的9条基本原则!

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  6. bootstrap响应式前端页面

    技术:HTML+CSS+JS+bootstrap   概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...

  7. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  8. 一款由css3和jquery实现的响应式设计导航

    2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览    ...

  9. Bootstrap响应式布局

    Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...

随机推荐

  1. codefoeces 671 problem D

    D. Roads in Yusland standard output Mayor of Yusland just won the lottery and decided to spent money ...

  2. NOIP2016提高组D1T2 天天爱跑步

    n<=300000个点的树,每个点有个人于第Ti秒观测,有m<=300000个人于时间0开始从Sj跑到Tj,速度1个点每秒,输出每个点上的人观察到的跑步的人的数量. 前25分:直接模拟每条 ...

  3. SQLSERVER数据库置疑、可疑、脱机、单用户、紧急模式等的修复

    数据库出现置疑.可疑.脱机.单用户.紧急模式主要是因为数据库的日志文件除了问题,2000和2008修复方式不一样,2008的修复脚本在2000中不适用,主要是不被2000识别. 假设数据库名为:eis ...

  4. BZOJ1037 DP

    2013-11-15 21:51 原题传送门http://www.lydsy.com/JudgeOnline/problem.php?id=1037 拿到这道题想到了DP,后来发现三维无法确定的表示状 ...

  5. python函数对象和闭包

    关于函数对象和闭包 闭包(closure)是函数式编程的重要的语法结构.不同的语言实现闭包的方式不同.Python以函数对象为基础,为闭包这一语法结构提供支持的 (我们在特殊方法与多范式中,已经多次看 ...

  6. Django【进阶】缓存

    Django缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者me ...

  7. Kuangbin 带你飞 KMP扩展KMP Manacher

    首先是几份模版 KMP void kmp_pre(char x[],int m,int fail[]) { int i,j; j = fail[] = -; i = ; while (i < m ...

  8. Activiti 6.0 入门篇

    从Activiti网站下载Activiti UI WAR文件(或百度云) 将下载的activiti-app.war复制到Tomcat的webapps目录. 启动Tomcat 打开浏览器并转到 http ...

  9. [bzoj5017][Snoi2017]炸弹 tarjan缩点+线段树优化建图+拓扑

    5017: [Snoi2017]炸弹 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 608  Solved: 190[Submit][Status][ ...

  10. bash特性

    (1)shell简介 shell是系统的用户界面,提供用户与内核进行交互操作的一种接口,它接收用户输入的命令并把它送入内核去执行.实际上shell是一个命令解释器 (2)shell语法 语法:命令 选 ...