【问题标题】:What is Bootstrap?什么是引导程序?
【发布时间】:2021-11-29 10:39:15
【问题描述】:

这里有很多与 Bootstrap 相关的问题。我看到很多人都在使用它。于是我试着研究了一下,找到了official Bootstrap site,但是后面只有一个下载区和几个字。没有什么可以解释它的用途......我只是明白它是一个前端助手。我试图通过谷歌搜索找到一些东西,但没有找到任何具体的东西。我发现的一切都与计算机科学定义有关。

所以,我的问题是:

  • 什么是 Bootstrap?
  • 它有什么用途,它如何帮助前端开发?
  • 我还想了解更多详细信息。

【问题讨论】:

  • 这个问题很好回答。请在发布新答案时三思而后行,尤其是如果您打算从其他地方复制粘贴您的答案。
  • 恕我直言,@meagar,这个问题似乎要求一个非常具体和准确的答案,而接受的答案优雅地避免了它。这意味着,从技术上讲,它没有得到很好的回答。在阅读了每个答案(包括已删除的答案)之后,我添加了我自己的答案,我希望它解释了 Bootstrap 是什么,一般来说和易于理解的术语,主要是为了减少初学者的困惑(这就是我理解这个问题的方式)。

标签: html css twitter-bootstrap frontend


【解决方案1】:

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

但是,确切地说,Bootstrap 是一个开源的、移动优先的集合 CSS、JavaScript 和 HTML 设计实用程序 旨在提供开发常用 Web 元素的方法,比从头开始编码要快得多(也更智能)。

促成 Bootstrap 成功的一些核心原则:

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

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


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

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

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


使用 Bootstrap 开发的另一个优势是其充满活力的社区,可转化为大量可用的主题、模板和插件,其中大部分是开源的(即:日历、日期/时间选择器、表格内容插件管理,以及建立在 Bootstrap 之上的库/组件集合,例如 MDB、投资组合模板、管理模板等...)

最后但并非最不重要的一点是,Bootstrap 多年来一直得到很好的维护,这使其成为生产就绪型应用程序/网站的可靠选择。

【讨论】:

  • 好答案。如果可能,请在您的答案中添加其他选定的链接到上述技术(如 React、Vue、Angular、框架、库等)。作为对新手和新手的额外指导。
【解决方案2】:

Bootstrap 是最流行的 HTML、CSS 和 JS 框架,用于在 Web 上开发响应式、移动优先的项目。它是非常流行的开源工具包。使用它很容易进行样式设置。最新版本是 bootstrap 4.bootstrap,具有 Sass 变量和 mixin、响应式网格系统、广泛的预构建组件和强大的 JavaScript 插件。 现在他们为 React Js、Angular 和 Vue 指定了他们的工具包

【讨论】:

    【解决方案3】:

    Bootstrap 是开源 HTML 框架。几乎在每个浏览器上都兼容。基本上大屏幕浏览器宽度是 >992px 和超大 1200px。因此,通过使用 Bootstrap 定义的类,我们可以调整屏幕分辨率,以便在从小手机到大屏幕的每个屏幕上显示内容。我试图解释得很简短。 例如:

    <div class="col-sm-3">....</div>
    <div class="col-sm-9">....</div>
    

    【讨论】:

      【解决方案4】:

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

      • 简单易用

      • Bootstrap 有很大的社区支持

      • 自定义可以轻松完成

      • 提高开发速度

      • 响应能力

        更多详情可以查看官网:https://getbootstrap.com/

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

      【讨论】:

        【解决方案5】:

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

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

        bootsnipp.com

        startbootstrap.com

        bootdey.com

        【讨论】:

          【解决方案6】:

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

          更新

          官方bootstrap website已更新,包含明确定义。

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

          “由@mdo@fat 倾尽全力设计和建造。”

          【讨论】:

          • @hutchonoid: bootply 总是免费的吗? Joomla 和 bootply 有什么区别?哪个更好?
          • @logan Joomla 和 Bootply 没有可比性。 Joomla 是一个基于 PHP 和 SQL 构建的内容管理系统,而 Bootply 是一个用于试验 Bootstrap 框架的网站(完全不同)。将 Bootply 视为专门用于 Bootstrap 的 JSFiddle。是的,Bootply 始终免费。
          • 我认为与回答此问题最相关的是按照上面答案中提供的标有“示例”的链接进行操作。从他们的网站复制/粘贴 Bootstrap 的定义显然是没有用的,因为发布问题的用户明确提到已经查看了 bootstrap 网站。我不认为从他们的网站上看到相同的文字会更有意义,因为它现在是用粗体写的。
          • @Mihaela 您需要花时间了解这里的上下文。在问题中查看 Shog9 的 cmets,了解它何时重新打开。在回答网站时没有我包含的文字,这就是他们问这个问题的原因。我认为文本现在非常清楚它在网站上的内容。我也保留了我原来的答案,所以它和我添加它之前一样。我觉得他们现在在他们的网站上解释得很清楚,所以我调整了我的回答。
          • @hutchonoid 这对你来说可能是一个明确的定义,因为你使用 Bootstrap 很长时间了,但相信我,他们网站上的定义是我搜索的原因对于这个答案 - 我不明白这是什么意思。所以我完全同意 Mihaela 的观点。如果我搜索这个问题的答案,我不希望它与网站上的引用相同,只是字体更大。您的解释没有意义,因为过去提出此问题的用户现在不再需要答案,现在任何人肯定会首先看到网站上的描述。
          【解决方案7】:

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

          简述

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

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

          它由什么组成?

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

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

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

          使用 Javascript/jQuery

          Bootstrap extends jQuery 相当多。如果我们查看源代码,我们可以看到它使用 jQuery 来执行以下操作:set up listeners for keydown event to interact with dropdowns。当您将其导入 &lt;script&gt; 标记时,它会执行所有这些 jQuery 设置,因此您需要确保在 Bootstrap 之前加载 jQuery。

          此外,它比普通的 jQuery 更紧密地将 javascript 与 DOM 联系起来,提供了一个 javascript 类接口。例如toggle a button programmatically。请记住,CSS 只是定义事物的外观,因此这些操作的主要工作往往是修改在那个时刻应用于元素的 CSS 类。这种基于用户输入的更改无法使用纯 CSS 完成。

          还有其他标准的用户交互,我们互联网上的居民已经习惯了,但 CSS 没有涵盖这些交互。比如,单击一个链接可以向下滚动页面而不是更改页面。 Bootstrap 为您提供的其中一项功能是在您自己的网站上实现此行为的简单方法。

          标准

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

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

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

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

          【讨论】:

            【解决方案8】:

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

            也称为前端框架。

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

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

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

            1. 容易上手

            2. 伟大的网格系统

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

            4. 广泛的组件列表

            5. 捆绑的 Javascript 插件

            取自About Bootstrap Framework

            【讨论】:

            • 它给我的印象更像是一个组件或小部件的集合,而不是一个“框架”。您能否澄清一下究竟什么构成了“框架”以及组件库何时不再是组件库而开始成为“框架”?跟“网格系统”有关系吗?
            【解决方案9】:

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

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

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

            【讨论】:

              【解决方案10】:

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

              【讨论】:

              • 实际上,bootstrap 不仅仅是一个“css 文件”。
              • 我同意@Recipe,它不仅仅是关于 CSS 文件
              • 我个人同意闪电战。不是因为他有完整的 Bootstrap 功能列表,而是在我的复杂商店中,我主要使用纯粹的编码,并使用 Bootstrap 来实现其最基本的 css 功能。这是其优势的核心。
              • 这是一个非常糟糕的回复,非常糟糕地解释了 CSS(并且只有 CSS)的作用。否决。它基本上简单地解释了您可以使用 CSS,然后引用这些类来修改您的 UI。与通过其他打包资源引导自身无关。
              【解决方案11】:

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

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 2011-03-23
                • 2011-03-29
                • 2021-10-28
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多