什么是Bootstrap？

作者: 取之
发布时间: 2024-03-23 05:54:06 (1月前)
转自：

7 条回复

0#
回复此人
雨儿 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 据我所知，Bootstrap是一个定义良好的CSS。虽然使用Bootstrap你也可以使用JavaScript，jQuery等。但主要区别在于，使用Bootstrap你可以只调用类名，然后在HTML表单上获得输出。例如。按钮塑造文本，使用布局的着色。对于所有这些，您不必编写CSS文件，而只需使用正确的类名来整形HTML表单。 </p> </DIV>

编辑
1#
回复此人
永远的记忆 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 简单来说，您可以将Bootstrap理解为Twitter创建的前端Web框架，以便更快地创建设备响应式Web应用程序。 Bootstrap也可以被理解为在其中定义的CSS类的集合，其可以简单地直接使用。它在后台使用CSS，javascript，jQuery等来为Bootstrap元素创建样式，效果和动作。 </p> <P> 您可能知道我们使用CSS来设置网页元素的样式并创建类并将类分配给网页元素以将样式应用于它们。这里的Bootstrap使设计更简单，因为我们只需要包含Bootstrap文件，并为我们的网页元素提及Bootstrap的预定义类名，它们将通过Bootstrap自动设置样式。通过这个，我们摆脱了编写自己的CSS类来设置网页元素的样式。最重要的是，Bootstrap的设计方式使您的网站设备响应，这是它的主要目的。 Bootstrap的其他替代品可能是 - <a href="https://foundation.zurb.com/" rel="nofollow noreferrer"> 基础 </A> ， <a href="http://materializecss.com/" rel="nofollow noreferrer"> 物质化 </A> 等框架。 </p> <P> Bootstrap使您可以免于编写大量CSS代码，还可以节省您在设计网页上花费的时间。 </p> </DIV>

编辑
2#
回复此人
记忆短浅♡思念不变 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 免责声明： </强> 我过去曾经使用过bootstrap，但我从来没有真正意识到它实际上是什么，这个描述来自于我今天的定义。而且我知道bootstrap v4已经出来了，但是我发现bootstrap v3文档更加清晰，所以我使用了它。图书馆不会从根本上改变它提供的内容。 </p> <H1> 简要地 </H1> <P> Bootstrap是CSS和javascript文件的集合，为标准html元素提供了一些漂亮的默认样式，以及一些非标准html元素的常见Web内容对象。 </p> <P> 打个比方，就像在powerpoint中应用一个主题一样，但是对于你的网站来说：如果没有太多的初步努力，它会让事情看起来很漂亮。 </p> <H2> 它由什么组成？ </H2> <P> 官方v3文档将其分为三个部分： </p> <UL> <LI> <a href="https://getbootstrap.com/docs/3.3/css/" rel="nofollow noreferrer"> CSS </A> </LI> <LI> <a href="https://getbootstrap.com/docs/3.3/components/" rel="nofollow noreferrer"> 组件 </A> </LI> <LI> <a href="https://getbootstrap.com/docs/3.3/javascript" rel="nofollow noreferrer"> 使用Javascript </A> </LI> </UL> <P> 这些大致对应于Bootstrap提供的三个主要内容： </p> <UL> <LI> 标准html元素样式的纯CSS文件。因此，Bootstrap使您的标准元素看起来很漂亮。例如HTML： <code> <input class="btn btn-default" type="button" value="Input">Click me</button> </code> </LI> <LI> 在标准html元素上使用样式的CSS文件，使它们成为不是标准html元素的东西，但是 <EM> 是 </EM> 一个标准的Bootstrap元素（例如 <a href="https://getbootstrap.com/docs/3.3/components/#progress" rel="nofollow noreferrer"> https://getbootstrap.com/docs/3.3/components/#progress </A> ）。通过这种方式，Bootstrap以视觉上一致的方式扩展了“标准”Web元素列表。例如HTML： <code> <span class="glyphicon glyphicon-align-left"></span> </code> </LI> <LI> CSS类的设计考虑了jQuery。在内部，Bootstrap使用jQuery选择器动态修改样式并与DOM交互，从而为用户提供相同的功能。我相信这需要更多的解释，所以...... </LI> </UL> <H1> 使用Javascript / jQuery </H1> <P> 引导 <a href="http://researchhubs.com/post/computing/javascript/what-does-fn-mean-in-jquery.html" rel="nofollow noreferrer"> 扩展jQuery </A> 相当多。如果我们查看源代码，我们可以看到它使用jQuery来执行以下操作： <a href="https://github.com/twbs/bootstrap/blob/9201a805101943f9ec088639d520d7d2874bbed1/js/src/dropdown.js#L512" rel="nofollow noreferrer"> 为keydown事件设置监听器以与下拉列表进行交互 </A> 。当你导入它时，它会完成所有这些jQuery设置 <code> <script> </code> 标记，所以你需要确保在Bootstrap之前加载jQuery。 </p> <P> 另外，它比jQuery更紧密地将javascript绑定到DOM，提供了一个 <EM> JavaScript的 </EM> 类接口。例如 <a href="https://getbootstrap.com/docs/3.3/javascript/#button-toggle" rel="nofollow noreferrer"> 以编程方式切换按钮 </A> 。请记住，CSS只定义了事物的外观，因此这些操作的主要工作往往是修改当时应用于元素的CSS类。基于用户输入的这种更改不能使用纯CSS完成。 </p> <P> 还有与用户的其他标准交互，我们认为互联网的用户未被CSS覆盖。比如，单击一个向下滚动页面而不是更改页面的链接。 Bootstrap为您提供的一项功能是在您自己的网站上实现此行为的简便方法。 </p> <H1> 标准 </H1> <P> 我在这里提到了很多“标准”这个词，并且有充分的理由。我认为Bootstrap提供的最好的东西是一套好看的标准。您可以根据需要随意修改默认主题，但它比原始html，css和js更好。这就是为什么它被称为“框架”。 </p> <P> 不同的Web浏览器具有不同的默认样式，并且可以采取不同的行为，并且需要不同的CSS前缀和类似的东西。 Bootstrap的一个主要好处是它比自己编写所有跨浏览器的东西更可靠（你仍然会有问题，我确定，但它更容易）。 </p> <P> 我觉得当吞咽和巴贝尔不那么受欢迎时，Bootstrap更受欢迎。看看Bootstrap似乎是在每个人编译他们的javascript之前。它仍然具有相关性，但您现在可以从其他来源获得一些好处。 </p> <P> <子> 更新版本的CSS允许您在这些静态列表发生更改时定义它们之间的转换。 Bootstrap的原始版本实际上早于在浏览器中广泛采用此功能，因此它们仍然拥有自己的动画类。有一些Bootstrap是这样的：其他东西已经出现在它周围并使它看起来有点多余。 </子> </p> </DIV>

编辑
3#
回复此人
产品你是狗 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 它是一个HTML，CSS，javascript开源框架（最初由Twitter创建），您可以将其用作创建网站或Web应用程序的基础。 </p> <UL> <LI> <P> <a href="https://stackoverflow.com/tags/twitter-bootstrap/info"> 更多信息和下载链接 </A> </p> </LI> <LI> <P> <a href="http://getbootstrap.com/getting-started/" rel="nofollow noreferrer"> 入门 </A> </p> </LI> <LI> <P> <a href="http://bootsnipp.com/" rel="nofollow noreferrer"> 例子 </A> </p> </LI> <LI> <P> <a href="http://bootswatch.com/" rel="nofollow noreferrer"> 主题 </A> </p> </LI> <LI> <P> <a href="http://www.bootply.com/" rel="nofollow noreferrer"> Bootply - Bootstrap编辑器和Builder </A> </p> </LI> </UL> <P> 的<strong> 更新 </强> </p> <P> 的<strong> 官方 <a href="http://getbootstrap.com/" rel="nofollow noreferrer"> boostrap网站 </A> </强> 已更新并包含明确的定义。 </p> <P> “Bootstrap是最受欢迎的HTML，CSS和JS框架，用于在Web上开发响应式移动优先项目。” </p> <P> “设计和建造与世界上所有的爱 <a href="https://twitter.com/mdo" rel="nofollow noreferrer"> @mdo </A> 和 <a href="https://twitter.com/fat" rel="nofollow noreferrer"> @脂肪 </A> “。 </p> </DIV>

编辑
4#
回复此人
拥有小太阳的向日葵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Bootstrap是一个开源的CSS，JavaScript框架，最初是由twitter的设计人员和开发人员为twitter应用程序开发的。然后他们发布它用于开源。作为twitter bootstrap的长期用户，我发现它是设计移动就绪响应式网站的最佳用户之一。许多CSS和Javascript插件可用于设计您的网站。这是一种快速的模板设计框架。有些人抱怨引导程序CSS文件很重，需要时间加载，但这些说法是由懒人制作的。您不必在您的网站上保留完整的bootstrap.css。您始终可以选择删除网站不需要的组件的样式。例如，如果您只使用表单和按钮等基本组件，那么您可以从主CSS文件中删除其他组件，如手风琴等。要开始涉足引导程序，您可以从中下载基本模板和组件 <a href="http://getbootstrap.com/getting-started/" rel="noreferrer"> getbootstrap </A> 网站让魔术发生。 </p> </DIV>

编辑
5#
回复此人
CTO啊哦 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <BLOCKQUOTE> <P> Bootstrap是由Twitter团队开发的开源Javascript框架。它是HTML，CSS和Javascript代码的组合，旨在帮助构建用户界面组件。 Bootstrap也被编程为支持HTML5和CSS3。 </p> <P> 它也被称为前端框架。 </p> <P> Bootstrap是一个免费的工具集合，用于创建网站和Web应用程序。 </p> <P> 它包含用于排版，表单，按钮，导航和其他界面组件的HTML和基于CSS的设计模板，以及可选的JavaScript扩展。 </p> <P> 程序员喜欢Bootstrap Framework的一些原因 </p> <OL> <LI> <P> 易于上手 </p> </LI> <LI> <P> 伟大的网格系统 </p> </LI> <LI> <P> 大多数HTML的基本样式元件（印刷术，代码，表格，表单，按钮，图像，图标） </p> </LI> <LI> <P> 广泛的组件清单 </p> </LI> <LI> <P> 捆绑的Javascript插件 </p> </LI> </醇> </BLOCKQUOTE> <P> 取自 <a href="http://www.queryhome.com/51419/about-bootstrap-framework" rel="nofollow noreferrer"> 关于Bootstrap框架 </A> </p> </DIV>

编辑

登录后才能参与评论