栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*
元素内。
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。
<!-- 列偏移 --> <div> <div>1</div> <div>2</div> </div>列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
<!-- 列排序 --> <div> <div>左侧</div> <div>右侧</div> </div>响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
方案：我们采取响应式页面开发方案
技术：bootstrap框架
设计图： 本设计图采用 1280px 设计尺寸
项目结构搭建
Bootstrap 使用四步曲：
创建文件夹结构
创建 html 骨架结构
引入相关样式文件
书写内容
container宽度修改
因为本效果图采取 1280的宽度， 而Bootstrap 里面 container宽度 最大为 1170px，因此我们需要手动改下container宽度
/* 利用媒体查询修改 container宽度适合效果图宽度 */ @media (min-width: 1280px) { .container { width: 1280px; } }