Bootstrap之导航条
基本导航条
<!-- 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之导航条的更多相关文章
- bootstrap框架 导航条组件使用
本文记载boot 导航条组件使用方法 导航条组件 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展 ...
- Bootstrap 固定导航条
默认情况下,导航条的定位属性为 static,它的位置由它的HTML代码中定义的顺序出现,并随着页面向下滚动而消失.也可以改变它的定位方式,让它固定显示在浏览器窗口的顶部或底部. 1.固定在顶部 如果 ...
- Bootstrap学习-导航条-分页导航
1.导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条 ...
- bootstrap-导航条
默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 两端对齐的导航条导航链 ...
- Bootstrap组件之响应式导航条
响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...
- Bootstrap如何实现导航条?导航条实例详解
本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...
- 1.bootstrap练习笔记-导航条
bootstrap练习笔记 1.关于导航栏 官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...
- Bootstrap系列 -- 43. 固定导航条
很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见.Bootstrap框架提供了两种固定导航条的方式: .navbar-fixed-top:导航条固定 ...
- Bootstrap系列 -- 42. 导航条中的按钮、文本和链接
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮na ...
随机推荐
- 真正的汉化-PowerDesigner 16.5 汉化
一.背景 经常使用PowerDesigner,之前使用15版本,后来16出来后,就一直在使用16,不过一直是英文.一些同事对使用英文版总显示有些吃力. 遍寻百度.必应,都没有找到真正的针对版本16的汉 ...
- Ubuntu下开启php调试模式,显示报错信息
在Ubuntu下php的缺省设置是不显示错误信息的,如果程序出错会显示“无法处理此请求的错误提示”,这在开发环境下非常不方便. 其实我们只要编辑下apache的配置文件就好 1.我的apache 配置 ...
- Immutable(不可变)集合
不可变集合,顾名思义就是说集合是不可被修改的.集合的数据项是在创建的时候提供,并且在整个生命周期中都不可改变. 为什么要用immutable对象?immutable对象有以下的优点: 对不可靠的客户代 ...
- VS2013默认打开HTML文件没有设计视图的解决办法
VS菜单->工具->选项->文本编辑器->文件扩展名,右侧输入html,再下拉列表选HTML(Web窗体)编辑器,点添加,确定. 重新打开html文件,就出现“设计”视图了
- 编程之美—烙饼排序问题(JAVA)
一.问题描述 星期五的晚上,一帮同事在希格玛大厦附近的"硬盘酒吧"多喝了几杯.程序员多喝了几杯之后谈什么呢?自然是算法问题.有个同事说:"我以前在餐 馆打工,顾 ...
- UEditor编辑器使用示例
1. UEditor下载 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 下载链接:http ...
- 3. SVM分类器求解(1)——Lagrange duality
先抛开上面的二次规划问题,先来看看存在等式约束的极值问题求法,比如下面的最优化问题: 目标函数是f(w),下面是等式约束.通常解法是引入拉格朗日算子,这里使用来表示算子,得到拉格朗日公式为 是等式约束 ...
- Yii2的深入学习--行为Behavior
我们先来看下行为在 Yii2 中的使用,如下内容摘自 Yii2中文文档 行为是 [[yii\base\Behavior]] 或其子类的实例.行为,也称为 mixins,可以无须改变类继承关系即可增强一 ...
- 基于.NET平台常用的框架整理(转)
自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的 学习曲线,让我对这个平台产生了浓厚的兴趣,在工作和学习中也积累了一些开源的组件,就目前想到的先整理于此,如果再想到, ...
- 禁止页面后退JS(兼容各浏览器)
<script src="${ctxPath}/media/lib/jquery.history.js"></script> <script> ...