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) |
1083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
