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

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

<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. Hbase到Solr同步常用操作

    Hbase到Solr同步常用操作 1. 整体流程 2. 常用操作 Hbase常用操作 Solr常用操作 hbase-index常用操作 3. 其他资料 Lily HBase Indexer使用整理 h ...

  2. 欢迎来到“火龙族智者”的blog

    本blog里有每天更新的比赛感想,新技术体会以及日语学习相关事宜. 主要研究方向是算法,信息安全以及日语. 希望各位能常来看看.

  3. groupadd

    功能说明:用于创建新的用户组. 参数选项:-g gid 指定用户组的gid,除非接-o参数,否则ID值唯一且不为负,如果不指定-g参数,则gid从500开始.-f 新增一个账户,强制覆盖一个已存在的组 ...

  4. Bootstrap Table的使用小结

    1.Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到 这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值 当前rows中有很多 ...

  5. 浅析内存对齐与ANSI C中struct型数据的内存布局-内存对齐规则

    这些问题或许对不少朋友来说还有点模糊,那么本文就试着探究它们背后的秘密. 首先,至少有一点可以肯定,那就是ANSI C保证结构体中各字段在内存中出现的位置是随它们的声明顺序依次递增的,并且第一个字段的 ...

  6. FFT抄袭笔记

    你看我都不好意思说是学习笔记了,毕竟\(FFT\)我怎么可能学得会 那就写一篇抄袭笔记吧ctrl+c真舒服 先从多项式说起吧 1.多项式 我们定义一个多项式 \[F(x)=\sum_{i=0}^{n- ...

  7. 【[SDOI2010]粟粟的书架】

    第一问的做法好像不太一样 首先第二问非常简单,直接在主席树上二分就好了,单次查询的复杂度\(O(logn)\) 第一问并没有想到有二分这种神仙操作,依旧用的是主席树 我们可以对矩阵建出主席树,也就是像 ...

  8. 2018.11.30 zsh: command not found: mysql 的解决办法mac环境下

    系统环境变量的问题.解决办法: 1.打开终端.输入open .zshrc 会出现一个可编辑文档, 2.找到# User configuration部分,在下一行添加source ~/.bash_pro ...

  9. 如何写一个FMDB帮助类？看看runtime吧

    FMDB是一个封装很好的sqllite类库.项目中调用的时候只需要写SQL语句,就能实现数据的CURD.我试过即使手写SQL语句也很麻烦,需要一个字段一个字段的拼上去,而且容易出错.有没有动态获取字段 ...

  10. Win7系统中哪些服务可以关闭？

    Win7系统中很多服务和进程其实大家在平时都用不上,这些服务和进程不仅占用了很大部分的资源,而且还会影响系统的运行速度和安全.我们可以关闭那些不常用的服务和进程来加快系统运行速度,但对于一般的用户来说 ...