首页 > 代码库 > Bootstrap 按钮，图片，辅助类

Bootstrap 按钮，图片，辅助类

2024-09-12 00:16:02   216人阅读

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 显示下拉式功能 尝试一下

Bootstrap 按钮，图片，辅助类


联系
我们