什么是 Bootstrap 前端框架?

这里有很多与Bootstrap相关的问题。我看到很多人都在用它。所以我试着去研究它,我找到了官方Bootstrap网站,但在那之后只有一个下载部分和几个字。没有什么能解释它是干什么用的……我只知道它是一个前端助手。我试图通过谷歌搜索一些东西,但没有找到具体的东西。我所找到的一切都与计算机科学的定义有关。

所以,我的问题是:

  • 什么是Bootstrap ?
  • 它的用途是什么,它如何帮助前端开发?
  • 我还想了解更多细节。
489815 次浏览

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

更新

官方引导网站 .被更新并包含一个清晰的定义。

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

“由@mdo@fat用全世界所有的爱设计和建造。”

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

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

它也被称为前端框架。

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

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

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

  1. 容易上手

  2. 大网格系统

  3. HTML的基本样式 元素(排版、代码、表格、表单按钮、图片、图标)< / p > < /李>

  4. 广泛的组件列表

  5. 捆绑的Javascript插件

取自关于Bootstrap框架

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

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

你可能知道我们使用CSS来样式化网页元素,并创建类并将类分配给网页元素,以便将样式应用到它们。这里的Bootstrap使设计更简单,因为我们只需要包括Bootstrap文件,并为我们的网页元素提到Bootstrap预定义的类名,它们将通过Bootstrap自动设置样式。通过这一点,我们摆脱了编写自己的CSS类样式的网页元素。最重要的是,Bootstrap的设计方式使您的网站设备响应,这是它的主要目的。Bootstrap的其他选择可以是- 基金会实现等框架。

Bootstrap让你从编写大量的CSS代码中解脱出来,它也节省了你在设计网页上花费的时间。

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

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

bootsnipp.com

startbootstrap.com

bootdey.com

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

短暂的

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

打个比方,这有点像在ppt中应用一个主题,但对于你的网站来说:它让事情看起来很好,不需要太多的初始努力。

它由什么组成?

官方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事件设置监听器以与下拉菜单交互。当你在<script>标签中导入它时,它会完成所有这些jQuery设置,所以你需要确保在Bootstrap加载之前加载jQuery。

此外,它比普通的jQuery更紧密地将javascript绑定到DOM,提供了javascript类接口。例如以编程方式切换按钮。请记住,CSS只是定义一个事物的外观,因此这些操作的主要工作往往是修改在那个时刻应用于元素的CSS类。这种基于用户输入的更改不能用普通CSS完成。

还有其他标准的与用户的交互,我们互联网居民习惯了,不包括在CSS。比如,点击一个向下滚动页面的链接,而不是更改页面。Bootstrap提供给你的一件事是在你自己的网站上实现这种行为的简单方法。

标准

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

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

我认为当gulp和babel不受欢迎时,Bootstrap更受欢迎。看看Bootstrap,它似乎来自于人们编译javascript之前的时代。它仍然是相关的,但你现在可以从其他来源获得一些好处。

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

根据今天的标准和网络术语,我想说Bootstrap实际上是not a框架,尽管这是他们的网站所声称的。大多数开发人员会考虑Angular、Vue和React框架,而Bootstrap通常被称为“__abc1”。

但是,准确地说,Bootstrap是一个开源的,移动优先的<强> < / >强劲的集合 CSS, JavaScript和HTML < >强设计工具< / >强,旨在提供方法来开发常用的web元素,比从头开始编码要快得多(和更聪明)。

促成Bootstrap成功的几个核心原则:

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

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


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

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

文档通常包含通用示例,这些示例可以轻松地复制粘贴并用作起始模板。


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

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

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

  • 它很容易使用

  • Bootstrap有很大的社区支持

  • 定制可以很容易地完成

  • 它提高了开发速度

  • < p >响应能力

    更多详细信息,可以查看官方网站:https://getbootstrap.com/

在你的基于bootstrap的项目中使用引导5管理模板是明智的。

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

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

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
引导最流行的HTML, CSS和JS框架,用于开发响应式的,移动优先的web项目。它是非常流行的开源工具包。非常容易使用它的造型。最新版本是bootstrap 4。bootstrap具有Sass变量和mixins,响应式网格系统,广泛的预构建组件和强大的JavaScript插件。 现在他们为React Js、Angular和amp;Vue < / p >
  • Bootstrap首页
  • Vue Bootstrap
  • < a href = " https://ng-bootstrap.github。io/#/home" rel="nofollow noreferrer">Angular Bootstrap . home" rel="nofollow noreferrer
  • < a href = " https://react-bootstrap.github。io/" rel="nofollow noreferrer">React Bootstrap . io/" rel="nofollow noreferrer">

Bootstrap是一个开源的,移动优先的CSS, JavaScript和HTML设计实用程序的集合,旨在提供方法来开发常用的web元素,比从头开始编码要快得多(和更聪明)。

促成Bootstrap成功的几个核心原则:

< p >它是可复用的 它很灵活(例如:允许自定义网格系统,轻松更改响应断点,列槽大小或状态颜色;根据经验,大多数设置是由全局变量控制的) 它是直观的 它是模块化的(JavaScript和(S)CSS都使用模块化方法;你可以很容易地找到制作自定义Bootstrap构建的教程,只包括他们需要的部分) 具有高于平均水平的跨浏览器兼容性 开箱即用的网页可访问性(准备好屏幕阅读器) 它有很好的文档