学习Bootstrap3之按钮与图片

image.png

一、按钮

image.png

按钮类.btn是用户操作的入口元素，不同的颜色代表不同的情境含义
颜色在屏幕阅读器上不可见，所以建议同时使用.sr-only来添加辅助说明
承载标签可以是 <a class="btn">、<button>、 <input type="button">、<input type="submit">
input标签在一些浏览器上高度的兼容性不是很好，建议使用 button标签来创建按钮。

1、7种外观

• 默认是灰色圆角背景，a连接就是蓝色文本。
• .btn-default, 白底黑边框。
• .btn-primary，蓝底白字, 主色。
• .btn-success, 绿底白字, 表示成功。
• .btn-info, 浅蓝底白字, 表示说明。
• .btn-warning, 橙底白字，表示警告。
• .btn-danger, 红底白字，表示危险、错误。
• .btn-link， 表现为蓝色文本链接。

2、4级按钮大小

默认是普通大小。

• .btn-lg, 最大。
• .btn-sm, 小按钮。
• .btn-xs, 超小按钮。

3、块级按钮

• .btn-block, 填满父容器， 一般在移动端使用。

4、按钮状态

• .active, 激活状态，相当于按下时的外观。
• .disabled, 禁用状态，灰化，一般用在a标签上，因为 a标签没有 disabled 属性。
• disabled属性， 禁用状态，在IE浏览器中可能有不可修改的自带样式。

<a>链接做为按钮呈现时，它原有的跳转功能并不能彻底的屏蔽，建议使用 javascript:void(0) 来规避这种需求。

---

二、图片修饰

image.png

图片的修饰主要是自适应大小与边框裁剪。

1、响应父级宽度

实际上是控制图片最大宽度不会超过父元素，使用了 max-width: 100%, 它本身也会块级化 display: block, 高度自动。

• .img-responsive, 如果宽度小于父元素，想要居中的话，可以使用 .center-block类，不能使用 text-center, 因为它已经块级化了。
• 鉴于有时候图片会过小，导致图片不能填满父元素，当有需求图片始终要填满父元素时，可以自定义一个 .img-fluid 来实现，不过高度会高低不齐。

.img-fluid{
  width: 100%;
}

• 对于图片填满父元素的一些需求，可以考虑转换为背景或者使用 object-fit

2、边框裁剪

• .img-rounded, 裁剪为圆角。
• .img-circle, 剪裁为圆形，如果不是正方形图片会显示为椭圆。
• .img-thumbnail, 缩略图模式，添加了浅边框、小圆角、内边距。