Bootstrap4 下載安裝

Bootstrap4 是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 開發(fā)的開源工具集，與之前的版本相比，擁有更強大的功能。

利用提供的 Sass 變量和大量 mixin、響應(yīng)式柵格系統(tǒng)、可擴展的預(yù)制組件、基于 jQuery 的強大的插件系統(tǒng)，能夠快速為你的想法開發(fā)出原型或者構(gòu)建整個 app 。

本文將教大家如何下載和安裝Bootstrap4。

Bootstrap4的下載安裝方法主要有兩種：使用 Bootstrap 4 CDN和從bootstrap官網(wǎng)下載。

Bootstrap4下載

Bootstrap 4 CDN：

國內(nèi)推薦使用 BootCDN 上的庫：

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet"  rel="external nofollow" target="_blank" >
 
<!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow" ></script>
 
<!-- popper.min.js 用于彈窗、提示、下拉菜單 -->
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow" ></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow" ></script>

此外，你還可以使用以下的 CDN 服務(wù)：

• 國內(nèi)推薦使用 : https://www.staticfile.org/
• 國際推薦使用：https://cdnjs.com/

Bootstrap4官方下載：

Bootstrap4官方下載地址：https://getbootstrap.com/

注：此外你還可以通過包的管理工具 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

在 Cloud Studio 中使用 Bootstrap

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

• step1：訪問 Cloud Studio，注冊/登錄賬戶。
• step2：在右側(cè)的運行環(huán)境菜單選擇："ubuntu"
  
  
• step3：在左側(cè)代碼目錄中新建 html 目錄，編寫你的 HTML 代碼，例如 index.html
• step4：在 index.html 文件的中粘貼如下代碼、來引入 Bootsrap4（也可以從官網(wǎng) https://getbootstrap.com/ 下載到 Bootstrap4 資源庫）：

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

• step5：在終端中輸入命令sudo vim /etc/nginx/sites-enabled/default。將配置文件紅框部分修改為如下圖所示，然后輸入命令：sudo nginx restart 重啟 nginx 服務(wù)（nginx 安裝完成并啟動后默認(rèn)會監(jiān)聽 80 端口。我們需要將 nginx 的站點目錄以及監(jiān)聽的端口號改為我們需要的）
  
  
• step6：點擊最右側(cè)的【訪問鏈接】選項卡，在訪問鏈接面板中填寫端口號為：8080（和剛才 nginx 配置文件中的端口號一致），點擊創(chuàng)建鏈接，即可點擊生成的鏈接訪問我們剛剛編寫的代碼，查看 Bootstrap4 組件的效果。