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

时间: 2024-10-12 16:28:52

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

bootstrap响应式导航栏

参见:http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要

响应式页面导航设计解析

有人说,2013将是响应式网页设计之年.自用户体验设计师Ethan Marcotte在2010年提出Responsive Web Design(RWD)的名词,即响应式网页设计,这个概念从Responsive Architecture延伸到web设计领域,让所有的交互设计.视觉.前端开发都开始投入到这个趋势,或者说新的设计解决方案中. 当自己和身边的朋友越来越多的用上了iPhone.iPad.android手机或平板,当越来越多的人都在谈论这个老意识新概念的话题,当我们一直秉承的用户体验第一与网

Bootstrap响应式布局

Bootstrap响应式布局可以使用栅格化系统,在桌面>970px上变为水平排列,方法: 1.包含在.container或.container-fluid中 2.使用.col-md-*栅格类,创建栅格系统 典型布局: <div class="container"> <div class="row"> <div class="col-md-4">d</div> <div class=&qu

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

2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <header> <nav id='cssmenu'> <div class="logo"> <a href="index.html">Responsive </a> &

响应式页面导航的设计解析

有人说,2013将是响应式网页设计之年.自用户体验设计师Ethan Marcotte在2010年提出Responsive Web Design(RWD)的名词,即响应式网页设计,这个概念从Responsive Architecture延伸到web设计领域,让所有的交互设计.视觉.前端开发都开始投入到这个趋势,或者说新的设计解决方案中. 当自己和身边的朋友越来越多的用上了iPhone.iPad.android手机或平板,当越来越多的人都在谈论这个老意识新概念的话题,当我们一直秉承的用户体验第一与网

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

今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="header"> <div class="logo"> <a href="#">Responsive Nav</a> </div> <nav>

java后台框架、兼容PC、平板、手机 HTML5 bootstrap响应式

A 代码生成器(开发利器);  B 阿里数据库连接池druid; C 安全权限框架shiro ; D ehcache 自定义二级缓存  (后续会加入Activiti5 工作流 ) 系统为主流的 springmvc+mybaits 3.2 版本 ,有maven版本和非maven版本,赠送同UI hibernate版本(支持sqlsever mysql oracle)  jdk 1.6 1.7 1.8  tomcat 6 7 8 (兼容 手机 PC 平板) 1. 有 oracle .msyql.sp

代码生成器_java后台框架、兼容PC、平板、手机 HTML5 bootstrap响应式_springmvc(maven)

A 代码生成器(开发利器);  B 阿里数据库连接池druid; C 安全权限框架shiro ; D ehcache 自定义二级缓存  (后续会加入Activiti5 工作流 ) 系统为主流的 springmvc+mybaits 3.2 版本 ,有maven版本和非maven版本,赠送同UI hibernate版本(支持sqlsever mysql oracle)  jdk 1.6 1.7 1.8  tomcat 6 7 8 (兼容 手机 PC 平板) 1. 有 oracle .msyql.sp

Bootstrap页面布局7 - Bootstrap响应式布局的实用类

在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visible-tablet: 在平板电脑上显示这个元素,在其他设备上隐藏该元素 .visible-desktop: 在桌面电脑上显示这个元素,在其他设备上隐藏该元素 .hidden-phone: 在智能手机上隐藏,在其他设备上显示该元素 .hidden-tablet: 在平板电脑上隐藏,在其他设备上显示该元