代码：

 <!DOCTYPE html>

 <html lang="zh">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <link href="../css/bootstrap.css" rel="stylesheet">

     <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

     <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

     <title>Bootstrap 响应式导航栏</title>

 </head>

 <body>

 <div class="container">

     <nav class="navbar navbar-inverse">

         <div class="navbar-header">

             <a href="#" class="navbar-brand"><strong>demo</strong>.com</a>

             <button class="navbar-toggle" data-toggle="collapse" data-target="#nav1">

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

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

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

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

             </button>

         </div>

         <div id="nav1" class="collapse navbar-collapse">

             <ul class="nav navbar-nav">

                 <li class="active"><a href="#">首页</a></li>

                 <li><a href="#">相册</a></li>

                 <li><a href="#">说说</a></li>

                 <li><a href="#">个人中心</a></li>

             </ul>

             <form action="" class="navbar-form navbar-right">

                 <input type="text" placeholder="搜索" class="form-control">

                 <input type="button" value="搜索" class="form-control">

             </form>

             <a href="#" class="navbar-btn btn btn-sm btn-primary navbar-right">登陆</a>

             <a href="#" class="navbar-btn btn btn-sm btn-primary navbar-right">注册</a>

         </div>

     </nav>

 </div>

 </body>

 </html>

截图：

Bootstrap之响应式导航栏的更多相关文章

  1. Bootstrap学习笔记（8）--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  2. Bootstrap历练实例：响应式导航栏

    响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...

  3. bootstrap固定响应式导航

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap. ...

  4. Bootstrap 学习笔记 项目实战 响应式导航栏

    导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  5. BootStrap实现简单响应式导航菜单

    用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明.   先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...

  6. Bootstrap实战 - 响应式布局

    一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...

  7. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  8. 第二百五十节，Bootstrap项目实战--响应式导航

    Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...

  9. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. （二 -5） 天猫精灵接入Home Assistant-自动发现Mqtt设备--电风扇

    官网:https://www.home-assistant.io/components/fan.mqtt/ 1 添加配置文件 要在安装中启用MQTT风扇,请将以下内容添加到您的configuratio ...

  2. day13----迭代器、生成器、枚举对象

    一.迭代器: 定义: (从装有多个值的容器中一次取出一个值给外界) 器:迭代器是个容器,包含多个值 迭代:循环反馈,从容器中一次取出一个值 迭代器不同于索引取值,但是也可以从容器对象中从前往后逐个返回 ...

  3. 箱线图boxplot

    箱线图boxplot--展示数据的分布 图表作用: 1.反映一组数据的分布特征,如:分布是否对称,是否存在离群点 2.对多组数据的分布特征进行比较 3.如果只有一个定量变量,很少用箱线图去看数据的分布 ...

  4. Java关键字(六)——super

    在 Java关键字(五)——this 中我们说 this 关键字是表示当前对象的引用.而 Java 中的 super 关键字则是表示 父类对象的引用. 我们分析这句话“父类对象的引用”,那说明我们使用 ...

  5. HBuilder使用夜神模拟器调试Android应用

    由于HBuilder的扫描机制无法直接连上夜神模拟器.我搞了好久终于找到办法了,分享给大家. 首先,启动HBuilder和夜神模拟器 然后打开cmd命令提示符 cd进入夜神模拟器bin目录 执行以下命 ...

  6. GC调优入门笔记

    想给项目代码做做调优但有许多疑惑,比如有哪些参数要调.怎么调.使用什么工具.调优的效果如何定量测量等.发现Oracle的这份资料不错,简洁直接,回答了我的许多问题,给了许多很实用的大方向上的指导.将其 ...

  7. 面试 10：玩转 Java 选择和插入排序，附冒泡最终源码

    昨天给大家讲解了 Java 玩转冒泡排序,大家一定觉得并没有什么难度吧,不知道大佬们玩转了吗?不知道大家有没有多加思考,实际上在我们最后的一种思路上,还可以再继续改进. 我们先看看昨天最终版本的代码. ...

  8. C# 实现实时网速

    前言 最近参加了一个项目,所以写博客的时间就少了,项目中有一个功能就是在窗体上显示实时网速,用了半天的时间写了出来,想想今天时间蛮充足,就把它分享到博客上吧. 项目展示 项目核心代码: private ...

  9. Linux Docker命令

    命令查看你当前的内核版本:uname -r yum 包更新到最新:yum update 安装需要的软件包, yum-util 提供yum-config-manager功能,另外两个是devicemap ...

  10. [故障公告]阿里云“华东1地域部分负载均衡https访问异常“引起部分站点无法访问

    今天上午 9:40 - 11:06 左右,由于阿里云“华东1地域部分负载均衡https访问异常”,造成我们的部分站点(尤其是博客后台)无法正常访问,给您带来了很大的麻烦,请您谅解. 现已恢复正常,如果 ...