分享 Bootstrap 2.1 发布了

huacnlee · 2012年08月21日 · 最后由 valentine 回复于 2012年08月21日 · 3263 次阅读

http://twitter.github.com/bootstrap/

据我观察,大概是这些内容

  • 文档页面改进
  • Dropdown menu 开始支持二级菜单了
  • 新增 btn-block ,可以让按钮直接拉通整行
  • affix 组件,然一个区域保持再屏幕的固定位置

酷啊!沙发啊

Nice,前端利器:)

匿名 #3 2012年08月21日

补充

官方 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 的机会比较少

  • navdropdown 里的 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 面积,在一些特定场合下,这个很实用。

  • 给 <![]((http://twitter.github.com/bootstrap/base-css.html#images)> 增加了几个样式: .img-rounded img-circle img-polaroid

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

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

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

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

要是 affix 的导航高度超过了屏幕,就不好了

需要 登录 后方可回复, 如果你还没有账号请 注册新账号