源代码

<!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. Could not roll back JDBC transaction途径

    [异常]接口数量:DM02;错误代码:ERR_EAI_02_014; 错误叙述性说明:当将中间库异常Could not roll back JDBC transaction; nested excep ...

  2. 64位sql server 如何使用链接服务器连接Access

    原文:64位sql server 如何使用链接服务器连接Access 测试环境 操作系统版本:Windows Server 2008 r2 64位 数据库版本:Sql Server 2005 64位 ...

  3. Android读取JSON格式数据

    Android读取JSON格式数据 1. 何为JSON? JSON,全称为JavaScript Object Notation,意为JavaScript对象表示法. JSON 是轻量级的文本数据交换格 ...

  4. 解决opengl计算顶点的法线问题

    因为需要的论文,最近开始学习OpenGL.由于刚入门的初学者有这么总会遇到很多问题,. 这些天,好不容易才OpenGL个问题弄明确了. 几点迷惑: 在网上百度.发现非常多求平面法向量的介绍以及程序.后 ...

  5. PHP使用MySQL数据库

    原文:PHP使用MySQL数据库 PHP使用MySQL数据库,从建立连接到结果的显示. 完整代码如下: <?php //连接MySQL $db = mysql_connect("loc ...

  6. Android - 错: java.lang.IllegalStateException: Already attached

    错: java.lang.IllegalStateException: Already attached 本文地址: http://blog.csdn.net/caroline_wendy 可能原因: ...

  7. js的逻辑 OR 运算符- ||

    逻辑or运算大家都很熟悉,都会用.但是在javascript中用的更多,用的更妙.有时候用它来解决兼容问题特别方面.简洁. 比如获取鼠标对象.在 Internet Explorer 里,  event ...

  8. 文档流 css中间float clear和布局

    文档流 先说说什么是公文流转  什么流 它是一系列连续的东西 <div style="background-color:pink;width:40px;height:80px;&quo ...

  9. 多线程学习之五超时模式Timer

    timed[超时模式]案例:一个线程提供下载数据,另一个线程执行下载,如果有5秒钟以上,提供下载的线程没有提供数据,下载线程因超时异常,停止下载线程运行. 超时异常类 /** * */ package ...

  10. 判断文件是否存在，不存在创建文件&&判断文件夹是否存在，不存在创建文件夹

    1.判断文件是否存在,不存在创建文件 File file=new File("C:\\Users\\QPING\\Desktop\\JavaScript\\2.htm"); if( ...