Bootstrap4+的使用
Container容器
栅格系统
排版
代码
图片
表格<table>
徽章(Badge)
按钮(Button)
按钮组(Btn-group)
轮播效果(Carousel)
下拉菜单 (Dropdowns)
表单(Forms)
输入框(Input)
列表组(List-group)
弹出模态框 (Modal)
导航/滑动门(nav)
警告提示框(Alert)
面包屑导航(Breadcrumb)
卡片组件(card)
折叠面板(Collapse)
媒体对象
分页(Pagination)
POP提示 (Popover)
进度条(Progress)
滚动监听(Scrollspy)
旋转特效(Spinners)
弹出提示框(Toast)
提示冒泡(Tooltip)
布局 | Container容器 | ||
container | 居中,适配不同的断的 max-width 尺寸 | ||
container-fluid | 全屏,适配屏幕的 width: 100% 尺寸 | ||
栅格系统 | |||
col-* | 超小屏幕(新增规格)<576px | ||
col-sm-* | 小屏幕次小屏≥576px | ||
col-md-* | 中等屏幕窄屏≥768px | ||
col-lg-* | 大屏幕桌面显示器≥992px | ||
col-xl-* | 超大屏幕大桌面显示器≥1200px | ||
row-cols-* | 一行 * 列 | ||
align-items-start/center/end | 上边对齐/上下居中/下边对齐 | ||
align-self-start/center/end | 上边对齐/上下居中/下边对齐 | ||
justify-content-start/center/end/around/between | 左对齐/居中/右对齐/间隔相等对齐/两端对齐 | ||
no-gutters | 间隙沟槽清除 | ||
w-100 | 换行 | ||
order-1到order-12 | 顺序重定义 | ||
offset-sm/md/-* | 向右偏移 * 列 | ||
内容 | 排版 | ||
<h1> 到 <h6> | 标题 | ||
… | 文本内联元素 | ||
… | Abbr缩略语 | ||
text-center/right | 居中/右对齐 | ||
list-inline | 逐行显示 | ||
list-inline-item | 单行并多列并排 | ||
代码 | |||
<code> | 内联代码 | ||
<var> | Var变量 | ||
<kbd> | 用户输入(键盘动作提示) | ||
图片 | |||
img-fluid | 响应式图片,图片大小会随着父元素大小同步缩放 | ||
img-thumbnail | 缩略图处理,带圆角且1px边界的外框缩略图样式 | ||
block | 图像对齐处理 | ||
表格<table> | |||
table | |||
table-dark | 深色背景和浅色文本 | ||
thead-light 或.thead-dark | Head表头处理,使第一行区显示出浅黑或深 | ||
table-striped | 条纹状表格 | ||
table-bordered | 表格边框处理 | ||
table-borderless | 无边框 | ||
table-borderless | 行悬停效果,将 table-hover 定义到 <tbody>上 | ||
table-sm | 紧缩表格,将表格的padding值缩减一半,使表格更加紧凑 | ||
table-active/default/success/warning/info/light/dark | 语义状态化,单元格进行着色表达 | ||
徽章(Badge) | 具体点击链接 | ||
badge | 徽章样式的使用、数字提示扩展样式以及小规格徽章 | ||
badge-active/default/success/warning/info/light/dark | 颜色 | ||
badge-pill | 椭圆形胶囊标签 | ||
按钮(Button) | |||
btn-active/default/success/warning/info/light/dark | 颜色 | ||
btn-lg/sm | 尺寸规格与大小定义 | ||
active | 启用状态 | ||
disabled | 禁用状态 | ||
按钮组(Btn-group) | |||
btn-group | 将按钮连一起 | ||
btn-group-sm/md/lg | 大小规格和尺寸缩放 | ||
btn-group-vertical | 垂直排列 | ||
轮播效果(Carousel) | 具体点击链接 | ||
carousel-caption | 包含字幕的轮播 | ||
carousel-fade | 交替变化 | ||
下拉菜单 (Dropdowns) | |||
dropdown-toggle | 单一按钮的下拉菜单 | ||
dropdown-toggle-split | 分裂式按钮下拉菜单 | ||
btn-sm/md/lg | 大小 | ||
dropup/dropright/dropleft | 方向向上/向右/向左 | ||
disabled | 不可用菜单 | ||
dropdown-header | 头部 | ||
dropdown-divider | 菜单分隔与分割线 | ||
表单(Forms) | |||
form-control | 表单控件 | ||
form-control-file | |||
form-control-sm/md/lg | 尺寸 | ||
readonly | 只读属性 | ||
form-control-plaintext | 只读纯文本 | ||
form-control-range | 输入范围 | ||
form-check-inline | 按钮水平排列 | ||
text-muted | 表单下方帮助提示文本 | ||
输入框(Input) | |||
input-group-sm/md/lg | 尺寸 | ||
列表组(List-group) | |||
list-group | 列表组 | ||
active | 列表(启用)状态指示 | ||
disabled | 列表(禁用)状态指示 | ||
list-group-flush | Flush紧致贴齐 | ||
list-group-horizontal | 水平 | ||
list-group-item-{颜色} | 颜色 | ||
弹出模态框 (Modal) | 具体点击链接 | ||
modal-dialog-centered | 居中显示 | ||
导航/滑动门(nav) | |||
nav | 基本导航样式 | ||
justify-content-center | 水平对齐 | ||
justify-content-end | 右对齐 | ||
flex-column | 垂直排列 | ||
nav-tabs | Tabs标签 | ||
nav-pills | 胶囊式标签页 | ||
nav-fill | 填充和对齐 | ||
导航栏(navbar) | |||
form-inline | Form表单 | ||
input-group | 输入框组控件 | ||
navbar-text | Text文本处理 | ||
navbar-light | 导航颜色反转(强黑白对比) | ||
navbar-dark | 深色背景 | ||
警告提示框(Alert) | |||
alert-active/default/success/warning/info/light/dark | 警报是一组颜色控件 | ||
alert-link | 链接颜色 | ||
面包屑导航(Breadcrumb) | 具体点击链接 | ||
自动添加分隔符、并呈现导航层次和网页结构结构 | |||
卡片组件(card) | |||
card-body | 卡片的内容主体 | ||
card-title | 卡片标题(card-title和 <h*>组合) | ||
card-link | 添加平行的链接(card-link 与 <a>结合) | ||
card-img-top/bottom | 定义一张图片在卡片的顶部/尾部 | ||
card-header | 页眉 | ||
bg-active/default/success/warning/info/light/dark | 颜色 | ||
border-active/default/success/warning/info/light/dark | 边框颜色 | ||
card-group | 卡片组 | ||
card-deck | 卡片阵列 | ||
折叠面板(Collapse) | |||
collapse | 隐藏内容 | ||
媒体对象 | |||
media media-body | 左边是一个图、右边是内容且不能转着图、形成两列 | ||
media-body | 嵌套 | ||
align-self-start/center/end | 上对齐/中/底 | ||
list-unstyled | 列表呈现 | ||
分页(Pagination) | |||
POP提示 (Popover) | |||
进度条(Progress) | |||
滚动监听(Scrollspy) | |||
旋转特效(Spinners) | |||
弹出提示框(Toast) | |||
提示冒泡(Tooltip) |