【BootStrap入门级教程】基础排版、图片、按钮与表格

目录

1、基础排版

1.1 标题

 1.2 页面主体（lead类修饰）

 1.3 文本对齐

2、图片

2.1 响应式图片

2.2 缩略图（.img-thumbnail）

 2.3 图片形状（rounded   rounded-circle）

 2.4 图片对齐

​3、按钮

 3.1 按钮样式

3.2 按钮大小（.btn-sm   lg   xs[超小屏幕为4及以前版本]）

3.3 轮廓线按钮（btn-outline-*，后缀同按钮样式一样，只不过不是背景色，而是轮廓线颜色） 

3.4 禁用按钮（.disabled）

3.5 块按钮（.d-grid  .gap-2）

 3.6 按钮排列

3.7 按钮位置

 3.8 按钮组

 4、表格

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...后缀同按钮样式一样一样