导航代码HTML：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

    <title>项目实战</title>

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

</head>

<body>

    <!-- navbar-fixed-top 置顶在最上面 -->

    <nav class="navbar navbar-default navbar-fixed-top">

        <div class="container">

            <div class="navbar-header">

                <!-- brand 商标品牌 -->

                <a href="#" class="navbar-brand" style="padding: 0">

                    <img src="img/logo.png" alt="企业俱乐部">

                </a>

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

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

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

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

                </button>

            </div>

            <!-- 缩小到一定程度 导航栏右侧内容消失 -->

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

                <ul class="nav navbar-nav navbar-right" style="margin-top: 0">

                    <li class="active">

                        <a href="#"><span class="glyphicon glyphicon-home">首页</span></a>

                    </li>

                    <li>

                        <a href="#"><span class="glyphicon glyphicon-list">资讯</span></a>

                    </li>

                    <li>

                        <a href="#"><span class="glyphicon glyphicon-fire">案例</span></a>

                    </li>

                    <li>

                        <a href="#"><span class="glyphicon glyphicon-question-sign">关于</span></a>

                    </li>

                </ul>

            </div>

        </div>

    </nav>

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script type="text/JavaScript">

</script>

</body>

</html>

Bootstrap 学习笔记 项目实战 响应式导航栏的更多相关文章

  1. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

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

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

  3. Bootstrap 学习笔记 项目实战 首页内容介绍 上

    效果图: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...

  4. Bootstrap 学习笔记 项目实战 首页内容介绍 下

    最终效果: HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...

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

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

  6. 第二百五十一节，Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  7. Bootstrap之响应式导航栏

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

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

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

  9. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

随机推荐

  1. 基于Nginx+nginx-rtmp-module+ffmpeg搭建rtmp、hls流媒体服务器

    上篇文章是基于Red5与ffmpeg实现rtmp处理NVR或摄像头的监控视频处理方案,有兴趣的朋友可以查看. Nginx及nginx-rtmp-module安装 新建目录 mkdir /usr/loc ...

  2. django基础篇05-Form验证组件

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 基本简单的操作: from django im ...

  3. 牛客练习赛49 B 筱玛爱阅读 （状压DP，子集生成）

    链接:https://ac.nowcoder.com/acm/contest/946/B 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262875K,其他语言5257 ...

  4. 工作中常用到的linux命令总结

    linux系统ubantu debian系统下载文件:wget https://github.com/buger/goreplay/releases/download/v1.0.0/gor_1.0.0 ...

  5. <el-menu>菜单标签（里面可以包括：<el-submenu>和<el-menu-item>）

    <el-menu> 1.router属性,若使用router属性menu-item的index将对应router的path属性 2.mode,下拉菜单的模式分为horizontal和ver ...

  6. OCP内容

    安装 --网络 --存储 --用户 --对象 --ASM (包含前面的内容的复习)--内存管理 -- 备份 --闪回 -- 事务 --sql 编程

  7. git clone项目失败,Host key verification failed.

    在码云上创建了一个项目,配置好公钥后,克隆到我本地出现以下失败 百度了好久也没有找到解决办法,困扰了好久,后来还是百度到了, 原来是在提示 ey fingerprint is SHA256:FQGC9 ...

  8. Quantitative Strategies for Achieving Alpha（一）

    1. 怎么构建测试 所有的测试五等分,表明我们的回测的universe被分为五个组,根据我们要测试的公司因子的值. Quintiles provide a clear answer to that q ...

  9. 寻找的常用webstorm快捷键

    1. 必备快捷键 Ctrl+/:注释当前行 Ctrl+Shift+/:当前位置插入注释 Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的 Ctrl+Shift+A:选择当前标签前后,修 ...

  10. JavaScript三元运算符以及运算符顺序

    三目运算符(三元运算符) 三目运算符:运算符需要三个操作 语法:表达式1?表达式2:表达式3 表达式1是一个条件,值为Boolean类型 若表达式1的值为true,则执行表达式2的操作,并且以表达式2 ...