什么是Bootstrap?

Пан*_*лев 502 html css frontend twitter-bootstrap

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

所以,我的问题是:

  • 什么是Bootstrap?
  • 它用于什么,它如何帮助前端开发?
  • 我还想了解更多细节.

hut*_*oid 265

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

更新

官方的boostrap网站已更新,其中包含明确的定义.

"Bootstrap是最受欢迎的HTML,CSS和JS框架,用于在Web上开发响应式移动优先项目."

"由@mdo@fat设计和建造世界上所有的爱."

  • 我认为回答这个问题最相关的是遵循上面答案中提供的标有"例子"的链接.从他们的网站复制/粘贴Bootstrap的定义显然是无用的,因为发布问题的用户明确提到已经查看过bootstrap网站.我不认为从他们的网站看到相同的文字会更有意义,因为它现在用Bold编写. (14认同)
  • @hutchonoid它可能是一个明确的定义,因为你使用Bootstrap很长一段时间,但相信我,他们网站上的定义是**原因**为什么我搜索这个答案 - 我无法理解它是什么意思.所以我完全同意Mihaela的观点.如果我搜索这个问题的答案,我不希望它是来自网站的相同引用,只是更大的字体.你的解释没有意义,因为过去提出这个问题的用户现在不再需要答案了,现在的任何人肯定会首先看到网站上的描述. (12认同)
  • @logan Joomla和Bootply没有可比性.Joomla是一个基于PHP和SQL的内容管理系统,而Bootply是一个用于试验Bootstrap框架的网站(完全不同).将Bootply想象成一个专门用于Bootstrap的JSFiddle.是的,Bootply总是免费的. (8认同)
  • @hutchonoid:bootply 总是免费的吗?Joomla 和 bootply 有什么区别?哪一个更好 ? (3认同)
  • @Mihaela 您需要在此处花时间了解上下文。查看 Shog9 在问题中关于何时重新打开的评论。在回答网站时没有我包含的文本,这就是他们问这个问题的原因。我认为文本现在非常清楚网站上的内容。我也保留了我原来的答案,所以它和我添加之前一样。我觉得他们现在在他们的网站上解释得非常清楚,所以我已经调整了我的答案来说明这一点。 (2认同)
  • 也许有人提到它最适合的项目?(即.临时站点,小型网络应用程序,微型站点等?) (2认同)

Gow*_*kar 93

Bootstrap是由Twitter团队开发的开源Javascript框架.它是HTML,CSS和Javascript代码的组合,旨在帮助构建用户界面组件.Bootstrap也被编程为支持HTML5和CSS3.

它也被称为前端框架.

Bootstrap是一个免费的工具集合,用于创建网站和Web应用程序.

它包含用于排版,表单,按钮,导航和其他界面组件的HTML和基于CSS的设计模板,以及可选的JavaScript扩展.

程序员喜欢Bootstrap Framework的一些原因

  1. 易于上手

  2. 伟大的网格系统

  3. 大多数HTML元素的基本样式(排版,代码,表格,表单,按钮,图像,图标)

  4. 广泛的组件清单

  5. 捆绑的Javascript插件

摘自关于Bootstrap框架

  • 作为一个组件或小部件的集合,它比"框架"更让我感到震惊.你能澄清一下"框架"究竟构成什么,以及何时组件库不再是组件库并开始成为"框架"?它与"网格系统"有关吗? (13认同)

小智 22

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

  • 实际上,bootstrap不仅仅是一个'css文件'. (8认同)

gau*_*mar 21

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

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

Bootstrap使您可以免于编写大量CSS代码,还可以节省您在设计网页上花费的时间.


val*_*ver 17

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


Mul*_*ter 7

免责声明:我过去曾使用过 bootstrap,但我以前从未真正理解过它到底是什么,这个描述来自我今天自己的定义。我知道 bootstrap v4 已经出来了,但我发现 bootstrap v3 文档更清晰,所以我使用了它。该库不会从根本上改变它所提供的内容。

简要地

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

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

它由什么组成?

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

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

  • 为标准 html 元素设置样式的纯 CSS 文件。因此,Bootstrap 使您的标准元素看起来很漂亮。例如:<input class="btn btn-default" type="button" value="Input">Click me</button>
  • CSS 文件在标准 html 元素上使用样式,使它们不是标准 html 元素,而是标准Bootstrap 元素(例如https://getbootstrap.com/docs/3.3/components/#progress)。通过这种方式,Bootstrap 以视觉上一致的方式扩展了“标准”Web 元素的列表。例如:<span class="glyphicon glyphicon-align-left"></span>
  • CSS 类在设计时考虑了 jQuery。在内部,Bootstrap 使用 jQuery 选择器动态修改样式并与 DOM 交互,从而为用户提供相同的功能。我相信这需要更多解释,所以......

使用 JavaScript/jQuery

Bootstrap相当多地扩展了 jQuery 。如果我们查看源代码,我们可以看到它使用 jQuery 来执行以下操作:为 keydown 事件设置侦听器以与 dropdowns 交互。当您将其导入到标记中时,它会完成所有 jQuery 设置<script>,因此您需要确保 jQuery 在 Bootstrap 之前加载。

此外,它比普通 jQuery 将 javascript 与 DOM 联系得更紧密,提供了javascript类接口。例如,以编程方式切换按钮。请记住,CSS 只是定义了事物的外观,因此这些操作的主要工作往往是修改当时应用于该元素的 CSS 类。这种基于用户输入的更改无法使用纯 CSS 来完成。

CSS 未涵盖我们互联网用户所习惯的其他与用户的标准交互。例如,单击一个链接可以向下滚动页面而不是更改页面。Bootstrap 为您提供的功能之一是在您自己的网站上实现此行为的简单方法。

标准

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

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

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

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