Part2 bootstrap练习 2023.11.24-11.30

一、容器和网格基础

2023.11.24

1.bootstrap5容器有固定容器和流体容器。固定宽度容器是一种响应式的容器，会随着网页界面的大小改变容器的固定宽度的值，流体容器跨越整个屏幕。bootstrap5网格系统中最多有12列，用col-*-*来设置列的格式布局，第一个（*）是响应度，第二个（*）数字，每一列的数字加起来等于12.

2.

二、文字排版和颜色

2023.11.25

1.文字排版涉及标题，标题中字体大小，突出显示，对齐方式，块引用等内容，标题有h和display 两种设置方式，标题中用small 可以使选中元素字体变小，突出显示有code、mark、kbd等，用dl dt dd可以有类似于列表的效果。

2.

2023.11.26

三、表格和图像

1.在bootstrap中有表格的基础样式，条纹、带边框、悬停效果，表格背景颜色，响应式表格等可以设置。图像样式可以设置图像的形状，形状有圆角、圆形和缩略图，对齐方式，响应式图像等。

2.

四、警告框按钮和徽章

2023.11.28

1.警告框使用alert类来创建，用alert-link可以创建警告链接，alert-dismissible可以关闭警告，关闭警告需要在按钮元素或链接里面加上btn-close类和 data-bs-dismiss="alert"，用fade和show可以设置关闭警告框的动画。

2.按钮可以在<a><button><input> 元素中设置，按钮的大小用btn-lg和btn-sm设置，块级按钮用d-grid类设置,active类可以使按钮显示为被按下的状态,disabled 属性使按钮不可以点击，用spinner可以设置加载器按钮。按钮组就是将一系列按钮组合在一起，用btn-group类来实现，按钮组有水平并排也可以有垂直按钮组，嵌套按钮组是在一个按钮里设置下拉菜单，用到了dropdown-toggle属性和data-toggle类。

3.徽章主要是在span元素当中用badge类来设置，bg可以设置徽章颜色，rounded-pill可以设置徽章形状为胶囊型，还可以结合button设置button元素内的徽章。

4.

2023.11.29

五、进度条、加载器

1.进度条：在父元素中用progress类，子元素中用progress-bar类可以有进度条的效果，子元素中用style属性可以设置进度条的宽和高，用progress-bar-striped类可以设置为条纹样式，progress-bar-animated可以设置有动画的条纹效果。

2.加载器：加载器用spinner类来创建，spianner-border设置旋转的加载器，spinner-grow设置增长的加载器，spinner-*-sm可以设置较小的加载器，加载器还可以放在一个按钮里。用上下文类text可以设置颜色。

3.

2023.11.30

六、分页列表组和卡片

1.分页：实现分页用pagination类结合序列标签（ul、li)来完成，li中需要添加page-item,如果要添加链接需要在链接标签里添加page-link，同前面一样active ,disabled分别可以实现突出显示和禁用显示，justify-content-*可以设置列表的对齐方式，用breadcrumb可以设置分页样式为面包屑，对应的需要在li标签里面应用breadcrumb-item。

列表组：列表组可以是包含无序列表、有链接样式、带编号有序列表、带徽章等的样式，同样列表组可以设置水平列表组，用.list-group-horizontal来实现，active ,disabled分别可以实现突出显示和禁用项目，如果要创建有链接的列表组，需要用div代替ul或ol,用a标签代替li标签，也可以设置是悬停时的灰色效果，用.list-group-item-action来实现，其他样式有：用list-group-flush类可以删除边框和圆角，用上下文类可以为列表项设置颜色，list-group-numbered可以为列表项设置编号。

卡片：卡片用card类来创建，一个卡片包括页眉页脚和内容，在Img标签中可以设置图片的位置，card-img-*可以设置图片和卡片内容的布局关系，即卡片图像的叠加。

2.