学习响应式BootStrap来写融职教育网站，Bootsrtap第二天
生活随笔
收集整理的這篇文章主要介紹了
学习响应式BootStrap来写融职教育网站，Bootsrtap第二天
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
柵格布局
<!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"><style>.col, .col-1, .col-2, .col-3, .col-4, .col-12, .col-sm-6, .col-lg-3 .col-sm-4, .col-sm-12, .col-md-2, .col-md-10 .col-md-6, .col-md, .col-sm-12, .col-lg-4 {background: #AAA;padding: 10px;border: 1px solid #0f6674;}</style></head> <body> <!--頂部導骯開始--> <nav><div class="container"><div class="row"><div class="col">導航</div></div></div> </nav> <!--頂部導骯結束--><!--頭部開始--> <header class="mt-4"><div class="container"><div class="row"><div class="col">LOGO</div><div class="col">SLOGEN</div><div class="col">TOOL BTN</div></div></div> </header> <!--頭部結束--><!--輪播圖開始--> <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第二天的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 美间如何自动抠图?美间自动抠图的方法
- 下一篇： 安装KB5002427后Outlook2