Bootstrap02

最新推荐文章于 2024-10-01 23:23:32 发布

昂761

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量151

点赞数

文章标签： linq webview html

本文链接：https://blog.csdn.net/weixin_65088316/article/details/124532178

版权

案例1：首页轮播图实现

<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>
   <li data-target="#carouselExampleIndicators" data-slide-to="3"></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.jpeg" 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>

把这个代码可以copy到主界面上

如下:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>案例4：首页导航&搜索区域Bootstrap实现&搭首页框架</title>
       
       <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
       
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <style type="text/css">
           .navbar-collapse {
               flex-grow: 0;
               /* 在固定容器中 1代表性扩大占用父容器剩余空间0代表不占用 */
           }
           .form-group{
               width: 300px;/* 高度 */
               margin-left: auto;/* 左间距自适应自动 */
               margin-right: auto;/* 右间距自适应自动 */
               margin-top: 31px;/* 100-38=62/2=31 */
           }
           .ss{
               height: 100px;/* 宽度 */
               margin-top: 30px;/* 上间距 */
               background-color: #DCDCDC;/* 背景颜色 */
           }
       </style>
   </head>
   <body>
       
       <nav class="navbar navbar-expand-lg navbar-light bg-light">
           <div class="container">
               <a class="navbar-brand" href="#">您好，欢迎来到英雄联盟</a>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
               aria-expanded="false" aria-label="Toggle navigation">
                   <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="navbarNav">
                   <ul class="navbar-nav">
                       <li class="nav-item active">
                           <a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a>
                       </li>
                       <li class="nav-item">
                           <a class="nav-link" href="#">登陆</a>
                       </li>
                       <li class="nav-item">
                           <a class="nav-link" href="#">注册</a>
                       </li>
                       <li class="nav-item">
                           <a class="nav-link" href="#">我的购物车</a>
                       </li>
                   </ul>
               </div>
           </div>
       </nav>

<div class="container">
           
           <div class="row ss" >
               <div class="col">
                   
                   <form>
                       <div class="form-group">
                           <div class="input-group mb-3">
                               <input type="text" class="form-control" placeholder="书籍名" aria-label="Recipient's username"
                               aria-describedby="button-addon2">
                               <div class="input-group-append">
                                   <button class="btn btn-primary" type="button" id="button-addon2">查询</button>
                               </div>
                           </div>

</div>
</form>

</div>
           </div>
           
           <div class="row" style="background-color: yellow">
               <div class="col-3">
                   左3为书籍分类
               </div>

<div class="row" style="background-color: paleturquoise">
                       <div class="col">
                           ①新书上架
                       </div>
                       <div class="col">
                           ②新书上架
                       </div>
                       <div class="col">
                           ③新书上架
                       </div>
                       <div class="col">
                           ④新书上架
                       </div>
                       <div class="col">
                           ⑤新书上架
                       </div>
                   </div>

<div class="row" style="background-color: mediumorchid">
                       <div class="col">
                           ①热门书籍
                       </div>
                       <div class="col">
                           ②热门书籍
                       </div>
                       <div class="col">
                           ③热门书籍
                       </div>
                       <div class="col">
                           ④热门书籍
                       </div>
                       <div class="col">
                           ⑤热门书籍
                       </div>
                   </div>

               </div>
           </div>
       </div>

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       
       <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
   </body>
</html>

copy到轮播图的位置就行><；

其他的一样的原理: