Bootstrap的優缺點是什麼？

Bootstrap的優缺點是什麼？
bootstrap是一個用於快速開發web應用程式和網站的前端框架，基於html、css、javascript。
優點是:行動裝置優先，支援主流瀏覽器，易使用，響應式設計
缺點：不支援IE6，重度使用class不夠語意化，使用bootstrap開發的網站同質化嚴重。

 【相關影片推薦：Bootstrap教學】

Bootstrap 提供了一套響應式、行動裝置優先的串流網格系統，隨著螢幕或視窗（viewport）尺寸的增加，系統會自動分成最多12列。

行動裝置優先策略

• 內容

• #決定什麼是最重要的。

• 佈局

• #優先設計更小的寬度。

• 基礎的 CSS 是行動裝置優先，媒體查詢是針對於平板電腦、桌上型電腦。

• 漸進增強

• #隨著螢幕大小的增加而加入元素。

響應式網格系統隨著螢幕或視窗（viewport）尺寸的增加，系統會自動分成最多12列。

Bootstrap 網格系統（Grid System）的工作原理

網格系統透過一系列包含內容的行和列來建立頁面佈局。下面列出了Bootstrap 網格系統是如何運作的：

• 行必須放置在 .container class 內，以便獲得適當的對齊（alignment）和內邊距（padding）。

• 使用行來建立列的水平組。

• 內容應該放置在列內，且只有列可以是行的直接子元素。

• 預先定義的網格類，例如 .row 和 .col-xs-4，可用來快速建立網格佈局。 LESS 混合類別可用於更多語意佈局。

• 列透過內邊距（padding）來建立列內容之間的間隙。此內邊距是透過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。

• 網格系統是透過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。

• 媒體查詢

  媒體查詢是非常別緻的"有條件的 CSS 規則"。它只適用於一些基於某些規定條件的 CSS。如果滿足那些條件，則套用相應的樣式。

  Bootstrap 中的媒體查詢可讓您基於視窗大小移動、顯示並隱藏內容。下面的媒體查詢在 LESS 檔案中使用，用來建立 Bootstrap 網格系統中的關鍵的分界點閾值。

  /* 超小设备（手机，小于 768px） */
  /* Bootstrap 中默认情况下没有媒体查询 */
  
  /* 小型设备（平板电脑，768px 起） */@media (min-width: @screen-sm-min) { ... }
  
  /* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }
  
  /* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }

• 我們有時也會在媒體查詢程式碼中包含 max-width，從而將 CSS 的影響限制在較小範圍的螢幕大小之內。

  @media (max-width: @screen-xs-max) { ... }
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
  @media (min-width: @screen-lg-min) { ... }

• 媒體查詢有兩個部分，先是一個裝置規範，然後是一個大小規則。在上面的案例中，設定了下列的規則：

  讓我們來看下面這行程式碼：

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

• 基本的網格結構

  #以下是Bootstrap 網格的基本結構：

  <div class="container">
     <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>      
     </div>
     <div class="row">...</div></div><div class="container">....

 

初次更博不到之處望請指點歡迎指教

以上是Bootstrap的優缺點是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！