关于html:什么是Bootstrap?

What is Bootstrap?

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

因此,我的问题是:

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


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

  • 更多信息和下载链接

  • 入门

  • 例子

  • 主题

  • Bootply-Bootstrap编辑器和生成器

更新资料

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

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

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


Bootstrap is an open-source Javascript framework developed by the team at Twitter.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap was also programmed to support both HTML5 and CSS3.

Also it is called Front-end-framework.

Bootstrap is a free collection of tools for creating a websites and web applications.

It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Some Reasons for programmers preferred Bootstrap Framework

  • Easy to get started

  • Great grid system

  • Base styling for most HTML
    elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)

  • Extensive list of components

  • Bundled Javascript plugins

  • 取自关于Bootstrap框架


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


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

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

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


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


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

    简要地

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

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

    它由什么组成?

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

    • 的CSS
    • 组件
    • Java脚本

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

    • 样式化标准html元素的普通CSS文件。因此,Bootstrap使您的标准元素看起来更漂亮。例如html:Click me
    • 在标准html元素上使用样式的CSS文件将它们变成不是标准html元素而是标准Bootstrap元素(例如https://getbootstrap.com/docs/3.3/components/#progress)的样式。这样,Bootstrap会以视觉上一致的方式扩展"标准" Web元素的列表。例如html:
    • CSS类在设计时考虑了jQuery。在内部,Bootstrap使用jQuery选择器动态修改样式并与DOM交互,从而为用户提供相同的功能。我相信这需要更多的解释,所以...

    使用Javascript / jQuery

    Bootstrap扩展了jQuery。如果我们看一下源代码,我们可以看到它使用jQuery来执行以下操作:为keydown事件设置侦听器以与下拉列表进行交互。当您在标记中导入jQuery时,它会完成所有这些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有点像这样:它周围出现了其他东西,使它看起来有点多余。


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