大多數情況下，我們會在需要嚴格布局要求并希望內容按照這些要求在頁面上流動的情況下使用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 grid.
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 far the most popular 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.
It contains design templates based on HTML and 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 build designs that are responsive.
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 in three columns, 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 the Bootstrap grid system ?
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 wide)
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 Grid | Bootstrap |
|---|---|---|
| 標記 | 它具有更清晰和更易讀的標記。網格的布局不是在HTML中完成，而是在CSS中完成。 | 為了建立布局，每行都需要一個div標簽，并在每個div元素中定義類層級。這使得代碼變得更長。 |
| 響應式 | 即使HTML不變，只需添加各種媒體查詢并描述每個HTML元素的網格布局即可修改CSS。 | 使用已建立的類層級，可以獨立設計各種不同設備尺寸的內容區域布局。然而，隨著類的數量增加，標記會變得更加繁瑣。 |
| 頁面加載速度 | 得到了絕大多數瀏覽器和版本的強力支持。無需下載任何內容，網站加載速度更快。 | 由于需要下載樣式表的附屬文件，網站加載速度較慢。 |
| 列限制 | 它提供了一個沒有列數限制的靈活布局。因此，擁有任意數量的列并不困難。 | 由于網格被分為12列，無法實現不總和為12的布局。 |
結論
使用Bootstrap需要編寫更多HTML，而使用CSS Grid需要編寫更多CSS。
根據設計要求，使用Bootstrap可能不是一個選擇。對于較簡單的布局，Bootstrap是一個簡單的選擇，可以在合理的時間內讓您上手。
請記住，Bootstrap不僅僅是一個網格系統；它是一個包含了預定義類的全面前端工具包，用于模態框、工具提示、彈出框、進度條等等。要使用CSS Grid獲得相同的結果，您需要使用JS或JQuery編寫文件。
以上就是CSS Grid和Bootstrap之間的區別的詳細內容，更多請關注www.92cms.cn其它相關文章！
