bootstarp实现响应式页面

先看效果图

大屏幕

中等

小

特小

上代码

	<div id="div1" class="container-fluid">
			<!--小屏幕一列，中等屏幕四列，大屏幕六列，特大屏幕十二列-->
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>
			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1" >
				<span style="background-color:#398439;" class="visible-lg">大型设备可见</span>
				<span style="background-color: #2AABD2;" class="visible-md">中型设备可见</span>
				<span style="background-color: #C7254E;" class="visible-sm">小型设备可见</span>
				<span style="background-color: #E38D13;" class="visible-xs">特小型设备可见</span>
			</div>

开始说明：

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及以上）隐藏