Bootstrap 按钮，图片，辅助类

Bootstrap 按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

以下样式可用于<a>, <button>, 或 <input> 元素上：

类	描述	实例
.btn	为按钮添加基本样式	尝试一下
.btn-default	默认/标准按钮	尝试一下
.btn-primary	原始按钮样式（未被操作）	尝试一下
.btn-success	表示成功的动作	尝试一下
.btn-info	该样式可用于要弹出信息的按钮	尝试一下
.btn-warning	表示需要谨慎操作的按钮	尝试一下
.btn-danger	表示一个危险动作的按钮操作	尝试一下
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)	尝试一下
.btn-lg	制作一个大按钮	尝试一下
.btn-sm	制作一个小按钮	尝试一下
.btn-xs	制作一个超小按钮	尝试一下
.btn-block	块级按钮(拉伸至父元素100%的宽度)	尝试一下
.active	按钮被点击	尝试一下
.disabled	禁用按钮	尝试一下

Bootstrap 图片

类	描述	实例
.img-rounded	为图片添加圆角 (IE8 不支持)	尝试一下
.img-circle	将图片变为圆形 (IE8 不支持)	尝试一下
.img-thumbnail	缩略图功能	尝试一下
.img-responsive	图片响应式 (将很好地扩展到父元素)	尝试一下

Bootstrap 辅助类

本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。

文本

以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：

类	描述	实例
.text-muted	"text-muted" 类的文本样式	尝试一下
.text-primary	"text-primary" 类的文本样式	尝试一下
.text-success	"text-success" 类的文本样式	尝试一下
.text-info	"text-info" 类的文本样式	尝试一下
.text-warning	"text-warning" 类的文本样式	尝试一下
.text-danger	"text-danger" 类的文本样式	尝试一下

背景

以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：

类	描述	实例
.bg-primary	表格单元格使用了 "bg-primary" 类	尝试一下
.bg-success	表格单元格使用了 "bg-success" 类	尝试一下
.bg-info	表格单元格使用了 "bg-info" 类	尝试一下
.bg-warning	表格单元格使用了 "bg-warning" 类	尝试一下
.bg-danger	表格单元格使用了 "bg-danger" 类	尝试一下

其他

类	描述	实例
.pull-left	元素浮动到左边	尝试一下
.pull-right	元素浮动到右边	尝试一下
.center-block	设置元素为 display:block 并居中显示	尝试一下
.clearfix	清除浮动	尝试一下
.show	强制元素显示	尝试一下
.hidden	强制元素隐藏	尝试一下
.sr-only	除了屏幕阅读器外，其他设备上隐藏元素	尝试一下
.sr-only-focusable	与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)	尝试一下
.text-hide	将页面元素所包含的文本内容替换为背景图	尝试一下
.close	显示关闭按钮	尝试一下
.caret	显示下拉式功能	尝试一下

转载于:https://www.cnblogs.com/Akeke/p/6658607.html