bootstrap基本用法

进入中文官网：http://www.bootcss.com

 

开始第一个Demo

 

准备工作：

（1）进入bootstrap中文官网，点击起步

（2）下载生产环境

        下载好的文件是一个压缩文件，学习时建议使用未压缩版本，项目开发时必须使用压缩版本。

 

（3）找到基本模板，将其复制粘贴进来，当然，必要时需要按需求进行更改。

 

1. 学习bootstrap首先需要理解的是栅格系统，看官网（http://v3.bootcss.com/css/#grid-intro）给的定义：

      我们需要理解的是col-xs- 、colo-sm- 、col-md- 、col-lg- 的用法，bootstrap本身的定义是一行固定有12列，其中这些后面跟的数字就是当前模块所占的列数，占满12列就是一行，多出来的就挤到下一行，跟之前的float思想一样。

通常的做法是：

<section id=“id”>    //设定一个大的模块

    <div class="container”>    //定义里面存放内容模块

        <div class="row”>        //定义一行，里面默认12列

            <div class="col-md-12" >    //定义一个模块，在992px-1200px这个像素区域内所占12列。

                <h2>xxxxxxxx</h2>

            </div>

        </div>

    </div>

<section>

 

2. 组件

参考官网地址（http://v3.bootcss.com/components/），直接引用。

 

3. JavaScript插件

常用的用模态框（弹出框）、标签页、carousel（轮播图）、提示弹出框

用法（比喻）：

直接把下面给出的代码copy进去，然后按需求进行更改即可。