继上一篇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>