<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. Welcome to Linux From Scratch!

    /**************************************************************************** * Welcome to Linux Fro ...

  2. data guard折腾记一

    终于有空闲的机器腾出来了,生产环境上的一套Oracle环境终于可以鸟枪换炮了,生产环境有Data Guard,为了减少停机时间,而且避免重新构建Data Guard的麻烦(其实也不麻烦,就是浪费时间) ...

  3. Spring--通过注解来配置bean

    Spring通过注解配置bean 基于注解配置bean 基于注解来配置bean的属性 在classpath中扫描组件 组件扫描(component scanning):Spring能够从classpa ...

  4. Android样式——Styles

    说明 样式(style)是属性的集合,用来指定View或者Window的外观和格式. 这些属性可以是height(高度).padding(内边距).font size(字体颜色)等. 样式定义在另一个 ...

  5. java.lang.ExceptionInInitializerError的原因(转)

    这个错误是说变量初始化出现问题,通常出现在静态变量尤其是单例模式.这种问题往往是初始化顺序不对造成的,下面举个简单的例子. import java.util.HashMap; import java. ...

  6. 看雪 安卓 dex文件

    http://bbs.pediy.com/showthread.php?t=177114

  7. openCV 直方图统计

    直方图显示 #include <opencv2/opencv.hpp> using namespace std; using namespace cv; int main(int argc ...

  8. Ubuntu firefox falsh

    Ubuntu下为Firefox安装Adobe Flash Player   使用环境:     OS:Ubuntu 12.04 LTS     Browser: Firefox 12.0     Ad ...

  9. microsoft的罗马帝国——浪潮之巅

    其实开始读微软的这篇已经比较久了,从来学校的前一天晚上等车的时候就开始读了,直到今天才看完.嗯,微软的确是个帝国. 那就从头开始讲把,关于帝国的传奇都是比较长的故事呢.至于我的叙述水平和我的知识水平都 ...

  10. c++11信号量实现

    c++11中有 mutex (互斥量),有 condition_variable (条件变量),并没有 semaphore (信号量).信号量,操作系统中一般都有提,后来 google 说可以使用 m ...