Bootstrap响应式布局以及栅格框架

一、Bootstrap简单配置
简单使用Bootstrap，只需引入：

    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.js" ></script>    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.js" ></script>    <link rel="stylesheet" href="css/bootstrap.css" />

为什么要引入<link rel="stylesheet" href="css/bootstrap.css" />呢？举一个简单的例子：
我们利用Bootstrap，写一个简答的div：

        <div class="container">            <h1>Bootstrap学习</h1>            <p>                以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！            </p>    </div>

通过调节浏览器窗口的大小，我们可以看到，Bootstrap是对样式为container有着响应式布局的。
二、Bootstrap栅格布局
我们在.container中定义类似table的div单元格row（行）与col（列）-md（屏幕尺寸：可以设置手机、平板等设备）-4（以12等分当前窗口，若超过12份会自动下排）...可以实现简单的栅格布局，例如：

<div class="container">            <div class="row">                <div class="col-sm-6 col-md-4 col-lg-2 hidden-lg"><!--hidden-sm当屏幕小到sm时，该div隐藏 -->                    <h1>侧边栏</h1>                    <p>                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                    </p>                    </div>                <div class="col-sm-6 col-md-8 col-lg-10 ">                    <h1>Bootstrap学习</h1>                    <p>                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                    </p>                    <div class="row">                            <div class="col-sm-6 col-md-4 col-lg-2">                                <h3>Bootstrap学习</h3>                                <p>                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                </p>                                </div>                            <div class="col-sm-6 col-md-4 col-lg-2 col-lg-offset-1 alert-danger"><!--alert-danger给该div一个醒目色块-->                                <h3>Bootstrap学习</h3>                                <p>                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                </p>                                </div>                            <div class="col-sm-6 col-md-4 col-lg-2">                                <h3>Bootstrap学习</h3>                                <p>                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                    以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                                </p>                                </div>                            <div class="visible-md"><!--当屏幕到 某个尺寸 时，显示该div-->                                <h2>屏幕到了这个尺寸了</h2>                                <p>只有尺寸合适才能看到哦</p>                            </div>                    </div>                </div>            </div>        </div>          <div class="row">                <div class="col-sm-6 col-md-4 col-lg-2"><!--混合使用,自适应当前设备-->                    <h1>Bootstrap学习</h1>                    <p>                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                    </p>                    </div>                <div class="col-sm-6 col-md-8 col-lg-2">                    <h1>Bootstrap学习</h1>                    <p>                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                        以下为测试内容，仅做占位使用！以下为测试内容，仅做占位使用！                    </p>                    </div>            </div>        </div>

可以针对屏幕微调位置栅格位置，左边右推一格col-md-push-1，右边左拉一格col-md-pull-1左推右拉都是绝对位置，而偏移col-md-offset-1是相对的会同步修改后续内容的位置。栅格如table可以嵌套使用，同样也有着网站的响应式布局。
此篇文章只是入门笔记！