Html 什么是引导程序？

What is Bootstrap?

提问by Панайот Толев

There are a lot of questions here related to Bootstrap. I see a lot of people using it. So I tried to research it, and I found the official Bootstrap site, but there was only a download section and a few words after that. Nothing that explains what is it for... I just understood that it is a front-end helper. I have tried to find something by Googling, but found nothing specific. Everything I found is related to the computer science definition.

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

So, my questions are:

所以，我的问题是：

• What is Bootstrap at all?
• What is it used for, and how does it help front-end development?
• I would also like some more details explaining it.

• Bootstrap 到底是什么？
• 它有什么用途，它如何帮助前端开发？
• 我还想了解更多细节来解释它。

采纳答案by hutchonoid

It is an HTML, CSS, and JavaScript open-source framework (initially created by Twitter) that you can use as a basis for creating web sites or web applications.

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

• More information and links to download

• Getting started

• Examples

• Themes

• Bootply - Bootstrap Editor and Builder

• 更多信息和下载链接

• 入门

• 例子

• 主题

• Bootply - Bootstrap 编辑器和构建器

Update

更新

The official bootstrap websiteis updated and includes a clear definition.

官方引导程序网站已更新并包含明确的定义。

"Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web."

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

"Designed and built with all the love in the world by @mdoand @fat."

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

回答by GowriShankar

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

1. Easy to get started

2. Great grid system

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

4. Extensive list of components

5. Bundled Javascript plugins

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

它也被称为前端框架。

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

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

程序员首选 Bootstrap 框架的一些原因

1. 易于上手

2. 伟大的网格系统

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

4. 广泛的组件列表

5. 捆绑的 Javascript 插件

Taken from About Bootstrap Framework

取自关于 Bootstrap 框架

回答by Blitz

Bootstrap, as I know it, is a well defined CSS. Although using Bootstrap you could also use JavaScript, jQuery etc. But the main difference is that, using Bootstrap you can just call the class name and then you get the output on the HTML form. for eg. coloring of buttons shaping of text, using layouts. For all this you do not have to write a CSS file rather you just have to use the correct class name for shaping your HTML form.

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

回答by gauravparmar

In simpler words, you can understand Bootstrap as a front-end web framework that was created by Twitter for faster creation of device responsive web applications. Bootstrap can also be understood mostly as a collection of CSS classes that are defined in it which can simply be used directly. It makes use of CSS, javascript, jQuery etc. in the background to create the style, effects, and actions for Bootstrap elements.

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

You might know that we use CSS for styling webpage elements and create classes and assign classes to webpage elements to apply the style to them. Bootstrap here makes the designing simpler since we only have to include Bootstrap files and mention Bootstrap's predefined class names for our webpage elements and they will be styled automatically through Bootstrap. Through this, we get rid of writing our own CSS classes to style webpage elements. Most importantly Bootstrap is designed in such a way that makes your website device responsive and that is the main purpose of it. Other alternates for Bootstrap could be - Foundation, Materializeetc. frameworks.

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

Bootstrap makes you free from writing lots of CSS code and it also saves your time that you spend on designing the web pages.

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

回答by valueweaver

Bootstrap is an open-source CSS, JavaScript framework that was originally developed for twitter application by twitter's team of designers and developers. Then they released it for open-source. Being a longtime user of twitter bootstrap I find that its one of the best for designing mobile ready responsive websites. Many CSS and Javascript plugins are available for designing your website in no time. It's kind of rapid template design framework. Some people complain that the bootstrap CSS files are heavy and take time to load but these claims are made by lazy people. You don't have to keep the complete bootstrap.css in your website. You always have the option to remove the styles for components that you do not need for your website. For example, if you are only using basic components like forms and buttons then you can remove other components like accordions etc from the main CSS file. To start dabbling in bootstrap you can download the basic templates and components from getbootstrapsite and let the magic happen.

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

回答by Multihunter

Disclaimer:I have used bootstrap in the past, but I never really appreciated what it actually is before, this description comes from me coming to my own definition, today. And I know that bootstrap v4 is out, but I found the bootstrap v3 documentation to be much clearer, so I used that. The library is not going to fundamentally change what it provides.

免责声明：我过去使用过 bootstrap，但我从来没有真正欣赏过它的真正含义，这个描述来自我今天对我自己的定义。而且我知道 bootstrap v4 已经过时了，但是我发现 bootstrap v3 文档要清楚得多，所以我使用了它。图书馆不会从根本上改变它提供的东西。

Briefly

简要地

Bootstrap is a collection of CSS and javascript files that provides some nice-looking default styling for standard html elements, and a few common web content objects that are not standard html elements.

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

To make an analogy, it's kind of like applying a theme in powerpoint, but for your website: it makes things look pretty nice without too much initial effort.

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

What does it consist of?

它由什么组成？

The official v3 documentation breaks it up into three sections:

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

• CSS
• Components
• Javascript

• CSS
• 成分
• Javascript

These roughly correspond to the three main things that Bootstrap provides:

这些大致对应于 Bootstrap 提供的三个主要内容：

• Plain CSS files that style standard html elements. So, Bootstrap makes your standard elements pretty-looking. e.g. html: <input class="btn btn-default" type="button" value="Input">Click me</button>
• CSS files that use styling on standard html elements to make them into something that is not a standard html element but isa standard Bootstrap element (e.g. https://getbootstrap.com/docs/3.3/components/#progress). In this way Bootstrap extends the list of "standard" web elements in a visually consistent way. e.g. html: <span class="glyphicon glyphicon-align-left"></span>
• The CSS classes are designed with jQuery in mind. Internally, Bootstrap uses jQuery selectors to modify the styles on the fly and interact with the DOM, and thus provides the user the same capability. I believe this requires more explanation, so...

• 为标准 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 交互，从而为用户提供相同的功能。我相信这需要更多的解释，所以......

Using Javascript/jQuery

使用 Javascript/jQuery

Bootstrap extends jQueryquite a bit. If we look at the source code, we can see that it uses jQuery to do things like: set up listeners for keydown event to interact with dropdowns. It does all of this jQuery setup when you import it in your <script>tag, so you need to make sure jQuery is loaded before Bootstrap is.

Bootstrap 对jQuery 进行了相当多的扩展。如果我们查看源代码，我们可以看到它使用 jQuery 执行以下操作：为 keydown 事件设置侦听器以与 dropdowns 交互。当您在<script>标签中导入 jQuery 时，它会执行所有这些 jQuery 设置，因此您需要确保在 Bootstrap 之前加载 jQuery。

Additionally, it ties the javascript to the DOM more tightly than plain jQuery, providing a javascriptclass interface. e.g. toggle a button programmatically. Remember that CSS just defines how a thing looks, so the major job of these operations will tend to be to modify which CSS classes apply to the element at that moment in time. This kind of change, based on user input, can't be done with plain CSS.

此外，它比普通的 jQuery 更紧密地将 javascript 与 DOM 联系起来，提供了一个javascript类接口。例如，以编程方式切换按钮。请记住，CSS 只是定义了事物的外观，因此这些操作的主要工作往往是修改当时应用于元素的 CSS 类。这种基于用户输入的更改无法使用纯 CSS 完成。

There are other standard interactions with a user that we denizens of the internet are used to that are not covered by CSS. Like, clicking a link that scrolls you down a page instead of changing pages. One of the things that Bootstrap gives you is an easy way to implement this behaviour on your own website.

CSS 没有涵盖我们互联网居民习惯的与用户的其他标准交互。就像，单击一个链接可以向下滚动页面而不是更改页面。Bootstrap 为您提供的一件事是在您自己的网站上实现此行为的简单方法。

Standards

标准

I have mentioned the word "standard" a lot here, and for good reason. I think the best thing that Bootstrap provides is a set of good-looking standards. You're free to modify the default theme as much as you want, but it's a better baseline than raw html, css and js. And this is why it's called "framework".

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

Different web browsers have different default styles and can act differently, and need different CSS prefixes and things like that. A major benefit of Bootstrap is that it is much more reliable than writing all that cross-browser stuff yourself (you will still have problems, I'm sure, but it's easier).

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

I think that Bootstrap was preferred more when gulp and babel weren't as popular. Looking at Bootstrap it seems to come from a time before everyone compiled their javascript. It's still relevant, but you can get some of the benefits from other sources now.

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

_{More recent versions of CSS have allowed you to define transitions between these static lists as they change. The original version of Bootstrap actually predates wide-spread adoption of this capability in browsers, so they still have their own animation classes. There are a few bits of Bootstrap that are like this: that other stuff has come up around it and makes it look a bit redundant.}

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

回答by Dey-Dey

Bootstrap is an HTML, CSS, JS framework with many components that let you create beautiful and modern web sites or web applications very fast.

Bootstrap 是一个 HTML、CSS、JS 框架，具有许多组件，可让您非常快速地创建漂亮且现代的网站或 Web 应用程序。

The following websites contain examples, elements and reusable components that you can integrate into your project using bootstrap framework

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

bootsnipp.com

bootsnipp.com

startbootstrap.com

startbootstrap.com

bootdey.com

bootdey.com

回答by tao

By today's standards and web terminology, I'd say Bootstrap is actually nota framework, although that's what their website claims. Most developers consider Angular, Vue and React frameworks, while Bootstrap is commonly referred to as a "library".

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

But, to be exact and correct, Bootstrap is an open-source, mobile-first collection ofCSS, JavaScript and HTML design utilitiesaimed at providing means to develop commonly used web elements considerably faster (and smarter) than having to code them from scratch.

但是，准确地说，Bootstrap 是一个开源的、移动优先的CSS、JavaScript 和 HTML设计实用程序集合，旨在提供比从头开始编写代码更快（更智能）地开发常用 Web 元素的方法.

A few core principles which contributed to Bootstrap's success:

一些有助于 Bootstrap 成功的核心原则：

• it's reusable
• it's flexible (i.e: allows custom grid systems, changing responsiveness breakpoints, column gutter sizes or state colors with ease; as a rule of thumb, most settings are controlled by global variables)
• it's intuitive
• it's modular (both JavaScript and (S)CSS use a modular approach; one can easily find tutorials on making custom Bootstrap builds, to include only the parts they need)
• has above average cross-browser compatibility
• web accessibility out of the box (screenreader ready)
• it's fairly well documented

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

It contains design templates and functionality for: layout, typography, forms, navigation, menus (including dropdowns), buttons, panels, badges, modals, alerts, tabs, collapsible, accordions, carousels, lists, tables, pagination, media utilities (including embeds, images and image replacement), responsiveness utilities, color-based utilities (primary, secondary, danger, warning, info, light, dark, muted, white), other utilities (position, margin, padding, sizing, spacing, alignment, visibility), scrollspy, affix, tooltips, popovers.

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

---

---

By default it relies on jQuery, but you'll find jQuery free variants powered by each of the modern popular progressive JavaScript frameworks:

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

• React-Bootstrap- React powered Bootstrap
• BootrapVue- Vue powered Bootstrap
• ng-bootstrap- Angular powered Bootstrap

• React-Bootstrap- 反应驱动的引导程序
• BootrapVue- Vue 驱动的 Bootstrap
• ng-bootstrap- Angular 驱动的 Bootstrap

Working with Bootstrap relies heavily on applying certain classes (or, depending on JS framework: directives, methods or attributes/props) and on using particular markup structures.

使用 Bootstrap 很大程度上依赖于应用某些类（或者，取决于 JS 框架：指令、方法或属性/道具）和使用特定的标记结构。

Documentation typically contains generic examples which can be easily copy-pasted and used as starter templates.

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

---

---

Another advantage of developing with Bootstrap is its vibrant community, translated into an abundance of themes, templates and plugins available for it, most of which are open-source (i.e: calendars, date/time-pickers, plugins for tabular content management, as well as libraries/component collections built on top of Bootstrap, such as MDB, portfolio templates, admin templates, etc...)

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

Last, but not least, Bootstrap has been well maintained over the years, which makes it a solid choice for production-ready applications/websites.

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

回答by Saanvi Sen

Bootstrap is the world's most popular and widely used open-source framework for developing with HTML, CSS, and JS. It is a front end framework of HTML. Bootstrap helps in building responsive websites or web applications and a 12-column grid system that helps dynamically adjust the website to a suitable screen resolution. The current version of bootstrap is 4.3.1 and the bootstrap team has also officially announced Bootstrap 5version and changes like removing jquery from bootstrap. Some of the crucial reasons why bootstrap framework is most preferable are

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

• It is easy to use
• Bootstrap has a big community support
• Customizations can be done easily
• It increases development speed

• Responsiveness

  For more details, you can check the official website: https://getbootstrap.com/

• 这个用起来很简单
• Bootstrap 拥有强大的社区支持
• 定制可以轻松完成
• 它提高了开发速度

• 反应能力

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

Source: https://vmokshagroup.com/blog/bootstrap-advantages/

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