css 网格布局_CSS网格布局与CSS框架辩论

女爷i 2022-12-03 01:43 305阅读 0赞

css 网格布局

**With cutting-edge CSS standards like [CSS Grid Layout][] and [Flexbox][], coding a web page layout is no longer such a pain. If you add to this that browser support for both [Grid][] and [Flexbox][Flexbox 1] is pretty good too, then the question is bound to come up: Why should consider learning and using CSS frameworks in my development work?**

**使用诸如[CSS Grid Layout][]和[Flexbox之][Flexbox]类的尖端CSS标准，编写网页布局不再是[一件麻烦的事][Flexbox] 。** **如果再加上浏览器对[Grid][]和[Flexbox的][Flexbox 1]支持都还不错，那么必然会出现一个问题：为什么在我的开发工作中应该考虑学习和使用CSS框架？**

In this article, I’ll focus on [Bootstrap][], since it’s arguably one of the most popular among all the CSS UI libraries available out there.

在本文中，我将重点介绍[Bootstrap][] ，因为它可以说是目前可用的所有CSS UI库中最受欢迎的之一。

In my view, there are still a number of reasons why it does still make sense to learn and use Bootstrap today.

我认为，仍然有很多原因使今天学习和使用Bootstrap仍然有意义。

Here’s a few of them for you.

这里有一些适合您。

## 什么是CSS网格？ **(**What Is CSS Grid?**)** ##

Rachel Andrew, a well-known speaker and writer on all things CSS Grid-related, [defines it as follows][]:

雷切尔·安德鲁(Rachel Andrew)是与CSS Grid相关的所有事情的著名演讲者和作家， [他对它的定义如下][defines it as follows] ：

> Grid is a grid system. It allows you to define columns and rows in your CSS, without needing to define them in markup. You don’t need a tool that helps you make it look like you have a grid, you actually have a grid!
> 
> 网格是一个网格系统。 它允许您在CSS中定义列和行，而无需在标记中定义它们。 您不需要一个可以帮助您使其看起来像是网格的工具，实际上就是网格！

The implementation of this CSS standard gives developers the much needed ability to build page layouts with native CSS code, with no dependency from the HTML markup except for the presence of a wrapper element that works as containing grid. Just imagine the flexibility and the potential for creativity in web design!

此CSS标准的实现为开发人员提供了使用本机CSS代码构建页面布局的迫切需要的功能，除了存在充当包含网格的wrapper元素外，它不受HTML标记的依赖。 想象一下网页设计的灵活性和创造力的潜力！

For instance, you don’t need custom classes or extra rows in your markup to build this simple layout:

例如，您不需要自定义类或标记中的多余行即可构建此简单布局：

![Simple web page layout built with CSS Grid][]

Here’s the HTML:

这是HTML：

<div class="grid">
      <header>Header content</header>
      <main>Main content</main>
      <aside>Sidebar</aside>
      <footer>Footer</footer>
    </div>

As for the CSS, this is where you’re going to build your visual layout. All it takes in this simple case is a few lines of code:

至于CSS，这是您要构建视觉布局的地方。 在这种简单的情况下，所需要做的只是几行代码：

.grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 50px 150px 50px;
    }
    
    header, footer {
      grid-column: span 12;
    }
    
    main {
      grid-column: span 8;
    }
    
    aside {
      grid-column: span 4;
    }

That’s it, you’re done! Not bad.

就是这样，您完成了！ 不错。

## 什么是引导程序？ **(**What Is Bootstrap?**)** ##

At the time of this writing, [3.6% of the entire Internet][3.6_ of the entire Internet] uses Bootstrap:

在撰写本文时， [整个Internet的3.6％][3.6_ of the entire Internet]使用Bootstrap：

![Bootstrap usage][]

On the Bootstrap website, you’ll find this definition:

在Bootstrap网站上，您会找到以下定义：

> Bootstrap is an open-source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
> 
> Bootstrap是一个用于使用HTML，CSS和JS开发的开源工具包。 使用我们的Sass变量和mixins，响应式网格系统，大量的预构建组件以及基于jQuery构建的强大插件，可以快速为您的想法制作原型或构建整个应用程序。

In other words, Bootstrap gives you ready-made components that allow you to whip up a beautiful web page in no time.

换句话说，Bootstrap提供了现成的组件，使您可以立即创建漂亮的网页。

Just write the appropriate markup, and your app looks great out of the box.

只需编写适当的标记，即可轻松使用您的应用。

Bootstrap makes it also super easy to customize its look and feel to your liking and lets you pick and choose the bits you need for your project.

Bootstrap还使您可以根据自己的喜好自定义其外观和感觉，并且可以选择项目所需的位。

## 为什么在拥有网格时启动？ **(**Why Bootstrap When We Have Grid?**)** ##

The biggest complaint about Bootstrap has always been code bloat. The reasoning was that it included lots of extra CSS code that remained unused in your projects. The second biggest complaint was that Bootstrap components were styled in every detail and this could present some problems when it came to overriding some CSS rules.

关于Bootstrap的最大抱怨一直是代码膨胀。 原因是它包括许多额外CSS代码，这些代码在您的项目中仍未使用。 第二大抱怨是Bootstrap组件的每个细节都经过样式设置，这在覆盖某些CSS规则时可能会带来一些问题。

Starting with the latest version of this popular front-end component library, both criticisms fall to pieces: Bootstrap is totally modular, so you just include what you need. Also, the [Sass files][] are structured in such a way as to make it very convenient to customize the original styles to your needs.

从这个流行的前端组件库的最新版本开始，两种批评都化为碎片：Bootstrap是完全模块化的，因此您只需包含所需的内容即可。 同样， [Sass文件][Sass files]的结构使得可以非常方便地根据您的需要自定义原始样式。

Today, the main reason against using Bootstrap is the fact that with CSS Grid, CSS has a grid system of its own, which doesn’t have any external dependencies, and which, once learned, enables developers to build all sorts of layouts with relative ease.

如今，拒绝使用Bootstrap的主要原因是，使用CSS Grid，CSS拥有自己的网格系统，它没有任何外部依赖关系，并且一旦学会，便可以使开发人员使用相对的布局来构建各种布局。缓解。

Although I’m a [CSS Grid][] fan, I think Bootstrap has still its place in front-end development and will have for some time to come.

尽管我是[CSS Grid的][CSS Grid]爱好者，但我认为Bootstrap在前端开发中仍然占有一席之地，并且还会有一段时间。

Here are at least three reasons why.

至少有以下三个原因。

### Bootstrap不仅仅是其网格系统 **(**Bootstrap Is More Than Its Grid System**)** ###

It’s true, the \#1 reason to use Bootstrap is the handy grid system, which makes it a breeze to build responsive web pages. However, Bootstrap has some great components like the versatile new [card component][], which you can use to display all types of content, such as text, images and videos, and the [responsive navbar][], which works out of the box. You can also pick a ready-made color scheme of your liking for most components.

的确，使用Bootstrap的第一原因是方便的网格系统，这使得构建响应式网页变得轻而易举。 但是，Bootstrap具有一些出色的组件，例如通用的新[卡片组件][card component] ，您可以使用它来显示所有类型的内容，例如文本，图像和视频，以及[响应式导航栏][responsive navbar] (即开即用)。 您还可以根据自己的喜好为大多数组件选择现成的配色方案。

And what about the functionality of a good many of these components? With Bootstrap, adding dynamic [tooltips][], [carousels][], or [dropdown buttons][] is just a matter of writing the appropriate markup. If JavaScript is not your forte, you can still take advantage of these components without writing a line of JavaScript.

那么其中许多组件的功能又如何呢？ 使用Bootstrap，添加动态[工具提示][tooltips] ， [轮播][carousels]或[下拉按钮][dropdown buttons]仅需编写适当的标记即可。 如果JavaScript不是您的强项，您仍然可以利用这些组件，而无需编写一行JavaScript。

Also, if you’re not a CSS wizard, you can still leverage the power of Bootstrap in your web design while you’re learning the tricks of the trade.

另外，如果您不是CSS向导，则在学习交易技巧时，仍可以在Web设计中利用Bootstrap的功能。

### Bootstrap是一个很棒的原型制作工具 **(**Bootstrap Is a Great Prototyping Tool**)** ###

Sometimes you just need to a working prototype for a client. Bootstrap lets you do this in no time and with very little to no custom code. This doesn’t only hold for the grid system, but also for all the ready-made components it has to offer.

有时，您只需要一个适用于客户的原型。 Bootstrap使您可以立即执行此操作，而只需很少甚至没有自定义代码。 这不仅适用于网格系统，还适用于它必须提供的所有现成组件。

Just add a little markup and your prototype will boast a sleek responsive navigation bar or a fancy alert box.

只需添加一些标记，您的原型就会拥有时尚的响应式导航栏或精美的警报框。

### 在使用Bootstrap构建的旧网站上工作 **(**Working on Older Websites Built With Bootstrap**)** ###

One common task for developers is to work on existing websites coded by other developers. There’s no denying the fact that a huge number of websites rely on Bootstrap for their front end. Knowing how to work with the framework will come very handy if it’s up to you to refactor and maintain the codebase. It’s not by chance that still lots of job postings have Bootstrap in their list of desired skills.

开发人员的一项常见任务是在其他开发人员编码的现有网站上工作。 不可否认，大量网站都依赖Bootstrap作为前端。 如果您要重构和维护代码库，则知道如何使用该框架将非常方便。 仍然有很多职位空缺在所需技能列表中包含Bootstrap并非偶然。

## 结论 **(**Conclusion**)** ##

To conclude, Bootstrap is not going away any time soon. The latest release comes with huge improvements over the previous versions, from the clever use of Sass mixins and maps for easy customization to the introduction of new components, utility classes, and an ever more modular architecture.

总而言之，Bootstrap不会很快消失。 最新版本对以前的版本进行了巨大的改进，从巧妙地使用Sass mixins和映射以方便自定义到引入新的组件，实用程序类以及更加模块化的体系结构。

Add to this great documentation and ease of use, and Bootstrap is still a mighty contender in the front-end ecosystem.

除了出色的文档和易用性之外，Bootstrap仍然是前端生态系统中的强大竞争者。

What do you think? Is your next project going to be built with Bootstrap or CSS Grid?

你怎么看？ 您的下一个项目是否要使用Bootstrap或CSS Grid构建？

**If you’ve heard about Bootstrap but have been putting off learning it because it seems too complicated, then play through our [Introduction to Bootstrap 4][] course for a quick and fun introduction to the power of Bootstrap.**

**如果您听说过Bootstrap但由于似乎过于复杂而推迟学习它，请浏览我们的[Bootstrap 4入门][Introduction to Bootstrap 4]课程，快速而有趣地介绍Bootstrap的功能。**

> 翻译自: [https://www.sitepoint.com/css-grid-layout-vs-css-frameworks-debate/][https_www.sitepoint.com_css-grid-layout-vs-css-frameworks-debate]

css 网格布局

[CSS Grid Layout]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
[Flexbox]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
[Grid]: https://caniuse.com/#search=css%20grid
[Flexbox 1]: https://caniuse.com/#search=flexbox
[Bootstrap]: https://getbootstrap.com
[defines it as follows]: https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/
[Simple web page layout built with CSS Grid]: /images/20221123/901c2124ac544ca8926d3d59faad6f5b.png
[3.6_ of the entire Internet]: https://trends.builtwith.com/docinfo/Twitter-Bootstrap
[Bootstrap usage]: /images/20221123/74771d1d9e21461f93657b0bb64f2e30.png
[Sass files]: http://getbootstrap.com/docs/4.0/getting-started/theming/
[CSS Grid]: https://www.sitepoint.com/introducing-the-css-grid-layout/
[card component]: http://getbootstrap.com/docs/4.0/components/card/
[responsive navbar]: http://getbootstrap.com/docs/4.0/components/navbar/
[tooltips]: http://getbootstrap.com/docs/4.0/components/tooltips/
[carousels]: http://getbootstrap.com/docs/4.0/components/carousel/
[dropdown buttons]: http://getbootstrap.com/docs/4.0/components/dropdowns/
[Introduction to Bootstrap 4]: https://www.sitepoint.com/premium/courses/introduction-to-bootstrap-4-2984
[https_www.sitepoint.com_css-grid-layout-vs-css-frameworks-debate]: https://www.sitepoint.com/css-grid-layout-vs-css-frameworks-debate/