bootstrap可以用在行動端嗎

如果你想了解更多關於Bootstrap的知識，可以點選：Bootstrap教學

　　bootstrap是目前比較流行的響應式開發框架，自然可以用於行動端的開發。不過想要行動裝置優先，也需要進行一些設定。

bootstrap的環境至少需要3個檔案：

　　●bootstrap.min.css 

#　　●jquery.mis.js

#　　●bootstrap.min.js

<!-- 新 Bootstrap 核心 CSS 文件 -->  
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">  
  
<!-- 可选的Bootstrap主题文件（一般不用引入） -->  
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  
  
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->  
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  
  
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->  
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

需要注意的是：

　　bootstrap.min.css 

#　　jquery.mis.js

　　bootstrap.min.js

#　　bootstrap.min.js

這三個檔案的引入引入順序一定不能錯亂

，一般把

　　jquery.mis.js

　　bootstrap.min.js

這兩個檔案放入HTML網頁的最底部，這麼做的原因是為了防止網頁未加載完畢而這兩個文件先加載可能產生的不必要的問題

為了確保適當的繪製和觸屏縮放，需要在 之中添加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 禁止縮放###

以上是bootstrap可以用在行動端嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！