学习响应式BootStrap来写融职教育网站，Bootsrtap第九天手粉琴swiper特效
生活随笔
收集整理的這篇文章主要介紹了
学习响应式BootStrap来写融职教育网站，Bootsrtap第九天手粉琴swiper特效
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>融職教育</title><!-- 移動(dòng)設(shè)備優(yōu)先--><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 引入bootstrap CSS--><link rel="stylesheet" href="css/bootstrap.min.css"><!--引入CSS Swiper插件--><link rel="stylesheet" href="css/swiper.min.css"><!--引入手風(fēng)琴CSS--><link rel="stylesheet" href="css/style.css"></head>
<body>
<!--頂部導(dǎo)骯開始-->
<nav><div class="container"><div class="row"><div class="col shadow-sm"><nav class="navbar p-1 navbar-expand-lg navbar-light bg-white"><a class="navbar-brand navbar-toggler border-0" href="#"><img src="img/logo.png" class="img-fluid" style="max-width: 90px" alt=""></a><button class="navbar-toggler" type="button" data-toggle="collapse"data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link"style="padding-left: 25px; background: url('img/hl.png') no-repeat 0 center;"href="#">融職教育<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link"style="padding-left: 25px; background: url('img/llt.png') no-repeat 0 center;"href="#">學(xué)習(xí)園地</a></li><li class="nav-item"><a class="nav-link"style="padding-left: 25px; background: url('img/zzt.png') no-repeat 0 center;"href="#">智校云</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"data-toggle="dropdown" aria-expanded="false">培養(yǎng)模式</a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Something else here</a></div></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"data-toggle="dropdown" aria-expanded="false">培養(yǎng)方向</a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Something else here</a></div></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Web全棧就業(yè)班 <i class="mark text-danger">￥9800</i> <s>￥19800</s></a></li></ul><div class="form-inline my-2 my-lg-0 nav-item dropdown"><a style="padding-left: 25px; background: url('img/wx.jpg') no-repeat 0 center;"class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"data-toggle="dropdown" aria-expanded="false">咨詢微信</a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Something else here</a></div></div></div></nav></div></div></div>
</nav>
<!--頂部導(dǎo)骯結(jié)束--><!--頭部開始-->
<header class="mt-2 d-none d-lg-block"><div class="container"><div class="row py-4 align-items-center"><div class="col"><a href="#"><img src="img/logo.png" alt="" style="max-width: 120px;height: auto;"></a></div><div class="col pt-3"><blockquote class="blockquote text-center"><p>在工作中學(xué)習(xí)，在學(xué)習(xí)中工作</p></blockquote></div><div class="col"><div class="text-right pt-1"><!-- Example single danger button --><div class="btn-group"><button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"aria-expanded="false">學(xué)習(xí)猿地</button><div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a></div></div><div class="btn-group"><button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"aria-expanded="false">智校云</button><div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a></div></div></div></div></div></div>
</header>
<blockquote class="mt-4 mb-2 blockquote text-center d-lg-none"><p>在工作中學(xué)習(xí)，在學(xué)習(xí)中工作</p>
</blockquote>
<!--頭部結(jié)束--><!--輪播圖移動(dòng)設(shè)備開始-->
<section class="mt-2 d-lg-none"><div class="container"><div class="row"><div class="col"><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><li data-target="#carouselExampleCaptions" data-slide-to="3"></li><li data-target="#carouselExampleCaptions" data-slide-to="4"></li><li data-target="#carouselExampleCaptions" data-slide-to="5"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="img/player/001.jpg" class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>Web全棧就業(yè)班</h5><p>最牛的Web全棧就業(yè)班，前一百學(xué)費(fèi)￥9800</p></div></div><div class="carousel-item"><img src="img/player/2.jpg" class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>Web全棧就業(yè)班</h5><p>最牛的Web全棧就業(yè)班，前一百學(xué)費(fèi)￥9800</p></div></div><div class="carousel-item"><img src="img/player/3.jpg" class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>Web全棧就業(yè)班</h5><p>最牛的Web全棧就業(yè)班，前一百學(xué)費(fèi)￥9800</p></div></div><div class="carousel-item"><img src="img/player/4.jpg" class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>Web全棧就業(yè)班</h5><p>最牛的Web全棧就業(yè)班，前一百學(xué)費(fèi)￥9800</p></div></div><div class="carousel-item"><img src="img/player/5.jpg" class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>Web全棧就業(yè)班</h5><p>最牛的Web全棧就業(yè)班，前一百學(xué)費(fèi)￥9800</p></div></div><div class="carousel-item"><img src="img/player/6.jpg" class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>Web全棧就業(yè)班</h5><p>最牛的Web全棧就業(yè)班，前一百學(xué)費(fèi)￥9800</p></div></div></div><a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div></div></div>
</section>
<!--輪播圖移動(dòng)設(shè)備結(jié)束--><!--輪播圖PC開始-->
<style>.z-Sel {background: transparent url("img/sanj.png") no-repeat 4px center;}
</style>
<section id="player" class="mt-2 d-none d-lg-block"><div class="container"><div class="row"><div class="col"><div id="Carousel" class="carousel"><a class="carousel-item active" href="#" data-color="#6a296e" target="_blank"><imgsrc="img/player/001.jpg" class="d-block w-100" alt=""></a><a class="carousel-item" href="#" data-color="#5600d3" target="_blank"><img src="img/player/2.jpg"class="d-block w-100"alt=""></a><a class="carousel-item" href="#" data-color="#0b0f3e" target="_blank"><img src="img/player/3.jpg"class="d-block w-100"alt=""></a><a class="carousel-item" href="#" data-color="#100e64" target="_blank"><img src="img/player/4.jpg"class="d-block w-100"alt=""></a><a class="carousel-item" href="#" data-color="#4477e2" target="_blank"><img src="img/player/5.jpg"class="d-block w-100"alt=""></a><a class="carousel-item" href="#" data-color="#110e45" target="_blank"><img src="img/player/6.jpg"class="d-block w-100"alt=""></a></div><div class="card w-25 mt-4 border-0 ml-auto shadow py-3"style="font-size: 15px; background: rgba(0,0,0,0.4); line-height: 15px;"><div id="rlist" class="list-group"><a href="#"class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全棧就業(yè)班￥9800</a><a href="#"class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全棧就業(yè)班￥9800</a><a href="#"class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全棧就業(yè)班￥9800</a><a href="#"class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全棧就業(yè)班￥9800</a><a href="#"class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全棧就業(yè)班￥9800</a><a href="#"class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全棧就業(yè)班￥9800</a></div></div></div></div></div>
</section>
<!--輪播圖PC結(jié)束--><!--你的收獲開始-->
<section class="mt-4"><div class="container"><div class="row"><div class="col"><div><h4 class="d-inline-block">你的收獲</h4><small class="text-muted pl-2">掌握的是一門就業(yè)的技術(shù)，為成長(zhǎng)積蓄力量</small></div></div></div><div class="row"><div class="col-4 col-sm-4 col-md"></div><div class="col-4 col-sm-4 col-md"></div><div class="col-4 col-sm-4 col-md"></div><div class="col-4 col-sm-4 col-md"></div><div class="col-4 col-sm-4 col-md"></div><div class="col-4 col-sm-4 col-md"></div></div></div>
</section>
<!--你的收獲結(jié)束--><!--關(guān)注我們開始-->
<section class="mt-4"><div class="container"><div class="row"><div class="col"><div><h4 class="d-inline-block">關(guān)注我們</h4><small class="text-muted pl-2">掌握的是一門就業(yè)的技術(shù)，為成長(zhǎng)積蓄力量</small></div></div></div><div class="row"><div class="col-sm-12 col-lg-8"></div><div class="col-sm-12 col-lg-4"></div></div></div>
</section>
<!--關(guān)注我們結(jié)束--><!--成長(zhǎng)平臺(tái)開始-->
<section class="mt-4"><div class="container"><div class="row"><div class="col"><div><h4 class="d-inline-block">成長(zhǎng)平臺(tái)</h4><small class="text-muted pl-2">掌握的是一門就業(yè)的技術(shù)，為成長(zhǎng)積蓄力量</small></div></div></div><div class="row"><div class="col-1"></div><div class="col"></div><div class="col"></div></div><div class="row"><div class="col-1"></div><div class="col-2"></div><div class="col"></div><div class="col"></div><div class="col-2"></div><div class="col-1"></div></div><div class="row"><div class="col"></div></div></div>
</section>
<!--成長(zhǎng)平臺(tái)結(jié)束--><!--培養(yǎng)模式開始-->
<section class="mt-4"><div class="container"><div class="row"><div class="col"><div><h4 class="d-inline-block">培養(yǎng)模式</h4><small class="text-muted pl-2">掌握的是一門就業(yè)的技術(shù)，為成長(zhǎng)積蓄力量</small></div></div></div><div class="row"><div class="col-1"></div><div class="col-3"></div><div class="col-4"></div><div class="col-3"></div><div class="col-1"></div></div></div>
</section>
<!--培養(yǎng)模式結(jié)束--><!--面授培訓(xùn)開始-->
<section class="mt-4"><div class="container"><div class="row"><div class="col"><div><h4 class="d-inline-block">面授培訓(xùn)</h4><small class="text-muted pl-2">掌握的是一門就業(yè)的技術(shù)，為成長(zhǎng)積蓄力量</small></div></div></div><div class="row"><div class="col-2"></div><div class="col-2"></div><div class="col-1"></div><div class="col-3"></div><div class="col-4"></div></div><div class="row"><div class="col-2"></div><div class="col-2"></div><div class="col-1"></div><div class="col-3"></div><div class="col-4"></div></div><div class="row"><div class="col-2"></div><div class="col-2"></div><div class="col-1"></div><div class="col-3"></div><div class="col-4"></div></div><div class="row"><div class="col-2"></div><div class="col-2"></div><div class="col-1"></div><div class="col-3"></div><div class="col-4"></div></div></div>
</section>
<!--面授培訓(xùn)結(jié)束--><!--實(shí)習(xí)目標(biāo)開始-->
<section class="mt-4"><div class="container"><div class="row"><div class="col"><div><h4 class="d-inline-block">實(shí)習(xí)目標(biāo)</h4><small class="text-muted pl-2">掌握的是一門就業(yè)的技術(shù)，為成長(zhǎng)積蓄力量</small></div></div></div><div class="row"><div class="col-sm-12 col-md-6"></div><div class="col-sm-12 col-md-6"></div><div class="col-sm-12 col-md-6"></div><div class="col-sm-12 col-md-6"></div></div></div>
</section>
<!--實(shí)習(xí)目標(biāo)結(jié)束--><!--你的總監(jiān)開始-->
<section class="mt-4"><div class="container"><div class="row"><div class="col"><div><h4 class="d-inline-block">你的總監(jiān)</h4><small class="text-muted pl-2">掌握的是一門就業(yè)的技術(shù)，為成長(zhǎng)積蓄力量</small></div></div></div><div class="row"><div class="col-3"></div><div class="col"></div></div><div class="row"><div class="col-12 col-sm-6 col-lg-3"></div><div class="col-12 col-sm-6 col-lg-3"></div><div class="col-12 col-sm-6 col-lg-3"></div><div class="col-12 col-sm-6 col-lg-3"></div></div></div>
</section>
<!--你的總監(jiān)結(jié)束--><!--對(duì)標(biāo)培訓(xùn)開始-->
<section class="mt-4"><div class="container"><div class="row"><div class="col"><div><h4 class="d-inline-block">對(duì)標(biāo)培訓(xùn)</h4><small class="text-muted pl-2">掌握的是一門就業(yè)的技術(shù)，為成長(zhǎng)積蓄力量</small></div></div></div><div class="row"><div class="col"></div><div class="col-2"></div><div class="col"></div></div><div class="row"><div class="col"></div><div class="col-2"></div><div class="col"></div></div><div class="row"><div class="col"></div><div class="col-2"></div><div class="col"></div></div><div class="row"><div class="col"></div><div class="col-2"></div><div class="col"></div></div><div class="row"><div class="col"></div><div class="col-2"></div><div class="col"></div></div><div class="row"><div class="col"></div><div class="col-2"></div><div class="col"></div></div><div class="row"><div class="col"></div><div class="col-2"></div><div class="col"></div></div><div class="row"><div class="col"></div><div class="col-2"></div><div class="col"></div></div><div class="row"><div class="col"></div><div class="col-2"></div><div class="col"></div></div><div class="row"><div class="col"></div><div class="col-2"></div><div class="col"></div></div></div>
</section>
<!--對(duì)標(biāo)培訓(xùn)結(jié)束--><!--工作環(huán)境開始-->
<section class="mt-4"><div class="container"><div class="row"><div class="col"><div><h4 class="d-inline-block">工作環(huán)境</h4><small class="text-muted pl-2">掌握的是一門就業(yè)的技術(shù)，為成長(zhǎng)積蓄力量</small></div></div></div><!--PC端--><div class="row d-none d-lg-block"><div class="col"><div class="wrap shadow-lg mt-0"><div class="pic1 pic"><div class="pic_num1 pic_num"></div></div><div class="pic2 pic"><div class="pic_num2 pic_num"></div></div><div class="pic3 pic"><div class="pic_num3 pic_num"></div></div><div class="pic4 pic"><div class="pic_num4 pic_num"></div></div><div class="pic5 pic"><div class="pic_num5 pic_num"></div></div><div class="pic6 pic"><div class="pic_num6 pic_num"></div></div></div></div></div><!--移動(dòng)端--><div class="row d-lg-none"><div class="col"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/t1.jpg" class="img-fluid" alt=""></div><div class="swiper-slide"><img src="img/t2.jpg" class="img-fluid" alt=""></div><div class="swiper-slide"><img src="img/t3.jpg" class="img-fluid" alt=""></div><div class="swiper-slide"><img src="img/t4.jpg" class="img-fluid" alt=""></div><div class="swiper-slide"><img src="img/t5.jpg" class="img-fluid" alt=""></div><div class="swiper-slide"><img src="img/t6.jpg" class="img-fluid" alt=""></div></div></div></div></div></div>
</section>
<!--工作環(huán)境結(jié)束--><!--頁(yè)腳開始-->
<footer class="mt-4 bg-dark text-light small"><div class="container"><div class="row pt-3 pb-5"><div class="col-sm-12 col-md-10"><div class="pt-4"><p class="mb-2">EduWork 是智校云旗下專注程序員培養(yǎng)的實(shí)習(xí)平臺(tái)。</p><ul class="nav"><li class="nav-item"><a class="nav-link text-white pl-0" href="#">關(guān)于我們</a></li><li class="nav-item"><a class="nav-link text-white pl-0" href="#">關(guān)于我們</a></li><li class="nav-item"><a class="nav-link text-white pl-0" href="#">關(guān)于我們</a></li><li class="nav-item"><a class="nav-link text-white pl-0" href="#">關(guān)于我們</a></li><li class="nav-item"><a class="nav-link text-white pl-0" href="#">關(guān)于我們</a></li></ul><div class="text-muted">?<i>2018-2020</i> 北京智校云網(wǎng)絡(luò)科技有限公司 <span class="mx-3">版權(quán)所有</span> <a class="text-muted" href="#">京ICP備19057319號(hào)</a></div></div></div><div class="col-sm-12 col-md-2 text-md-right text-center p-0"><figure class="figure mt-3"><img src="img/qrcode.png" class="figure-img img-thumbnail" style="max-width: 100px;" alt=""><figcaption class="figure-caption text-center text-light">關(guān)注我們</figcaption></figure></div></div></div>
</footer>
<!--頁(yè)腳結(jié)束--><!--先引入jQuery 再引入popper.js 最后在引入bootstrap.js-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script><!--輪播圖特效-->
<script>$(function () {var ptimer = null;var i = 0;//指定一個(gè)序號(hào)var sum = $("#Carousel a").length;//開啟輪播function startCarousel() {var pbgcolor = $("#Carousel>a").eq(i).attr("data-color");$("#Carousel>a").eq(i).fadeIn().siblings().fadeOut(900, function () {$("#player").css("backgroundColor", pbgcolor);});$("#rlist>a").eq(i).addClass("z-Sel text-white").removeClass("text-white-50").siblings().addClass("text-white-50").removeClass("z-Sel text-white");}//$("#Carousel").hover(function () {clearInterval(ptimer);}, function () {iCarousel();});//自動(dòng)播放函數(shù)function iCarousel() {clearInterval(ptimer);ptimer = setInterval(function () {i++;if (i == sum) {i = 0;}startCarousel();}, 5000);}$("#rlist>a").eq(0).addClass("z-Sel text-white").removeClass("text-white-50");var pbgcolor = $("#Carousel>a").eq(0).attr("data-color");$("#player").css("backgroundColor", pbgcolor);//開始輪播iCarousel();var thimer = null;$("#rlist>a").mouseover(function () {$(this).addClass("text-danger");var obj = $(this);thimer = setTimeout(function () {clearInterval(ptimer);i = obj.index();startCarousel();}, 500);}).mouseout(function () {$(this).removeClass("text-danger");clearInterval(thimer);iCarousel();})})
</script>
<!--輪播圖特效結(jié)束--><!--引入Swiper 的 Js特效-->
<script src="js/swiper.min.js"></script><script>$(function () {var swiper = new Swiper('.swiper-container');})
</script>
<!--引入Swiper 的 Js特效結(jié)束--><!--引入手風(fēng)琴js特效-->
<script src="js/script.js"></script>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的学习响应式BootStrap来写融职教育网站，Bootsrtap第九天手粉琴swiper特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 比亚迪仰望品牌轿车 / 超跑车型、方程豹
- 下一篇： 学习响应式BootStrap来写融职教育