导航代码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. php 操作分表代码

    //哈希分表 function get_hash_table($table, $userid) { $str = crc32($userid); if ($str < 0) { $hash = ...

  2. Linux上进行常用软件的配置

    当拿到一个新的linux服务器的时候一般要经过以下5个配置    修改HOSTANME        vi /etc/sysconfig/network    修改HOSTNAME和IP的映射     ...

  3. 007-流程控制 if 语句

    流程控制 if 语句 if [ 条件判断式 ] ; then 程序 fi if [ 条件判断式 ] then 程序 fi 脚本示例: [root@zabbix lianxi]# .sh #!/bin/ ...

  4. vue简单插件

    已经很久没有学习新的相关知识,对于今后的学习方向可能会集中在vue的源码,render,jsx语法,服务端渲染来学习,巩固好vue的基础和高级的知识,现阶段vue的api和基本用法已经全部掌握,但是还 ...

  5. Educational Codeforces Round 55 (Rated for Div. 2) C. Multi-Subject Competition （实现，贪心，排序）

    C. Multi-Subject Competition time limit per test2 seconds memory limit per test256 megabytes inputst ...

  6. Python核心技术与实战——四|Python黑箱：输入与输出

    抽象的看,Python程序可以被看成一个黑箱:通过输入流将数据送达,经过处理后在输入,也就是说具备了一个图灵机运作的必要条件. 输入输出基础 最简单的输入是来自键盘的操作 name = input(' ...

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

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

  8. linux运维、架构之路-linux基础知识

    1.PATH环境变量 LANG ——————>变量名字 $LANG ——————>查看变量内容 LANG= ——————>修改变量 系统环境变量填加内容前面使用export expo ...

  9. jquery获取元素

       let $lis = $('#sidebar-menu li[to]')//获取sidebar-menu下包含to属性的li

  10. UTC和GMT

    UTC GMT UTC = Coordinated Universal Time. 中文名称为协调世界时. GMT = Greenwich Mean Time. 中文名称为格林尼治(平)时 UTC = ...