bootstrap的匯入和移動端裝置優先
阿新 • • 發佈：2019-01-24
bootstrap的環境至少需要3個檔案：bootstrap.min.css
jquery.mis.js
bootstrap.min.js
- <!-- 新 Bootstrap 核心 CSS 檔案 -->
- <linkrel="stylesheet"href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
- <!-- 可選的Bootstrap主題檔案（一般不用引入） -->
- <linkrel="stylesheet"href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
- <!-- jQuery檔案。務必在bootstrap.min.js 之前引入 -->
- <scriptsrc="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
- <!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
- <scriptsrc="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
需要注意的是：
bootstrap.min.css
jquery.mis.js
bootstrap.min.js
jquery.mis.js
bootstrap.min.js
這兩個檔案放入HTML網頁的最底部，這麼做的原因是為了防止網頁未載入完畢而這兩個檔案先載入可能產生的不必要的問題
為了確保適當的繪製和觸屏縮放，需要在 <head> 之中新增 viewport 元資料標籤。
<meta name="viewport" content="width=device-width, initial-scale=1">在移動裝置瀏覽器上，通過為視口（viewport）設定 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓你的網站看上去更像原生應用的感覺。注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">補充:
meta:
width:可視區域的寬度，值可為數字或關鍵詞device-width
height:同width
intial-scale:頁面首次被顯示是可視區域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，
maximum-scale使用者可將頁面放大的程式，1.0將禁止使用者放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放，no 禁止縮放