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

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

<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. learn OpenStack by picture

  2. dialog和dialogFragment的使用及常用问题

    今天比较懒,只是列举了一些网址 弹窗之一:dialogFragment的使用 https://blog.csdn.net/sinat_31057219/article/details/76979246 ...

  3. 跨平台移动开发_PhoneGap 再次点击返回键切换到桌面效果

    PhoneGap 再次点击返回键切换到桌面效果 相关代码 <!DOCTYPE html> <html> <head> <title> PhoneGap ...

  4. AMP+EPP3.0的开发环境配置

    经过摸索,总结出下列Apache.MySQL.PHP.EPP.ZendDebugger的开发环境配置方法: 版本: Apache: Apache-httpd-2.2.25-win32-x86-no_s ...

  5. PHP 数字转汉字函数

    /** * 数字转汉字描述 */ function numToStr($num) { // 判断正确数字 if (!preg_match('/^(\d*)(\.\d+)?$/', $num)) ret ...

  6. javax.servlet.ServletException: java.lang.NoClassDefFoundError: javax/el/ELResolver错误解决办法

    今天不用eclipse.myeclipse等开发工具,纯手写JSP页面(有点作死)时突然出现以前从来没遇到过的问题,报错如下: HTTP Status 500 - java.lang.NoClassD ...

  7. django-1-应用开发基本套路

    Django 开发基本流程 创建项目 创建应用 修改配置文件 设计数据模型 后台管理注册 编写业务视图 编写模板文件 设置URL 访问测试/调试 部署上线 创建项目 django-admin star ...

  8. C# linq to sql

    参考文章地址:http://www.cnblogs.com/yubaolee/p/BestLinqQuery.html   以下是我自己的总结: 表结构: 本文全部代码基于:UserInfo与Clas ...

  9. HTML专题

    1. 在<form><form/>标签里面的<button>标签要设置type="button",否则可能会在点击按钮时自动提交这个表单 2. ...

  10. 用trie树实现输入提示功能，输入php函数名，提示php函数

    参照刘汝佳的trie树 结构体 #include "stdio.h" #include "stdlib.h" #include "string.h&q ...