響應式布局框架bootstrap（世界上最流行的css框架）

bootstrap缺點：css太重，牽一發而動全身

bootstrap框架的柵格布局原理：flex布局

柵格布局實現原理

•把網頁總寬度平分為12分，開發人員可以自由按分組合，以便開發出簡潔方便的程序

•僅僅通過定義容器大小、平分12分，再調整內外邊距，最后結合媒體查詢，就制作出強大的響應式柵格系統

•柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。

.container擁有15px的左右內邊距

.row擁有-15px的左右外邊距，使得其剛好與.container的內邊距抵消，使.row內的元素至左顯示。

.col-md-都擁有15px的左右內邊距，使得已經嵌套的.col-md-元素由於已經確定了長度，便可以充當.container。實現柵格系統的擴展。

bootstrap模態框

bootstrap中的模態框（modal），不同於Tooltips，模態框以彈出對話框的形式出現，具有最小和最實用的功能集。
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
見博客 http://www.cnblogs.com/zhaosijia----1234/p/8946882.html

bootstrap柵格的工作原理

•“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
•通過“行（row）”在水平方向創建一組“列（column）”。
•你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
•類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速創建柵格布局。Bootstrap 源碼中定義的 mixin 也可以用來創建語義化的布局。
•通過為“列（column）”設置 padding 屬性，從而創建列與列之間的間隔（gutter）。通過為 .row 元素設置負值 margin 從而抵消掉為 .container 元素設置的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
•負值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內容排成一行。
•柵格系統中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個等寬的列可以使用三個 .col-xs-4 來創建。
•如果一“行（row）”中包含了的“列（column）”大於 12，多余的“列（column）”所在的元素將被作為一個整體另起一行排列。

（原理：把我們的屏幕大小的寬度平分成12個格，每一格的寬度和整個屏幕分辨率是有關系的，如果整個屏幕分辨率越大那么這12格的每一格的寬度就大，是按比例來算出的，而且這12格的layout是水平排列的。）
比如，我們定義一個div，我們不指定這個div的寬度是多少像素或者占多少百分比，我們是指定這個div占12格中的幾格，我們這個div占12格中的8格，不同的分辨率底下它始終是占12格中的8格。系統會根據屏幕分辨率的大小，自動拆成12格，每一格大小根據屏幕分辨率自動在變。這樣的話在各瀏覽器或分辨率下都可以兼容我們這個8:4這個比例。

為啥用css框架？

1.可以提高開發效率(給不會css的人用的)
2.框架代碼結構清晰,避免混亂和沖突,可以去學習借鑒
3.更好的團隊合作
4.寫的代碼少(寫的通用性的代碼比較少 但是業務代碼一樣，但是事實上整個網站的大小會變大)