Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局

时间:2022-03-24 16:35:51

首先引入文件bootstrap-responsive.css

  <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

  bootstrap-responsive.css这个样式表已经为我们针对常用的上网设备做好了相应的响应式设计:

  比如:

    分辨率宽度1200像素以上的屏幕上,网格的宽度会由60px变为70px,且网格与网格之间的距离由20px变为30px

    在平板电脑的垂直状态下,每一个网格的宽度由默认的60px会变为42px;

    如果是再小一点的屏幕,网格宽度会变为”流动的"宽度,且网格类所在的元素会堆砌在一起。