代码：

 <!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. OmniPlan 3 Pro密钥

    密钥用户名都是youliyuan.OmniPlan 3:HOMJ-QOJH-OIBN-TNIH-HWUN-TEEH-WUNNKWO-HVKB-JAZE-UIHH-XAVY-BEEX-AVYBCRW-M ...

  2. if选择语句与switch选择语句的比较、区别及应用场景

    if选择语句和switch选择语句的比较: 1.switch语句只支持常量值相等的分支判断,而if语句支持更为灵活,任意布尔表达式均可: 2.switch语句通常比一系列嵌套if语句效率更高:逻辑更加 ...

  3. Apollo 3.0 硬件与系统安装指南

    https://github.com/ApolloAuto/apollo/blob/master/docs/quickstart/apollo_3_0_hardware_system_installa ...

  4. openjdk8源码编译

    1. 安装源码管理工具 yum install mercurial 2. 下载源码 hg clone http://hg.openjdk.java.net/jdk8u/jdk8u jdk8u #执行源 ...

  5. Python脱产8期 Day08 2019/4/22

    一.三种字符串 1.普通字符串:u'以字符作为输出单位‘  #print(u‘abc’)#用于显示 2.二进制字符串:b'以字节作为输出单位’#用于传输 3.原义字符串:r‘以字符作为输出单位,原样输 ...

  6. 工具 Windows安装Anaconda

    下载 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 安装 1.勾选添加Anaconda到PATH环境变量 2.配置清华镜像 conda ...

  7. [Spark][kafka]kafka 生产者，消费者 互动例子

    [Spark][kafka]kafka 生产者,消费者 互动例子 # pwd/usr/local/kafka_2.11-0.10.0.1/bin 创建topic:# ./kafka-topics.sh ...

  8. WPF效果（GIS二维篇）

    距离上次发东西已经过去了貌似不知多少天了,突然发现自己懒得总结了.这毛病感觉不好,还得写点东西来充实一下自己,不然这样整天浑浑噩噩的过日子,也太平淡了,不管怎么说,起码得给自己的经历留下点东西吧.闲话 ...

  9. 深入理解［Master-Worker模式］原理与技术

    Master-Worker模式是常用的并行模式之一.它的核心思想是,系统由两类进程协作工作:Master进程和Worker进程.Master进程负责接收和分配任务,Worker进程负责处理子任务.当各 ...

  10. .NET-记一次架构优化实战与方案-底层服务优化

    目录 .NET-记一次架构优化实战与方案-梳理篇 .NET-记一次架构优化实战与方案-前端优化 .NET-记一次架构优化实战与方案-底层服务优化 前言 经过上一篇<.NET-记一次架构优化实战与 ...