1. 什么是组件
组件是一个抽象的概念,是对数据和方法的简单封装。用面向对象思想来说,将一些符合某种规范的类组合在一起就构成了组件,通过组件可以为用户提供某些特定的功能。
组件是构成页面中独立结构单元。是对结构的抽象,它主要以页面结构形式存在,可复用性很强。组件的使用并不复杂,每个组件拥有自己的作用域,每个组件区域之间独立工作,并且互不影响。
组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能,能够根据业务逻辑来实现复杂的项目功能。
2.组件的主要优势
组件可以复用
提高开发效率
组件是模块化的
降低代码之间的4合程度
代码更易维护和管理
3.Bootstrap组件的依赖文件
Bootstrap组件依赖于Bootstrap框架,在实现组件的功能时首先引入依赖文件。
<link rel="stylesheet" href="./js+css/bootstrap.min.css">
<script src="./js+css/jquery-3.6.0.min.js"></script>
<script src="./js+css/bootstrap.bundle.min.js"></script>
对按钮的练习
<!-- btn-lg 设置按钮比默认按钮变大 -->
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<!-- btn-sm 设置按钮比默认按钮变小 -->
<button type="button" class="btn btn-secondary btn-sm">secondary</button>
<div class="container">
<!-- btn-block 设置块级按钮 -->
<input type="button" class="btn btn-dark btn-block" value="块级按钮" name="" id="">
</div>
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
栅格练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
.row{
height: 50px;
line-height: 50px;
background-color: rgb(238,238,238);
}
.col-md-2{
text-align: center;
}
.col-md-2:hover{
background-color: rgb(212,211,209);
}
.col-md-2:hover .nth-chlid{
display: flex;
}
.nth-chlid{
width: 300px;
display: none;
text-align: center;
position: absolute;
}
.nth-chlid .col-md-4:hover{
background-color: aqua;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">首页</div>
<div class="col-md-2">公开课</div>
<div class="col-md-2">直播课</div>
<div class="col-md-2">金课</div>
<div class="col-md-2">免费课程
<div class="row nth-chlid">
<div class="col-md-4">html</div>
<div class="col-md-4">php</div>
<div class="col-md-4">css</div>
</div>
</div>
<div class="col-md-2">关于我们</div>
</div>
</div>
</body>
</html>
轮播图的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./banner/1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="./banner/2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="./banner/3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</body>
</html>