如何设置Bootstrap环境？

最新推荐文章于 2024-06-05 17:26:51 发布

cumudi0723

最新推荐文章于 2024-06-05 17:26:51 发布

阅读量217

点赞数

文章标签： java python linux 大数据深度学习

原文链接：https://www.includehelp.com/html/how-to-set-up-bootstrap-environment.aspx

版权

There are many web portals explaining the environment setup for Bootstrap. Most of them look filthy and overwhelmed with texts, which leaves readers confused with the proper steps to follow. So, I have brought to you the fully functioning pictorial stepwise tutorial. No more roaming on websites, bobbling minds, and time wastage. Setup easily and get started. Feel Free to ask for doubts in the comment section!

有许多Web门户网站介绍Bootstrap的环境设置。他们中的大多数人看起来肮脏，不知所措，这使读者对后续的正确步骤感到困惑。因此，我为您带来了功能完备的图片逐步教程。不再在网站上漫游，思想混乱和时间浪费。轻松设置并开始使用。随时在评论部分提出疑问！

In the previous article: Bootstrap - framework for responsive web design, we discussed their two ways to use it; first by downloading bootstrap then use it as a local file and second by using CDN (content delivery network). CDN is a public host through which you don’t need to download any source files. It’s all up to you, what the way you want to use it. There are so many code editors are available online where you can test the bootstrap or if you want to setup bootstrap to your project, you can follow the following steps. You can download CDN from https://getbootstrap.com and follow the instructions. We have also included that in this article below. Check that for sure.

在上一篇文章： Bootstrap-响应式Web设计框架中，我们讨论了它们的两种使用方式。首先通过下载引导程序，然后将其用作本地文件，其次通过使用CDN(内容传递网络)。 CDN是公共主机，您不需要通过它下载任何源文件。这完全取决于您，如何使用它。网上有如此多的代码编辑器，您可以在其中测试引导程序，或者如果您想为您的项目设置引导程序，则可以按照以下步骤进行。您可以从https://getbootstrap.com下载CDN，然后按照说明进行操作。我们还在下面的这篇文章中介绍了这一点。确保检查。

Most popular source of downloading Bootstrap is MaxCDN (formerly NetDNA, acquired by stack Path). MaxCDN provides bootstrapCDN, which is a free and public CDN; not develop by Otto and Thornton. Its beta version was launched on 7^th June 2012 and stable version launch on 5^th July 2012. It provides support for Bootstrap's CSS and JavaScript (bootstrap.min.css and bootstrap.min.js are two CDN links). So, it is easy to use Bootstrap with a CDN. It supports caching which leads to faster loading time. CDN assures that whenever a user requests a file from it, it will be served from the server closest to them.

最受欢迎的下载引导的来源是MaxCDN(原NetDNA，通过堆叠路径收购)。 MaxCDN提供bootstrapCDN ，它是一个免费的公共CDN。 奥托和桑顿都不是。 Beta版本于2012年6月7 ^日发布 ，稳定版本于2012年7月5 ^日发布 。它提供对BootstrapCSS和JavaScript的支持( bootstrap.min.css和bootstrap.min.js是两个CDN链接 )。因此，将Bootstrap与CDN一起使用很容易。它支持缓存，可加快加载时间。 CDN确保每当用户从文件中请求文件时，该文件将由离他们最近的服务器提供。

在CDN上设置： (Setting up on CDN:)

When you only need to include Bootstrap's compiled CSS or JS in your <head> ... </head> tag, you can use BootstrapCDN.

当您只需要在<head> ... </ head>标记中包含Bootstrap的已编译CSS或JS时，可以使用BootstrapCDN 。

CSS only

仅CSS

< 链接 rel = “样式表” HREF = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” 完整性 = “SHA384-MCw98 / SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin = “匿名”>

JS, Popper.js, and jQuery

JS，Popper.js和jQuery

< 脚本 SRC = “https://code.jquery.com/jquery-3.3.1.slim.min.js” 完整性 = “SHA384-q8i / X + 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH + 8abtTE1Pi6jizo” crossorigin = “匿名”> </ SCRIPT>

< 脚本 SRC = “https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” 完整性 = “SHA384-ZMP7rVo3mIykV + 2 + 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK / l8WvCWPIPm49” crossorigin =“匿名“ > </ 脚本 >

< 脚本 SRC = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” 完整性 = “SHA384-ChfqqxuZUCnJSK3 + MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW / JmZQ5stwEULTy” crossorigin = “匿名”> </ SCRIPT>

在本地文件上设置 (Setting up on local file)

It is very easy to setup and using bootstrap. At this time latest version is bootstrap 4. You can also download the latest version of Bootstrap from its official website.

设置和使用引导程序非常容易。目前，最新版本是bootstrap4。您也可以从其官方网站下载最新版本的Bootstrap。

When your bootstrap is downloaded, extract the ZIP file, and see the following file/directory

下载引导程序后，解压缩ZIP文件，然后查看以下文件/目录

Step 1) Extract and save the file in any particular folder:

步骤1)解压缩文件并将其保存在任何特定的文件夹中：

Step 2) After extracting the file you can see this two files:

步骤2)解压缩文件后，您可以看到以下两个文件：

Step 3) In CSS file you have this Linker Address Map of bootstrap.min.css:

步骤3)在CSS文件中，您具有bootstrap.min.css的此链接器地址映射：

Step 4) Click and copy that path:

步骤4)点击并复制该路径：

Step 5) Similarly, In JS file you have bootstrap.bundle.min.js:

步骤5)同样，在JS文件中，您具有bootstrap.bundle.min.js：

Step 6) Select and Copy it’s Path:

步骤6)选择并复制它的路径：

Step 7) Now, On HTML file paste these path in link like this:

步骤7)现在，在HTML文件上，将这些路径粘贴到链接中，如下所示：

Conclusion:

结论：

We have now studied introduction about this amazing framework and installed it in our PCs; both local and CDN ways. We are all set to starting building a responsive yet beautiful website front-end design. Stay tuned for the next article. We will start discovering more about Bootstrap and start building front-ends sooner in upcoming articles. See you in the next Article! Happy Learning!

现在，我们已经研究了有关此惊人框架的介绍，并将其安装在我们的PC中。本地和CDN方式。我们都准备开始构建一个响应式但美观的网站前端设计。请继续关注下一篇文章。我们将开始发现有关Bootstrap的更多信息，并在以后的文章中更快地开始构建前端。下篇再见！ 学习愉快 ！