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

发布时间:2020-08-11 13:48:32 作者:小威锅XWG907
来源:ITPUB博客 阅读:448


1、案例分析

/* 分析:
   从宽度为992之后页面的布局 分为 2/7/3.
   先写 最先发生改变的 md:992 -1200;后面都不发生改变
   实现md页面;
   之后调试md前面的页面,用媒体查询并且加权重来实现样式改变!

   */


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

2、Bootstrap的文件的引入

<!-- Bootstrap 的文件引入 -->
< link   href = "./css/bootstrap/css/bootstrap.min.css"   rel = "stylesheet" >
< link   rel = "stylesheet"   href = "css/index.css" >

<!-- 条件注释:小于IE9的版本 -->
<!--[if lt IE 9]>
<!--解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题-->
< script   src = "//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" > < / script >

<!--解决ie9以下浏览器对 css3 Media Query  的不识别 -->
< script   src = "//cdn.bootcss.com/respond.js/1.4.2/respond.min.js" > < / script >

3、页面的实现

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

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

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

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

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

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

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

    格式 :

            特定区域下显示 : 例如 : 利用bootstrap框架 实现响应式布局阿里百秀案例以及遇到的问题!

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

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


推荐阅读:
  1. jquery框架和bootstrap框架有什么区别
  2. bootstrap框架有哪些优势

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

bootstrap 布局 以及

上一篇:为什么大部分人做不了架构师?这2点是关键

下一篇:解决phpcms出现内容编码错误的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》