容器
- .container类:用于固定宽度并支持响应式布局的容器
- .container-fluid类:用于百分百宽度,占据全部视口的容器
容器内边距
- .pt-5:填充顶部内边距
网格系统
- .col- 针对所有设备;
- .col-sm- 平板 - 屏幕宽度等于或大于 576px;
- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px;
- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px;
- .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px;
- .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px;
每一层类都会向上扩展,这意味如果计划为md、lg和xl设置相同的宽度,则只需指定md。
文字排版
<h1> - <h6>
.display-1,.display-2,.display-3,.display-4
<small>/.small
:用于创建字号更小的颜色更浅的文本(为父元素的85%)<mark>/.marked
:为黄色背景及有一定的内边距<abbr>
:显示在文本底部的一条虚线边框<blockquote>/.blockquote
:引用的内容<dl>
<kbd>
:键盘样式<pre>
:固定文本段落样式.lead
:让段落更突出.text-left
:左对齐.text-center
:居中.text-right
:右对齐.text-justify
:设定文本对齐,段落中超出屏幕部分文字自动换行.text-nowrap
:段落中超出屏幕部分不换行
表格
- .table:设置基础表格的样式
- .table-striped:将在内的行上看到条纹
- .table-bordered:可以为表格添加边框
- .table-hover:为表格的每一行添加鼠标悬停效果(灰色背景)
- .table-dark:为表格添加黑色背景
- .table-boederless:设置一个无边框的表格
图像形状
- .rounded:让图片显示圆角效果
- .rounded-circle:设置椭圆形图片
- .img-thumbnail:设置图片缩略图(图片有边框)
- .float-start:设置图片左对齐
- .float-end:设置图片右对齐
- .mx-auto(margin:auto)和.d-block(display:block):设置图片居中对齐
- .img-fluid(max-width:100%,height:auto):设置响应式图片
信息提示框
- .alter:
<div class="alert alert-success">
信息提示框 - .alter-link:设置匹配提示框颜色的链接
- .alter-dismissible:关闭提示框
- .fade:设置提示框在关闭时的淡出效果
- .show:设置提示框在关闭时的淡入效果