还是和上一篇首页一样给出每一步的注解：
做的有点简单，但是，以后还是会加深的。毕竟是初学者嘛！
| <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> | |