Bootstrap响应式折叠导航

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

<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响应式折叠导航的更多相关文章
- Bootstrap响应式的导航栏
Bootstrap 导航栏 | 菜鸟教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- 关于禁用bootstrap响应式解决方法
前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- bootstrap响应式网页设计的9条基本原则!
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
- bootstrap响应式前端页面
技术:HTML+CSS+JS+bootstrap 概述 这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- 一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览 ...
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
随机推荐
- 报错!!!!!!!!!!!org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'springSessionRepositoryFilter' is defined
报错!!!!!!!!!!! 因用maven项目不是很熟练,经常在Maven转Web项目(为什么要转web项目?因为要在tomcat中跑起来.maven项目好像是可以直接部署到tomcat的,或集成to ...
- 【BZOJ2286】【SDOI2011】消耗战 [虚树][树形DP]
消耗战 Time Limit: 20 Sec Memory Limit: 512 MB[Submit][Status][Discuss] Description 在一场战争中,战场由n个岛屿和n-1 ...
- COGS2085 Asm.Def的一秒
时间限制:1 s 内存限制:256 MB [题目描述] “你们搞的这个导弹啊,excited!” Asm.Def通过数据链发送了算出的疑似目标位置,几分钟后,成群结队的巡航导弹从“无蛤”号头顶掠过 ...
- BZOJ1082_栅栏_C++
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1082 题解:http://www.cnblogs.com/hadilo/p/5924546.h ...
- C# MVC 页面面包屑以及相应的权限验证操作
一.特性类 /// <summary> /// 访问权限控制属性. /// </summary> [AttributeUsage(AttributeTargets.Method ...
- ubuntu16.04搭建个人简易DLP
前言 最近一朋友让我帮忙搭建一台服务器,用做公司的服务器,但是该服务器需要满足一些安全要求,于是乎就有了下面的解决过程^_^ 需求 期望普通用户和管理员都能ssh登陆服务器,但禁止scp或者其他方式下 ...
- CSDN博客用Windows Live Writer方法,终于可以离线编辑了!
以下是安装WLW 和相关设置: 1. 下载安装WLW (步骤略,可自行下载,官方下载地址:http://www.microsoft.com/zh-cn/download/details.aspx?id ...
- 架构妄想:AJAX + REST
William Vambenepe的最新文章,AJAX + REST是最新的架构妄想,让我们回想起了一个具有15年历史的架构,它曾被寄期望对Web产生革命性的影响. 在该架构里,Web服务器将返回包含 ...
- 准备开发开放API接口
准备开发APP开放接口,允许JQUERY直接调用http://blog.csdn.net/wuxiangege/article/details/52238968 SIGN的设计与实现http://bl ...
- mysql查看每张表的空间使用情况
use information_schema; /,),'MB') as data ,concat(round(index_length//,),'MB') as indexweight from T ...