首页 > 代码库 > Bootstrap 按钮,图片,辅助类
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 | 显示下拉式功能 | 尝试一下 |
Bootstrap 按钮,图片,辅助类
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。