源代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta name="viewport" content="width=device-width"/>

    <meta charset="UTF-8">

    <title></title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

    <div class="container">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                <span class="sr-only">导航条</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" style="padding: 10px 15px;" href="">

                <img alt="百度" style="width:80px;height: 26px;" src="https://www.baidu.com/img/baidu_jgylogo3.gif"/>

            </a>

        </div>

        <div class="collapse navbar-collapse">

            <ul class="nav navbar-nav" id="nav-list">

                <li class="active"><a target="_blank" href="https://www.baidu.com/">百度</a></li>

                <li><a target="_blank" href="http://www.zhaopin.com/">智联招聘</a></li>

                <li><a target="_blank" href="http://www.iqiyi.com/">爱奇艺</a></li>

                <li><a target="_blank" href="http://www.youku.com/">优酷</a></li>

                <li><a target="_blank" href="http://www.ifeng.com/">凤凰网</a></li>

            </ul>

        </div>

    </div>

</nav>

</body>

</html>

效果图

PC端

手机端

bootstrap导航菜单，手机和PC端的更多相关文章

  1. 在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换

    查看thinkphp版本号方法 打开文件“根目录\ThinkPHP\ThinkPHP.php”下的文件ThinkPHP.php,在22--23行可以看到版本信息THINK_VERSION,如下图: 说 ...

  2. Windows 之 手机访问 PC 端本地部署的站点

    测试网页在手机上的显示工具我们可以使用谷歌内核的浏览器,打开开发者工具(F12),在device那里选择设备,然后刷新来查看网页在手机上的显示效果. 但毕竟是模拟的,如果想要在真机上调试该怎么办呢. ...

  3. 我的Android进阶之旅------>Android实现用Android手机控制PC端的关机和重启的功能（三）Android客户端功能实现

    我的Android进阶之旅------>Android实现用Android手机控制PC端的关机和重启的功能(一)PC服务器端(地址:http://blog.csdn.net/ouyang_pen ...

  4. 判断当前终端是手机还是pc端并进行不同的页面跳转

    判断当前设备(终端)是手机还是pc端并进行不同的页面跳转 DEMO 1 <script type="text/javascript"> function browser ...

  5. 手机应用PC端演示工具介绍

    写给公司内部用的,所以没什么含量,请免炮轰. 为什么需要在PC端演示? 在Android及IOS系统上开发的手机应用,往往由于设备的限制,无法在演示汇报的场合向在场的众人展示界面,如果有工具可以将手机 ...

  6. Fiddler4工具配置及调试手机和PC端浏览器

    Fiddler最大的用处: 模拟请求.修改请求.手机应用调试 Fiddler最新版本 下载地址: http://www.telerik.com/download/fiddler Fiddler 想要监 ...

  7. 微信环境支付宝服务窗环境app手机浏览器pc端混合判断

    //微信环境 if(userAgent.match(/micromessenger/) == 'micromessenger'){ }//支付宝服务窗环境else if(userAgent.match ...

  8. php或js判断网站访问者来自手机或者pc端源码

    很多时候也可以通过逻辑程序来进行判断,如PHP.JS是常用的两种识别访问设备类型的常用方法. 原理都是采用识别访问客户端的HTTP_USER_AGENT,然后进行关键字匹配进行确定设备类型,对于伪造H ...

  9. 我的Android进阶之旅------&gt;Android实现用Android手机控制PC端的关机和重新启动的功能（二）Androidclient功能展示

    Androidclient的实现思路大致例如以下: 1.首先扫描局域网内全部PC,看是否有PC端的server在执行并监听30000port. watermark/2/text/aHR0cDovL2J ...

随机推荐

  1. HDOJ 4248 A Famous Stone Collector DP

    DP: dp[i][j]前i堆放j序列长度有多少行法, dp[i][j]=dp[i-1][j] (不用第i堆), dp[i][j]+=dp[i-1][j-k]*C[j][k] (用第i堆的k个石头) ...

  2. 在InstallShield中发布单一的Setup.exe文件

    原文:在InstallShield中发布单一的Setup.exe文件 InstallShield默认的Release模式下,生成了一个setup.exe文件,一个msi文件,以及一些其它的杂项文件. ...

  3. 自制Https证书并在Spring Boot和Nginx中使用(转)

    白话Https一文中, 介绍了Https存在的目的和工作原理,但多是偏向于原理性的介绍,本文介绍如何一步一步自制一个能够通过浏览器认证的Https证书,并讲解在Spring Boot环境和Nginx环 ...

  4. JavaEE(17) - JPA查询API和JPQL

    1. 获取查询结果 2. JPQL函数和JPQL表达式 #1. 使用from子句 #2. 查询部分属性 #3. 查询中使用构造器 3. JPQL的关联查询和多态查询 #1. 多态查询 #2. 隐式连接 ...

  5. hdu4419 Colourful Rectangle 12年杭州网络赛 扫描线+线段树

    题意:给定n个矩形,每个矩形有一种颜色,RGB中的一种.相交的部分可能为RG,RB,GB,RGB,问这n个矩形覆盖的面积中,7种颜色的面积分别为多少 思路:把x轴离散化做扫描线,线段树维护一个扫描区间 ...

  6. 集成 NHibernate

    ABP 基础设施层——集成 NHibernate 本文翻译自ABP的官方教程<NHibernate Integration>,地址为:http://aspnetboilerplate.co ...

  7. python fabric远程操作和部署

    博客迁往:新地址(点击直达) 新博客使用markdown维护,线下有版本号库,自己写的所以会定时更新同步.同一时候提供更好的导航和阅读体验 csdn对markdown支持不好.所以旧版不会花时间进行同 ...

  8. T4模版引擎之基础入门

    额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又在背后默默无闻的奉献着,直到现在我们项目组的人除了我之外,其它人还是对其豪无兴趣,基本上是连看一眼都懒得看,可怜的娃啊... T4(T ...

  9. 6天通吃树结构—— 第五天 Trie树

    原文:6天通吃树结构-- 第五天 Trie树 很有段时间没写此系列了,今天我们来说Trie树,Trie树的名字有很多,比如字典树,前缀树等等. 一:概念 下面我们有and,as,at,cn,com这些 ...

  10. django csrf_token生成

    django模板中生成csrf_token的不同方式 系统环境 CENTOS 6.4 python 2.7.6 django 1.7.1 当post提交表单的的时候,是需要 csrf_token的, ...