還是和上一篇首頁一樣給出每一步的注解：
做的有點簡單，但是，以后還是會加深的。畢竟是初學者嘛！
| <html lang="zh-cn"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- | |
| width - viewport的寬度 height - viewport的高度 | |
| initial-scale - 初始的縮放比例 | |
| maximum-scale - 允許用戶縮放到的最大比例 | |
| user-scalable - 用戶是否可以手動縮放 --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> | |
| <!--導入bootstrap.min.css樣式庫--> | |
| <link rel="stylesheet" href="css/bootstrap.min.css"> | |
| <!--導入style樣式庫--> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <!--導入bootstrap.min.js庫--> | |
| <title>首頁</title> | |
| </head> | |
| <!-- | |
| (一) | |
| 導航欄部分的注解： | |
| 頂部導航欄nav標簽的使用，HTML5中的新元素標簽<nav>用來將具有導航性質的鏈接划分在一起，使代碼結構在語義化方面更加准確，同時對於屏幕閱讀器等設備的支持也更好。 | |
| 第一步：創建<nav></nav>標簽。引入樣式navbar,樣式navbar-default是默認的樣式 樣式navbar-fixed-top設置是將導航欄固定在頂部，不隨頁面的滾動而看不見。 | |
| 第二步：創建一個div標簽。引入了響應式樣式容器container的樣式，相當一個可以盛放東西的籃子，可以在里面添加東西。 | |
| 第三步：向 <div> 元素添加一個標題 class .navbar-header。當分辨率夠小的時候，有不同的顯示button 就是那個選擇按鈕 span就是橫線。折疊起來的導航欄實際上是一個帶有 class .navbar-toggle 及兩個 data- 元素的按鈕。第一個是 data-toggle，用於告訴 JavaScript 需要對按鈕做什么，第二個是 data-target，指示要切換到哪一個元素。三個帶有 class .icon-bar 的 <span> 創建所謂的漢堡按鈕。這些會切換為 .nav-collapse <div> 中的元素。 | |
| 注意加data-toggle="collapse"。不然不會出現想要的效果。創建一個<img>標簽作為網站的logo。用<a></a>標簽提供鏈接，可以鏈接到任何一個網站。 | |
| 第四步：首先創建一個form標簽，為其引入navbar-form的樣式，navbar-right是在導航欄的右邊。設置提交方式為post。method="post"。然后再創建一個<div>標簽為<div>引入form-group的樣式，<input>設置為text類型的搜索框，（最常見的表單文本字段是輸入框 input。用戶可以在其中輸入大多數必要的表單數據。Bootstrap 提供了對所有原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。適當的 type 聲明是必需的，這樣才能讓 input 獲得完整的樣式。）在里面引入form-control glyphicon-search樣式，placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。。最后再添加一個button按鈕，設置為submit類型，然后再引入樣式btn btn-success這是成功的樣式。 | |
| 第五步：首先創建一個<div>為其引入collapse navbar-collaspse樣式 為其id加上navbar-collapse。然后創建<ul>標簽，為其引入nav navbar-nav navbar-right樣式。最后創建<li>標簽，想要多少個就加多少個<li>。如果是當前的網頁的話，就在<li>引入active的樣式，作用是顯示當前的網頁。用<a>標簽提供超鏈接<span>引入圖片樣式glyhicon 根據需要可設置不同的圖片。這里首頁設為glyhicon-home\資訊設置為glyphicon-list-alt\論壇設置為glyphicon-education\關於設置為glyphicon-question-sign。 | |
| 以上就是導航欄的注解，需要不同效果可以自行修改設置以達到滿意。 | |
| --> | |
| <!-- | |
| （二） | |
| Bootstrap 支持的另一個特性，超大屏幕（Jumbotron）。 | |
| 顧名思義該組件可以增加標題的大小，並為登陸頁面內容添加更多的外邊距（margin）。使用超大屏幕（Jumbotron）的步驟如下： | |
| 創建一個帶有 class .jumbotron. 的容器 <div>。然后再創建class.container的容器<div>.可以隨意添加需要的內容。 | |
| --> | |
| <!-- | |
| （三） | |
| 第一步:創建一個帶有 class .container 的容器 <div>。 | |
| 第二步:然后再創建一個帶有class.row的<div> | |
| 第三步:（1）最后使用Grid系統的單元col-md-8樣式插件為了在內容中嵌套默認的網格，（2）添加一個新的div .container-fluid，並再創一個新的div.row.info-content 列內添加一組 div.col-md-* 列,被嵌套的行應包含一組列。根據需要可以重復（2）的步驟，以達到更好的效果。 | |
| --> | |
| <!-- | |
| （四） | |
| 第一步:創建div.col-md-4 info-right -hidden-xs hidden-sm。 | |
| 第二步:創建<blockquote>標簽，可以隨意添加東西。 | |
| 第三步:創建div.container-fluid的容器,在容器里面創建div.row添加內容。創建div.widget管理標簽雲，再創建一個新的div.content tag-cloud的<div>，在里面添加內容。就實現了標簽雲的效果。 | |
| --> | |
| <!-- | |
| (五) | |
| 網站<footer>部分注解 | |
| 第一步：首先創建<footer>標簽，引入main-footer樣式。再創建一個<div>標簽，引入container樣式。作用:凸顯居中。 | |
| 第二步：然后創建一個<div>引入row樣式。運用Grid系統的單元在另創建的<div>里面引入col-sm-4樣式。 | |
| 第三步：最后再創建<div class="col-sm-4">包括起來，另外創建<div class="content tag-cloud">（標簽雲）可以設置多個標簽雲 | |
| --> | |
| <body> | |
| <nav class="navbar navbar-default navbar-fixed-top"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <a href="index.html" class="navbar-brand logo"> | |
| <img src="img/logo.jpg" alt="WO世界"> | |
| </a> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| </div> | |
| <form class="navbar-form navbar-right " role="search"> | |
| <div class="form-group"> | |
| <input type="text" class="form-control glyphicon-search" placeholder="搜索"> | |
| </div> | |
| <button type="submit" class="btn btn-success">GO</button> | |
| </form> | |
| <div class="collapse navbar-collapse" id="navbar-collapse"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li> | |
| <a href="index.html"> | |
| <span class="glyphicon glyphicon-home"> | |
| </span> | |
| 首頁 | |
| </a> | |
| </li> | |
| <li class="active"> | |
| <a href="information.html"> | |
| <span class="glyphicon glyphicon-list-alt"> | |
| </span> | |
| 資訊 | |
| </a> | |
| </li> | |
| <li> | |
| <a href="luntang.html"> | |
| <span class="glyphicon glyphicon-education" | |
| > | |
| </span> | |
| 論壇 | |
| </a> | |
| </li> | |
| <li> | |
| <a href="about.html"> | |
| <span class="glyphicon glyphicon-question-sign"> | |
| </span> | |
| 關於 | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="jumbotron"> | |
| <div class="container"> | |
| <hgroup> | |
| <h1>資訊</h1> | |
| <h4>我們喜歡就好...</h4> | |
| </hgroup> | |
| </div> | |
| </div> | |
| <div id="information"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-8"> | |
| <div class="container-fluid" style="padding:0;"> | |
| <div class="row info-content"> | |
| <div class="col-md-5 col-sm-5 col-xs-5"> | |
| <img src="img/php.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7"> | |
| <h4>你喜歡就好!</h4> | |
| <p class="hidden-xs">就是這樣6666666</p> | |
| <p>admin 17/4/27</p> | |
| </div> | |
| </div> | |
| <div class="row info-content"> | |
| <div class="col-md-5 col-sm-5 col-xs-5"> | |
| <img src="img/php.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7"> | |
| <h4>你喜歡就好!</h4> | |
| <p class="hidden-xs">就是這樣6666666</p> | |
| <p>admin 17/4/27</p> | |
| </div> | |
| </div> | |
| <div class="row info-content"> | |
| <div class="col-md-5 col-sm-5 col-xs-5"> | |
| <img src="img/php.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7"> | |
| <h4>你喜歡就好!</h4> | |
| <p class="hidden-xs">就是這樣6666666</p> | |
| <p>admin 17/4/27</p> | |
| </div> | |
| </div> | |
| <div class="row info-content"> | |
| <div class="col-md-5 col-sm-5 col-xs-5"> | |
| <img src="img/php.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7"> | |
| <h4>你喜歡就好!</h4> | |
| <p class="hidden-xs">就是這樣6666666</p> | |
| <p>admin 17/4/27</p> | |
| </div> | |
| </div> | |
| <div class="row info-content"> | |
| <div class="col-md-5 col-sm-5 col-xs-5"> | |
| <img src="img/php.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7"> | |
| <h4>你喜歡就好!</h4> | |
| <p class="hidden-xs">就是這樣6666666</p> | |
| <p>admin 17/4/27</p> | |
| </div> | |
| </div> | |
| <div class="row info-content"> | |
| <div class="col-md-5 col-sm-5 col-xs-5"> | |
| <img src="img/php.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7"> | |
| <h4>你喜歡就好!</h4> | |
| <p class="hidden-xs">就是這樣6666666</p> | |
| <p>admin 17/4/27</p> | |
| </div> | |
| </div> | |
| <div class="row info-content"> | |
| <div class="col-md-5 col-sm-5 col-xs-5"> | |
| <img src="img/php.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7"> | |
| <h4>你喜歡就好!</h4> | |
| <p class="hidden-xs">就是這樣6666666</p> | |
| <p>admin 17/4/27</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4 info-right hidden-xs hidden-sm"> | |
| <blockquote> | |
| <h2>熱門資訊</h2> | |
| </blockquote> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="widget"> | |
| <h4 class="title">社區</h4> | |
| <div class="content community"> | |
| <p>QQ群：462694081</p> | |
| <p> | |
| <a href="#" title="Laravel中文網問答社區"> | |
| <i class="fa fa-comments"></i>問答社區 | |
| </a> | |
| </p> | |
| <div class="widget"> | |
| <h4 class="title">標簽雲</h4> | |
| <div class="content tag-cloud"> | |
| <a href="#">Laravel 5.2</a> | |
| <a href="#">Spark</a> | |
| <a href="#">鏡像</a><br/> | |
| <a href="#">新版本發布</a> | |
| <a href="#">LTS</a><br/> | |
| <a href="#">微框架</a><br/> | |
| <a href="#">Lumen</a> | |
| <a href="#">命名空間</a> | |
| <a href="#">Laravel4</a><br/> | |
| <a href="#">Whoops</a> | |
| <a href="#">Event</a> | |
| <a href="#">升級</a> | |
| <a href="#">laravle5</a> | |
| <a href="#">錯誤頁</a><br/> | |
| <a href="#">Laravel 5</a> | |
| <a href="#">Artisan</a> | |
| <a href="#">Laravel 5.1</a> | |
| <a href="#">Lravel</a> | |
| <a href="#">...</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> | |
| <img src="img/H5.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> | |
| <h4>喜歡</h4> | |
| <p>66</p> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> | |
| <img src="img/H5.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> | |
| <h4>喜歡</h4> | |
| <p>66</p> | |
| </div> | |
| </div><div class="row"> | |
| <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> | |
| <img src="img/H5.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> | |
| <h4>喜歡</h4> | |
| <p>66</p> | |
| </div> | |
| </div><div class="row"> | |
| <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> | |
| <img src="img/H5.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> | |
| <h4>喜歡</h4> | |
| <p>66</p> | |
| </div> | |
| </div><div class="row"> | |
| <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> | |
| <img src="img/H5.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> | |
| <h4>喜歡</h4> | |
| <p>66</p> | |
| </div> | |
| </div><div class="row"> | |
| <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0; padding: 0"> | |
| <img src="img/H5.jpg" class="img-responsive" alt=""> | |
| </div> | |
| <div class="col-md-7 col-sm-7 col-xs-7" style="padding-right: 0"> | |
| <h4>喜歡</h4> | |
| <p>66</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="main-footer bj"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <div class="widget"> | |
| <h4 class="title">友情鏈接</h4> | |
| <div class="content friend-links"> | |
| <a href="#" target="_blank">Bootstrap中文網</a> | |
| <a href="#" title="Laravel中文網" target="_blank">Laravel中文網</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-sm-4"> | |
| <div class="widget"> | |
| <h4 class="title">我們用到的技術</h4> | |
| <div class="content tag-cloud"> | |
| <a href="#" target="_blank">Bootstrap</a> | |
| <a href="#" target="_blank">Ghost</a> | |
| <a href="#" target="_blank">BootCDN</a> | |
| <a href="#" target="_blank">Grunt</a> | |
| <a href="#" target="_blank">jQuery</a> | |
| <a href="#" target="_blank">Babeljs</a> | |
| <a href="#" target="_blank">Lodash</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="padding-top:5px;"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <div class="widget"> | |
| <h4 class="title">標簽雲</h4> | |
| <div class="content tag-cloud"> | |
| <a href="#">Laravel</a> | |
| <a href="#">Laravel入門教程</a> | |
| <a href="#">Laravel 5</a> | |
| <a href="#">Laravel 5.2</a><br/> | |
| <a href="#">Eloquent</a><br/> | |
| <a href="#">新版本發布</a> | |
| <a href="#">Laravel 5.1</a> | |
| <a href="#">laravle5</a> | |
| <a href="#">Composer</a> | |
| <a href="#">PHP</a><br/> | |
| <a href="#">ORM</a> | |
| <a href="#">Artisan</a> | |
| <a href="#">Lumen</a> | |
| <a href="#">LTS</a> | |
| <a href="#">安裝</a> | |
| <a href="#">...</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |