bootstarp实现响应式页面

先看效果图

大屏幕

bootstarp实现响应式页面_第1张图片

中等

bootstarp实现响应式页面_第2张图片

bootstarp实现响应式页面_第3张图片

特小

bootstarp实现响应式页面_第4张图片

上代码

	
大型设备可见 中型设备可见 小型设备可见 特小型设备可见
大型设备可见 中型设备可见 小型设备可见 特小型设备可见
大型设备可见 中型设备可见 小型设备可见 特小型设备可见
大型设备可见 中型设备可见 小型设备可见 特小型设备可见
大型设备可见 中型设备可见 小型设备可见 特小型设备可见
大型设备可见 中型设备可见 小型设备可见 特小型设备可见
大型设备可见 中型设备可见 小型设备可见 特小型设备可见
大型设备可见 中型设备可见 小型设备可见 特小型设备可见
大型设备可见 中型设备可见 小型设备可见 特小型设备可见
大型设备可见 中型设备可见 小型设备可见 特小型设备可见
大型设备可见 中型设备可见 小型设备可见 特小型设备可见

开始说明:

1.不管在什么屏幕上,栅格栅格系统都会自动的每行row分为12列col-xs-*  col-sm-* col-md-* col-lg-*后面跟的参数是当前的屏幕中每个div所占列数,比如:col-xs-6就是在超小屏幕中占6列,也就是屏幕的一半(12/6列=2个div),col-md-3是在中等屏幕中占三列也就是12/3列=4个div。

如果理解不了,就这样记xs,sm,md,lg指的是屏幕大小,后面的数字一律用12除就是你的页面要显示的列数

2.class="visible-md"

visible-xs    额外的小设备可见(小于768px)可见

visible-sm   小型设备(768px起)可见

visible-md   中型设备(768px-991px)可见

visible-lg     大型设备可见(992px及以上)可见

-----------------------------------------------------------------------------------

hidden-xs   额外的小设备可见(小于768px)隐藏  

hidden-sm   小型设备(768px起)隐藏

hidden-md   中型设备(768px-991px)隐藏

hidden-lg     大型设备可见(992px及以上)隐藏

 

 

 

 

你可能感兴趣的:(前端)