安裝使用 · Bootstrap4教程

# Bootstrap4 安裝使用我們可以通過以下兩種方式來安裝 Bootstrap4： * 使用 Bootstrap 4 CDN。 * 從官網 getbootstrap.com 下載 Bootstrap 4。 ![](https://box.kancloud.cn/c199103efa584066b15ab54ae8795bb0_819x315.jpg) ## Bootstrap 4 CDN 國內推薦使用 Staticfile CDN 上的庫： ```  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>  <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 頁面 ### 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）的容器。 ``` <div class="container-fluid"> <h1>我的第一個 Bootstrap 頁面</h1> <p>使用了 .container-fluid，100% 寬度，占據全部視口（viewport）的容器。</p> </div> ``` ## 在 Cloud Studio 中使用 Bootstrap 下面我們介紹如何在 Cloud Studio 中安裝、使用 Bootstrap4： * step1：訪問騰訊云開發者平臺，注冊/登錄賬戶。 * step2：在右側的運行環境菜單選擇："ubuntu"tep3：在左側代碼目錄中新建 html 目錄，編寫你的 HTML 代碼，例如 index.html * step4：在 index.html 文件的中粘貼如下代碼、來引入 Bootsrap4（也可以從官網 https://getbootstrap.com/ 下載到 Bootstrap4 資源庫）： ```  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>  <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 組件的效果。