top
Loading...

Bootstrap4 安裝使用

Bootstrap4 安裝使用

我們可以通過以下兩種方式來安裝 Bootstrap4：

  • 使用 Bootstrap 4 CDN。

  • 從官網 getbootstrap.com 下載 Bootstrap 4。

Bootstrap 4 CDN

國內推薦使用 Staticfile CDN 上的庫：

Bootstrap4 CDN

<!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <!-- popper.min.js 用於彈窗、提示、下拉菜單 --> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

此外，你還可以使用以下的 CDN 服務：

  • 國內推薦使用 : https://www.staticfile.org/
  • 國際推薦使用：https://cdnjs.com/

下載 Bootstrap 4

你可以去官網 https://getbootstrap.com/ 下載 Bootstrap4 資源庫。

注：此外你還可以通過包的管理工具 npm、 gem、 composer 等來安裝：

npm install bootstrap@4.0.0-beta.2
gem 'bootstrap', '~> 4.0.0.beta2'
composer require twbs/bootstrap:4.0.0-beta.2

創建第一個 Bootstrap 4 頁面

1、添加 HTML5 doctype

Bootstrap 要求使用 HTML5 文件類型，所以需要添加 HTML5 doctype 聲明。

HTML5 doctype 在文檔頭部聲明，併設置對應編碼:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> </html>

移動設備優先

為了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪製和觸屏縮放，需要在網頁的 head 之中添加 viewport meta 標籤，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示寬度是設備屏幕的寬度。

initial-scale=1 表示初始的縮放比例。

shrink-to-fit=no 自動適應手機屏幕的寬度。

容器類

Bootstrap 4 需要一個容器元素來包裹網站的內容。

我們可以使用以下兩個容器類：

  • .container 類用於固定寬度併支持響應式布局的容器。
  • .container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。

兩個 Bootstrap 4 頁面

Bootstrap4 .container 實例

<div class="container"> <h1>我的第一個 Bootstrap 頁面</h1> <p>這是一些文本。</p> </div>

嘗試一下 »

以下實例展示了佔據全部視口（viewport）的容器。

Bootstrap4 .container-fluid 實例

<div class="container-fluid"> <h1>我的第一個 Bootstrap 頁面</h1> <p>使用了 .container-fluid，100% 寬度，佔據全部視口（viewport）的容器。</p> </div>

嘗試一下 »

在 Cloud Studio 中使用 Bootstrap

下面我們介紹如何在 Cloud Studio 中安裝、使用 Bootstrap4：

  • step1：訪問 騰訊云開發者平台，注冊/登錄賬戶。

  • step2：在右側的運行環境菜單選擇："ubuntu"

  • step3：在左側代碼目錄中新建 html 目錄，編寫你的 HTML 代碼，例如 index.html

  • step4：在 index.html 文件的中粘貼如下代碼、來引入 Bootsrap4（也可以從官網 https://getbootstrap.com/ 下載到 Bootstrap4 資源庫）：

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用於彈窗、提示、下拉菜單 -->
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

  • step5：在終端中輸入命令sudo vim /etc/nginx/sites-enabled/default。將配置文件紅框部分修改為如下圖所示，然後輸入命令：sudo nginx restart 重啟 nginx 服務（nginx 安裝完成併啟動後默認會監聽 80 端口。我們需要將 nginx 的站點目錄以及監聽的端口號改為我們需要的）

  • step6：點擊最右側的【訪問鏈接】選項卡，在訪問鏈接面板中填寫端口號為：8080（和剛才 nginx 配置文件中的端口號一致），點擊創建鏈接，即可點擊生成的鏈接訪問我們剛剛編寫的代碼，查看 Bootstrap4 組件的傚果。

現在 CODING 正在舉辦一場基於 Cloud Studio 工作空間的【我最喜愛的 Cloud Studio 插件評選大賽】。進入活動官網：https://studio.qcloud.coding.net/campaign/favorite-plugins/index，了解更多活動信息。

北斗有巢氏 有巢氏北斗