進度條

[Bootstrap 3] 開始安裝使用

更新日期:
參考網頁:
https://getbootstrap.com/getting-started/#download
https://getbootstrap.com/css/#overview


1. 首先你必須先放入viewport 於HTML的 <Head> tag
<meta name="viewport" content="width=device-width, initial-scale=1">

 

2.  引入jQuery

Bootstrap 3的 JavaScript部分完全依賴jQuery,所以只要沒有jQuery就運作不正常。

可以直接使用jQuery 的CDN

版本都可以,但是3.x版在極少數小地方有機會不正常,95%以上相容。

如果很在意可以使用1.x版本,使用方式為將jQuery放入於HTML的 <Head> tag

需要放在在Bootstrap的JavaScript之前

<script   src="https://code.jquery.com/jquery-1.12.4.js"   integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="   crossorigin="anonymous"></script>

 

 

3. 引入CSS檔與JavaScript檔

有幾種方式可以使用,最快的方式就是使用CDN

將下面的程式碼放入於HTML的 <Head> tag,可以放在<meta name="viewport" ...>之後

 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- [可不加] 預設樣式 --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 

4.  官網內 Bower / npm / Composer 都是下載程式,如果你使用CDN可以忽略這些方式。

也可以直接從Github上面下載Source Code

 

Less / Sass 是原始碼,需要編譯才能使用,所以不懂的話需要先去弄懂Less或Sass