Bootstrap 4 - 環境搭建

上一頁
下一頁

您可以透過從CDN（內容分發網路）包含 Bootstrap 4 或從getbootstrap.com下載來開始在您的網站中使用它。

使用 CDN

可以透過從內容分發網路包含 Bootstrap 4 來在網站中使用它。

在您的專案中使用以下編譯的 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（Bootstrap 4 使用 jQuery 和 Popper.js 來使用諸如模態框、工具提示、彈出框等 JavaScript 元件）的 CDN 版本。

以下是某些需要 jQuery 的元件：

  • 用於可關閉的警告框

  • 使用按鈕和複選框/單選按鈕切換狀態，並使用摺疊功能切換內容

  • 用於幻燈片、控制元件和指示器的輪播

  • 下拉選單（使用Popper.js進行精確定位）

  • 開啟和關閉模態框

  • 用於摺疊導航欄

  • 工具提示和彈出框（使用Popper.js進行精確定位）

下載 Bootstrap 4

您可以從https://bootstrap.tw/docs/4.1/getting-started/download/下載 Bootstrap 4。單擊此連結後，您將看到如下所示的螢幕：

Bootstrap 4 Download Screen

您在這裡可以看到兩個按鈕：

  • 下載 - 單擊此按鈕，您可以下載 Bootstrap 的 CSS 和 JavaScript 的預編譯和壓縮版本。不包含文件或原始原始碼檔案。

  • 下載原始碼 - 單擊此按鈕，您可以獲得最新的 Bootstrap SCSS、JavaScript 原始碼和文件檔案。

為了更好地理解和方便使用，在本教程中我們將使用 Bootstrap 的預編譯版本。由於檔案已編譯和壓縮，您不必每次都為各個功能包含單獨的檔案。

檔案結構

預編譯的 Bootstrap 4

下載編譯版本的 Bootstrap 4 後，解壓縮 ZIP 檔案，您將看到以下檔案/目錄結構：

Precompiled Bootstrap 4

如您所見，這裡有編譯的 CSS 和 JS (bootstrap.*)，以及編譯和壓縮的 CSS 和 JS (bootstrap.min.*)。

Bootstrap 4 原始碼

如果您下載了 Bootstrap 4 原始碼，則檔案結構如下：

Bootstrap 4 Source Code

  • 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>

它將產生以下結果：

輸出

列印頁面
上一頁
下一頁
廣告