前言
今天有個後臺同學問我Bootstrap怎麼用，一下給我問的有點懵，我和他說你一個後臺的怎麼還要寫樣式了嗎？（這不是搶我們前端同學的飯碗嗎？）然後我給了他一個www.guanwang.com,他說你直接給我jar包過來吧，然後我想起來他是一個後臺同學又給他簡單的解釋了幾句之後，他一句你給我幾個demo我也就放棄了對他的說服教育，想想中華的傳統美德不就是助人為樂嗎，自己正好也總結一下自己在使用Bootstrap的一些心得。
前端開發頁面佈局常用到的幾種技能
1 Bootstrap
我們公司在選擇這個css框架的原因主要是因為我們的PC後臺系統用到了好多Bootstrap Table表格比如一些表格的排序，模糊搜尋，分頁這些Bootstrap Table都已經寫好了，就不用我們開發人員再手動的開發這些功能了.在微信公眾號的開發中一開始也是使用著BootStrap的彈性盒子佈局，在後來的開發中慢慢的用felx佈局替換了.
2 rem
這個技術說明白一些就是用一段js程式碼動態監控瀏覽器視窗的大小，當檢測到視窗變化的時候動態改變根元素html的font-size,以此來做到傳說中的響應各終端，在一開始flex的瀏覽器相容性不是很好的時候rem曾是流行但是需要一些單位的轉換，雖然後有好多工具例如Less,Sass這些css自動化工具但佈局還是需要我們手動佈局，目前強力推薦flex佈局。
3 flex
2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能，還是比較推薦大家去碼一下這個，常用的一些樣式佈局多寫幾個標籤全部搞定。
4 grid
最新又出了一個網格佈局號稱已經可以橫豎通吃，我也只簡單地寫了幾個demo,目前瀏覽器相容做的還不是很好，在以後可能是趨勢，畢竟是瀏覽器開發支援的新語法，新技術層出不窮感覺身體被掏空，不是在學新技術，就是在學新技術的路上。
Bootstrap
你的網站和應用能在 Bootstrap 的幫助下通過同一份程式碼快速、有效適配手機、平板、PC 裝置，這一切都是 CSS 媒體查詢（Media Query）的功勞，這句話是我在官網上摘下來的，我覺著其實BootStrap這個css框架最有用的部分也就是Media和柵格佈局。
Media介紹
css3的一個屬性，使用 @media 查詢，你可以針對不同的媒體型別定義不同的樣式。
@media針對不同的螢幕尺寸設定不同的樣式，特別是設計響應式的頁面，@media會根據你設定的樣式動態監聽。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
列子：如果文件寬度小於 300 畫素則修改背景演示(background-color):
@media screen and (max-width: 300px) { body { background:red; } }
下面這個連結就是Media的詳細簡紹介紹
v3.bootcss.com/css/#grid-m…
bootstrap的css原始碼就是根據不同螢幕的大小做了不同的@media,有興趣的同學可以去看看原始碼。
實際工作中需要注意的幾點
具體的學習建議去看看文件(而且還是中文的)，你還要怎樣，再提倆點實際工作中注意的問題