ChatGPT解决这个技术问题 Extra ChatGPT

什么是引导程序?

这里有很多与 Bootstrap 相关的问题。我看到很多人都在使用它。于是我试着研究了一下,找到了official Bootstrap site,但是后面只有一个下载部分和几个字。没有什么可以解释它的用途......我只是明白它是一个前端助手。我试图通过谷歌搜索找到一些东西,但没有找到任何具体的东西。我发现的一切都与计算机科学定义有关。

所以,我的问题是:

什么是引导程序?

它是做什么用的,它如何帮助前端开发?

我还想要一些更多的细节来解释它。

这个问题很好回答。请在发布新答案时三思而后行,特别是如果您打算从其他地方复制粘贴您的答案。
恕我直言,@meagar,这个问题似乎要求一个非常具体和准确的答案,而接受的答案优雅地避免了它。这意味着,从技术上讲,它没有得到很好的回答。在阅读了每个答案(包括已删除的答案)之后,我添加了我自己的答案,我希望它解释了 Bootstrap 是什么,一般且易于理解的术语,主要是为了减少初学者的困惑(这就是我理解这个问题的方式)。

S
Supra621

它是一个 HTML、CSS 和 JavaScript 开源框架(最初由 Twitter 创建),您可以将其用作创建网站或 Web 应用程序的基础。

更多信息和下载链接

入门

例子

主题

Bootply - 引导编辑器和生成器

更新

官方的bootstrap website 已更新并包含明确的定义。

“Bootstrap 是最流行的 HTML、CSS 和 JS 框架,用于在 Web 上开发响应式、移动优先的项目。”

“由 @mdo@fat 倾心设计和建造。”


@hutchoroid:bootply 总是免费的吗? Joomla 和 bootply 有什么区别?哪一个更好 ?
@logan Joomla 和 Bootply 没有可比性。 Joomla 是一个基于 PHP 和 SQL 构建的内容管理系统,而 Bootply 是一个用于试验 Bootstrap 框架的网站(完全不同)。将 Bootply 视为专门用于 Bootstrap 的 JSFiddle。是的,Bootply 始终是免费的。
我认为与回答这个问题最相关的是按照上面答案中提供的标记为“示例”的链接。从他们的网站复制/粘贴 Bootstrap 的定义显然是没有用的,因为发布问题的用户明确提到已经查看了 bootstrap 网站。我不认为从他们的网站上看到相同的文本会更有意义,因为它现在是用粗体写的。
@Mihaela 您需要在这里花时间了解上下文。查看 Shog9 在问题中关于何时重新打开的评论。在回答网站时没有我包含的文字,这就是他们问这个问题的原因。我认为文本现在非常清楚它在网站上的内容。我也保留了我原来的答案,所以它和我添加它之前一样。我觉得他们现在在他们的网站上解释得很清楚,所以我调整了我的回答来说明这一点。
@hutchonoid 这对您来说可能是一个明确的定义,因为您使用 Bootstrap 很长时间了,但相信我,他们网站上的定义是我搜索这个答案的原因 - 我不明白它的意思。所以我完全同意 Mihaela 的观点。如果我搜索这个问题的答案,我不希望它与网站上的引用相同,只是用更大的字体。您的解释没有意义,因为过去提出此问题的用户现在不再需要答案,现在任何人肯定会首先看到网站上的描述。
u
user229044

Bootstrap 是由 Twitter 团队开发的开源 Javascript 框架。它是 HTML、CSS 和 Javascript 代码的组合,旨在帮助构建用户界面组件。 Bootstrap 也被编程为支持 HTML5 和 CSS3。它也被称为前端框架。 Bootstrap 是用于创建网站和 Web 应用程序的免费工具集合。它包含用于排版、表单、按钮、导航和其他界面组件的基于 HTML 和 CSS 的设计模板,以及可选的 JavaScript 扩展。程序员首选 Bootstrap 框架的一些原因 易于上手 出色的网格系统 大多数 HTML 元素的基本样式(排版、代码、表格、表单、按钮、图像、图标) 广泛的组件列表 捆绑的 Javascript 插件

取自 About Bootstrap Framework


它给我的印象更像是一个组件或小部件的集合,而不是一个“框架”。您能否阐明究竟什么构成了“框架”以及组件库何时不再是组件库而开始成为“框架”?与“网格系统”有关吗?
D
Dmitry Pleshkov

据我所知,Bootstrap 是一个定义良好的 CSS。虽然使用 Bootstrap 你也可以使用 JavaScript、jQuery 等。但主要区别在于,使用 Bootstrap 你可以只调用类名,然后在 HTML 表单上获得输出。例如。按钮着色 文本形状,使用布局。对于所有这些,您不必编写 CSS 文件,而只需使用正确的类名来塑造您的 HTML 表单。


实际上,引导程序不仅仅是一个“css 文件”。
我同意@Recipe,它不仅仅是关于 CSS 文件
我个人同意闪电战。并不是因为他有完整的 Bootstrap 功能列表,而是在我的复杂商店中,我主要使用纯粹的编码,并使用 Bootstrap 来实现其最基本的 css 功能。这是其优势的核心。
这是一个非常糟糕的回复,很糟糕地解释了 CSS(并且只有 CSS)的作用。否决。它基本上简单地解释了您可以使用 CSS,然后引用这些类来修改您的 UI。与引导自身而不是其他打包资源无关。
g
gauravparmar

简单来说,您可以将 Bootstrap 理解为由 Twitter 创建的前端 Web 框架,用于更快地创建设备响应式 Web 应用程序。 Bootstrap 也可以主要理解为其中定义的 CSS 类的集合,可以简单地直接使用。它在后台使用 CSS、javascript、jQuery 等来为 Bootstrap 元素创建样式、效果和动作。

您可能知道我们使用 CSS 来设置网页元素的样式,并创建类并将类分配给网页元素以将样式应用于它们。此处的 Bootstrap 使设计更简单,因为我们只需要包含 Bootstrap 文件并为我们的网页元素提及 Bootstrap 的预定义类名,它们将通过 Bootstrap 自动设置样式。通过这个,我们摆脱了编写自己的 CSS 类来设置网页元素的样式。最重要的是,Bootstrap 的设计方式使您的网站设备能够响应,这就是它的主要目的。 Bootstrap 的其他替代品可能是 - FoundationMaterialize 等框架。

Bootstrap 让您无需编写大量 CSS 代码,还可以节省您在设计网页上所花费的时间。


m
mukesh krishnan

Bootstrap 是一个开源的 CSS、JavaScript 框架,最初由 twitter 的设计人员和开发人员团队为 twitter 应用程序开发。然后他们将其发布为开源。作为 twitter bootstrap 的长期用户,我发现它是设计移动响应式网站的最佳选择之一。许多 CSS 和 Javascript 插件可用于立即设计您的网站。这是一种快速的模板设计框架。有些人抱怨引导 CSS 文件很重并且需要时间来加载,但这些说法是由懒惰的人提出的。您不必在您的网站中保留完整的 bootstrap.css。您始终可以选择删除网站不需要的组件样式。例如,如果您只使用表单和按钮等基本组件,那么您可以从主 CSS 文件中删除其他组件,例如手风琴等。要开始涉足引导程序,您可以从 getbootstrap 站点下载基本模板和组件,然后让奇迹发生。


M
Multihunter

免责声明:我过去使用过 bootstrap,但我从来没有真正理解过它的实际含义,这个描述来自我今天的定义。而且我知道 bootstrap v4 已经过时了,但是我发现 bootstrap v3 文档更加清晰,所以我使用了它。该库不会从根本上改变它所提供的内容。

简要地

Bootstrap 是 CSS 和 javascript 文件的集合,它为标准 html 元素提供了一些漂亮的默认样式,以及一些不是标准 html 元素的常见 Web 内容对象。

打个比方,这有点像在 powerpoint 中应用主题,但对于您的网站:它使事情看起来很漂亮,而无需太多的初始努力。

它由什么组成?

官方 v3 文档将其分为三个部分:

CSS

成分

Javascript

这些大致对应于 Bootstrap 提供的三个主要内容:

样式标准 html 元素的纯 CSS 文件。因此,Bootstrap 使您的标准元素看起来很漂亮。例如 html: 点击我

CSS 文件在标准 html 元素上使用样式以将它们变成不是标准 html 元素而是标准 Bootstrap 元素的东西(例如 https://getbootstrap.com/docs/3.3/components/#progress)。通过这种方式,Bootstrap 以视觉上一致的方式扩展了“标准”Web 元素列表。例如 html:

CSS 类的设计考虑到了 jQuery。在内部,Bootstrap 使用 jQuery 选择器来动态修改样式并与 DOM 交互,从而为用户提供相同的功能。我相信这需要更多解释,所以...

使用 Javascript/jQuery

Bootstrap extends jQuery 相当多。如果我们查看源代码,我们可以看到它使用 jQuery 来执行以下操作:set up listeners for keydown event to interact with dropdowns。当您在 <script> 标记中导入它时,它会执行所有这些 jQuery 设置,因此您需要确保在 Bootstrap 之前加载 jQuery。

此外,它比普通的 jQuery 更紧密地将 javascript 与 DOM 联系起来,提供了一个 javascript 类接口。例如toggle a button programmatically。请记住,CSS 只是定义了事物的外观,因此这些操作的主要工作往往是及时修改哪些 CSS 类应用于元素。这种基于用户输入的更改不能用纯 CSS 完成。

还有其他标准的用户交互,我们互联网的居民已经习惯了 CSS 没有涵盖的内容。比如,单击一个链接可以向下滚动页面而不是更改页面。 Bootstrap 为您提供的其中一件事是在您自己的网站上实现此行为的简单方法。

标准

我在这里多次提到“标准”这个词,这是有充分理由的。我认为 Bootstrap 提供的最好的东西是一套好看的标准。您可以随意修改默认主题,但它比原始 html、css 和 js 更好。这就是为什么它被称为“框架”。

不同的 Web 浏览器有不同的默认样式并且可以有不同的行为,并且需要不同的 CSS 前缀和类似的东西。 Bootstrap 的一个主要好处是它比自己编写所有跨浏览器的东西更可靠(我敢肯定,你仍然会遇到问题,但它更容易)。

我认为当 gulp 和 babel 不那么流行时,Bootstrap 更受欢迎。看看 Bootstrap,它似乎来自每个人都编译他们的 javascript 之前的时间。它仍然具有相关性,但您现在可以从其他来源获得一些好处。

最新版本的 CSS 允许您在这些静态列表更改时定义它们之间的转换。 Bootstrap 的原始版本实际上早于该功能在浏览器中的广泛采用,因此它们仍然有自己的动画类。有一些 Bootstrap 是这样的:周围出现了其他东西,使它看起来有点多余。


D
Deyson

Bootstrap 是一个包含许多组件的 HTML、CSS、JS 框架,可让您非常快速地创建漂亮而现代的网站或 Web 应用程序。

以下网站包含示例、元素和可重用组件,您可以使用引导框架将它们集成到您的项目中

bootsnipp.com

startbootstrap.com

bootdey.com


H
Hiws

按照今天的标准和网络术语,我会说 Bootstrap 实际上不是一个框架,尽管这是他们的网站所声称的。大多数开发人员考虑使用 Angular、Vue 和 React 框架,而 Bootstrap 通常被称为“库”。

但是,准确地说,Bootstrap 是一个开源的、移动优先的 CSS、JavaScript 和 HTML 设计实用程序集合,旨在提供比从头开始编码更快(更智能)开发常用 Web 元素的方法.

一些促成 Bootstrap 成功的核心原则:

它是可重复使用的

它很灵活(即:允许自定义网格系统、轻松更改响应断点、列间距大小或状态颜色;根据经验,大多数设置都由全局变量控制)

很直观

它是模块化的(JavaScript 和 (S)CSS 都使用模块化方法;人们可以轻松找到有关制作自定义 Bootstrap 构建的教程,仅包含他们需要的部分)

具有高于平均水平的跨浏览器兼容性

开箱即用的网络可访问性(屏幕阅读器就绪)

有据可查

它包含以下设计模板和功能:布局、排版、表单、导航、菜单(包括下拉菜单)、按钮、面板、徽章、模式、警报、选项卡、可折叠、手风琴、轮播、列表、表格、分页、媒体实用程序(包括嵌入、图像和图像替换)、响应实用程序、基于颜色的实用程序(主要、次要、危险、警告、信息、浅色、深色、静音、白色)、其他实用程序(位置、边距、填充、大小调整、间距、对齐、可见性),scrollspy,词缀,工具提示,弹出框。

默认情况下,它依赖于 jQuery,但您会发现由每个现代流行的渐进式 JavaScript 框架提供支持的 jQuery 免费变体:

React-Bootstrap - React 驱动的 Bootstrap

BootstrapVue - Vue 驱动的 Bootstrap

ng-bootstrap - Angular 驱动的 Bootstrap

使用 Bootstrap 很大程度上依赖于应用某些类(或者,取决于 JS 框架:指令、方法或属性/道具)以及使用特定的标记结构。

文档通常包含通用示例,可以轻松复制粘贴并用作入门模板。

使用 Bootstrap 开发的另一个优势是其充满活力的社区,可转化为大量可用的主题、模板和插件,其中大部分是开源的(即:日历、日期/时间选择器、用于表格内容管理的插件,如以及建立在 Bootstrap 之上的库/组件集合,例如 MDB、投资组合模板、管理模板等...)

最后但同样重要的是,Bootstrap 多年来一直得到很好的维护,这使其成为生产就绪应用程序/网站的可靠选择。


好答案。如果可能,请在您的答案中添加其他选定的链接到上述技术(如 React、Vue、Angular、框架、库等)。就像对新手和新手的额外指导一样。
A
Anushka Praveen

引导最流行的 HTML、CSS 和 JS 框架,用于在 Web 上开发响应式、移动优先的项目。它是非常流行的开源工具包。使用它很容易进行样式设置。最新版本是 bootstrap 4.bootstrap,它具有 Sass 变量和 mixin、响应式网格系统、广泛的预构建组件和强大的 JavaScript 插件。现在他们为 React Js、Angular 和 Vue 指定了他们的工具包

引导主页

Vue 引导程序

角引导

反应引导


佚名

Bootstrap 是一个开源的、移动优先的 CSS、JavaScript 和 HTML 设计实用程序集合,旨在提供开发常用 Web 元素的方法,比从头开始编码要快得多(更智能)。

一些促成 Bootstrap 成功的核心原则:

它是可重用的 它是灵活的(即:允许自定义网格系统、轻松更改响应断点、列间距大小或状态颜色;根据经验,大多数设置都由全局变量控制)它很直观它是模块化的(JavaScript 和 (S) CSS 使用模块化方法;人们可以很容易地找到有关制作自定义 Bootstrap 构建的教程,以仅包含他们需要的部分)具有高于平均水平的跨浏览器兼容性 Web 可访问性开箱即用(屏幕阅读器就绪)它有很好的文档记录


如果您引用内容,请始终注明出处。请参阅How to reference material written by others
S
Saanvi Sen

Bootstrap 是世界上最流行和使用最广泛的开源框架,用于使用 HTML、CSS 和 JS 进行开发。它是 HTML 的前端框架。 Bootstrap 有助于构建响应式网站或 Web 应用程序和 12 列网格系统,有助于将网站动态调整到合适的屏幕分辨率。当前的 bootstrap 版本是 4.3.1,并且 bootstrap 团队也正式宣布了 Bootstrap 5 版本以及从 bootstrap 中删除 jquery 等变化。引导框架最可取的一些关键原因是

它很容易使用

Bootstrap 有很大的社区支持

定制可以轻松完成

它提高了开发速度

响应性更多细节可以查看官网:https://getbootstrap.com/

建议在处理基于引导的项目时使用 Bootstrap 5 Admin Templates

来源:https://vmokshagroup.com/blog/bootstrap-advantages/


R
Rohan Sable

Bootstrap 是开源的 HTML 框架。几乎在每个浏览器上都兼容。基本上大屏幕浏览器宽度是 >992px 和超大 1200px。因此,通过使用 Bootstrap 定义的类,我们可以调整屏幕分辨率,以便在从小手机到大屏幕的每个屏幕上显示内容。我试图解释得很简短。例如 :

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>