Bootstrap前端框架學習(一):Bootstrap在Vue項目中的安裝及可視化佈局
node.js的安裝
我們需要安裝node.js,使用node.js的npm包管理器來完成Bootstrap的安裝。
前往Node.js中文網下載並安裝node.js,安裝程序會自動把node添加到環境變量,在安裝完成後重啓即可生效。
重啓後在終端中輸入以下命令查看node.js是否安裝成功:
node -v
然後輸入以下命令查看npm是否安裝成功:
npm -v
若能查看版本號即安裝成功。
bootstrap的安裝
我選擇bootstrap的最新版本bootstrap4進行安裝,前往bootstrap4的官方網站(或bootstrap4中文站),參考官方教程進行下載安裝。
(注意,bootstrap中的js插件依賴於jquery,因此安裝了bootstrap後,還要安裝jquery並在bootstrap之前引用。並且bootstrap4中增加了對popper.js的依賴,因此,也要安裝popper.js並在bootstrap之前引用。)
在官方教程中給出了HTML模板,如下:
<!doctype html>
<html lang="en">
<head>
<!-- Required 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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- 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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
我們可以直接按照模板通過網絡直接引用bootstrap及對應的依賴庫,但這容易受網絡波動影響,我選擇用npm直接手動下載到本地。
我以vue-cli創建的vue項目爲例,在vue項目根目錄中執行以下語句:
npm install [email protected]
然後根據HTML模板,bootstrap-4.3.1對應jquery-3.3.1和popper-1.14.7,所以我們下載指定版本的依賴庫:
npm install [email protected]
npm install [email protected]
這樣,bootstrap、jquery、popper包會被下載到node_modules/
文件夾下,接下來便是在代碼中引用上述包。
若是普通的HTML項目,則按照上述HTML模板的位置和順序在HTML文件中引用即可。但是在vue-cli項目中,不能在index.html
文件裏引用,這樣子引用是無效的,應該在main.js
文件裏通過import引用,如下:
import "jquery/dist/jquery.min";
import "popper.js/dist/popper.min";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min";
注意bootstrap的引用放在最後。
bootstrap快速佈局
完成了bootstrap的安裝與引用,接下來便是bootstrap的佈局和實現。
我們可以直接用代碼手動構建bootstrap佈局頁面,但這樣比較麻煩,推薦使用在線可視化工具:
- 官方的在線可視化佈局工具Layoutit!,支持bootstrap4
- 還有國內的中文版在線可視化佈局工具,支持bootstrap3,不支持bootstrap4
利用在線工具可以迅速生成期待的佈局,並下載對應的HTML代碼,如下圖: