Bootstrap 4 - 环境设置

您可以从 CDN (内容分发网络)或从 getbootstrap.com 下载，开始在您的网站中使用Bootstrap 4.

使用CDN

Bootstrap 4可以在网站中使用，包括内容交付网络.

在项目中使用以下编译的Bootstrap的CSS和JS的CDN.

QQxSfFWpi1MquVdAyjUar5+76PVCmYl"    crossorigin = "anonymous">

包括 jQuery 和 Popper.js 的CDN版本(Bootstrap 4使用jQuery和Popper.如果您使用的是JavaScript的编译版本，则在缩小的Bootstrap JavaScript 之前使用JavaScript组件(如模态，工具提示，弹出窗口等)的js.

以下是一些组件，需要jQuery :

• 用于关闭警报

• 使用按钮和复选框/单选按钮切换状态并折叠以切换内容

• 幻灯片，控件和指示器的轮播

• 下拉菜单(使用 Popper.js 进行完美定位)

• 打开并关闭模态

• 折叠导航栏

• 工具提示和popovers(使用 Popper.js 进行完美定位)

下载Bootstrap 4

您可以从中下载Bootstrap 4  https://getbootstrap.com/docs/4.1/getting-started/download/.当您点击此链接时，您将看到如下所示的屏幕 :

在这里你可以看到两个按钮 :

• 下载 : 单击此按钮，可以下载Bootstrap的CSS和JavaScript的预编译和缩小版本.不包含任何文档或原始源代码文件.

• 下载源 : 单击此按钮，您可以获得最新的Bootstrap SCSS，JavaScript源代码和文档文件.

为了更好地理解和易用，我们在整个教程中应使用Bootstrap的预编译版本.随着文件的编译和缩小，您不必每次都为单个功能包含单独的文件而烦恼.

文件结构

预编译的Bootstrap 4

下载编译版本的Bootstrap 4后，解压缩ZIP文件，您将看到以下文件/目录结构 :

如您所见，还有编译的CSS和JS(bootstrap.*)，以及作为编译和缩小的CSS和JS(bootstrap.min.*).

Bootstrap 4源代码

如果您已经下载了Bootstrap 4源代码，然后文件结构如下 :

• js/和 scss/下的文件是Bootstrap的源代码CSS和JavaScript.

• dist/文件夹包含上面预编译下载部分中列出的所有内容.

• docs/examples/，包括Bootstrap文档的源代码和Bootstrap使用示例.

使用Bootstrap 4创建第一个Web页面

以下示例指定Bootstrap 4 : 的简单网页;

示例

                                                                  
Hello, world!!! Welcome to Tutorialspoint...