-
最基本的Bootstrap框架使用的HTML页面： 1、<meta name="viewport" content="width=device-width,initial-scale=1.0">(Bootstrap要求必须设置meta标签) /* 默认情况下，UI布局的宽度和移动设备的宽度一致，缩放大小为原始大小 */ 2、<link href="css/bootstrap.min.css" rel="stylesheet"> /*Bootstrap最核心的CSS文件*/ 3、若要兼容IE8/9就需要引入Respond.js文件，通过使用if判断： <!- -[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]- -> 4、 Bootstrap框架在body中的js插件（本节只涉及响应式布局，不用引入这两句句）： <script src="https://code.jquery.com/jquery.js"></script>（min.js依赖于jquery.js，所以在引入min.js前需要先引入该文件，两者共同使用） <script src="js/bootstrap.min.js"></script>（提供了一些事件、数据以及插件的功能）查看全部
-
如图：查看全部
-
响应式布局之bootstrap框架： 1、是一种移动优先的前端框架； 2、优点：写非常少的代码，即可实现多终端的页面适配； 3、源文件主要有两部分构成，即CSS,JS和font字体； 4、bootstrap的源代码是一些Less文件，不改变源代码的情况下可以直接下载编译后的文件； 5、支持几乎所有浏览器，对于IE8/9需要引入Respond.js文件激活IE8/9对Media Query的支持； 6、最好把respond.js和网站部署在同一个域名下，避免跨域问题查看全部
-
CSS3 Media Query 基本语法: 1、内嵌样式：@media screen and (min-width:480px) /*屏幕尺寸 480+ 时应用该规则*/ 2、外部样式：<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px;)">/*屏幕尺寸 480- 时应用该规则*/查看全部
-
CSS3 Media Query 常见属性: device-width，device-height--屏幕宽高（物理上的） width，height--渲染窗口宽高（实际窗口宽高） orientation--设备方向（横屏竖屏） resolution--设备分辨率查看全部
-
如何实现响应式布局 1、css3-Media Query ：最简单的、常用的方式，可以根据不同维度（如用户设备分辨率 等）给用户做不同的UI界面展示； 2、借助原生javascript： 成本高不推荐使用； 3、使用第三方开源框架：可以很好的支持所有浏览器响应式布局的设计（如Bootstrap）查看全部
-
响应式设计的原则： 1、移动优先：在设计的初期就要考虑到页面如何在多个终端显示 2、渐进增强：充分发挥硬件设备的最大功能，不要因为低端浏览器（IE6\7\8等）不支持某些属性和功能，就不使用某些属性和功能查看全部
-
响应式设计优缺点 优点：解决了设备之间的差异化展示 缺点：兼容性代码多，工作量大，加载速度受影响 对原有网站布局会产生影响，用户判断未必精准查看全部
-
响应式布局 What： 1、兼容不同分辨率的设备 2、给用户更好的视觉使用体验 Why： 移动互联网的催生，非响应式网页布局无法满足移动互联网的多个终端显示的需求查看全部
-
兼容ie8或ie9查看全部
-
？！！查看全部
-
，，，，查看全部
-
！！？查看全部
-
！！！查看全部
-
响应式布局之bootstrap 1、Bootstrap重要特征 一套完整基础的CSS插件 丰富的预定义样式表 一组基于jQuery的JS插件集 崇尚移动(Mobile First)先行，非常灵活的响应式(Responsive)栅格系统 2、Bootstrap官网: www.getbootstrap.com 或 直接在GitHub网站上在线阅读源码，目录分别是js和less ---- http://github.com/twbs/bootstrap 3、HTML标准模板 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 默认情况下，UI布局的宽度和移动设备的宽度一致，缩放大小为原始大小 <!- -bootstrap - -> <link href="css/bootstrap.min.css" rel="stylesheet"> <!- -以下2个插件是用于在IE8支持HTML5元素和媒体查询的，不用可移除- -> <!- - Respond.js不支持file://方式访问- -> <!- -[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/htmlsshiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/reapond.min.js"></script> <![endif]- -> <!- -如果使用Bootstrap的JS插件，则必须引入jQuery- -> <script src="https://code.jquery.com/jquery.js"></script> <!- - Bootstrap的js插件- -> <script src="js/bootstrap.min.js"></script>查看全部
举报
0/150
提交
取消