Bootstrap搭首页

目录：

一、首页轮播图实现
    组件：轮播-Carousel

二、首页书籍分类实现
    组件：列表组-List group

三、首页新书上架&热门书籍实现
    页面内容：画像-Figure

四、首页整合
    完善轮播图（左右箭头 指示灯样式）
    完善新书上架&热门书籍
        

五、实现登录&注册页面
    组件：表单-Forms

案例1：首页轮播图实现

<div class="row" style="background-color: yellow;">
           <div class="col">
           <!-- 上轮播图-->
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img src="img/lb1.png" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img src="img/lb2.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img src="img/lb3.jpg" class="d-block w-100" alt="...">
                </div>
              <div class="carousel-item">
                <img src="img/lb4.jpg" class="d-block w-100" alt="...">
              </div>
              </div>
              <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </button>
            </div>
           </div>

 案例2：首页书籍分类实现

<div class="row" style="background-color: skyblue;">
        <div class="col-3"style="background-color: blueviolet;">
          <!-- 书籍分类 -->
          <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
              书籍分类
            </a>
            <a href="#" class="list-group-item list-group-item-action">悬疑</a>
            <a href="#" class="list-group-item list-group-item-action">言情</a>
            <a href="#" class="list-group-item list-group-item-action">教育</a>
            <a href="#" class="list-group-item list-group-item-action">科幻</a>
            <a href="#" class="list-group-item list-group-item-action">青春读物</a>
               <a href="#" class="list-group-item list-group-item-action">儿童读物</a>
            <a href="#" class="list-group-item list-group-item-action list-group-item-primary" >二次元 </a> 
            <a href="#" class="list-group-item list-group-item-action">历史文学</a>
            <a href="#" class="list-group-item list-group-item-action">武侠</a>
            <a href="#" class="list-group-item list-group-item-action">都市</a>
            <a href="#" class="list-group-item list-group-item-action disabled">军事</a>
          </div>
        </div>

案例3：首页新书上架&热门书籍实现

<!-- 下新书上架-热门书籍 -->
       <div class="row" style="background-color: hotpink;">
         <div class="col">
         <figure class="figure">
           <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
           <figcaption class="figure-caption text-right">冷间谍</figcaption>
         </figure>
         </div>
         
         <div class="col">
         <figure class="figure">
           <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
           <figcaption class="figure-caption text-right">冷间谍</figcaption>
         </figure>
         </div>
         
         <div class="col">
         <figure class="figure">
           <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
           <figcaption class="figure-caption text-right">冷间谍</figcaption>
         </figure>
         </div>
         
         <div class="col">
         <figure class="figure">
           <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
           <figcaption class="figure-caption text-right">冷间谍</figcaption>
         </figure>
         </div>
         
         <div class="col">
         <figure class="figure">
           <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
           <figcaption class="figure-caption text-right">冷间谍</figcaption>
         </figure>
         </div>
       </div>
       <!-- 第二行-->
       <div class="row" style="background-color: hotpink;">
         <div class="col">
         <figure class="figure">
           <img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
           <figcaption class="figure-caption text-right">冷间谍</figcaption>
         </figure>
         </div>
         
         <div class="col">
         <figure class="figure">
           <img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
           <figcaption class="figure-caption text-right">冷间谍</figcaption>
         </figure>
         </div>
         
         <div class="col">
         <figure class="figure">
           <img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
           <figcaption class="figure-caption text-right">冷间谍</figcaption>
         </figure>
         </div>
         
         <div class="col">
         <figure class="figure">
           <img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
           <figcaption class="figure-caption text-right">冷间谍</figcaption>
         </figure>
         </div>
         
         <div class="col">
         <figure class="figure">
           <img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
           <figcaption class="figure-caption text-right">冷间谍</figcaption>
         </figure>
         </div>
       </div>

案例5：实现登录&注册页面

<form>
      <div class="form-group">
        <h2>用户登录</h2>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
      </div>
      <div class="form-group">
        <input type="password" class="form-control" id="exampleInputPassword1">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Remember Me</label>
      </div>
      <button type="submit" class="btn btn-primary">登录/注册</button>
      <div class="form-group">
        <br/>
        <label class="form-check-label" for="exampleCheck1">&copy;2007-2022</label>
      </div>
    
    </form>