代码：

 <!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. java xml文件中相同Id遍历

    import java.io.File;import java.util.List;import org.dom4j.Document;import org.dom4j.DocumentExcepti ...

  2. Python分析微信好友性别比例和省份城市分布比例

    如需转发请注明:小婷儿的博客:https://www.cnblogs.com/xxtalhr/p/10642241.html 一.安装模块 pip install itchat pip install ...

  3. MVC5 + EF6 完整教程 (转)

    点击查看: MVC5 + EF6

  4. WebBench压力测试工具（详细源码注释+分析）

    本文适合人群:对WebBench实现感兴趣的人 WebBench原理: Linux下使用的服务器压力测试工具,利用fork建立多个子进程,每个子进程在测试时间内不断发送请求报文,建立多个连接,然后由父 ...

  5. VBS弹出来的对话框如何置顶！--果然技巧

    msgbox 第二参数+4096 mshta vbscript:msgbox("提示内容6",6,"提示窗口6")(window.close)

  6. 【vue】vue-router路径无法正确跳转

    具体描述:vue项目,npm run build时点击路由切换,第一次点击没问题,再点不会切换报错如下图 原因分析:vue-router配置路由,当代码分割和懒加载时,由于webpack配置不当,导致 ...

  7. 记一次项目上线后Log4j2不输出日志的坑

        公司项目采用了Log4j2来输出日志,在开发环境和测试环境下均可以输出日志,但在生成环境就没有日志输出.开始毫无头绪,后来通过不断的排查,终于解决了这个问题.在此记录下该问题的解决过程,便于后 ...

  8. 2018年计划小目标（9月）PMP

    从6.23结束敏捷的系统贯穿学习考试,6.24开始做传统项目管理,系统学习计划,打包报考,(╥╯^╰╥):ACP+实战+PMP+软考,历时两个月 每天上下班路上3个小时,听录音,(报的远程班,倍速听了 ...

  9. Django signals 信号作用及用法说明

    参考:https://docs.djangoproject.com/en/1.11/ref/signals/ 1.Model signals django.db.models.signales 作用于 ...

  10. CodeForces 550E Brackets in Implications 推理

    给出一个四个规则 0->0=1  0->1=1 1->0=0  1->1=0 我自己当时一味的去找规律,没有把式子好好推一推. 当然每个人都能想到a[n]=0是必须的 当a[n ...