Twitter bootstrap 和 Angular.js 之间真正的（或隐藏的）区别

Posted 2023-02-19

【中文标题】Twitter bootstrap 和 Angular.js 之间真正的（或隐藏的）区别

【英文标题】：The real (or hidden) difference/s between Twitter bootstrap and Angular.js

【发布时间】：2013-07-20 17:28:42

【问题描述】：

我刚刚比较了这两个前端框架，据我所知，它们在为开发人员提供 html、CSS 和 JS 前端方面似乎做了完全相同的事情。

Boostrap：时尚、直观且功能强大的前端框架，用于更快、更轻松地进行 Web 开发。 （超过 53 000 人在 GitHub 上星标）

Angular.js：AngularJS 是一个用于动态 Web 应用程序的结构框架。 （GitHub 上有 12 000 个星标）

评级没有任何意义，但我只是想我会把它放在那里以表明这不是我没有研究的“快速”问题。

根据我通过 wikipedia 对 Angular 的了解，它旨在将前端设计/布局/ui 与后端完全分开——数据库在哪里、Web 服务器在哪里以及业务逻辑发生在哪里。

根据我对引导程序（及其 JS）的理解，您可以实现完全相同的目标。

角度网站提到：

其他框架通过抽象出 HTML、CSS 和/或 javascript 或提供操作 DOM 的命令式方法来处理 HTML 的缺点。这些都没有解决 HTML 不是为动态视图设计的根本问题。

现在我不确定他们是否对骨干或什至引导程序进行了攻击（如果你很容易被冒犯，那么请忽略这些攻击评论），但对我来说，我就是不知道是什么两者之间存在真实和真实的差异。

也许有一些关于 DOM 的高级信息或 JS 或 HTML 的一些其他微小/微小的方面使两者不同，但我只是没有看到它。

PS。不存在这样的 SOF 问题，也没有任何博客谈论它（除非它的排名非常低或者我问错了）。

我还发现有些人正在努力将引导程序的各个方面移植到 Angular。

编辑：考虑一下，我意识到 bootstrap 为不同的屏幕视图提供了调整大小的选项，我不确定 angular 是否可以。如果不是，那是唯一的区别吗？

【问题讨论】：

谢谢大家。这两个答案都很有意义。我从来没有这样想过。因此，似乎 angular 更适合高级 JS，而 bootstrap 则更基于设计。我对这两个答案都投了赞成票。也许它们可以合并以获得最佳答案？

【参考方案1】：

Bootstrap 是一个设计框架，用于构建简单、美观的组件和响应式设计。它还具有基本的 js 组件，可以让任何开发人员的生活变得更轻松，尤其是后端开发人员，他们对 HTML 设计规则不是很有经验。

所以，只需放置 css，检查示例，然后将其复制到您的项目中。这是 Bootstrap 的主要流程。

Angular 是一个 JS 框架，用于构建复杂的 Web 应用程序。它符合 Backbone、Ember Js。

举一个简单的表单示例，您希望在提交时进行 ajax 调用。现在您可以通过 Bootstrap CSS 制作漂亮的表单，但您需要使用 javascript 或在本例中使用 angular 来进行 ajax 调用并执行所需的功能。

这些在网络应用程序中齐头并进，它们不是竞争对手。

【参考方案2】：

Bootstrap 和 AngularJS 是两个非常不同的框架。

来自 SO 标签信息

Twitter 引导

Bootstrap 是 Twitter 的一个前端框架，旨在启动 网络应用程序和网站的开发。除其他外，它包括基础 用于排版、图标、表单、按钮、表格、布局的 CSS 和 HTML 网格、导航以及定制的 jQuery 插件和支持 用于响应式布局。

AngularJS

AngularJS 是一个用于构建 CRUD 的开源 JavaScript 框架 以 AJAX 风格为中心的 Web 应用程序。它的目标是填充浏览器 使用对构建有用的指令来扩充 HTML 词汇表 动态网络应用。

Angular 附带添加 2 路数据绑定、DOM 控制的指令 和展开、代码隐藏 DOM、表单验证和深度链接。

根据我对 bootstrap（及其 JS）的理解，您可以实现完全相同的目标。

没有同样的事情不能通过引导来实现。 AngularJS 为您提供诸如 2 路数据绑定、深度链接、路由、过渡动画等功能。 bootstrap 提供了基于 jquery 的自定义插件、酷炫的外观和用于媒体查询的 css 类等。 它们一起很棒，因为 Angular 可以与其他库一起使用。

【参考方案3】：

角度和引导 首先，Angular 和 Bootstrap 不是替代品，而是互补的。意思是一个不被另一个替代，但它们可以组合在一起，可以相互补充。换句话说，它们处理 Web 应用程序的不同方面。因此，它们在任何意义上都没有可比性。 但是，它们之间的区别和相似之处可以通过以下项目符号来说明。

什么是 Angular？

由 Google 开发和维护 全面的客户端（朋友端）JavaScript 框架 专为雄心勃勃的 JavaScript 单页应用程序而设计 提供一组组件来构建您的应用程序并组织 项目 前端的逻辑层以以下形式很好地包裹起来 模块、指令、数据绑定

Angular 不是什么？

不提供 CSS 样式、网格类或 JavaScript 组件 （如模态、选项卡、导航栏、下拉菜单）

什么是引导程序？

由 Twitter 开发，现已开源 一组结构良好的 CSS 样式、网格类和 JavaScript 组件帮助动画，创建漂亮的小部件（有 否则自己写） 便于构建非常适合小型项目的响应式设计 无需太多定制和开发工作

Bootstrap 不是什么？

不为应用程序提供结构 不提供通用功能（如路由、控制器和 模型，MV* 架构）

共同点（Angular 和 Bootstrap）

朋友端框架 强大的开源支持 带有一组预定义的组件来固定/缓解 发展

对比（Angular 与 Bootstrap）

JS（结构）框架与 CSS（主题）框架 处理逻辑与处理样式 健壮的框架与小规模的框架 适用于单页应用程序与任何结构

【参考方案4】：

很好的答案@tony Puthenveettil 添加（并在 5000 英尺的高度进行）。 让我们假设您的网站是您自己的实体百货商店。你的百货公司的设计主要有以下几个方面：

您希望如何将您的商店划分为不同的部分，例如： 一种。牛奶和早餐 湾。薯条和巧克力 C。谷物和全食物 d。肉和鸡肉

如何创建每个部分的布局

虽然你们中的一些人可能会认为我们为什么需要对您的商店进行划分。但最终，它非常重要。因为管理和维护你的东西会容易得多。

想象一下你的商店没有订单，不同的物品被放置在不同的区域

例如您会在巧克力旁边找到肉类冰箱。奇怪吧？难以管理和维护。是的！

所以我们需要对您的各个部分进行划分。

现在让我们跳转到每个部分的外观。与肉类相比，您可能希望放置不同的信息和不同的外观来组织巧克力。虽然您的肉类部分可能是大冰箱，但您的巧克力部分可能有打开的托盘！

因此，Angular 可以帮助您创建和维护隔间。冰箱或打开的托盘就是引导程序！