基本导航条

<!-- navbar-inverse相反颜色风格 -->

        <!-- navbar-static-top去除圆角 -->

        <!-- navbar-fixed-top滚动时固定在顶部 (根据导航条的高度 给body的margin-top可以解决导航条遮盖问题)

        navbar-fixed-bottom滚动时固定在底部

        -->

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

            <!-- 把容器写在导航里(常用做法) -->

            <div class="container">

            <!-- navbar-brand用来存放logo (需要一个容器navbar-header包裹住) -->

             <div class="navbar-header">

                <a href="" class="navbar-brand">此处存放logo</a>

            </div>

            <!-- nav navbar-nav 菜单 -->

            <!-- 导航左浮动navbar-left

                右浮动navbar-right

             -->

            <!-- navbar-btn使导航中的按钮垂直居中 -->

            <!-- navbar-link 改变链接颜色 -->

            <!-- navbar-text使文字垂直居中 -->

            <!-- navbar-form用于form表单 -->

            <ul class="nav navbar-nav">

                <li class="active"><a href="">one</a></li>

                <li><a href="">two</a></li>

                <li><a href="">three</a></li>

            </ul>

            </div>

        </nav>

响应式导航条

<nav class="navbar navbar-default">

            <div class="container">

            <div class="navbar-header">

                <!-- navbar-toggle导航条点击切换 -->

                <!-- data-target指定要切换的菜单 -->

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

                <!-- icon-bar 横条 -->

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

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

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

                </button>

                <a href="" class="navbar-brand">此处存放logo</a>

            </div>

            <!-- collapse navbar-collapse 折叠 -->

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

            <ul class="nav navbar-nav">

                <li class="active"><a href="">one</a></li>

                <li><a href="">two</a></li>

                <li><a href="">three</a></li>

            </ul>

            </div>

            </div>

        </nav>

滚动监听

<!-- data-offset='200'距离顶端200px时发生变化 -->

<!-- data-target 指定监听的元素 -->

<!-- data-spy 指定监听事件 -->

<body data-spy="scroll" data-target="#myNavbar" data-offset="200">

    <!-- 滚动监听 在监听的元素必须有相对定位 -->

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

            <div class="container">

            <div class="navbar-header">

                <a href="" class="navbar-brand">此处存放logo</a>

            </div>

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

            <ul class="nav navbar-nav">

                <li class="active"><a href="#aa">one</a></li>

                <li><a href="#bb">two</a></li>

                <li><a href="#cc">three</a></li>

            </ul>

            </div>

            </div>

        </nav>

        <div id="aa" class="pos">aaaaaaaa</div>

        <div id="bb" class="pos">bbbbbbbb</div>

        <div id="cc" class="pos">cccccccc</div>

</body>

Bootstrap之导航条的更多相关文章

  1. bootstrap框架 导航条组件使用

    本文记载boot 导航条组件使用方法 导航条组件 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展 ...

  2. Bootstrap 固定导航条

    默认情况下,导航条的定位属性为 static,它的位置由它的HTML代码中定义的顺序出现,并随着页面向下滚动而消失.也可以改变它的定位方式,让它固定显示在浏览器窗口的顶部或底部. 1.固定在顶部 如果 ...

  3. Bootstrap学习-导航条-分页导航

    1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...

  4. bootstrap－导航条

    默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 两端对齐的导航条导航链 ...

  5. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  6. Bootstrap如何实现导航条？导航条实例详解

    本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...

  7. 1.bootstrap练习笔记-导航条

    bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...

  8. Bootstrap系列 -- 43. 固定导航条

    很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式:  .navbar-fixed-top:导航条固定 ...

  9. Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

    Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮na ...

随机推荐

  1. windows下的命令行工具babun

    什么是babun babun是windows上的一个第三方shell,在这个shell上面你可以使用几乎所有linux,unix上面的命令,他几乎可以取代windows的shell.用官方的题目说就是 ...

  2. 在Redhat上为.Net 项目构建基于Jenkins + Github + Mono 的持续集成环境

    在Redhat enterprise 6.5 的服务器上,为在gutub 上的 .net 项目构建一个持续集成环境,用到了Jenkins和mono.因公司的服务器在内网,访问外网时要通过代理,所以在很 ...

  3. 认识ASP.NET 5项目结构和项目文件xproj

    ASP.NET 5 在项目结构上做了很大的改变,我们以前熟悉的目录结构与项目文件内容都不太一样了,本篇文章带大家了解 ASP.NET 5 到底跟以前有哪些不一样的地方. 我们先用 Visual Stu ...

  4. [PHP源码阅读]explode和implode函数

    explode和implode函数主要用作字符串和数组间转换的操作,比如获取一段参数后根据某个字符分割字符串,或者将一个数组的结果使用一个字符合并成一个字符串输出.在PHP中经常会用到这两个函数,因此 ...

  5. MongoDB与PostgresQL无责任初步测试

    PostgresQL一秒能插入多少条记录,MongoDB呢?读取的情况又如何?我写了一些简单的程序,得出了一些简单的数据,贴在这里分享,继续往下阅读前请注意下本文标题中的“无责任”,这表示此测试结果不 ...

  6. Google软件构建工具Bazel原理及使用方法介绍

    近期,Google开源了强大的自动化构建工具Bazel. 正好博主近期在使用china版的Bazel--腾讯自主开发的Blade,所以准备跟大家分享一下Google Bazel这个分布式构建系统的原理 ...

  7. ABP源码分析四十：ZERO的Application和Tenant

    ABP的Zero模块以数据库为数据源实现了ABP框架中的tenant management (multi-tenancy), role management, user management, ses ...

  8. mysql 列名中 包含斜杠或者空格的处理方式

    今天客户那边遇到了一个比较奇葩的问题跑来问我,这个问题比较冷门,所以特别记录下. 问题描述 数据库的字段存在斜杠或者空格的时候,怎么用sql进行insert或者select操作. 问题解答 对于这种特 ...

  9. myeclipse学习总结三（MyEclipse文件查找技巧）

    一.查找文件 使用快捷键[ctrl+shift+R]弹出弹出文件查找框,如下图所示: 二.查找包含某个字符串的文件 使用快捷键[ctrl+H]在弹出对话框中选File Search选项,然后在第一个文 ...

  10. Hibernate 命名查询

    1.定义 Hibernate允许在映射配置文件中定义字符串形式的查询语句,这种查询方式被称为命名查询. 2.创建表结构并添加测试数据 create table `student` ( `id` dou ...