bootstrap（一）栅格系统

中文网：http://www.bootcss.com/

官网：http://v3.bootcss.com/

需要准备：离线手册  和  软件包

项目中引用bootstrap.min.js压缩版和bootstrap.min.css。bootstrap-theme.css 这个没用上 。

官方包中需要在

js文件夹中加几个js：application.js  holder.min.js 拿色素构成图片  highlight.min.js 高亮显示 jQuery.min.js  1.8.3。

bootstrap框架：

1、CSS样式

2、CSS组件

3、js插件

CSS样式：

1、栅格系统

2、排版

3、代码

4、表格

5、表单

6、按钮

7、图片

8、响应式图片

9、工具

页面大块布局：

.ccontainer

栅格系统：

一行分成12列

.row

.col-md-12

.col-xs-12

图片自动生成：

<script src="dist/js/holder.min.js"></script>

<img src="holder.js/100%x300" />

   <div class="container">
            <div class="row">

                    <div class="col-md-3">
                        <img src="holder.js/200x200" alt="" />
                    </div>
                    <div class="col-md-3">
                        <img src="holder.js/200x200" alt="" />
                    </div>
                    <div class="col-md-3">
                        <img src="holder.js/200x200" alt="" />
                    </div>
                    <div class="col-md-3">
                        <img src="holder.js/200x200" alt="" />
                    </div>
                    <div class="clearfix">
                    </div>
                </div>
</div>

文本中间对其：

text-center;

text-left;

text-right;

块标签对齐：

pull-left; 直接放到class里面就可以用

pull-right;

center-block;   <div class="col-md-4 center-block"> 这种情况下不居中，不好使，要去掉前面的col 然后加一个宽度div就会居中。