twitter-bootstrap 切换到 twitter bootstrap 的利弊

Pros/Cons of switching to twitter bootstrap

提问by dan_vitch

I am working for an enterprise level SaaS company. The product is live and is about 6 months old in terms of development. Obvious we are still in our infancy as both a company and a product.

我在一家企业级 SaaS 公司工作。该产品已上线，开发时间约为 6 个月。显然，无论是作为一家公司还是作为一种产品，我们都仍处于起步阶段。

One of our project guys purchased a theme he found online. Its has some nice images in it, but other than that it's mostly garbage. The only other add-on being used for ui is jquery ui. I guess it would help to mention we use the Microsoft stack (C#, MVC3, Visual Studio). We also dabble in Html5 and Css3.

我们的一个项目人员购买了他在网上找到的主题。它有一些不错的图像，但除此之外，它大多是垃圾。用于 ui 的唯一其他附加组件是 jquery ui。我想提及我们使用 Microsoft 堆栈（C#、MVC3、Visual Studio）会有所帮助。我们还涉足 Html5 和 Css3。

Recently I have been hearing from my dev friends how great bootstrap is, and how to not use it is the pinnacle of foolishness. I would like to take the idea of using bootstrap to others in the company, but I wanted to get feedback from the SO community first.

最近我从我的开发朋友那里听说 bootstrap 有多棒，如何不使用它是愚蠢的顶峰。我想将使用引导程序的想法带给公司中的其他人，但我想首先从 SO 社区获得反馈。

What are the pros/cons in switching? Would you recommend it? If yes how hard would you push for the switch?

切换的优缺点是什么？你会推荐它吗？如果是，你会用多大的力气推动开关？

回答by Tim Medora

It's a bit of a subjective question, but I've wondered myself so I will attempt an answer.

这是一个有点主观的问题，但我想知道自己，所以我会尝试回答。

Assuming you can integrate it into your product (a separate discussion), Bootstrap will get you to a decent place quickly. I say "decent", because I don't consider it to be the end-all.

假设您可以将它集成到您​​的产品中（单独讨论），Bootstrap 将让您快速找到合适的地方。我说“体面”，因为我不认为这是最终的结果。

Pros

优点

• works in all modern browsers
• "mobile first" approach in version 3
• normalizes many little CSS annoyances
• lightweight
• customizable
• encourages use of LESS CSS (http://lesscss.org)
• gives consistency
• helps aesthetically-challenged developers (although I believe every developer should have a working knowledge of UX)
• many great-looking starter templates available (https://wrapbootstrap.com/, http://bootswatch.com/, etc.)
• integrated with jQuery (some might consider this a negative)
• comes with some jQuery plugins
• some jQuery plugins now offer Bootstrap theming

• 适用于所有现代浏览器
• 版本 3 中的“移动优先”方法
• 规范了许多小的 CSS 烦恼
• 轻的
• 可定制
• 鼓励使用 LESS CSS ( http://lesscss.org)
• 提供一致性
• 帮助审美有挑战的开发人员（尽管我相信每个开发人员都应该具备 UX 的工作知识）
• 许多漂亮的入门模板可用（https://wrapbootstrap.com/、http://bootswatch.com/等）
• 与 jQuery 集成（有些人可能认为这是负面的）
• 附带一些 jQuery 插件
• 一些 jQuery 插件现在提供 Bootstrap 主题

Cons

缺点

• Weak when it comes to complex data entry screens. Of course, screens should be made simple for users, but that doesn't mean a form might not be technically complex. Sometimes, users are well-trained and wantcomplex forms so that they can rapidly do work.

• jQuery plugins are limited. Certainly, you can integrate your own, find other 3rd party controls, etc. But out of the box, you are missing the heavy-hitters, like grids, tree views, drag and drop, etc.

• Naming conventions and semantics are mediocre. Example: using the <i>tag for icons. Class names like "pull-right".

• It's very customizable, but inevitably many sites start looking alike (just like Wordpress—consider how many blog sites look the same).

• 在复杂的数据输入屏幕方面较弱。当然，屏幕应该对用户来说是简单的，但这并不意味着表单在技术上可能不复杂。有时，用户训练有素，需要复杂的表格，以便他们可以快速完成工作。

• jQuery 插件是有限的。当然，你可以集成你自己的，找到其他 3rd 方控件等等。但是开箱即用，你会错过重量级的东西，比如网格、树视图、拖放等等。

• 命名约定和语义是平庸的。示例：使用<i>图标的标签。类名，如“pull-right”。

• 它是非常可定制的，但不可避免地，许多站点开始看起来很相似（就像 Wordpress——考虑有多少博客站点看起来相同）。

And finally, the great pro andcon: it's someone else's code. You didn't write it; if you want it to work differently, you must discover how to do so, and how to deviate from the established code stream.

最后，优点和缺点：这是别人的代码。不是你写的；如果你想让它以不同的方式工作，你必须发现如何做到这一点，以及如何偏离既定的代码流。

Case Studies

实例探究

Here's how I've approached it on several recent projects. All are written using c#, ASP.Net MVC, HTML5, CSS 2/3 and jQuery (similar to the development stack in the question).

这是我在最近的几个项目中处理它的方式。所有这些都是使用 c#、ASP.Net MVC、HTML5、CSS 2/3 和 jQuery（类似于问题中的开发堆栈）编写的。

For reference, I'm a fairly solid in JavaScript and CSS. If no one on your development team is strong in CSS or JavaScript, starting from scratch will be a daunting task (and probably a waste of time).

作为参考，我在 JavaScript 和 CSS 方面相当扎实。如果您的开发团队中没有人精通 CSS 或 JavaScript，那么从头开始将是一项艰巨的任务（并且可能是在浪费时间）。

Safety/Compliance Product

安全/合规产品

This product features a complex security model and is heavy on data entry/workflow. The business processes managed by the application are complex, so the chief goal of the UI is simplicity. I started with Bootstrap, but ripped it out within a day because I knew I would want complete control and I already had basic CSS patterns and a handful of JavaScript components of my own to build upon.

该产品具有复杂的安全模型，并且数据输入/工作流程繁重。应用程序管理的业务流程很复杂，因此 UI 的主要目标是简单。我从 Bootstrap 开始，但在一天之内就把它撕掉了，因为我知道我想要完全控制，而且我已经有了基本的 CSS 模式和一些我自己的 JavaScript 组件来构建。

However, I kept LESS CSS. I also liked the color-coded buttons. Occasionally (and this is still true), I used Bootstrap as reference to see how a widely-used framework approaches a particular challenge.

但是，我保留了 LESS CSS。我也喜欢彩色编码的按钮。偶尔（现在仍然如此），我使用 Bootstrap 作为参考，以了解广泛使用的框架如何应对特定挑战。

I knew I had the luxury of being able to devote a great deal of time to this product, and I made the time commitment to improve my own framework and my own documentation. The deeper I got into the product, the more freedom/extensibility I needed to achieve the UI I wanted.

我知道我有幸能够为这个产品投入大量时间，并且我承诺改进我自己的框架和我自己的文档。我对产品了解得越深，实现我想要的 UI 所需的自由度/可扩展性就越大。

This product has been commercially demonstrated and sold, and the user interface has been very well-received. I made the right choice by spending the time on my own code.

该产品已经进行商业演示和销售，用户界面非常受欢迎。我把时间花在自己的代码上，做出了正确的选择。

Online Wizard

在线向导

This was a simple, public-facing site which collects user information. I designed most of the solution, but I did not work on it full-time.

这是一个简单的面向公众的网站，用于收集用户信息。我设计了大部分解决方案，但我没有全职工作。

Initially, using Bootstrap went quite well. In fact, this answer touted Bootstrap as a success before the project was complete.

最初，使用 Bootstrap 非常顺利。事实上，这个答案在项目完成之前就吹捧 Bootstrap 是成功的。

The team liked Bootstrap and had familiarity with it. They rapidly built a few mockups using a customized Bootstrap template. The resulting user experience was far above average and Bootstrap saved time. The team had no trouble finding documentation when needed.

团队喜欢 Bootstrap 并熟悉它。他们使用定制的 Bootstrap 模板快速构建了一些模型。由此产生的用户体验远远高于平均水平，并且 Bootstrap 节省了时间。团队在需要时可以轻松找到文档。

Digging into the "someone else's code" in the Bootstrap template proved to be challenging for the team, but they managed to strip out the things that were unneeded and make it look acceptable.

在 Bootstrap 模板中挖掘“其他人的代码”被证明对团队来说具有挑战性，但他们设法去除了不需要的东西并使其看起来可以接受。

Bootstrap took the project through the prototype phase. Once we began to fine-tune, it became much less useful. We never made a decision to "stop using Bootstrap", but by the time the project went live, we had found superior JavaScript components and customized the CSS beyond recognition.

Bootstrap 将项目带到了原型阶段。一旦我们开始微调，它就变得不那么有用了。我们从未决定“停止使用 Bootstrap”，但是当项目上线时，我们已经找到了优秀的 JavaScript 组件并定制了无法识别的 CSS。

Simple Public Website

简单的公共网站

This website is purely for marketing and needed to be built rapidly. My customer purchased a template they liked and we customized it in a matter of hours.

本网站纯粹用于营销，需要快速建立。我的客户购买了他们喜欢的模板，我们在几个小时内对其进行了定制。

The template's code was reasonably easy to navigate. The only difficulty was that it was written for a prior version of Bootstrap.

模板的代码相当容易浏览。唯一的困难是它是为 Bootstrap 的先前版本编写的。

Is it perfect? No. But it got the job done in a hurry and works well on most devices with very little effort on my part.

它是完美的吗？不。但它很快就完成了工作，并且在大多数设备上都能很好地运行，而我只需很少的努力。

Documentation Websites

文档网站

I have used Bootstrap—100% uncustomized—to reduce the time taken to build professional-looking documentation for online systems (e.g. API docs). For this purpose, I love it. It allows me to provide professional-looking content with zero energy wasted on style.

我使用了 Bootstrap（100% 未定制）来减少为在线系统（例如 API 文档）构建具有专业外观的文档所花费的时间。为此，我喜欢它。它使我能够提供具有专业外观的内容，并且在风格上浪费零能量。

Conclusion

结论

If you are short on time and/or experience, consider Bootstrap. If you are planning a major product, be prepared that you may need to "dig deep" into the code.

如果您的时间和/或经验不足，请考虑 Bootstrap。如果您正在计划一个主要产品，请准备好您可能需要“深入”代码。

It is certainly possible to use Bootstrap to build a great-looking site. And it is equally possible to do so without.Use the right tool for the job. Investigating Bootstrap as a candidate tool at least once is probably worth the time. Even if you are experienced, you may pick up a few techniques.

使用 Bootstrap 构建一个漂亮的站点当然是可能的。同样也可以不这样做。为工作使用正确的工具。将 Bootstrap 作为候选工具至少调查一次可能是值得的。即使您有经验，也可以掌握一些技巧。

Recently I have been hearing from my dev friends how great bootstrap is, and how to not use it is the pinnacle of foolishness.

最近我从我的开发朋友那里听说 bootstrap 有多棒，如何不使用它是愚蠢的顶峰。

Very few technical things (or the omission thereof) are "the pinnacle of foolishness". Take a weekend and try integrating into a part of your product. You will very quickly see its strengths/weaknesses and begin to determine its value.

很少有技术性的东西（或其遗漏）是“愚蠢的顶峰”。花一个周末时间，尝试将其集成到您的产品的一部分中。您将很快看到它的优势/劣势，并开始确定其价值。

回答by acjay

Don't view Bootstrap as a choice. Tim Medora made a lot of good points. But I would note that it's always possible to pull individual pieces of Bootstrap and to customize aspects of it to get something that looks fresh, either by digging into the code or using the homepage's customize page. Sure, if you keep the basic navbar and menus, you're going to get something that feels very conventional, and that may be a problem. But lots of people have used Bootstrap to make unique looks.

不要将 Bootstrap 视为一种选择。蒂姆·梅多拉 (Tim Medora) 提出了很多好观点。但我要指出，通过深入研究代码或使用主页的自定义页面，始终可以提取 Bootstrap 的各个部分并对其进行自定义，以获得看起来新鲜的内容。当然，如果你保留基本的导航栏和菜单，你会得到一些感觉非常传统的东西，这可能是一个问题。但是很多人已经使用 Bootstrap 来制作独特的外观。

It's perfectly acceptable to use the grid system but design your own components. Or ditch the grid and use their components. It's not an either/or proposition. The only time it really gets tricky is when you decide you really want to change something, like the look and feel of a menu. The "right way" to do it isn't always readily apparent. You may have to dig pretty deep into the code, and it can be tough to make sure you're changes aren't breaking something else. But that's still better than not having an example to pull from at all.

使用网格系统但设计自己的组件是完全可以接受的。或者抛弃网格并使用它们的组件。这不是一个非此即彼的提议。唯一真正变得棘手的时候是当您决定真的要更改某些内容时，例如菜单的外观和感觉。做到这一点的“正确方法”并不总是显而易见的。您可能必须深入挖掘代码，并且很难确保您的更改不会破坏其他内容。但这总比没有一个例子要好。

I think the only mistake you can make is not taking a thorough look at what Bootstrap can provide you.

我认为您可能犯的唯一错误是没有彻底了解 Bootstrap 可以为您提供什么。

回答by Marcin Skórzewski

Bootstrap gives you some set of solutions for grid system, styles and CSS tricks, and JS components. Some of them are not for you, but it is not the all-or-nothing choice. Take a loot at it as the nice default to start with, which is aesthetically correct ;) and portable. If you will leave this default without customizing then your site will be similar to all other products leaving the same default, but it is good starting point. Button styles and navbar in BS are the same in most BS products, but also button styles are the same in most products that do not use BS ;)

Bootstrap 为您提供了一些针对网格系统、样式和 CSS 技巧以及 JS 组件的解决方案。其中一些不适合您，但这不是全有或全无的选择。把它作为一个很好的默认值开始，这在美学上是正确的 ;) 和便携。如果您将保留此默认设置而不进行自定义，那么您的站点将类似于保留相同默认设置的所有其他产品，但这是一个很好的起点。BS 中的按钮样式和导航栏在大多数 BS 产品中是相同的，但在大多数不使用 BS 的产品中按钮样式是相同的 ;)