代码：

 <!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. 已使用.netframework,version=v4.6.1 而不是目标框架netcoreapp,version=v2.1 还原包，此包可能与项目不完全兼容

    已使用.netframework,version=v4.6.1 而不是目标框架netcoreapp,version=v2.1 还原包,此包可能与项目不完全兼容 NU1202: 包 System.Run ...

  2. oracle sys_guid

    select sys_guid() from dual;

  3. <网络编程>IO复用

    IO复用是一种机制,一个进程可以监听多个描述符,一旦某个描述符就绪(读就绪和写就绪),能够同志程序进行相应的读写操作. 目前支持I/O复用的系统调用有select,poll,pselect,epoll ...

  4. 1-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(视频总揽和功能演示)

    主要实现的功能 其它视频和资料稍候再补充上 我先写后面的文章 2-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案数据篇(安装数据库,数据库简单说明)

  5. object detection[SSD]

    0. 背景 经过了rcnn,spp,fast rcnn, faster rcnn,yolo,这里又到了ssd模型. faster rcnn的贡献是将候选框区域提取的部分也集成到CNN中去,并且与对象的 ...

  6. AbstractQueuedSynchronizer

    1 简介 AbstractQueuedSynchronizer简称AQS是一个抽象同步框架,可以用来实现一个依赖状态的同步器.JDK1.5中提供的java.util.concurrent包中的大多数的 ...

  7. redis底层设计（五）——内部运作机制

    5.1 数据库 5.1.1 数据库的结构: Redis 中的每个数据库,都由一个redis.h/redisDb 结构表示: typedef struct redisDb { // 保存着数据库以整数表 ...

  8. 搭建SpringBoot+dubbo+zookeeper+maven框架（四）

    今天我们完成框架的thymeleaf模板显示页面功能,页面的用户登陆,密码的AES加密解密,输错3次进行验证码验证功能,东西可能比较多,这个是我这两天在网上结合各种资源整合出来的,基本功能都已经实现, ...

  9. JS 格式化时间（获取两个日期之间的每一天、每一月、每半小时、每一秒）

    时间戳转换为时间 // 时间戳转换为时间 function timestampToTime(timestamp, isMs = true) { const date = new Date(timest ...

  10. Maven项目远程部署到Tomcat

    目录 Maven项目远程部署到Tomcat 一.Tomcat插件支持的目标 二.系统要求及插件引入 2.1 系统要求 2.2 引入插件 三.远程部署war到tomcat 3.1 添加tomcat管理角 ...