[技術博客]采用Bootstrap框架進行排版布局
網頁的前端框架有很多很多種，比如Bootstrap、Vue、Angular等等，在最開始其實並沒有考慮到框架這回事，開始閱讀往屆代碼時發現其部分采用了Bootstrap框架，因此決定沿用Bootstrap框架。Bootstrap框架可能並不是太優秀，但是其有一個鮮明的特點就是，它是以移動端為優先的，因此在移動端會產生比較好的訪問效果。
Bootstrap簡介
Bootstrap 是一套用於 HTML、CSS 和 JS 開發的開源工具集。Bootstrap最為著名的特點就是移動設備優先，Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，將屏幕分割為12列，在此基礎上，可以采用Bootstrap所提供的各種布局組件和插件，就能滿足絕大多數的網頁需求。
全局采用Bootstrap
在Alpha階段中，我們並沒有刻意追求網頁樣式，但由於部分采用了Bootstrap框架，最終網頁在移動端的顯示也是能看得過去的。在Beta階段我們轉入一名同學來做UI設計，在最初調整樣式時，我們打算放棄掉Bootstrap框架，但是發現在調整樣式的時候非常吃力，同時又考慮到移動端適配問題，最終和UI設計溝通后，我們打算全局采用Bootstrap，UI設計也針對Bootstrap進行設計。
全局采用Bootstrap的好處在於，能夠較好的進行排版，同時UI設計對於移動版樣式也不需要設計的過於詳細，只需要提供相關布局，在進行PC端排版的時候就能夠同時完成移動端排版。
Bootstrap排版布局
Bootstrap采用的是流式網格系統，因此排版布局是也是基於網格系統排版。其網格系統采用了行與列來完成工作。
-
整個屏幕被分為12列，每個元素的寬度可以采用
.col-n的class來 進行控制。同時對於不同的設備，又分為.col-n：屏幕寬度小於768px，默認為移動端，適用於手機.col-sm-n：屏幕寬度大於768px，小於992px，適用於平板.col-md-n：屏幕寬度大於992pxpx，小於1200px，適用於小型PC、筆記本電腦.col-lg-n：屏幕寬度大於1200px，小於992px，適用於大型PC
因此在對應的元素中添加
class就可以設定好不同的寬度。 -
由於默認的元素都是采用列垂直布局，就必須要用行來進行控制。在元素中添加
.row的class就可以實現其內部元素的橫向排列。值得注意的是，.row必須被包含在.container中，container就是一個容器，必須在容器中划分行。 下面即為Bootstrap的布局演示，在引入bootstrap就就能體現出來<div class="container"> <div class="row"> <div class="col-md-4 col-12">移動端占用12列，PC占據4列</div> <div class="col-md-8 col-12">移動端占用6列，PC占據8列</div> </div> </div>
Bootstrap排版布局
如果不采用Bootstrap其余的組件和插件，只打算用它來進行排版，到這里就可以基本使用Bootstrap進行排版了。采用Bootstrap排版時，就不需要對組件的位置進行各種各樣的調整，比如由UI設計所提供的網頁設計里，各個元素的位置都是以px為單位，給出與上邊界和下邊界的距離，在調整樣式時需要經常計算組件的具體位置，非常吃力，同時采用px時又不能較好的適配移動端，對於移動端頁面可能需要重新編寫。但是采用了Bootstrap后，直接用行列布局同時確定好在PC端和移動端的元素位置，然后只需要細調元素的樣式即可，當然需要UI設計時就采用列布局，否則還是會存在困難。
最終的效果
在PC端的效果：
在移動端的效果：
平板下的效果：
可以看到在移動端下，也能夠充滿整個屏幕，近似於PC的顯示，較好的顯示各個元素，不需要用戶去放大、左右拖動即可預覽到整個網頁的效果。對於復雜網頁，同樣能做到較好的適配，非常方便用戶的使用。
PC端：
手機端：
缺點
盡管看上去很好用，事實上也很好用，但是其效果可能還是比不上老老實實重新協議一個移動版樣式，還是因為Bootstrap的局限性。基礎布局是以PC端為基礎，然后調整其移動端布局，但是仍然存在着某些情況下，一些組件的位置不可能實現設計中所應該在的位置。同時Bootstap每一列的左右都會有15px的空余，導致在移動端實現某些較為緊湊的排列時有點麻煩，我經常直接將其用CSS來覆蓋掉。還有部分Bootstrap組件的樣式始終無法被css覆蓋，指明分頁組件，將其居中顯示花費了很久，很多方法都無法將其居中顯示。但總體來說，對於我們小心課程網站的開發，使用Bootstrap完成雙端排版還是比較簡單省力的，畢竟重新編寫頁面對UI設計者和前端代碼撰寫者來說都是比較麻煩的一件事。