[技術博客]採用Bootstrap框架進行排版佈局

[技術博客]採用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設計者和前端代碼撰寫者來講都是比較麻煩的一件事。