大多數(shù)情況下，我們會在需要嚴(yán)格布局要求并希望內(nèi)容按照這些要求在頁面上流動的情況下使用CSS Grid。
Bootstrap的網(wǎng)格系統(tǒng)基于CSS Flexbox布局系統(tǒng)，而CSS Grid受到基于打印的id的影響。Bootstrap是CSS Grid的直接競爭對手，兩個框架的網(wǎng)格布局系統(tǒng)可以進(jìn)行重要的比較。
如果我們希望在行或列方向上對布局進(jìn)行控制，那么應(yīng)該使用Bootstrap提供的基于Flexbox的網(wǎng)格。另一方面，如果您希望在行和列上都對布局進(jìn)行控制，應(yīng)該使用CSS Grid作為解決方案。
CSS Grid是什么？
一系列相交的垂直和水平線被理解為網(wǎng)格。CSS3可以使用網(wǎng)格布局將頁面分割為不同的部分。
網(wǎng)格屬性提供了一種基于行和列的網(wǎng)格布局系統(tǒng)。它使得在網(wǎng)頁設(shè)計中不再需要元素的布局和浮動。網(wǎng)格布局提供了一種使用CSS而不是HTML來創(chuàng)建網(wǎng)格結(jié)構(gòu)的方法。
CSS Grid布局在將頁面分割為關(guān)鍵部分或在HTML基于原始控件的許多組件之間建立大小、位置和層次關(guān)系方面特別有效。
請查看以下示例?
<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>
登錄后復(fù)制
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>
登錄后復(fù)制
為了適當(dāng)?shù)膶R和填充，行必須包含在一個 “.container”（固定寬度）或 “.container-fluid”（全寬）中。
通過使用行創(chuàng)建水平列組。
只有列可以是瞬時的，內(nèi)容應(yīng)放在列內(nèi)。
可以使用預(yù)定義的類（如 “.row” 和 “.col-sm-4″）快速創(chuàng)建網(wǎng)格布局。
列之間的填充創(chuàng)建了間隙（列之間的空間）。在 “.rows” 上使用負(fù)邊距來抵消第一列和最后一列的填充。
通過定義要跨越的列數(shù)（可用的12個選項）來創(chuàng)建網(wǎng)格列。例如，三個等寬的列可以由三個 “.col-sm-4” 表示。
由于列寬以百分比表示，它們始終是靈活的，并且與其父元素成比例。
CSS Grid 和 Bootstrap 的區(qū)別
下表突出了 CSS Grid 和 Bootstrap 之間的主要區(qū)別 –
| 比較基礎(chǔ) | CSS Grid | Bootstrap |
|---|---|---|
| 標(biāo)記 | 它具有更清晰和更易讀的標(biāo)記。網(wǎng)格的布局不是在HTML中完成，而是在CSS中完成。 | 為了建立布局，每行都需要一個div標(biāo)簽，并在每個div元素中定義類層級。這使得代碼變得更長。 |
| 響應(yīng)式 | 即使HTML不變，只需添加各種媒體查詢并描述每個HTML元素的網(wǎng)格布局即可修改CSS。 | 使用已建立的類層級，可以獨(dú)立設(shè)計各種不同設(shè)備尺寸的內(nèi)容區(qū)域布局。然而，隨著類的數(shù)量增加，標(biāo)記會變得更加繁瑣。 |
| 頁面加載速度 | 得到了絕大多數(shù)瀏覽器和版本的強(qiáng)力支持。無需下載任何內(nèi)容，網(wǎng)站加載速度更快。 | 由于需要下載樣式表的附屬文件，網(wǎng)站加載速度較慢。 |
| 列限制 | 它提供了一個沒有列數(shù)限制的靈活布局。因此，擁有任意數(shù)量的列并不困難。 | 由于網(wǎng)格被分為12列，無法實(shí)現(xiàn)不總和為12的布局。 |
結(jié)論
使用Bootstrap需要編寫更多HTML，而使用CSS Grid需要編寫更多CSS。
根據(jù)設(shè)計要求，使用Bootstrap可能不是一個選擇。對于較簡單的布局，Bootstrap是一個簡單的選擇，可以在合理的時間內(nèi)讓您上手。
請記住，Bootstrap不僅僅是一個網(wǎng)格系統(tǒng)；它是一個包含了預(yù)定義類的全面前端工具包，用于模態(tài)框、工具提示、彈出框、進(jìn)度條等等。要使用CSS Grid獲得相同的結(jié)果，您需要使用JS或JQuery編寫文件。
以上就是CSS Grid和Bootstrap之間的區(qū)別的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
