Bootstrap

最新推荐文章于 2024-08-27 15:45:31 发布

依墨~

最新推荐文章于 2024-08-27 15:45:31 发布

阅读量160

点赞数

文章标签： bootstrap html 前端

本文链接：https://blog.csdn.net/m0_62073591/article/details/126417032

版权

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>

依墨~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

是对结构的抽象，它主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作，并且互不影响。组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。Bootstrap组件依赖于Bootstrap框架，在实现组件的功能时首先引入依赖文件。降低代码之间的4合程度。...
复制链接

扫一扫