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更紧密地将javascript与DOM绑定在一起,从而提供了javascript类接口。例如以编程方式切换按钮。请记住,CSS只是定义事物的外观,因此这些操作的主要工作是倾向于及时修改将哪些CSS类应用于该元素。这种基于用户输入的更改无法通过普通CSS进行。
我们还使用互联网上的其他习惯与用户进行的其他标准交互,而CSS并未涵盖这些交互。就像单击一个向下滚动页面而不是更改页面的链接一样。 Bootstrap给您的一件事是在您自己的网站上实现此行为的简便方法。
标准品
我在这里经常提到"标准"一词,这是有充分理由的。我认为Bootstrap所提供的最好的东西是一套外观漂亮的标准。您可以随意修改默认主题,但这比原始html,css和js更好。这就是为什么它被称为"框架"的原因。
不同的Web浏览器具有不同的默认样式,并且行为可能不同,并且需要不同的CSS前缀和类似的内容。 Bootstrap的一个主要好处是,它比自己编写所有跨浏览器的东西要可靠得多(我敢肯定,您仍然会遇到问题,但是更容易)。
我认为,当gulp和babel不那么受欢迎时,Bootstrap更受欢迎。看着Bootstrap,似乎是每个人都在编译他们的JavaScript之前。它仍然很重要,但是您现在可以从其他来源获得一些好处。
CSS的最新版本允许您定义这些静态列表在更改时的过渡。实际上,Bootstrap的原始版本早于在浏览器中广泛采用此功能,因此它们仍具有自己的动画类。 Bootstrap有点像这样:它周围出现了其他东西,使它看起来有点多余。 sub>
Bootstrap是一个HTML,CSS,JS框架,具有许多组件,可让您快速创建美观而现代的网站或Web应用程序。