案例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>
案例2：首页书籍分类实现 （组件：列表组-List group）
<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">悬疑</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> </div>
案例3：首页新书上架&热门书籍实现（页面内容：画像-Figure）
<div class="col" > <figure class="figure"> <img src="img/1.png" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption"><p>悬疑类</p></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"><p>悬疑类</p></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"><p>悬疑类</p></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"><p>悬疑类</p></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"><p>悬疑类</p></figcaption> </figure> </div>
整合起来代码展示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例4首页整合</title> <!-- 支持手机端 --> <style type="text/css"> .navbar-collapse { flex-grow: 0; /* 1代表弹性扩大空间 0代表不占用父类容器剩余空间 */ } .ss { height: 100px; background-color: #DCDCDC; margin-top: 20px; } .form-group { width: 300px; /* 宽度 */ margin-left: auto; /* 左间距 自适应 */ margin-right: auto; /* 右间距 自适应 */ margin-top: 31px; } /* 画像 */ .figure { text-align: center; } /* 列表组合轮播图 */ .list-group,#carouselExampleIndicators { margin-top: 30ox; } /* 指示灯部分 */ .carousel-indicators li{ background-color: #005CBF; } /* 新书上架=热门书籍 */ .xxx{ background-image: url(img/title_bj.png);/* 背景图片 */ background-repeat: no-repeat;/* 不平铺 */ color: white;/* 字体颜色 */ font-size: 18px;/* 字体大小 */ margin-top: 20px;/* 上间距 */ padding-left: 20px;/* 左内间距 */ } </style> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- 引入bootstrap的css --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> </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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse float-right" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">登录</a> <a class="nav-link" href="#">注册</a> <a class="nav-link" href="#">我的购物车</a> </div> </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> </from> </div> </div> <div class="row"> <div class="col-3"> <!-- 左三-书籍分类 --> <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">悬疑</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> </div> </div> <div class="col-9"> <!-- 右九--轮博图 新书上架 热门书籍 --> <div class="row"> <div class="col"> <!-- 右九第一行轮播图 --> <div class="row"> <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> <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> </div> </div> <div class="xxx"> 新书上架 </div> <div class="row"> <div class="col"> <figure class="figure"> <img src="img/1.png" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption"> <p>悬疑类</p> </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"> <p>悬疑类</p> </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"> <p>悬疑类</p> </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"> <p>悬疑类</p> </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"> <p>悬疑类</p> </figcaption> </figure> </div> </div> <div class="xxx"> 热销书籍 </div> <div class="row"> <div class="col"> <figure class="figure"> <img src="img/2.png" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption"> <p>悬疑类</p> </figcaption> </figure> </div> <div class="col"> <figure class="figure"> <img src="img/4.png" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption"> <p>悬疑类</p> </figcaption> </figure> </div> <div class="col"> <figure class="figure"> <img src="img/6.png" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption"> <p>悬疑类</p> </figcaption> </figure> </div> <div class="col"> <figure class="figure"> <img src="img/7.png" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption"> <p>悬疑类</p> </figcaption> </figure> </div> <div class="col"> <figure class="figure"> <img src="img/3.png" class="figure-img img-fluid rounded" alt="..."> <figcaption class="figure-caption"> <p>第一商会</p> </figcaption> </figure> </div> </div> </div> </div> <!-- 引入jQuery库 --> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <!-- 引入外部库 --> <script type="text/javascript" src="js/bootstrap.js"></script> </body> </html>
案例5：实现登录&注册页面（组件：表单-Forms）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例5</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- 引入bootstrap的css --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <style type="text/css"> form{ width: 300px;/* 宽度 */ text-align: center;/* 文本居中 */ margin-left: auto;/* 左间距居中 */ margin-right: auto;/* 又见居居中 */ margin-top: 100px;/* 上间距 */ } form button{ width: 300px; margin-bottom: 20px;/* 下间距 */ } </style> </head> <body> <form> <h2>登录界面</h2> <div class="form-group"> <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">记住我</label> </div> <button type="submit" class="btn btn-primary">登录</button> <div class="form-group form-check"> <label class="form-check-label" for="exampleCheck1">©2017-2022</label> </div> </form> <!-- 引入jQuery库 --> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <!-- 引入外部库 --> <script type="text/javascript" src="js/bootstrap.js"></script> </body> </html>
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
