bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.
2017-02-10 18:03
585 查看
affix: 意思是粘附, 附着, 沾上.
因此, 附加导航就是 bootstrap的 Affix.js组件.
bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, 这个导航栏 会"粘帖"在页面的某个竖直位置, 实现页面锚点 + 滚动监听的 效果.
附加导航:开始的时候, 也是随着其他内容一起移动 只是在某个位置时, 才开始固定不动, 并在导航条上监听滚动.
只是说, Affix插件通常和 nav结合使用, 为了监视nav的滚动, 通常, Affix还要和滚动监听 结合使用. 通过在 body上写data-spy="scroll"....属性.
原理: vim要实现 代码的等号自动缩进 , 是根据 文档的 类型file type, 有一个syntax语法 格式库,格式代码参考标准规定, 然后根据这个格式标准来进行缩进的, 所以, 如果vim的syntax没有 那种文件类型的 缩进标准 则无法进行缩进, 比如, 默认的就没有php语言, php文件格式的缩进标准, 因此, 就不能进行缩进, 单击等号就不能实现格式重拍, 把文件类型改成 html类型, 就能够实现代码的格式的自动缩进和重拍了, 因此, 如果没有必须必要的话, 就尽量不要写成php, 而写成html文件格式!
在vim配置中的
一定要在导航的li下的a中设置 跟右边内容 相一致的 id和锚点 href超链接
data-spy="affix"... 这些属性 写在什么地方? 根据 "自描述"的概念, 属性是自己描述自己的, 是自己说明自己的, 因此 要设置为affix的 元素是 导航 ul元素 ,因此, 这些属性 data-spy="affix", data-offset-top="60" data-offset-bottom="200" 等之类 的要写在导航条 ul 自身上 . 而不是右 下 边的 滚动内容上!
只需要一个属性: data-spy="affix" 就可以实现元素的 粘附" 附加" 不动了. 但是默认的位置 是固定在 "页面的中间, 页面的一半 "的地方
Affix元素的位置: 它的初始位置, 由: data-offset-top: xxx 来决定. 然后, 当滚动时 要定位时, 它的位置 由 .affix这个类来决定, 因此要在顶部的 style中 , 另外写上.affix的类的样式:
除了对ul导航使用 data属性来使他成为 affix 之外, 还可以使用 js代码实现:
因此, 附加导航就是 bootstrap的 Affix.js组件.
bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, 这个导航栏 会"粘帖"在页面的某个竖直位置, 实现页面锚点 + 滚动监听的 效果.
类样式选择器的子集: 注意区别两个类之间 有空格 和 没有空格, (两个类紧密挨着没有空格)的方式, 后者表示类选择器的子集, 即 元素的class样式类中, 同时有多个类的时候, 可以根据其中类的子集(同时选出两个类)来选中元素. 如:
<div class="left carousel-control active"> <style> .left. </style>
总之, 不管是类选择器, 还是id, 还是标签等, 只要中间加了空格, 就是层级选择器, 要想多个选择器同时生效/限定, 就将它们紧挨着/紧密的写在一起, 如div.left, div#id.carousel.foo 等都是这样的例子
列表组导航, list-group>list-group-item, 左边是列表组, 里面的li都是a, 单击时, 右边是显示具体的内容. 但是, 这个内容的显示, 不是像metronic或Ace那样的后台管理系统, 而是要刷新整个 页面的, 重载整个页面的...
附加导航:开始的时候, 也是随着其他内容一起移动 只是在某个位置时, 才开始固定不动, 并在导航条上监听滚动.
附加插件 Affix插件. 跟导航插件 nav. 两者之间并不是 必然联系的! 因为:
对于Affix插件来说, 任何元素都可以成为Affix, 如div, ul, form等等都是, 只要给他添加了data-spy="affix", data-offset-top="100"等属性就好了. 它的作用 只是切换元素的滚动和固定状态. 其中, data-offset-top 或者.affix({offset: {top: 100}});只是为了在页面滚动到某个位置的时候, (该元素距离顶端为data-offset-top距离大小时, 切换固定和滚动状态)
只是说, Affix插件通常和 nav结合使用, 为了监视nav的滚动, 通常, Affix还要和滚动监听 结合使用. 通过在 body上写data-spy="scroll"....属性.
要想得到图片/视频等和文本等元素 相混排的 对象, 可以使用 bootstrap中的 "媒体对象" 组件. 一个媒体对象组件, 就是包含在一个div.media中的, 然后左边的图片等多媒体 使用div.media-left.media-middle /bottom (默认的图片对齐方式是顶对齐, 不用写! ), 中间包含的是一个 a href=...>img.media-object (注意图片等的样式类是 :media-object) 右边的内容是 div.media-body> h2.media-heading ... + p...
媒体对象组件, 还可以用ul>li>div.media 的方式组成多个媒体对象.在emmet中, lipsum单独就可以展开成假文, 所以不必借助于,其他标签,或 大于符号, 如果要产生多个段落, 直接用 lipsum*4 (n) 就可以了 一个技巧: 在有多个类似的结构时, 可以先写出 emmet的缩写形式, "先复制出多个"! 然后再来展开! 而不是展开后再来复制!!! 那样就比较麻烦了!!
关于vim用等号 = 无法实现缩进格式的自动排版 问题!?原理: vim要实现 代码的等号自动缩进 , 是根据 文档的 类型file type, 有一个syntax语法 格式库,格式代码参考标准规定, 然后根据这个格式标准来进行缩进的, 所以, 如果vim的syntax没有 那种文件类型的 缩进标准 则无法进行缩进, 比如, 默认的就没有php语言, php文件格式的缩进标准, 因此, 就不能进行缩进, 单击等号就不能实现格式重拍, 把文件类型改成 html类型, 就能够实现代码的格式的自动缩进和重拍了, 因此, 如果没有必须必要的话, 就尽量不要写成php, 而写成html文件格式!
vim的缩进线插件?
有两个: vim-indent-guide 和 Indentline在使用vim进行编程的时候, 为了进行行尾控制, 复制/选择多行, 缩进线的显示时 , 都需要进行设置 不要换行: set nowrap 这样会使得整个文档的长度 变得很清爽, 不会像自动换行时, 那么凌乱!
在设置 多种模式下的 非递归 按键映射: 直接使用 :noremap
在vim配置中的 <leader>sj
等, leader表示的究竟是什么: 原来, leader表示的是vim的 映射引导键! 即只要在 /etc/vimrc中设置: ‵let mapleader='' ‵, 那么以后你安装插件时, 设置的toggle等快捷键, 就可以很方便地用 <leader>xx
来映射键了, 这样的话, 又可以大大的扩展了 使用映射按键的范围了, 以后插件启动/关闭的 切换键映射, 就用 这个<leader>+插件的中文拼音首字母缩写
来表示了!
解决Affix附加导航不生效的原因
左边的那个 "附加导航"的 "窄竖条" 一定要 写成 导航组件 ,ul.nav.nav-pills.nav-stacked, 名字都叫 附加 "导航", 所以一定要是一个 导航, 不能是 列表组
一定要在导航的li下的a中设置 跟右边内容 相一致的 id和锚点 href超链接
data-spy="affix"... 这些属性 写在什么地方? 根据 "自描述"的概念, 属性是自己描述自己的, 是自己说明自己的, 因此 要设置为affix的 元素是 导航 ul元素 ,因此, 这些属性 data-spy="affix", data-offset-top="60" data-offset-bottom="200" 等之类 的要写在导航条 ul 自身上 . 而不是右 下 边的 滚动内容上!
只需要一个属性: data-spy="affix" 就可以实现元素的 粘附" 附加" 不动了. 但是默认的位置 是固定在 "页面的中间, 页面的一半 "的地方
Affix元素的位置: 它的初始位置, 由: data-offset-top: xxx 来决定. 然后, 当滚动时 要定位时, 它的位置 由 .affix这个类来决定, 因此要在顶部的 style中 , 另外写上.affix的类的样式:
.nav.nav-pills.affix { top: 100px; (如果要控制底部的位置, 使用 bottom: 20px;) } 之类的内容!这个就是文档中所说的, affix 在三个类: .affix-top, .affix, .affix-bottom 之间进行切换的含义.
除了对ul导航使用 data属性来使他成为 affix 之外, 还可以使用 js代码实现:
$('ul导航的id').affix({ offset{ top: 100px; 之类的数字.... } });
附加导航回去的时候, active会被取消, 这是一个bug, 用较低版本的 引入bootstrap. v3.0.3版本-min.js 可以解决?
相关文章推荐
- Bootstrap JS插件使用实例(10)-附加导航(affix)
- 57-003-1 bootstrap附加导航Affix实现页面的滚动监听
- bootstrap中jquery插件——affix附加导航、以及滚动监听功能的实现
- 解决Bootstrap 附加导航(Affix)的问题和使用时若干注意事项
- bootstrap affix附加导航
- 使用附加导航(affix)实现内容切换
- Bootstrap每天必学之附加导航(Affix)插件
- Bootstrap基础25——附加导航affix
- Bootstrap 附加导航(Affix)插件
- Bootstrap 附加导航(Affix)插件
- bootstrap源码学习之附加导航affix(二)
- Bootstrap 附加导航(Affix)插件实例详解
- Bootstrap 附加导航(Affix)插件
- 附加导航(Affix)行为
- 使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
- Bootstrap使用Tab和dropdown实现导航下拉菜单效果
- Bootstrap路径导航与分页学习使用
- bootstrap组件之导航组件使用方法
- bootstrap滚动监控器使用方法解析