Bootstrap 4 - 环境设置

您可以通过从CDN（内容交付网络）包含 Bootstrap 4 或从getbootstrap.com下载来开始在您的网站中使用 Bootstrap 4 。

使用CDN

Bootstrap 4 可以通过包含来自Content Delivery Network 的内容在网站中使用。

在您的项目中使用下面编译的 Bootstrap 的 CSS 和 JS CDN。

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

如果您使用的是 JavaScript 的编译版本，请在缩小的 Bootstrap JavaScript之前包含jQuery和Popper.js的 CDN 版本（Bootstrap 4 使用 jQuery 和 Popper.js 来利用 JavaScript 组件，例如模态、工具提示、弹出窗口等）。

以下是一些需要 jQuery 的组件 -

用于可关闭警报
使用按钮和复选框/单选按钮切换状态，并折叠以切换内容
用于幻灯片、控件和指示器的轮播
下拉菜单（使用Popper.js实现完美定位）
打开和关闭模态框
用于折叠导航栏
工具提示和弹出窗口（使用Popper.js实现完美定位）

下载 Bootstrap 4

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

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

下载- 单击此按钮，您可以下载 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 创建第一个网页

下面的例子指定了 Bootstrap 4 的简单网页 -

例子

现场演示

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
      href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果 -