<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. storm - 使用过程中的一点思考

    引子 这几天为了优化原有的数据处理框架,比较系统的学习了storm的一些内容,整理一下心得 1. storm提供的是一种数据处理思想,它不提供具体的解决方案 storm的核心是topo的定义,而top ...

  2. POJ 3648 Wedding (2-SAT,经典)

    题意:新郎和新娘结婚,来了n-1对夫妻,这些夫妻包括新郎之间有通奸关系(包括男女,男男,女女),我们的目地是为了满足新娘,新娘对面不能坐着一对夫妻,也不能坐着有任何通奸关系的人,另外新郎一定要坐新娘对 ...

  3. 【Jenkins】Linux搭建Jenkins平台

    为了配合上一篇的ant+jenkins做持续集成,需要在linux环境下搭建一个jenkins平台.网上有很多安装的例子,我主要记录一下自己遇到的问题,真真的是特别惆怅的,每次我遇到的问题都格外多. ...

  4. FZU2150 Fire Game BFS搜索

    题意:就是选两个点出发,只能走草坪,看能不能走完所有的草坪 分析:由于数据范围很小,所有枚举这两个点,事先将所有的草坪点存起来,然后任选两个点走,(两个点可以是同一个点) 然后BFS就行了 注:无解的 ...

  5. java基础之数据类型转换

    在写java程序时,经常会遇到需要数据类型转换,下面我们来介绍一些一些基本数据类型之间的转换. 1.int,folat,double,boolean,long 转换成字符串,其实很简单只需使用一个函数 ...

  6. position属性

    所有主流浏览器支持position属性: 任何版本的ie浏览器都不支持属性值“inherit”. position属性规定元素的定位类型,任何元素都可以定位,不过绝对定位或固定元素会生成一个块级框,不 ...

  7. vs2013下git的使用

    一.将VS2013项目托管到Git 现在的开源项目越来越多,我们会注意到这些开源项目大多共享在GitHub上面,包括微软开源的项目也在Github上,当然,如果你用过Git后,会发现Git确实不错,其 ...

  8. 6.1 CUDA: pinned memory固定存储

    CPU和GPU内存交互 在CUDA编程中,内存拷贝是非常费时的一个动作. 从上图我们可以看出:1. CPU和GPU之间的总线bus是PCIe,是双向传输的. 2. CPU和GPU之间的数据拷贝使用DM ...

  9. iptables端口重定向

    需求:     tomcat容器使用普通用户启动不能开启1024以内端口,也就80端口不能使用.业务上通常使用80端口访问. 解决方法:     iptables既是防火墙也是带路由器功能.所以使用它 ...

  10. leetcode@ [318] Maximum Product of Word Lengths (Bit Manipulations)

    https://leetcode.com/problems/maximum-product-of-word-lengths/ Given a string array words, find the ...