[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