bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.

affix: 意思是粘附, 附着, 沾上.

因此, 附加导航就是 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. 两者之间并不是 必然联系的! 因为:

1. 对于Affix插件来说, 任何元素都可以成为Affix, 如div, ul, form等等都是, 只要给他添加了data-spy="affix", data-offset-top="100"等属性就好了. 它的作用 只是切换元素的滚动和固定状态. 其中, data-offset-top 或者 .affix({offset: {top: 100}}); 只是为了在页面滚动到某个位置的时候, (该元素距离顶端为data-offset-top距离大小时, 切换固定和滚动状态)

2. 只是说, Affix插件通常和 nav结合使用, 为了监视nav的滚动, 通常, Affix还要和滚动监听 结合使用. 通过在 body上写data-spy="scroll"....属性.

3. 要想得到图片/视频等和文本等元素 相混排的 对象, 可以使用 bootstrap中的 "媒体对象" 组件. 一个媒体对象组件, 就是包含在一个div.media中的, 然后左边的图片等多媒体 使用div.media-left.media-middle /bottom (默认的图片对齐方式是顶对齐, 不用写! ), 中间包含的是一个 a href=...>img.media-object (注意图片等的样式类是 :ｍｅｄｉａ－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附加导航不生效的原因

1. 左边的那个 "附加导航"的 "窄竖条" 一定要 写成 导航组件 , ul.nav.nav-pills.nav-stacked , 名字都叫 附加 "导航", 所以一定要是一个 导航, 不能是 列表组

2. 一定要在导航的li下的a中设置 跟右边内容 相一致的 id和锚点 href超链接

3. data-spy="affix"... 这些属性 写在什么地方? 根据 "自描述"的概念, 属性是自己描述自己的, 是自己说明自己的, 因此 要设置为affix的 元素是 导航 ul元素 ,因此, 这些属性 data-spy="affix", data-offset-top="60" data-offset-bottom="200" 等之类 的要写在导航条 ul 自身上 . 而不是右 下 边的 滚动内容上!

4. 只需要一个属性: data-spy="affix" 就可以实现元素的 粘附" 附加" 不动了. 但是默认的位置 是固定在 "页面的中间, 页面的一半 "的地方

5. Affix元素的位置: 它的初始位置, 由: data-offset-top: xxx 来决定. 然后, 当滚动时 要定位时, 它的位置 由 .affix这个类来决定, 因此要在顶部的 style中 , 另外写上.affix的类的样式: .nav.nav-pills.affix { top: 100px; (如果要控制底部的位置, 使用 bottom: 20px;) } 之类的内容! 这个就是文档中所说的, affix 在三个类: .affix-top, .affix, .affix-bottom 之间进行切换的含义.

6. 除了对ul导航使用 data属性来使他成为 affix 之外, 还可以使用 js代码实现:

$('ul导航的id').affix({
        offset{
                top: 100px;  之类的数字....
            }

});

附加导航回去的时候, active会被取消, 这是一个bug, 用较低版本的 引入bootstrap. v3.0.3版本-min.js 可以解决?