<header class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">QuickReader Report</a>
<button type="button" class="navbar-toggle" data-toggle='collapse' data-target='.navbar-collapse'>
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse text-center">
<li><a href='#'>Serial</a></li>
<li><a href='#'>File</a></li>
<li><a href='#'>User</a></li>
</ul>
</div>
</header>

Header with dropdown:

<header class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">QuickReader Report</a>
<button type="button" class="navbar-toggle" data-toggle='collapse' data-target='.navbar-collapse'>
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse text-center">
<li><a href='#'>Serial</a></li>
<li><a href='#'>File</a></li>
<li><a href='#'>User</a></li>
<li>
<a href='more.html' data-target="#" data-toggle="dropdown" class="dropdown-toggle">
More<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Something 1</a></li>
<li class="divider"></li>
<li><a herf="#">Something 2</a></li>
</ul>
</li>
</ul>
</div>
</header>

[Bootstrap] 7. Working Herader的更多相关文章

  1. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap(二)

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap(一)

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

随机推荐

  1. Java线程池的工作原理与实现

    简单介绍 创建线程有两种方式:继承Thread或实现Runnable.Thread实现了Runnable接口,提供了一个空的run()方法,所以不论是继承Thread还是实现Runnable,都要有自 ...

  2. 大四实习准备4_java内部类

    2015-4-30 [昨天又可耻地休息了一天,懒劲比较大啊.跟懒劲有直接关系,这几天对幸福的感知也黯淡了,对未来的幸福不是那么渴望了.表现在对亲情和爱情上. 我想生活的本意是积极进取.茁壮生长并时常感 ...

  3. FormsAuthentication 登录兼容 IE11 保存cookie

    现象:使用FormsAuthentication进行登录验证,在IE11客户端无法保存cookie 解决方法:在web.config中的forms中增加cookieless="UseCook ...

  4. 20款最优秀的JavaScript编辑器

    毫无疑问SublimeText,Notepad++,webstorm等,是市面上最主导的编辑器,但当然也有一些更多的JavaScript编辑器提供众多的特性和功能,方便和轻松自由的编码.本文整理了20 ...

  5. UVA 11082 Matrix Decompressing 矩阵解压(最大流,经典)

    题意: 知道矩阵的前i行之和,和前j列之和(任意i和j都可以).求这个矩阵.每个格子中的元素必须在1~20之间.矩阵大小上限20*20. 思路: 这么也想不到用网络流解决,这个模型很不错.假设这个矩阵 ...

  6. 触摸屏网站开发系列(一)-ios web App应用程序(ios meta)

    触摸屏网站的开发其实现在来讲比前几年移动端网站开发好多了,触摸屏设备IOS.Android.BBOS6等系统自带浏览器均为WEBKIT核心,这就说明PC上面尚未立行的HTML5 CSS3能够运用在这里 ...

  7. 【原】cocos2d-x开发笔记:多点触控

    在项目开发中,我们做的大地图,一个手指头按下滑动可以拖动大地图,两个手指头按下张开或者闭合,可以放大和缩小地图 在实现这个功能的时候,需要使用到cocos2d-x的多点触控功能. 多点触控事件,并不是 ...

  8. jquery自动焦点图

    效果预览:http://runjs.cn/detail/vydinibc  带左右箭头的自动焦点图:http://runjs.cn/detail/wr1d1keh html: <div clas ...

  9. 怎么找到MyEclipse->add struts capabilities

    问:MyEclipse:我的工程右键可以MyEclipse->add struts capabilities之前有,后来不知怎么就没有了,谁知道怎么弄出来是struts 答:你已经add过一次了 ...

  10. (十二)学习CSS之box-sizing 属性

    参考:http://www.w3school.com.cn/cssref/pr_box-sizing.asp CSS3 box-sizing 属性 定义和用法 box-sizing 属性允许您以特定的 ...