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 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之间的区别的详细内容。更多信息请关注PHP中文网其他相关文章！