Google Reader

Bootstrap 2.1.0 更新备忘

by

at 2012-08-21 17:30:18

original http://feedproxy.google.com/~r/Linlis/~3/tF9k0SNkYT8/29889632954

今天 bootstrap 更新了 2.1，上一个版本是 2.0.4，看了下 bootstrap 的官方 blog，以下是一些主要的更新点并做一下备忘。

• dropdowns 现在支持了二级菜单

  挺实用的

• 增加了 Affix 这个JS插件，将你滚动滚动条的时候可以将任何东西都固定在当前 viewport 的固定位置

  很实用。一级导航已经由 navbar 来 fix 了，那么二级导航就可以用 affix 来固定位置，这样，当你在浏览一个页面的时候，一级导航和二级导航都会固定在那里，哪怕你滚动一个很长的页面至底部，也可以立马点击一级导航或二级导航前往你想去的页面。这应该算是 2.1 最主要的新 feature。

• 给按钮增加了一个 .btn-block 的样式，让按钮的宽度是父元素的100%。

  实用性一般，通过 box-sizing: border-box; 这个来实现的，不过既然你做了一个 .btn-block 用于按钮，为什么你不多做一个 .input-block 和 .textarea-block 来用于 input 和 textarea 呢，很显然这几个经常是大家要用一起用的啊，而且 input 和 textarea 用到 box-sizing: border-box; 的频率明显比 button 要高很多。

• 可以给 table 的行增加状态的样式了，比如 .success .error .info

  目前用到 table 的机会比较少

• 给 nav 和 dropdown 里的 li 增加了 .disable，那么这个 li 里面的元素就不能点了

  没什么大用

• navbar 现在默认是白色的样式，通过增加 .navbar-inverse 可以搞回之前版本的那种“黑又硬”风格。

  这个实在。之前每次我用的时候都要写一堆代码来覆盖掉原来的“黑又硬”风格。

• 优化了 prepended 和 appended input 的代码。

  这种风格的 input 我个人比较喜欢，配合 icon 会挺好看。

• 新的 font-size 和 line-height，用 14px/20px 取代了原先的 13px/18px

  别小看这两个数值，这其实算是大变动了，影响到的地方会挺多，回头需要在具体项目中再看看实际效果。

• 给 navbar 的折叠的开关位设了一个变量，之前是固定的 980px

  实在。

• fluid grid 现在可以有 offset 了

  应用场景比较有限，至少我没碰到。

• fluid grid 现在的百分比数值是算出来的了，之前是固定的百分比。

  对使用者应该没什么影响。

除了官方博客上提到这些之外，还有一些小更新：

• 为按钮增加了一个 .btn-link 这个样式，就是可以把一个 <button> 变成 <a>，不过可以保留 button 的 hover 面积，在一些特定场合下，这个很实用。

• 给 img> 增加了几个样式： .img-rounded img-circle img-polaroid

• 增加了垂直排列的 button-group，这个非常实用。

• Dropdown 现在不仅仅可以往下了，菜单现在可以朝上 dropup 了，只需要增加 .dropup 这个样式。这个也很实用。

• Tabbable nav, 现在也有“上下左右”四个方向了。实用。

• Progress bars 现在变得更丰富了，增加了颜色，并且可以将多个 bar 组合到一起。

以上就是 2.1 主要更新的东西，sass 版还没出，所以在这里记录一下以备忘，等sass 出来之后运用到实际项目中看看效果。