导航代码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. lldb调试命令

    XCode4.0以后,编译器换成了LLVM 编译器 2.0 与以前相比,更加强大:1.LLVM 编译器是下一带开源的编译技术.完全支持C, Objective-C, 和 C++.2.LLVM 速度比 ...

  2. 学习R的悬疑录（不定期更新）

    在使用caret包建模时候,没有导入机器学习包,如rpart.randomForest等,并不会对结果有影响.不知道是不是caret包内置了机器学习模块. # 加载r包 library(data.ta ...

  3. 伟大的GIL

    GIL 首先需要明确的一点是GIL并不是Python的特性,它是在实现Python解析器(CPython)时所引入的一个概念.就好比C++是一套语言(语法)标准,但是可以用不同的编译器来编译成可执行代 ...

  4. Java并发——线程间通信与同步技术

    传统的线程间通信与同步技术为Object上的wait().notify().notifyAll()等方法,Java在显示锁上增加了Condition对象,该对象也可以实现线程间通信与同步.本文会介绍有 ...

  5. keras数据增强

    1.keras数据增强:https://www.cnblogs.com/hutao722/p/10075150.html 2 .keras fit 中的 verbose verbose:日志显示ver ...

  6. vector存放结构体数据的2种方法

    如果要在Vector容器中存放结构体类型的变量,经常见到两种存放方式. 方式一:放入这个结构体类型变量的副本. 方式二:放入指向这个结构体类型变量的指针. 假设结构体类型变量是这样的, typedef ...

  7. Vue中的组件及缓存 keep-alive

    <script> import { mapState } from "vuex"; export default { data() {      return {    ...

  8. Arduino-数学函数

  9. 进程队列补充、socket实现服务器并发、线程完结

    目录 1.队列补充 2.关于python并发与并行的补充 3.TCP服务端实现并发 4.GIL全局解释器锁 什么是保证线程安全呢? GIL与Lock 5.验证多线程的作用 对结论的验证: 6.死锁现象 ...

  10. POJ 3764 The xor-longest Path ( 字典树求异或最值 && 异或自反性质 && 好题好思想)

    题意 : 给出一颗无向边构成的树,每一条边都有一个边权,叫你选出一条路,使得此路所有的边的异或值最大. 分析 : 暴力是不可能暴力的,这辈子不可能暴力,那么来冷静分析一下如何去做.假设现在答案的异或值 ...