学习用法bootstrap3栅格系统_

1、学习用法bootstrap3栅格系统_ 这篇文章主要教会大家学习用法bootstrap3栅格系统，bootstrap开发环境搭建，还介绍了栅格系统的类型，感爱好的小伙伴们可以参考一下 一、bootstrap开发环境搭建 1. 下载bootstrap, l页面中导入bootstrap与jquery的js,css文件，.viewport的meta标签，这个标签可以修改在大部分的移动设备上面的显示，加如 if lt IE 9.等是为了在ie9以下的兼容。 模板如下 !DOCTYPE html html head meta charset=UTF-8 meta content=width=device

2、-width, initial-scale=1.0 name=viewport / titleInsert title here/title link href=css/bootstrap.min.css rel=stylesheet media=screen !-if lt IE 9 script src= script src= !endif- script src=js/jquery-2.0.3.min.js/script script src=js/bootstrap.min.js/script /head body div class=container /div /body /ht

3、ml 二. 栅格系统 1. boostrap把桌面分隔成 由12行 * n 列的表格进行布局， 这是boostrap进行而已的核心。 2. .row 进行行级划分，必需包含在 .container下。 3. col-xx-*进行列级划分，如下图 div class=container div class=row div class=col-md-31/div div class=col-md-32/div div class=col-md-33/div div class=col-md-34/div /div div class=row div class=col-md-35/div div

4、class=col-md-36/div div class=col-md-37/div div class=col-md-38/div /div /div 4.列偏移，通过 col-xx-offset-*来实现 div class=container div class=row div class=col-md-31/div div class=col-md-32/div div class=col-md-33/div div class=col-md-34/div /div div class=row div class=col-md-35/div div class=col-md-36/d

5、iv div class=col-md-3 col-md-offset-37/div /div /div 5. 列排序，能过.col-xx-push-* 和 .col-xx-pull-* 实现列的向左或向右排序 div class=container div class=row div class=col-md-31/div div class=col-md-32/div div class=col-md-3 col-md-push-33/div /div div class=row div class=col-md-35/div div class=col-md-36/div div class=col-md-3 col-md-pull-27/div /div /div 6. 列嵌套，row嵌套在col中即可。 div class=row div class=col-md-31/div div class=col-md-32/div div class=col-md-33/div div class=col-md-3 div class=row div class=col-md-15/div di