Bootstrap 栅格系统的使用方法
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。我们可以利用栅格系统很好的前端页面的布局，大大提高编写页面的效率。
操作方法
- 01
“栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。”
- 02
使用 栅格系统的第一步：把从官网下载好的文档包解压，在页面中引入bootstrap.min.css这个层叠样式库文件
- 03
还需要为页面内容和栅格系统包裹一个 .container 容器。（以下两个容器类不兼容） .container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
- 04
现在我们就可以测试栅格系统了。 实例：从堆叠到水平排列 使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
赞 (0)