导航代码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. Django【第9篇】：Django之用户认证auth模块

    用户认证--------------auth模块 一.auth模块 from django.contrib import auth 1 .authenticate()   :验证用户输入的用户名和密码 ...

  2. Apach Hadoop 与 CDH 区别

    1.Apache Hadoop 不足之处 • 版本管理混乱 • 部署过程繁琐.升级过程复杂 • 兼容性差 • 安全性低 2.Hadoop 发行版 • Apache Hadoop • Cloudera’ ...

  3. 岭回归、lasso

    参考:https://blog.csdn.net/Byron309/article/details/77716127     ----    https://blog.csdn.net/xbinwor ...

  4. CSS中的自适应单位vw、vh、vmin、vmax

    1.vw.vh.vmin.vmax各单位的意义 上面的自适应单位可以统称为视口单位. 可以先了解一下视口指的是什么? 在PC端,视口指的是在PC端,指的是浏览器的可视区域:而在移动端,它涉及3个视口: ...

  5. python 获取list某个元素下标

    index() 函数用于从列表中找出某个值第一个匹配项的索引位置. list.index(x, start, end) #start end 指示搜索的起始和结尾位置,缺省为整个数组 x-- 查找的对 ...

  6. JS FormData 文件异步提交

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  7. 一本通&&洛谷——P1120 小木棍 ［数据加强版］——题解

    题目传送 一道特别毒瘤能提醒人不要忘记剪枝的题. 首先不要忘了管理员的话.忘把长度大于50的木棍过滤掉真的坑了不少人(包括我). 显然是一道DFS题 .考虑剪枝. 找找搜索要面临的维度.状态:原始木棍 ...

  8. 蒙特卡洛（Monte Carlo）方法求面积

    如图,刷微博时,看到一个问题,第一个想到的就是用蒙特卡洛方法求解,当时正在练python,于是尝试用python编写程序. import random # 先求s1 k=0 n=100000000 f ...

  9. lambda匿名函数和内置函数

    对于简单的函数,也存在一种简便的表示方式,即:lambda表达式 定义函数(普通方式) def func(arg):     return arg + 1      执行函数 result = fun ...

  10. Java语言支持的变量类型有哪几种

    Java语言支持的变量类型有: 类变量:独立于方法之外的变量,用 static 修饰. 实例变量:独立于方法之外的变量,不过没有 static 修饰. 局部变量:类的方法中的变量. 实例: publi ...