CSS Grid和Bootstrap之間的區別

大多數情況下，我們會在需要嚴格佈局要求並希望內容按照這些要求在頁面上流動的情況下使用CSS Grid。

Bootstrap的網格系統是基於CSS Flexbox佈局系統，而CSS Grid則受到基於列印的id的影響。 Bootstrap是CSS Grid的直接競爭對手，兩個框架的網格佈局系統可以進行重要的比較。

如果我們希望在行或列方向上對佈局進行控制，那麼應該使用Bootstrap提供的基於Flexbox的網格。另一方面，如果您希望在行和列上都對佈局進行控制，則應該使用CSS Grid作為解決方案。

CSS Grid是什麼？

一系列相交的垂直和水平線被理解為網格。 CSS3可以使用網格佈局將頁面分割為不同的部分。

網格屬性提供了一個基於行和列的網格佈局系統。它使得在網頁設計中不再需要元素的佈局和浮動。網格佈局提供了一種使用CSS而不是HTML來建立網格結構的方法。

CSS Grid佈局在將頁面分割為關鍵部分或在HTML基於原始控制項的許多元件之間建立大小、位置和層次關係方面特別有效。

請看以下範例−

<div class="grid_container">
   <div class="grid_items">01</div>
   <div class="grid_items">02</div>
   <div class="grid_items">03</div>
   <div class="grid_items">04</div>
   <div class="grid_items">05</div>
   <div class="grid_items">06</div>
   <div class="grid_items">07</div>
   <div class="grid_items">08</div>
   <div class="grid_items">09</div>
</div>

It functions in a manner that is similar to that of a table in that it lets the user arrange the items into rows and columns . However, in contrast to tables, the CSS grid makes designing a layout really simple. By using the grid-template-rows and grid-template-columns attributes, we are able to specify the columns and rows that appear on the grify the columns and rows that appear on the grify.

##What is Bootstrap?

When it comes to designing a website that is responsive and user-friendly on mobile devices, the HTML, CSS, and JavaScript framework known as Bootstrap is by ularfar the most option. It does not cost anything to download or make use of the tool. It is a front-end framework that makes the process of developing websites simpler and more efficient.

contains websites simpler and more efficient.

contains design templates 1on CSS for typography, forms, buttons, tables, navigation, modals, picture carousels, and a lot of other things. In addition to that, it supports plug-ins written in JavaScript. It makes it easier for you to builive signs thatsareive de you to

What is Bootstrap Grid?

The grid structure that Bootstrap uses is responsive, which means that the columns will rearrange themselves based on the size of the screen − If the material is structured , it may appear better on a large screen; yet, if the content elements are piled on top of each other, it may look better on a tiny screen.

There are four classes included in grstra

• xs

  (for phones − screens less than 768px wide)

• sm

  (for tablets − screens equal to or greater than 768px wide)

• md

  (for small laptops − screens equal to or greater than 992px#ide)

• ##4

• lg

  (for laptops and desktops − screens equal to or greater than 1200px wide)

• #Take a look at the following
Example
• −

  <div class="row">
     <div class="col-xs-9 col-md-7">col-xs-9 and col-md-7</div>
     <div class="col-xs-3 col-md-5">col-xs-3 and col-md-5</div>
  </div>
  
  <div class="row">
     <div class="col-xs-6 col-md-10">col-xs-6 and col-md-10</div>
     <div class="col-xs-6 col-md-2">col-xs-6 and col-md-2</div>
  </div>
  
  <div class="row">
     <div class="col-xs-6">col-xs-6</div>
     <div class="col-xs-6">col-xs-6</div>
  </div>

• 為了適當的對齊和填充，行必須包含在一個".container"（固定寬度）或".container-fluid"（全寬）中。

• 透過使用行建立水平列組。

• 只有列可以是瞬時的，內容要放在列內。

可以使用預先定義的類別（如 ".row" 和 ".col-sm-4"）快速建立網格佈局。

列之間的填充創建了間隙（列之間的空間）。在 ".rows" 上使用負邊距來抵銷第一列和最後一列的填滿。 ############透過定義要跨越的列數（可用的12個選項）來建立網格列。例如，三個等寬的欄位可以由三個 ".col-sm-4" 表示。 ############由於列寬以百分比表示，它們始終是靈活的，並且與其父元素成比例。 ############CSS Grid 和 Bootstrap 的差異######下表突顯了 CSS Grid 和 Bootstrap 之間的主要差異 -#####CSS GridBootstrap標記它具有更清晰和更易讀的標記。網格的佈局不是在HTML中完成，而是在CSS中完成。 為了建立佈局，每行都需要一個div標籤，並在每個div元素中定義類別層級。這使得程式碼變得更長。 響應式即使HTML不變，只需新增各種媒體查詢並描述每個HTML元素的網格佈局即可修改CSS。 使用已建立的類別層級，可以獨立設計各種不同裝置尺寸的內容區域佈局。然而，隨著類別的數量增加，標記會變得更加繁瑣。 頁面載入速度得到了絕大多數瀏覽器和版本的強力支援。無需下載任何內容，網站載入速度更快。 由於需要下載樣式表的附屬文件，網站載入速度較慢。 列限制它提供了一個沒有列數限制的靈活佈局。因此，擁有任意數量的列並不困難。 由於網格被分成12列，無法實現不總和為12的佈局。

比較基礎

結論

使用Bootstrap需要寫更多HTML，而使用CSS Grid則需要寫更多CSS。

根據設計要求，使用Bootstrap可能不是一個選擇。對於較簡單的佈局，Bootstrap是一個簡單的選擇，可以在合理的時間內讓您上手。

請記住，Bootstrap不僅僅是一個網格系統；它是一個包含了預定義類別的全面前端工具包，用於模態框、工具提示、彈出框、進度條等等。要使用CSS Grid獲得相同的結果，您需要使用JS或JQuery編寫檔案。

以上是CSS Grid和Bootstrap之間的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！