什么是Bootstrap?


512

这里有很多与Bootstrap相关的问题。我看到很多人在使用它。因此,我尝试进行研究,找到了Bootstrap官方网站,但之后只有一个下载部分和几句话。没有什么可以解释它的作用是什么...我只是了解它是一个前端帮助器。我试图通过Google搜索找到一些东西,但没有发现任何具体问题。我发现的一切都与计算机科学定义有关。

因此,我的问题是:

  • Bootstrap到底是什么?
  • 它的作用是什么,它如何帮助前端开发?
  • 我还想解释一些细节。

这个问题很好回答。对于发布新答案,请三思而后行,特别是如果您打算从其他地方复制粘贴您的答案时,请三思而后行。
meagar

出于所有应有的尊重,@ meagar,这个问题似乎是在要求一个非常具体而准确的答案,而被接受的答案就可以避免。从技术上讲,这意味着无法很好地回答。阅读完每个答案(包括已删除的答案)后,我添加了自己的答案,我希望该答案可以解释Bootstrap的含义,这些术语通常且易于理解,主要目的是减少初学者的困惑(这就是我对这个问题的理解)。

Answers:


271

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

更新资料

官方引导网站已更新,并包含清晰的定义。

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

“由@mdo@fat结合世界上所有的爱进行设计和建造。”


2
@hutchonoid:bootply总是免费的吗?Joomla和bootply有什么区别?哪一个更好 ?
logan 2014年

9
@logan Joomla和Bootply不具有可比性。Joomla是一个基于PHP和SQL构建的内容管理系统,而Bootply是一个用于尝试使用Bootstrap框架的网站(完全不同)。将Bootply视为专门用于Bootstrap的JSFiddle。是的,Bootply始终免费。
APAD1 2014年

15
我认为与回答此问题最相关的方法是点击上面答案中标有“示例”的链接。鉴于发布问题的用户清楚地提到过已经查看了Bootstrap网站,因此从他们的网站复制/粘贴Bootstrap的定义显然没有用。我认为从他们的网站上看到相同的文本不会仅仅因为它现在是用粗体写的就更有意义。
Mihaela 2015年

13
@hutchonoid这可能是一个清晰的定义,因为您使用Bootstrap已有很长时间了,但是请相信我,他们网站上定义是我搜索此答案的原因 -我无法理解它的含义。因此,我对此表示完全同意。如果我搜索此问题的答案,我不希望它与网站上的报价相同,只是字体较大。您的解释没有任何意义,因为过去曾问过此问题的用户现在不再需要答案,因此现在的任何人都一定会先从网站上看到该描述。
安徒生

2
也许有人提到了最适合的项目?(即临时网站,小型Web应用程序,微型网站等?)
Chuck Le Butt

94

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

也称为前端框架。

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

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

程序员偏爱Bootstrap框架的一些原因

  1. 易于上手

  2. 伟大的网格系统

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

  4. 广泛的组件清单

  5. 捆绑的Javascript插件

取自关于Bootstrap框架


16
作为“组件”或“小部件”的集合,它给我的印象更多,而不是“框架”。您能否阐明什么才是“框架”以及什么时候组件库不再是组件库而开始成为“框架”?与“网格系统”有关吗?
柯比·华莱士

25

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


10
实际上,引导程序不仅仅是一个“ css文件”。
食谱

1
我同意@Recipe的观点不仅仅与CSS文件有关
Sujay sreedhar 2015年

1
我个人同意闪电战。并不是因为他拥有Bootstrap的功能的完整列表,而是在我复杂的商店中,我主要使用纯粹的编码,并且将Bootstrap用作其最基本的CSS功能。这就是其优势的核心。
Suamere

1
这是一个很差的回答,很糟糕,无法解释CSS(仅CSS)的作用。不赞成投票。它基本上只是说明您可以使用CSS,然后引用这些类来修改UI。引导程序本身不会与其他打包资源无关。
RichieHH

22

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

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

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


18

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


4

免责声明:过去我曾经使用过引导程序,但是我从来没有真正欣赏过它的真正含义,今天的描述来自我自己的定义。而且我知道bootstrap v4已经发布,但是我发现bootstrap v3文档更加清晰,因此我使用了它。该库不会从根本上改变其提供的内容。

简要地

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

打个比方,这有点像在Powerpoint中应用主题,但对于您的网站:无需太多的初始工作即可使事情看起来很不错。

它由什么组成?

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

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

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

使用Javascript / jQuery

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

此外,它比普通jQuery更紧密地将javascript与DOM绑定在一起,从而提供了javascript类接口。例如以编程方式切换按钮。请记住,CSS只是定义事物的外观,因此这些操作的主要工作是倾向于及时修改将哪些CSS类应用于该元素。这种基于用户输入的更改无法通过普通CSS进行。

CSS并未涵盖我们习惯于互联网的其他与用户进行的其他标准交互。就像单击一个向下滚动页面而不是更改页面的链接一样。Bootstrap给您的一件事是在您自己的网站上实现此行为的简便方法。

标准品

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

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

我认为,当gulp和babel不那么受欢迎时,Bootstrap更受欢迎。看着Bootstrap,似乎是每个人都在编译他们的JavaScript之前。它仍然很重要,但是您现在可以从其他来源获得一些好处。

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


3

Bootstrap是一个HTML,CSS,JS框架,具有许多组件,可让您快速创建美观而现代的网站或Web应用程序。

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

bootsnipp.com

startbootstrap.com

bootdey.com


1

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

  • 它很容易使用
  • Bootstrap具有强大的社区支持
  • 定制很容易
  • 它提高了开发速度
  • 反应性

    有关更多详细信息,您可以访问官方网站:https : //getbootstrap.com/

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


1

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

但是,准确无误的是,Bootstrap是CSS,JavaScript和HTML 设计实用程序的开源,移动优先的集合,旨在提供比不得不从头开始编写代码更快,更聪明的开发常用Web元素的手段。 。

有助于Bootstrap成功的一些核心原则:

  • 可重用
  • 它很灵活(即:允许自定义网格系统,轻松更改响应断点,列装订线大小或状态颜色;根据经验,大多数设置由全局变量控制)
  • 这很直观
  • 它是模块化的(JavaScript和(S)CSS都使用模块化方法;可以轻松找到有关制作自定义Bootstrap构建的教程,仅包括所需的部分)
  • 跨浏览器兼容性高于平均水平
  • 开箱即用的网络可访问性(支持屏幕阅读器)
  • 它有充分的记录

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


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

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

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


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

最后但并非最不重要的一点是,Bootstrap多年来一直保持良好的状态,这使其成为可用于生产环境的应用程序/网站的可靠选择。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.