学习响应式BootStrap来写融职教育网站，Bootsrtap第四天Header处理
生活随笔
收集整理的這篇文章主要介紹了
学习响应式BootStrap来写融职教育网站，Bootsrtap第四天Header处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>融職教育</title><!-- 移動設備優先--><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 引入bootstrap CSS--><link rel="stylesheet" href="css/bootstrap.min.css"></head>
<body>
<!--頂部導骯開始-->
<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="#">學習園地</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">培養模式</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">培養方向</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全棧就業班 <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>
<!--頂部導骯結束--><!--頭部開始-->
<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>在工作中學習，在學習中工作</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">學習猿地</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>在工作中學習，在學習中工作</p>
</blockquote>
<!--頭部結束--><!--輪播圖開始-->
<section class="mt-4"><div class="container"><div class="row"><div class="col">輪播圖</div></div></div>
</section>
<!--輪播圖結束--><!--你的收獲開始-->
<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">掌握的是一門就業的技術，為成長積蓄力量</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>
<!--你的收獲結束--><!--關注我們開始-->
<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">掌握的是一門就業的技術，為成長積蓄力量</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>
<!--關注我們結束--><!--成長平臺開始-->
<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">掌握的是一門就業的技術，為成長積蓄力量</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>
<!--成長平臺結束--><!--培養模式開始-->
<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">掌握的是一門就業的技術，為成長積蓄力量</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>
<!--培養模式結束--><!--面授培訓開始-->
<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">掌握的是一門就業的技術，為成長積蓄力量</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>
<!--面授培訓結束--><!--實習目標開始-->
<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">掌握的是一門就業的技術，為成長積蓄力量</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>
<!--實習目標結束--><!--你的總監開始-->
<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">掌握的是一門就業的技術，為成長積蓄力量</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>
<!--你的總監結束--><!--對標培訓開始-->
<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">掌握的是一門就業的技術，為成長積蓄力量</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>
<!--對標培訓結束--><!--工作環境開始-->
<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">掌握的是一門就業的技術，為成長積蓄力量</small></div></div></div><div class="row"><div class="col"></div></div></div>
</section>
<!--工作環境結束--><!--頁腳開始-->
<footer class="mt-4"><div class="container"><div class="row"><div class="col-sm-12 col-md-10"></div><div class="col-sm-12 col-md-2"></div></div></div>
</footer>
<!--頁腳結束--><!--先引入jQuery 在引入popper.js 最后在引入bootstrap.js-->
<script src="js/jquery-3.4.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
總結
以上是生活随笔為你收集整理的学习响应式BootStrap来写融职教育网站，Bootsrtap第四天Header处理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 世界经济排行，世界各国gdp排名一览
- 下一篇： 股票如何买入卖出