Bootstrap響應式佈局以及柵格框架

1、Bootstrap簡單配置
簡單使用Bootstrap，只需引入：

<script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="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有着響應式佈局的。
2、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能夠嵌套使用，一樣也有着網站的響應式佈局。
此篇文章只是入門筆記！