还是和上一篇首页一样给出每一步的注解：

做的有点简单，但是，以后还是会加深的。毕竟是初学者嘛！

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

继上一篇bootstrap框架（首页）弄的资讯页面的更多相关文章

  1. 安装php rabbitmq扩展，继上一篇安装Rabbitmq

    1 安装 rabbitmq-c,C 与 RabbitMQ 通信需要依赖这个库,这里只贴出正确的步骤,错误类型太多,不一一举例,大部分都是安装问题,缺少组件,安装目录问题 git clone git:/ ...

  2. 接入上一篇SSM框架整合示例

    需要创建相应的包与文件夹 Book数据表作为本示例数据 搭建项目开始 首先有bean后 private int id; private String name; private int cnt; 第一 ...

  3. 继上一篇随笔，优化3张以上图片轮播React组件

    import React from 'react'; import PropTypes from 'prop-types'; import {getSwipeWay} from '../utils/s ...

  4. 用bootstrap框架弄的网站。（首页）

    网站的每一处代码都加上注解,以便浏览! 效果图: <!doctype html>   <html lang="zh-cn">   <head> ...

  5. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  6. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  7. UI设计实战篇——利用Bootstrap框架制作查询页面的界面

    Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...

  8. (转)UI设计实战篇——利用Bootstrap框架制作查询页面的界面

    原文地址:http://www.cnblogs.com/grenet/p/3413085.html Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺 ...

  9. Bootstrap框架(基础篇)

    本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...

随机推荐

  1. 统计学中的P值与显著性的意义

    统计学意义(p值) 结果的统计学意义是结果真实程度(能够代表总体)的一种估计方法.专业上,p值为结果可信程度的一个递减指标,p值越大,我们越不能认为样本中变量的关联是总体中各变量关联的可靠指标.p值是 ...

  2. sql server中将自增长列归零

    一个项目完成后数据库中会有很多无用的测试数据,可以使用delete * 将数据全部删除,但自增长列(一般是主键)基数不会归零,使用TRUNCATE函数可以将表中数据全部删除,并且将自增长列基数归零.一 ...

  3. struts1.3.10 和 hibernate 3.3.2 一起加载时 出现javax.servlet.ServletException: java.lang.NoSuchMethodError: antlr.collections.A 错误

    struts1.3.10 需要导入一个 antlr-2.7.2.jar 的jar包: hibernate 3.3.2 需要导入一个 antlr-2.7.6.jar 的jar包,这两个包有冲突,所以需要 ...

  4. 使用canvas来绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. HCNA多区域OSPF配置

    1.拓扑图 2.各路由器配置角本 ospf 多区域配置 #R5配置 sys sysname AR5 interface s2// ip add 10.0.35.5 255.255.255.0 inte ...

  6. adb工具包究竟能帮我们做什么？

    adb工具包主要作用于什么呢?应该有很多用户都不了解adb,那就一起来了解一下吧!adb的全称为Android Debug Bridge,就是起到调试桥的作用. 借助adb工具,我们可以管理设备或手机 ...

  7. day1 python 介绍、基本语法、流程控制

    请查看我的云笔记链接: http://note.youdao.com/noteshare?id=0ea7425d3e3669800cb0d73f7ec8865d&sub=D87B4BF820C ...

  8. mysql：删除表数据drop、truncate和delete的用法

    程度从强到弱 1.drop  table tb        drop将表格直接删除,没有办法找回 2.truncate (table) tb       删除表中的所有数据,不能与where一起使用 ...

  9. March 14 2017 Week 11 Tuesday

    Thinking will not overcome fear but action will. 空想终日惶恐,行动方可无惧. As the deadline comes closer and clo ...

  10. oozie fork join结点

    oozie可以用fork和join节点进行多任务并行处理,同时fork和join也是同时出现,缺一不可. 语法: <workflow-app name="[WF-DEF-NAME]&q ...