bootstrap导航菜单,手机和PC端
源代码
<!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端的更多相关文章
- 在thinkPHP3.2.3框架下实现手机和PC端浏览器的切换
查看thinkphp版本号方法 打开文件“根目录\ThinkPHP\ThinkPHP.php”下的文件ThinkPHP.php,在22--23行可以看到版本信息THINK_VERSION,如下图: 说 ...
- Windows 之 手机访问 PC 端本地部署的站点
测试网页在手机上的显示工具我们可以使用谷歌内核的浏览器,打开开发者工具(F12),在device那里选择设备,然后刷新来查看网页在手机上的显示效果. 但毕竟是模拟的,如果想要在真机上调试该怎么办呢. ...
- 我的Android进阶之旅------>Android实现用Android手机控制PC端的关机和重启的功能(三)Android客户端功能实现
我的Android进阶之旅------>Android实现用Android手机控制PC端的关机和重启的功能(一)PC服务器端(地址:http://blog.csdn.net/ouyang_pen ...
- 判断当前终端是手机还是pc端并进行不同的页面跳转
判断当前设备(终端)是手机还是pc端并进行不同的页面跳转 DEMO 1 <script type="text/javascript"> function browser ...
- 手机应用PC端演示工具介绍
写给公司内部用的,所以没什么含量,请免炮轰. 为什么需要在PC端演示? 在Android及IOS系统上开发的手机应用,往往由于设备的限制,无法在演示汇报的场合向在场的众人展示界面,如果有工具可以将手机 ...
- Fiddler4工具配置及调试手机和PC端浏览器
Fiddler最大的用处: 模拟请求.修改请求.手机应用调试 Fiddler最新版本 下载地址: http://www.telerik.com/download/fiddler Fiddler 想要监 ...
- 微信环境支付宝服务窗环境app手机浏览器pc端混合判断
//微信环境 if(userAgent.match(/micromessenger/) == 'micromessenger'){ }//支付宝服务窗环境else if(userAgent.match ...
- php或js判断网站访问者来自手机或者pc端源码
很多时候也可以通过逻辑程序来进行判断,如PHP.JS是常用的两种识别访问设备类型的常用方法. 原理都是采用识别访问客户端的HTTP_USER_AGENT,然后进行关键字匹配进行确定设备类型,对于伪造H ...
- 我的Android进阶之旅------>Android实现用Android手机控制PC端的关机和重新启动的功能(二)Androidclient功能展示
Androidclient的实现思路大致例如以下: 1.首先扫描局域网内全部PC,看是否有PC端的server在执行并监听30000port. watermark/2/text/aHR0cDovL2J ...
随机推荐
- POJ 1252 Euro Efficiency
背包 要么 BFS 意大利是说给你几个基本的货币,组成 1~100 所有货币,使用基本上的货币量以最小的. 出口 用法概率.和最大使用量. 能够BFS 有可能 . 只是记得数组开大点. 可能会出现 1 ...
- 无插件,直接加参数,chrome它可以模拟手机浏览器
在目标出现,加上一些参数即可:--user-agent="mozilla/5.0 (linux; u; android 2.3.3; en-us; sdk build/ gri34) app ...
- Ohloh研究报告
1.底 由于近期接合ospaf同样是一个开源项目的成熟度分析工具,由于该项目现在Ohloh我们有共同的东西,这么ohloh我们进行了调查. 简单的说,初始ohloh是一个代码搜 ...
- hdu 4445 Crazy Tank (暴力枚举)
Crazy Tank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- Gitserver几家互联网代理安装方法未能解决。
1.gem安装下面的错误 root@ubuntu:/home/git/gitlab# sudo gem install bundler --no-ri --no-rdoc ERROR: Could ...
- 创建自定义的Middleware中间件
创建自定义的Middleware中间件 阅读目录 何为Middleware中间件 使用Inline方式注册Middleware 使用Inline+ AppFunc方式注册Middleware 定义原生 ...
- 通过HttpClient来调用Web Api接口,实体参数的传递
下面定义一个复杂类型对象 public class User_Info { public int Id { get; set; } public string Name { get; set; } p ...
- Unity3D音频播放器 动态装载组件
大多数在线Unity有关如何只教程Unity在播放音乐.之后如何通过拖动它们无法继续添加音频文件 但有时在游戏中的对象要玩几个声音.这时候我们就需要使用代码控制,拖动推教程AudioClip颂值的方法 ...
- ZOJ 3802 Easy 2048 Again 像缩进DP
链接:problemId=5334">http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5334 题意:一个长度为5 ...
- iOS、真机调试
Xcode中IOS.真机测试 一.购买开发者账号(需要有信用卡.每年支付$99.0) 二.直接淘宝购买一个.用于测试,但是不能上传App 1.获取手机的UUID(Identifier xxxxxx9e ...