目录
2.3 图片形状(rounded rounded-circle)
3.2 按钮大小(.btn-sm lg xs[超小屏幕为4及以前版本])
3.3 轮廓线按钮(btn-outline-*,后缀同按钮样式一样,只不过不是背景色,而是轮廓线颜色)
1、基础排版
1.1 标题
标题实现有两种方式:
①直接使用h1~h6标签
②使用.h1~.h6类
1.2 页面主体(lead类修饰)
1.3 文本对齐
2、图片
2.1 响应式图片
通过.img-fluid类实现,此类对图像应用max-width:100%;和height:auto;
2.2 缩略图(.img-thumbnail)
2.3 图片形状(rounded rounded-circle)
使用rounde-circle是,如果图片为长方形,则为椭圆,如果图片为正方形,则为正圆
2.4 图片对齐
float-start:左对齐
float-end:右对齐
d-block mx-auto:居中对齐
3、按钮
按钮.btn类为基础类,必须写
3.1 按钮样式
类名 | 说明 | 颜色 |
.btn-default | 默认按钮,bootstrap 4及之前 | 灰色背景 |
.btn-primary | 主要按钮 | 深蓝色背景 |
.btn-secondary | 次要按钮,bootstrap 5+ | 灰色背景 |
.btn-success | 成功按钮 | 绿色背景 |
.btn-warning | 警告按钮 | 黄色背景 |
.btn-danger | 危险按钮 | 红色背景 |
.btn-info | 信息按钮 | 浅蓝色背景 |
.btn-link | 超链接按钮 | 链接样式 |
...不再一一列举 |
3.2 按钮大小(.btn-sm lg xs[超小屏幕为4及以前版本])
3.3 轮廓线按钮(btn-outline-*,后缀同按钮样式一样,只不过不是背景色,而是轮廓线颜色)
3.4 禁用按钮(.disabled)
说明:
使用 .disabled禁用的按钮只能够禁用鼠标点击,无法禁用回车键确定按钮
禁用回车键按钮,需要在标签中添加属性 tabindex=-1,使得tab键切换时无法获取到按钮焦点。
3.5 块按钮(.d-grid .gap-2)
gap-2为行间距
3.6 按钮排列
d-sm-block表示在小屏幕时按照块block元素排列
3.7 按钮位置
说白了就是定位
3.8 按钮组
4、表格
样式说明 | 类名 |
基本样式 | .table |
边框 | .table-bordered |
条纹\斑马线 | .table-striped |
悬停效果 | .table-hover |
主题颜色 | .table-primary...后缀同按钮样式一样一样 |