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, 缩略图模式，添加了浅边框、小圆角、内边距。
网友评论