天天看點

Bootstrap4 安裝使用

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

使用 Bootstrap 4 CDN。

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

Bootstrap4 安裝使用

國内推薦使用 Staticfile CDN 上的庫:

<!-- 新 Bootstrap4 核心 CSS 檔案 -->

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery檔案。務必在bootstrap.min.js 之前引入 -->

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于彈窗、提示、下拉菜單,包含了 popper.min.js -->

<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 檔案 -->

<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

注意:popper.min.js 用于設定彈窗、提示、下拉菜單,目前 bootstrap.bundle.min.js 已經包含了 popper.min.js。

此外,你還可以使用以下的 CDN 服務:

國内推薦使用 : https://www.staticfile.org/

國際推薦使用:https://cdnjs.com/

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

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

Bootstrap 要求使用 HTML5 檔案類型,是以需要添加 HTML5 doctype 聲明。

HTML5 doctype 在文檔頭部聲明,并設定對應編碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

</html>

為了讓 Bootstrap 開發的網站對移動裝置友好,確定适當的繪制和觸屏縮放,需要在網頁的 head 之中添加 viewport meta 标簽,如下所示:

<code>width=device-width</code> 表示寬度是裝置螢幕的寬度。

<code>initial-scale=1</code> 表示初始的縮放比例。

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

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

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

.container 類用于固定寬度并支援響應式布局的容器。

.container-fluid 類用于 100% 寬度,占據全部視口(viewport)的容器。

Bootstrap4 安裝使用

&lt;div class="container"&gt;

&lt;h1&gt;我的第一個 Bootstrap 頁面&lt;/h1&gt;

&lt;p&gt;這是一些文本。&lt;/p&gt;

&lt;/div&gt;

以下執行個體展示了占據全部視口(viewport)的容器。

&lt;div class="container-fluid"&gt;

&lt;p&gt;使用了 .container-fluid,100% 寬度,占據全部視口(viewport)的容器。&lt;/p&gt;