复习
- 颜色
- 背景色.bg-{color}
- 字体色 .text-{color}
- 边框色 .border .border-{color}
- 按钮色 .btn .btn-{color}
- 连接色 .link-{color}
- 标题相关的
- .h1~.h6 和h标签一样大小
- .display-1~.display-6 比标题标签还大的字号
- 表格
- 基础类.table
- table的背景色table-{color}，可以加给table中的任何结构标签
- 条形纹，隔行变色.table-striped
- 鼠标悬停的背景色.table-hover
- 边框色 .table-bordered 有默认颜色，在家bg-{color}
- td中的垂直对齐方式， .align-{位置} 位置：top，middle，bottom
- 表单
- .form-control ，input的空间
- .form-label label标签的样式
- .input-group 表单组，表单组的固定文本部分.input-group-text
- .form-check 选框组
- 针对单选和多选的选框form-check-input
- .form-check-label 选框的描述文字
- form-select下拉菜单
- 尺寸
- 宽度w-{num}，高度h-{num}，0,25,50,75,100
- vw-100和vh-100 针对视口的尺寸
- 边框
- .border 边框的基础类，.border-{方向}
- border-{num}，0-5
- border-{color}
- 圆角 .rounded ，圆角弧度rounded-{num} 1-3
- .rounded-circle 圆形
- .rounded-pill 胶囊型
- 间距（内外间距）
- m-{num}，p-{num} 0-5
- m-auto
- mt，pt上间距，mb，pb下间距，ms，ps左间距，me，pe右间距
- my，py上下间距，mx，px左右间距
- 响应式 m-{类中缀}-{num}，p-{类中缀}-{num}
- display
- .d-bolck 块级显示
- .d-inline 内联显示
- .d-inline-block 行内块
- .d-flex 弹性盒
- .d-none 元素消失
- 以上类有响应式写法 .d-{类中缀}-{显示形式}
- 浮动
- float-start 左浮动
- float-end 右浮动
- float-none 不浮动
- float-{类中缀}-{方式}
- clearfix 清除浮动。写给父元素
- 定位
- .position-relative 相对定位
- .position-absolute 绝对定位
- .position-fixed 固定定位
- 方向top-{num}，bottom-{num},start-{num},end-{num},0,50,100
- 回移translate-middle 双方向回移元素的50%
- .translate-middle-x
- .translate-middle-y
- 文本对齐
- .text-start 默认文本居左对齐
- .text-end 文本居右对齐
- .text-center 文本居中对齐
- 可使用响应式对齐 .text-{类中缀}-{方向}
- 字体字形
- .fw-bold 加粗体
- .fw-light 细体
- .fst-italic 斜体
- 文本修饰线
- text-decoration-none 无修饰线
- .text-decoration-underline 下划线
- .text-decoration-line-through 删除线
问题的总结
- 背框架名字，被类名
- 拷贝案例
栅格系统
1.栅格系统的底层
栅格系统的底层使用的是flex弹性盒布局，简言之，在栅格系统中就可以使用flex的相关属性。
Flex · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
- 行布局或者列布局
- 是否换行
- 主轴的对齐方式
- 交叉轴对齐方式
- ……
2.栅格布局的行与列
栅格布局分行.row，列在行中.col-{num}num：1-12，每一个行中的列，都可以分12份中的其中n份。
在栅格布局中可以使用flex的属性，row行就是容器，col列就是项目
<div class="row">
<div class="col-4 zdy-h bg-primary"></div>
<div class="col-4 zdy-h bg-danger"></div>
<div class="col-4 zdy-h bg-info"></div>
<div class="col-4 zdy-h bg-success"></div>
<div class="col-4 zdy-h bg-warning"></div>
</div>
3.响应式的栅格布局
响应式支持六个断点，基于媒体查询的。栅格布局使用响应式的布局方式，行row不需要改，需要改的是列的写法。.col-{类中缀}-{num}
- .col-{num}小于sm的时候
- .col-sm-{num}在sm范围的时候
- .col-md-{num}在md范围的时候
- .col-lg-{num}在lg范围的时候
- .col-xl-{num}在xl范围的时候
- .col-xxl-{num}在xxl范围的时候
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap-icons.css">
<script src="../js/bootstrap.bundle.js"></script>
<title>Document</title>
<style></style>
</head>
<body>
<!-- 产品的列表页 products-->
<div class="products">
<div class="container">
<!-- 是一张大的全屏图 -->
<div class="">
<img src="" alt="">
</div>
<!-- row指的是左右两侧的列表和公告区 -->
<div class="row">
<!-- 左侧列表区域 -->
<div class="col-xl-9 col-12" style="background-color: red;height: 300px;"></div>
<!-- 右侧公告区 -->
<div class="col-xl-3 d-none d-xl-block" style="background-color: blue;height: 300px;"></div>
</div>
</div>
</div>
</body>
</html>
4.栅格嵌套使用
嵌套栅格布局，行套列，嵌套也必须是行套列
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
组件
1.按钮
- .btn 按钮的基础类
- .btn-primary 按钮颜色
- .btn-outline-{color}带轮廓线的按钮
- 按钮尺寸.btn-sm,.btn-lg
- 按钮组.btn-group
2.手风琴
Accordion · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
- 手风琴最外层元素
- .accordion基础类
- id="sfq"id属性要写最外层的id值，这个值后面会用到
- 手风琴的其中一组
- .accordion-item手风琴组
- 手风琴组的标题区.accordion-header
- 手风琴组的按钮.accordion-button
- 手风琴组按钮有js功能
- data-bs-toggle="collapse"折叠功能
- data-bs-target="#one"折叠的内容对应折叠元素的id
- 折叠展示区.accordion-collapse
- .collapse消失
- 消失对应的类.show显示类
- 折叠区域因为要被控制打开或折叠因此需要id属性id="one"
<div class="accordion mt-3" id="sfq">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#one">数据管理
</button>
</h2>
<div id="one" class="accordion-collapse collapse show" data-bs-parent="#sfq">
<div class="accordion-body">
第一个手风琴的内容
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#two">
内容管理
</button>
</h2>
<div id="two" class="accordion-collapse collapse" data-bs-parent="#sfq">
<div class="accordion-body">
第二个手风琴内容
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#three">功能页面</button>
</h2>
<div id="three" class="accordion-collapse collapse" data-bs-parent="#sfq">
<div class="accordion-body">
第三个手风琴内容
</div>
</div>
</div>
</div>
3.列表组
List group · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
<ul class="list-group list-group-flush">
<li class="list-group-item">商品列表</li>
<li class="list-group-item">多条件搜索</li>
<li class="list-group-item">添加商品</li>
</ul>
4.图标
需要引入图标的css类库,同时还需要一个文件夹fonts自定义字体的文件夹
<link rel="stylesheet" href="../css/bootstrap-icons.css">
使用方式，和文字相同，使用一个内联元素,图标都有对应文字可以挑选
Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库
<i class="bi-sun"></i>
5.卡片
<div class="card">
<img src="./img/xz-img/products/57b12a31N8f4f75a3.jpeg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">联想x234 128g</h5>
<p class="card-text">￥6499.00</p>
<div class="d-flex mb-2">
<button class="btn btn-primary">-</button>
<input type="text" class="w-25 mx-1">
<button class="btn btn-primary">+</button>
</div>
<a href="#" class="btn btn-primary w-100">加入购物车</a>
</div>
</div>
1402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
