利用bootstrap框架 实现响应式布局阿里百秀案例以及遇到的问题！

1、案例分析

/* 分析：

   从宽度为992之后页面的布局 分为 2/7/3.

   先写 最先发生改变的 md：992 -1200；后面都不发生改变

   实现md页面；

   之后调试md前面的页面，用媒体查询并且加权重来实现样式改变！

   */

2、Bootstrap的文件的引入

< link   href = "./css/bootstrap/css/bootstrap.min.css"   rel = "stylesheet" >

< link   rel = "stylesheet"   href = "css/index.css" >

< script   src = "//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" > < / script >

< script   src = "//cdn.bootcss.com/respond.js/1.4.2/respond.min.js" > < / script >

3、页面的实现

    PC端使用流式布局，移动端小页面的时候分情况，怎么方便就怎么使用，注意：浏览器的兼容问题

4、实现的时候出现的问题：

    1>想要让 图片显示自身的大小时，

        设置 max- width : 100%;  表示的是父元素比自己宽时，取自身元素，比自己小时取父元素的宽度！

    2>样式不一样的时候 媒体查询的使用

    3>特定的屏幕下，元素的显示与隐藏的设置

    格式 ：

            特定区域下显示 ： 例如 ：

                    表示的是在超小屏下是显示的 , info一般是额外控制样式。

            特定区域下隐藏：如：   class = "hidden-xs"> 标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活 span>

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/69940672/viewspace-2650301/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69940672/viewspace-2650301/