本文實例分享了第一個Bootstrap頁面的實現代碼，供大家參考，具體內容如下
效果圖：
實現代碼：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /><!--為了確保適當的繪製和触屏縮放，需要在<head> 之中添加viewport 元數據標籤。 --> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script> <script src="js/bootstrap.min.js"></script> <style> .masthead{ padding: 110px 0px 110px; margin-bottom: 0px; } .masthead:after{ content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(img/bg1.png) repeat center center; opacity: 0.4; } .masthead h1{ font-weight: 700; font-size: 700%; } .active{font-size: 120%;font-weight: bold;} .masthead-a{ opacity: 0.5; color: white; font-size: medium; } .masthead-a:hover{ color: white; opacity: 1; } .modal-header li i{opacity: 0.5;} .text-align{ display: inline; } .img-ls{ width: 23%; border: 1px solid hsl(0, 0%, 87%); margin-right: 2%; padding: 4px 0px; margin-bottom: 6%; min-height: 350px; max-height: 600px; float: left; } .img-ls img{ width: 97%; height: auto; } .img-ls img:hover{ cursor: pointer; } .footer{ padding: 50px 50px; } .navbar-nav li{display: inline;} </style> </head> <body> <div> <!-- 定義個內部框架表現的基調,位置大小背景等--> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <ul><li><a href="#">Bootstrap中文網</a></li></ul> <div role="navigation"> <ul> <li><a href="#">Bootstrap2中文文檔</a></li> <li><a href="#">Bootstrap3中文文檔</a></li> <li><a href="#">Bootstrap 4.0 預覽</a></li> <li><a href="#">Less 教程</a></li> <li><a href="#">jQuery API</a></li> <li><a href="#">網站實例</a></li> <li><a href="#">前端高薪職位</a></li> <li><a href="#">關於</a></li> </ul> </div> </div> </div> <div> <div> <h1>Bootstrap</h1> <h2>簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。 </h2> <p><a href="#">Bootstrap3中文文檔(v3.3.5)</a></p> <p><a href="#">Bootstrap2中文文檔(v2.3.2)</a></p> </div> </div> <div> <div> <ul> <li>Bootstrap技術交流群：318630708 <i>|</i> </li> <li>Bootstrap問答社區<i>|</i> </li> <li>新浪微博：@Bootstrap中文網</li> </ul> </div> </div> <div> <div> <div> <h2>Bootstrap相關優質項目推薦</h2> <p>這些項目或者是對Bootstrap進行了有益的補充，或者是基於Bootstrap開發的</p> </div> <div> <img src="img/codeguide.png" /> <h3> <a href="javascript:void(0)">Bootstrap 編碼規範<br/><small>by @mdo</small></a> </h3> <p> Bootstrap 編碼規範：編寫靈活、穩定、高質量的HTML 和CSS 代碼的規範。 </p> </div> <div> <img src="img/jqueryapi.png" /> <h3> <a href="javascript:void(0)">jQuery API <br/><small>中文手冊</small></a> </h3> <p> 根據最新的jQuery 1.11.x 和2.1.x 版本翻譯的jQuery API 中文文檔/手冊。 </p> </div> <div> <img src="img/w3schools.png" /> <h3> <a href="javascript:void(0)">w3schools<br/><small>原版國內鏡像</small></a> </h3> <p> w3schools.com 是最受歡迎的前端技術教程網站，但是國內用戶一直不能訪問，並且國內的中文翻譯版本十分陳舊。因此做了個鏡像，希望英文好的同學直接去看原版教程吧！ </p> </div> <div> <img src="img/expo.png"/> <h3> <a href="javascript:void(0)">優站精選<br/><small>Bootstrap網站實例</small></a> </h3> <p> Bootstrap優站精選頻道收集了眾多基於Bootstrap 構建、設計精美的、有創意的網站。 </p> </div> </div> </div> <footer> <div> <div> <img src="img/logo.png" /> <h5> <p>本網站所列開源項目的中文版文檔全部由<a href="javascript:void(0)"><small>Bootstrap中文網</small></a>成員翻譯整理，並全部遵循<a href="javascript:void(0)"><small>CC BY 3.0</small></a>協議發布。 </p> </h5> </div> <div> <div> <h4>關於</h4> <h4> <ul> <li><a href="javascript:void(0)"><small>關於我們</small></a></li> <li><a href="javascript:void(0)"><small>廣告合作</small></a></li> <li><a href="javascript:void(0)"><small>友情鏈接</small></a></li> <li><a href="javascript:void(0)"><small>招聘</small></a></li> </ul> </h4> </div> <div> <h4>聯繫方式</h4> <h4> <ul> <li><a href="javascript:void(0)"><small>新浪微博</small></a></li> <li><a href="javascript:void(0)"><small>電子郵件</small></a></li> </ul> </h4> </div> <div> <h4>旗下網站</h4> <h4> <ul> <li><a href="javascript:void(0)"><small>Laravel中文網</small></a></li> <li><a href="javascript:void(0)"><small>Ghost中國</small></a></li> </ul> </h4> </div> <div> <h4>贊助商</h4> <h4> <ul> <li><a href="javascript:void(0)"><small>UCloud</small></a></li> <li><a href="javascript:void(0)"><small>又拍雲</small></a></li> </ul> </h4> </div> </div> </div> <h4><a href="javascript:void(0)"><small>京ICP備11008151號</small></a><small> | 京公網安備11010802014853</small></h4> </footer> </body></html>相信大家一定還沒過癮吧，下面再為大家分享幾篇文章：
《值得分享和收藏的Bootstrap學習教程》 《Bootstrap學習教程》
以上就是本文的全部內容，希望對大家的學習有所幫助。