Bootstrap usage

1. Introduce two core files: (note the imported location)



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"

integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">



<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"

integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"

crossorigin="anonymous"></script>

2. Write:

<script>

$('.carousel').carousel({

interval: 2000

})

</script>

3. Introduce jquery



<script src="./js/jquery-3.6.1.min.js"></script>

Use templates: form template and carousel template

<!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>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" 
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
       .form-group{
        width: 500px;
       }
       .form-control{
        width: 350px;
       }
       .txt{
        font-size: 20px;
        color: red;
       }
       .item img{
        width: 100%;
        height: 100%;
       }
       .slide{
        width: 800px;
        margin: 0 auto;
       }
</style>
</head>
<body>
    <form>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
      <!-- 轮播图 -->
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators：底部小圆点 -->
        <ol class="carousel-indicators">
            <!-- 轮播图的图片数和顺序 -->
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>
      
        <!-- Wrapper for slides ：轮播图片-->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="./img/1.jpg" alt="...">
            <div class="carousel-caption">
                <!-- 图片描述信息 -->
              <span class="txt">图片一</span>
            </div>
          </div>
          <div class="item">
            <img src="./img/2.jpg" alt="...">
            <div class="carousel-caption">
                <span class="txt">图片二</span>
            </div>
          </div>

          <div class="item">
            <img src="./img/3.jpg" alt="...">
            <div class="carousel-caption">
                <span class="txt">图片三</span>
            </div>
          </div>
          <div class="item">
            <img src="./img/4.jpg" alt="...">
            <div class="carousel-caption">
                <span class="txt">图片四</span>
            </div>
          </div>
          ...
        </div>
      
        <!-- Controls ：左右箭头-->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
</body> 
<!-- 注意：在最新的Bootstrap核心js文件上方引入jquery -->
<script src="./js/jquery-3.6.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" 
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" 
crossorigin="anonymous"></script>
<script>
    $('.carousel').carousel({
  interval: 2000
})
</script>
</html>

Effect

Use templates: form template and carousel template

Guess you like