开发者学堂课程【移动 Web 前端开发：信息区域】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8463
信息区域
信息区域介绍
首先需要一个响应式容器：
Container
里边应该有六个容器三个一行。
大屏，中屏显示三列，小屏每个容器占六份：
1/div
结构准备完成，
到端消失，所以加上：
刷新，没有问题。
现在添加内容：
第一个容器里有媒体对象组件，在 bootstrap 文档找到媒体对象里的模板复制下来后添上相关内容：
a href=“#“class="media"> //通过类名确定样式，所以 a 或者 div 都可以。
支付交易保障
银联支付全称保证支付安全
刷新，文字已经有了，现在出现情况是有些文字掉下来了，结构没有问题，只是由于一些高度把其他容器挤下去了，这时候需要对 wjs_info 做一些修饰：
在 index.css 里写入信息区块：
.wjs_info{
padding: 30px o;
border-bottom:1px solid #ccc;
这时候就空开了。
之后需要做一些图标，写入：
.wjs_icon_info : : before{
content: "\e903”;
在 index.html 里：
这时候复制四份，刷新就可以了。
字体有点小，在 index.css 里写入：
.wjs_info .wjs_icon_info{
font-size: 30px;
在 <a>里可以让文字经过的时候有颜色：
在 index.css 里写入：
.wjs_info .media :hover{
color: #e92322;
位置增加一些上下间距：
.wjs_info .media{
padding: 15px 0；
display: block;
这时候版心容器太宽了，找到 .wjs_info 里的 container 查看版心，栅格系统是基于版心内容分成了三个部分，如果把版心缩小一点就可以了。
更改版心宽度：
.wjs_info > .container{
width: 900px;
大中屏设备都没有问题，但是在小屏设备中出现滚动条，所以在小屏设备需要版心容器 750px：
@media (min-width: 768px) and (max-width: 992px){
.wjs_info > .container{
width:750pk;
当 bootstrap 响应式容器满足不了需求的时候，可以自己写入，但需要借助媒体查询。
