最近在公司搞项目上的东西也接触不少 Web 前端, 加上之前给公司做新首页时也瞎捣鼓了些前端的东西, 再仔细看了下 Bootstrap 3 的文档, 发现之前说 Bs4 才有的很多东西其实 Bs3 也有了, 只是在 JavaScript 插件那部分, 都被我忽略了

有一些随意记录的偶得, 给自己做个备份, 也供他人参考

浏览器兼容性

总见 Bootstrap 中文文档里浏览器兼容性一节: http://v3.bootcss.com/getting-started/#support

• 强制不让 IE 使用兼容模式: http://v3.bootcss.com/getting-started/#support-ie-compatibility-modes

<meta http-equiv="X-UA-Compatible" content="IE=edge">

更多讨论可见 https://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

• 国产浏览器的高速模式: http://v3.bootcss.com/getting-started/#support-chinese-browsers-renderer-modes

<meta name="renderer" content="webkit">

目前只有 360 支持, 详见 http://se.360.cn/v6/help/meta.html

JavaScript in Bootstrap

之前做首页时说 v4 才有其实 v3 就有了的

• 滚动监听 scrollspy: http://v3.bootcss.com/javascript/#scrollspy
• 幻灯片 carousel: http://v3.bootcss.com/javascript/#carousel

其实可以不用自己写的

• 标签页 tabs: http://v3.bootcss.com/javascript/#tabs

一些可以整合的内容

• 模态框 modals (可替换 lightbox_me): http://v3.bootcss.com/javascript/#modals
• 提示条 tooltips (可替换 tipsy): http://v3.bootcss.com/javascript/#tooltips
• 弹出框 popover (可在 tipsy 基础上增加持续显示): http://v3.bootcss.com/javascript/#popovers
• 按钮事件 radio (可替换 bootstrap-switch): http://v3.bootcss.com/javascript/#buttons-checkbox-radio

写前端时的其他意外发现

jQuery 里的 .hover() 绑定两个事件完美解决了多年前想做的 “悬停时出现弹层, 且鼠标从悬停触发元素移动到弹层上也不消失” 的事, 后来想明白了其实是因为之前我修改 display 的元素并不在 hover 元素内, 所以移出去就挂了

<div id="outer">
  悬停项
  <div id="inner" style="display: none">
    悬停内部内容, 从 outer 移到 inner 这部分也不会消失
  </div>
</div>

$("#outer").hover(function() {
    $('#inner', this).show();
}, function() {
    $('#inner', this).hide();
});