Bootstrap的class属性
1,role
增强语义性,用于自定义组件,可增强组件的访问性,可用性和可交互性
2,文字
属性名 | 含义 |
---|---|
font-size | 字体大小 |
line-height | 行高 |
font-family | 默认字体 |
h1-h6 | 标题大小 |
Disolay | 控制标题样式 |
small | 创建字号更小颜色更浅的文本 |
mark | 为黄色背景及有一定的内边距(高亮文本) |
abbr | 显示在文本底部的一条虚线边框(似标记文本) |
font-weight-bold | 更细文本 |
font-weight-light | 控制标题样式 |
font-weight-normal | 普通文本 |
font-italic | 斜体文本 |
lead | 让段落更突出 |
text-left | 左对齐 |
text-center | 居中 |
text-right | 右对齐 |
text-justify | 设定文本对齐,段落中超出屏幕部分文字自动换行 |
text-nowrap | 超出屏幕不换行 |
text-justify | 文本对齐,超出屏幕部分自动换行 |
text-nowrap | 超出屏幕不换行 |
text-lowercase | 文本小写 |
text-uppercase | 文本大写 |
text-capitalize | 单词首字母大写 |
3,文本颜色
属性名 | 含义 |
---|---|
text-muted | 柔和文本(很淡的灰) |
text-primary | 重要文本(蓝色) |
text-success | 执行成功的文本(绿色) |
text-info | 提示信息(很淡的蓝) |
text-warning | 警告文本(黄色) |
text-danger | 危险文本(红色) |
text-dark | 深灰色文字 |
text-light | 浅灰色文本 |
text-white | 白色文本 |
4,背景颜色
属性名 | 含义 |
---|---|
bg-primary text-white | 重要背景颜色(蓝色) |
bg-success text-white | 成功背景颜色(绿色) |
bg-info text-white | 信息提示背景颜色(青色) |
bg-warning text-white | 警告背景颜色(黄色) |
bg-danger text-white | 危险背景(红色) |
bg-dark text-white | 深灰色 |
bg-light text-dark | 浅灰色 |
5,表格
属性名 | 含义 |
---|---|
table | 设置基础表格样式 |
table-striped | 条纹表格 |
table-bordered | 带边框的表格 |
table-hover | 鼠标悬停状态表格(鼠标在哪个哪个高亮) |
table-responsive | 响应式表格,当屏幕较小的时候会出现滚动条 |
注:若要设置表格颜色基本和设置文本颜色一样:eg:table-primary
6,图像形状
属性名 | 含义 |
---|---|
rounded | 圆角图片 |
rounded-circle | 椭圆图片 |
img-thumbnail | 缩略图(有边框) |
img-responsive | 响应式图片 |
7,图片对齐方式
属性名 | 含义 |
---|---|
float-right | 右对齐 |
float-left | 左对齐 |
center-block | 居中 |
8,导航
属性名 | 含义 |
---|---|
nav | 导航类 |
nav-item | 导航项 |
nav-link | 导航链接 |
9,其他
属性名 | 含义 |
---|---|
sr-only | 隐藏某个标签 |
10,媒体特性的属性
属性名 | 含义 |
---|---|
orientation | 设置是是横屏或者竖屏 |
width | 渲染界面的宽度 |
device-width | 设置屏幕的输出宽度 |