Bootstrap的认识-20140513
程序员文章站
2022-07-12 21:30:42
...
通过公司的两个比较大型项目,让我接触到了Bootstrap框架,现在就来说说Bootstrap这个框架
首先,我绝对Bootstrap框架是一个很不错的响应式的框架,特别对于移动端来说,帮助我们前端解决的很多,在样式上的问题,和需要特殊样式的问题。
下面是Bootstrap框架的需要引入的包
下面是支持的游览器
Chrome (Mac、Windows、iOS和Android)
Safari (只支持Mac和iOS版,Windows版已经基本死掉了)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Internet Explorer 8 和 9
IE兼容模式
Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式,建议将此 <meta> 标签加入到你的页面中
这里是使用Bootstrap需要在html5中必须要加入的
这里是移动设备中需要加入的
为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签
在移动设备浏览器上,通过为viewport meta标签添加user-scalable=no可以禁用其缩放(zooming)功能
下面来说说什么是响应式,响应式就是通过不同的屏幕宽度来改变当前的页面样式
这个是在css中书写的格式
下面我想说下响应式和自适应的有什么区别,这里是我自己的理解
首先响应式的概念就是我上面写的css样式,是针对不同的屏幕大小,在写出前端需要的先后样式的样式的派排列顺序,当屏幕小到一定的时候,没办法让两个东西同事展示在同一条平行线的时候,就会出现,需要让用户先体验的什么后体验到什么,或许就效果出来就是换一行的样子,但是里面也是存在的先后顺序的,所以这个是需要前端和视觉等部门交涉好的,响应式主要是决绝的这样的问题
那么自适应是什么呢,其实自适应就是一套百分比的css样式,因为百分比的样式结构是可以在任何屏幕正常展示出来的,不论多大或者多小,都可以全部按照需求的需要展示,那是太小或者太大都会给用户带来不好的体验效果。
所以说这两个效果需要根据需求的需要来要进行灵活的替换,自适应本人自己觉得比较适用于变化不太大的地方,就比如在苹果手机端上,就算6出了也就是两个样式,不会有太大的变化,那么响应式本人觉得比较适用于安卓上面,因为安卓的选择行很多,有不同的需要和不用效果,所以相对自适应来说,响应式更加的有针对性,那么自适应就更加的包容性就更大。
首先,我绝对Bootstrap框架是一个很不错的响应式的框架,特别对于移动端来说,帮助我们前端解决的很多,在样式上的问题,和需要特殊样式的问题。
下面是Bootstrap框架的需要引入的包
//这两个一个是正常的css包一个是通过压缩的css包 bootstrap.css bootstrap.min.css //这两个是js的包 bootstrap.js bootstrap.min.js
下面是支持的游览器
Chrome (Mac、Windows、iOS和Android)
Safari (只支持Mac和iOS版,Windows版已经基本死掉了)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Internet Explorer 8 和 9
IE兼容模式
Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式,建议将此 <meta> 标签加入到你的页面中
<meta http-equiv="X-UA-Compatible" content="IE=edge">
这里是使用Bootstrap需要在html5中必须要加入的
<!DOCTYPE html> <html lang="zh-cn"> ... </html>
这里是移动设备中需要加入的
为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在移动设备浏览器上,通过为viewport meta标签添加user-scalable=no可以禁用其缩放(zooming)功能
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
下面来说说什么是响应式,响应式就是通过不同的屏幕宽度来改变当前的页面样式
这个是在css中书写的格式
@media(min-width:1200px){ ......这里面写的是你需要的最小宽度1200的屏幕里展示出的样式,也就是说在1199包括1199宽度和一下的都不会启动整套样式 } @media(max-width:1200px){ ......这里是写的最大1200宽度的屏幕,1-1200都会走整套样式1201就不会了 } @media(min-width:1px)and@media(min-width:1200px){ ......这里写的样式是从最小的1到最大的1200都走这里面的样式 }
下面我想说下响应式和自适应的有什么区别,这里是我自己的理解
首先响应式的概念就是我上面写的css样式,是针对不同的屏幕大小,在写出前端需要的先后样式的样式的派排列顺序,当屏幕小到一定的时候,没办法让两个东西同事展示在同一条平行线的时候,就会出现,需要让用户先体验的什么后体验到什么,或许就效果出来就是换一行的样子,但是里面也是存在的先后顺序的,所以这个是需要前端和视觉等部门交涉好的,响应式主要是决绝的这样的问题
那么自适应是什么呢,其实自适应就是一套百分比的css样式,因为百分比的样式结构是可以在任何屏幕正常展示出来的,不论多大或者多小,都可以全部按照需求的需要展示,那是太小或者太大都会给用户带来不好的体验效果。
所以说这两个效果需要根据需求的需要来要进行灵活的替换,自适应本人自己觉得比较适用于变化不太大的地方,就比如在苹果手机端上,就算6出了也就是两个样式,不会有太大的变化,那么响应式本人觉得比较适用于安卓上面,因为安卓的选择行很多,有不同的需要和不用效果,所以相对自适应来说,响应式更加的有针对性,那么自适应就更加的包容性就更大。
上一篇: jquery初步认识-20140123
下一篇: ie下的指定样式-20140106