Bootstrap-按钮、图片、辅助类、响应式实用工具

一、按钮
.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 禁用按钮,跟规定的disabled="disabled"样式不同,这个只是不可点,没有禁止符号;
按钮标签:可以在


二、图片

  • .img-rounded:添加 border-radius:6px 来获得图片圆角。(IE8 不支持);
  • .img-circle:添加 border-radius:50% 来让整个图片变成圆形。 (IE8 不支持);
  • .img-thumbnail:添加一些内边距(padding)和一个灰色的边框,缩略图功能;
  • .img-responsive 让图片支持响应式;

三、辅助类
1)文本:(如果文本是个链接鼠标移动到文本上会变暗)
.text-muted 正常灰黑色字体
.text-primary 蓝色字体
.text-success 绿色字体
.text-info 蓝灰色字体
.text-warning 黄色字体
.text-danger 红色字体
2)背景:(如果文本是个链接鼠标移动到文本上会变暗)
.bg-primary 深蓝色背景
.bg-success 浅绿色背景
.bg-info 淡蓝色背景
.bg-warning 淡黄色背景
.bg-danger 淡红色背景
3)其他
.pull-left 左浮动
.pull-right 右浮动
.clearfix 清浮动
.center-block 块级并居中
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外,其他设备上隐藏元素
.text-hide 隐藏文字,将页面元素所包含的文本内容替换为背景图
.caret 显示下拉式功能,例如:


image.png

.close 关闭图标实例

aria-hidden="true" 是用于屏幕阅读器的,帮助残障人士更好的访问网站。
.caret 使用插入符表示下拉功能和方向,使用带有 class caret 的 元素得到该功能。

插入符实例


四、响应式实用工具
通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。
需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本,响应式实用工具目前只适用于块和表切换。
.visible-xs-* / .hidden-xs 在超小屏幕 手机<768px下可见或者隐藏
.visible-sm-* / .hidden-sm 在小屏幕 平板>=768px下可见或者隐藏
.visible-md-* / .hidden-md 在中等屏幕 桌面 >=992px下可见或者隐藏
.visible-lg-* / .hidden-lg 在大屏幕 桌面>=1200下可见或者隐藏
从 v3.2.0 版本起,形如 .visible-- 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性:
.visible--block:display: block;
.visible-
-inline:display: inline;
.visible--inline-block:display: inline-block;
因此,以超小屏幕(xs)为例,可用的 .visible-
-* 类是:.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了

相关的元素的特殊情况外,它们与 .visible-*-block 大体相同。

你可能感兴趣的:(Bootstrap-按钮、图片、辅助类、响应式实用工具)