繼上一篇bootstrap框架（首頁）弄的資訊頁面

時間 2019-11-29

原文原文鏈接

仍是和上一篇首頁同樣給出每一步的註解：php

作的有點簡單，可是，之後仍是會加深的。畢竟是初學者嘛！css

<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>