Bootstrap.pptx

Bootstrap;什么是响应式网页？ 一个网页，可以根据浏览设备不同而呈 现出不同的布局方式，用户体验还是一样的好; 响应式网页的构成： (1)流式(Fluid)页面布局 (2)可伸缩的图片和文字 (3)使用CSS3 Media Query技术;如何测试一个响应式网页？ 1，使用Chrome自带的设备模拟器做测试 2，使用真实的物理设备来测试;meta name=viewport content=width=device-width, initial-scale=1, user-scalable=no 视口是一个虚拟的概念，用于显示网页 内容的一个窗口，其宽和高都可以任意指定。;如何编写一个响应式网页 #所有尺寸和字体大小都不要用绝对单位，用相对 单位 em/rem #使用浮动定位 #图片自适应 #CSS3媒体查询;CSS3 Media Query技术 Media：媒体，指浏览网页的设备，如screen(包括PC/PAD/PHONE)，print， Tv、braille（盲文设备）...... Query：查询，查询出当前浏览设备的物理特性，如width、height… CSS3 Media Query技术：根据当前浏览设备类型、以及物理特性方面的不同，而 执行不同的CSS代码。 ;(1)根据媒体特性执行不同的外部CSS文件 link media=screen and (min-width:768px) and (max-width:99 1px) rel= href=“XXX.css 只有媒体查询结果为真时，指定的外部样式文件才会被执行！ 此方法有个缺陷：即使媒体查询失败的外部样式文件，也会被浏览器加载。 ; X-UA-Compatible元标签的含义： X: Cross 跨越 UA: UserAgent 用户代理，即浏览器 Compitable：兼容性 此元标签是IE浏览器专用的元标签，其它浏览器会直接忽略。 IE6： IE7： 同时兼容IE6 IE8： 同时兼容IE6、IE7 IE9： 同时兼容IE6、IE7、IE8 IE10： 同时兼容IE6、IE7、IE8、IE9 IE11： 同时兼容IE6、IE7、IE8、IE9、IE10 在新版本的IE中如何启用老IE的内核： meta http-equiv=X-UA-Compitable content=IE=9/10/../edge meta http-equiv=X-UA-Compitable content=IE=edge EDGE: 边沿、最前端 html5shiv.js： 由第三方开发的一个JS自调函数，用于让老版本的IE（9）支持HTML5新标签 respond.js： 由第三方开发的一个JS自调函数，用于让老版本的IE（9）支持CSS3MediaQuery !--[if lt IE 9] script src=js/html5shiv.min.js/script script src=js/respond.min.js/script ![endif]-- ;CSS Hack HTML头部引用Hack 通过 IE 的条件注释 来完成的 条件注释： 与html注释相似!-- -- if条件判断是否能够解析注释里的内容 gt : 选择条件版本以上的版本(不包含条件版本) gt ie7 lt : 选择条件版本以下的版本(不包含条件版本) lt ie8 gte :选择条件版本以及以上版本 gte ie7 lte : ITE IE8 ! :选择条件版本以外的所有版本 ! ie6 ; !--[if 条件] 满足条件要做的事情 ![endif]-- 1、通过条件注释声明，只在IE下生效 !--[if ie] 这段文本只在ie中显示 ![endif]-- 2、只在ie6以上的浏览器生效 !--[if gt IE 6] // ![endif]-- 3、在IE8上不生效 !--[if ! IE 8] ![endif]-- ;Bootstrap框架 Twitter Bootstrap是由Twitter的两个前端工程师最初开发后由很多人补充 代码共同完成的一个HTML / CSS / JS框架。极大的简化了响应式网页的开发。 中文官网： BootstrapV2：PC浏览设备优先的响应