-
最基本的Bootstrap框架使用的HTML頁面： 1、<meta name="viewport" content="width=device-width,initial-scale=1.0">(Bootstrap要求必須設置meta標簽) /* 默認情況下，UI布局的寬度和移動設備的寬度一致，縮放大小為原始大小 */ 2、<link href="css/bootstrap.min.css" rel="stylesheet"> /*Bootstrap最核心的CSS文件*/ 3、若要兼容IE8/9就需要引入Respond.js文件，通過使用if判斷： <!- -[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]- -> 4、 Bootstrap框架在body中的js插件（本節只涉及響應式布局，不用引入這兩句句）： <script src="https://code.jquery.com/jquery.js"></script>（min.js依賴于jquery.js，所以在引入min.js前需要先引入該文件，兩者共同使用） <script src="js/bootstrap.min.js"></script>（提供了一些事件、數據以及插件的功能）查看全部
-
如圖：查看全部
-
響應式布局之bootstrap框架： 1、是一種移動優先的前端框架； 2、優點：寫非常少的代碼，即可實現多終端的頁面適配； 3、源文件主要有兩部分構成，即CSS,JS和font字體； 4、bootstrap的源代碼是一些Less文件，不改變源代碼的情況下可以直接下載編譯后的文件； 5、支持幾乎所有瀏覽器，對于IE8/9需要引入Respond.js文件激活IE8/9對Media Query的支持； 6、最好把respond.js和網站部署在同一個域名下，避免跨域問題查看全部
-
CSS3 Media Query 基本語法: 1、內嵌樣式：@media screen and (min-width:480px) /*屏幕尺寸 480+ 時應用該規則*/ 2、外部樣式：<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px;)">/*屏幕尺寸 480- 時應用該規則*/查看全部
-
CSS3 Media Query 常見屬性: device-width，device-height--屏幕寬高（物理上的） width，height--渲染窗口寬高（實際窗口寬高） orientation--設備方向（橫屏豎屏） resolution--設備分辨率查看全部
-
如何實現響應式布局 1、css3-Media Query ：最簡單的、常用的方式，可以根據不同維度（如用戶設備分辨率 等）給用戶做不同的UI界面展示； 2、借助原生javascript： 成本高不推薦使用； 3、使用第三方開源框架：可以很好的支持所有瀏覽器響應式布局的設計（如Bootstrap）查看全部
-
響應式設計的原則： 1、移動優先：在設計的初期就要考慮到頁面如何在多個終端顯示 2、漸進增強：充分發揮硬件設備的最大功能，不要因為低端瀏覽器（IE6\7\8等）不支持某些屬性和功能，就不使用某些屬性和功能查看全部
-
響應式設計優缺點 優點：解決了設備之間的差異化展示 缺點：兼容性代碼多，工作量大，加載速度受影響 對原有網站布局會產生影響，用戶判斷未必精準查看全部
-
響應式布局 What： 1、兼容不同分辨率的設備 2、給用戶更好的視覺使用體驗 Why： 移動互聯網的催生，非響應式網頁布局無法滿足移動互聯網的多個終端顯示的需求查看全部
-
兼容ie8或ie9查看全部
-
？??！查看全部
-
，，，，查看全部
-
?。?？查看全部
-
！??！查看全部
-
響應式布局之bootstrap 1、Bootstrap重要特征 一套完整基礎的CSS插件 豐富的預定義樣式表 一組基于jQuery的JS插件集 崇尚移動(Mobile First)先行，非常靈活的響應式(Responsive)柵格系統 2、Bootstrap官網: www.getbootstrap.com 或 直接在GitHub網站上在線閱讀源碼，目錄分別是js和less ---- http://github.com/twbs/bootstrap 3、HTML標準模板 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 默認情況下，UI布局的寬度和移動設備的寬度一致，縮放大小為原始大小 <!- -bootstrap - -> <link href="css/bootstrap.min.css" rel="stylesheet"> <!- -以下2個插件是用于在IE8支持HTML5元素和媒體查詢的，不用可移除- -> <!- - Respond.js不支持file://方式訪問- -> <!- -[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/htmlsshiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/reapond.min.js"></script> <![endif]- -> <!- -如果使用Bootstrap的JS插件，則必須引入jQuery- -> <script src="https://code.jquery.com/jquery.js"></script> <!- - Bootstrap的js插件- -> <script src="js/bootstrap.min.js"></script>查看全部
舉報
0/150
提交
取消