BookStrap中关于button和图片的注意点

标签：

1、针对组件的注意事项：

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素。

2、链接被作为按钮使用时的注意事项：

如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button" 属性。

3、跨浏览器展现：

强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。Firefox <30 版本的浏览器上出现的一个 bug：阻止为基于 <input> 元素所创建的按钮设置 line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。

4、预定义样式的类：.btn-default(默认).btn-primary(首选项) .btn-success(成功)   .btn-info(一般信息)  .btn-warning(警告)   .btn-danger(危险)  .btn-link(链接)

5、按钮尺寸：.btn-lg(大按钮) .btn-sm(小按钮) .btn-xs(超小尺寸) .btn-block(可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级元素)

6、激活状态：  .active

7、响应式图片：通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%; height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

8、SVG 图像和 IE 8-10

在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。为了解决这个问题，在出问题的地方添加 width: 100% \9; 即可。Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。

 9、图片形状：.img-rounded .img-circle .img-thumbnail 

Internet Explorer 8 不支持 CSS3 中的圆角属性。

10、背景颜色.bg-primary  .bg-success  .bg-info、、、

     关闭按钮：caret

     快速浮动：.pull-right  .pull-left （不能用于导航条组中，排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。）

     清除浮动：通过为父元素添加 .clearfix 类可以很容易地清除浮动

     显示隐藏：.hidden (.sr-only) .show  

    .sr-only 类可以对屏幕阅读器以外的设备隐藏内容。.sr-only 和 .sr-only-focusable 联合         使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）

BookStrap中关于button和图片的注意点

标签：

原文地址：http://www.cnblogs.com/CloverH/p/4883841.html