我接着前面的一篇布局接着写，前一篇我已经完成了导航条和广告的布局。
开始继续码起来：
我想最终实现的效果图是这样的，如下：分了三个页面截图，太大了：
接着上次的未完成的，继续码起来：
第五步、增加栅格系统，我选择了三列的布局col-md-4;满格是12，4是12的三分之一，还可以响应式布局，设置多个栅格：
<div> <div> <div> <img src="https://www.jb51.net/image/3.jpg" alt="animal1"> <h2>animal1</h2> <p>林卡酒店刚说风寒看到个后面发的搜房大机构老夫</p> <p><a href="#">click me</a></p> </div> <div> <img src="https://www.jb51.net/image/3.jpg" alt="animal1"> <h2>animal1</h2> <p>林卡酒店刚说风寒看到个后面发的搜房大机构老夫</p> <p><a href="#">click me</a></p> </div> <div> <img src="https://www.jb51.net/image/3.jpg" alt="animal1"> <h2>animal1</h2> <p>林卡酒店刚说风寒看到个后面发的搜房大机构老夫</p> <p><a href="#">click me</a></p> </div> </div> </div>
1）栅格必须在container 或 container-fluent （满屏）的div里面，这样可以自动赋予合适的排列（aligment）和内补（padding）。
2）使 id为"tag_container"，类为col-md-4的部分居中对齐：
#tag_container .col-md-4{ text-align: center; }
第六步、设置一行间距，分割上下部分
<hr></hr>
css为
hr .divider{ margin:40px; }
第七步、标签页的制作,下图是三个标签页的效果图：
1）标签页的原理：
<ul role="tablist"> <li><a href="#an1" role="tab" data-toggle="tab">animal1</a></li> <li><a href="#an2" role="tab" data-toggle="tab">animal2</a></li> <li><a href="#an3" role="tab" data-toggle="tab">animal3</a></li> </ul> <div> <div> </div> <div> </div> <div></div> </div>
标签页结构是：ul列表声明标签，并且标注class="nav nav-tabs" role="tablist"
li标签里的a链接标注role="tab" data-toggle="tab"，这样才可以具有标签页打开页面的功能，href="#an1"每个标签页的href分别链接到下面的显示布局
展开的布局结构：<div>里面，每个标签页一个panel ，注意id与上面的标签页相互映射，为了可以打开该页面。<div>
2）增加标签页面里面的布局
<ul role="tablist"> <li><a href="#an1" role="tab" data-toggle="tab">animal1</a></li> <li><a href="#an2" role="tab" data-toggle="tab">animal2</a></li> <li><a href="#an3" role="tab" data-toggle="tab">animal3</a></li> </ul> <div> <div> <div> <div> <h2>Animal1 <span>疯狂动物城</span></h2> <p>ajdkgjfd咯见到噶是开发的价格啊的时间覅技术的飞机如果大使馆四国警方日结果的代价K歌人工吊丧irjeigrugitajdokgjijrgi</p> </div> <div> <img src="https://www.jb51.net/image/1.jpg"> </div> </div> </div> <div> <div> <div> <h2>Animal2 <span>疯狂动物城</span></h2> <p>ajdkgjfd咯见到噶是开发的价格啊的时间覅技术的飞机如果大使馆四国警方日结果的代价K歌人工吊丧irjeigrugitajdokgjijrgi</p> </div> <div> <img src="https://www.jb51.net/image/2.jpg"> </div> </div> </div> <div> <div> <div> <h2>Animal3 <span>疯狂动物城</span></h2> <p>ajdkgjfd咯见到噶是开发的价格啊的时间覅技术的飞机如果大使馆四国警方日结果的代价K歌人工吊丧irjeigrugitajdokgjijrgi</p> </div> <div> <img src="https://www.jb51.net/image/3.jpg"> </div> </div> </div>
1）设置标签页的上边距
.feature{ padding: 30px 0 }
2）设置标签页的题目字体等
.feature-heading{ font-size: 50px; color:#2a6496; margin-top: 120px; }
3）设置标签页的副标题格式：
.feature-heading .text-muted{ font-size: 28px; color: #999; }
第八步、增加底部版权声明，效果图如下：
<footer> <p><a href="#top">回到顶部</a></p> <p>@2016 rongyu制</p> </footer>
注意：class="pull-right"可以将元素拉到右侧，这是bootstrap的css的一个功能。
第九步、增加关于的弹出框按钮：
