Bootstrap框架

最新推荐文章于 2023-12-22 14:12:34 发布

luanma3p

最新推荐文章于 2023-12-22 14:12:34 发布

阅读量489

点赞数 14

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_46170663/article/details/127636375

版权

Bootstrap

1. Boot概述

这个UI框架到目前为止经历了5个大版本，目前我们学习的就是boot5
boot内置了大量的CSS类供元素使用，相当于预先设置好的一个类库，可以直接供需要使用对应样式的HTML标签使用。
也就是说，只要给HTML上加预先设置好的类名，该HTML就会被渲染成预先设定好的样式。

学习UI框架的终极意义
学习UI框架，不是要背会或者是看懂所有的源码
而是要学会如何查文档运用文档
市面上的UI框架很多，企业会用哪个不一定，但工作中百分之八十用框架
Bootstrap文档
学习UI框架的终极意义,学会如何查文档,运用文档.如何查阅文档,如何运用文档的案例
Bootstrap5文档查阅：
https://v5.bootcss.com/docs
各个版本的区别
如果想要使用框架，一定要查看对应版本的手册！
注意：工作中，一定要先看公司使用的框架版本，这个在公司开发手册中体现
版本5的改动比较大，原来JS依赖JQuery，现在不再依赖了，也不再兼容IE
对于很多类名也有改动，最大的改动就是左右，如：以前是float-left现在是float-start
也就是所有的左都变成了start 右变成了end
学习时使用的模板文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础文件</title>
		<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>
	</head>
	<body>
	</body>
</html>

Boot组件

分页
https://v5.bootcss.com/docs/components/pagination/
. pagination 分页的最外层基础类
. page-item 分页项【.disabled禁用状态 .active激活状态】
. page-link 分页中链接的样式
卡片
https://v5.bootcss.com/docs/components/card/
.card 卡片外层的父级基础类
.card-img-top 表示图片的上左上右设置了边框圆角
.card-body 卡片中的主体区域，有间距
.card-title 卡片内容区域的标题部分
.card-text 卡片内容区域的文字描述部分
轮播图 carousel
https://v5.bootcss.com/docs/components/carousel/
最外层
.carousel 轮播图基类
此元素要设置id值供内部的js属性使用，如: #lbt
.slide 如果有设置自动轮播，使用此类，轮播效果为平滑过渡
js属性：data-bs-ride=“carousel” 设置自动轮播
js属性：data-bs-interval=“2000” 设置切换图片的间隔，默认5000(5s)
图片区
.carousel-inner 图片区的最外层
.carousel-item 一个item代表一个可轮播的图片
.active 要显示哪张图片
注意：同一时刻只能显示一张图，底层自动轮播js也是切换这个属性
“上一张"与"下一张"区
. carousel-control-prev 上一张区域
. carousel-control-prev-icon 上一张的图标
js属性：data-bs-target=”#轮播图最外层的id值"
js属性：data-bs-slide=“prev” 控制轮播图选择上一张图片
. carousel-control-next 下一张区域
. carousel-control-next-icon 下一张的图标
js属性：data-bs-target=“#轮播图最外层的id值”
js属性：data-bs-slide=“next” 控制轮播图选择下一张图片
最下方控制区
.carousel-indicators 最下方控制区的最外层
.active 对应的是上方图片区显示哪张图片，哪张图片是激活状态，下方也会对应显示
js属性：data-bs-target="#轮播图最外层的id值 "
js属性：data-bs-slide-to=“0” 要切换到哪张图片，默认从0开始