響應式與bootstrap
一.單雙擊問題 <body> <button>按鈕</button> <script src="./jQuery.js"></script> <script> $(function () { // 先作兩次單擊 一次雙擊 中間間隔 小於500ms var timer = null; $('button').click(function(event) { console.log(timer); clearTimeout(timer); // 定時器 300ms 一次性定時器 timer = setTimeout(function(){ console.log('單機了'); }, 500); }); $('button').dblclick(function(event) { console.log(timer); clearTimeout(timer); timer = setTimeout(function(){ console.log('雙擊了'); }, 499); }); }) </script> </body> 對於一次雙擊,會在頁面中打印兩次單擊和一次雙擊的問題,解決辦法是,兩次單機的時間間隔小於500毫秒,視爲一次雙擊 在雙擊的第一次點擊中,會開啓一個定時器,等待500毫秒後輸出'單機了',可是在這500毫秒中,又點擊了一次按鈕 單擊事件的函數清了上一次單機的定時器,從新開啓一個定時器,同時,雙擊事件的函數,清了此次的定時器.二.animate.css(css3的動畫庫) animate.css庫的網址:https://github.com/daneden/animate.css <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"> <style> div{ height: 200px; width: 200px; } </style> </head> <body> <!--循環執行--> <h1 class="animated bounce infinite delay-2s">哈哈</h1> <!--提供的效果 兩秒內執行結束--> <div class="box animated zoomIn infinite delay-2s"></div> </body> 兩張使用流程圖片三.jQueryUIjQueryUI的網址:http://www.jqueryui.org.cn/流程圖 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 排序（Sortable） - 默認功能</title> <!--若是 連接的cdn資源過慢,下載後放到本地去使用--> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <!--引用時必定要引入相應版本的jQuery,不然可能出現兼容性問題--> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> </head> <body> <ul id="sortable"> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul> </body> </html>單純的賦複製代碼,就能夠實現相應的功能,把代碼改爲本身須要的樣子,插入到項目的相應位置便可四.移動端響應式(在不一樣的頁面尺寸上對應不一樣的樣式) 定義和使用 使用 @media 查詢，你能夠針對不一樣的屏幕大小定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式， 特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。 當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的 寬度和高度從新渲染頁面，這對調試來講是一個極大的便利。 @media mediaType and|not|only (media feature) { /*CSS-Code;*/ } 媒體類型（mediaType ） 類型有不少，在這裏不一一列出來了，只列出了經常使用的幾個。 screen： 用於電腦屏幕，平板電腦，智能手機等。（最經常使用） speech 應用於屏幕閱讀器等發聲設備 媒體功能 media feature： 1.max-width:定義輸出設備中的頁面最大可見區域寬度 2.min-width:定義輸出設備中的頁面最小可見區域寬度 始編寫響應式頁面 準備工做1：設置Meta標籤 首先咱們在使用 @media 的時候須要先設置下面這段代碼，來兼容移動設備的展現效果： <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 這段代碼的幾個參數解釋： width = device-width：寬度等於當前設備的寬度 initial-scale：初始的縮放比例（默認設置爲1.0，即表明不縮放） user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大縮小頁面） 準備工做2：加載兼容文件JS(ie8如下的才須要用) 由於IE8既不支持HTML5也不支持CSS3 @media ，因此咱們須要加載兩個JS文件，來保證咱們的代碼實現兼容效果： <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> 準備工做3：設置IE渲染方式默認爲最高(可選) 如今有不少人的IE瀏覽器都升級到IE9以上了，因此這個時候就有又不少詭異的事 情發生了，例如如今是IE9的瀏覽器，可是瀏覽器的文檔模式倒是IE8 爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的 <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> ps:這段代碼後面加了一個chrome=1，若是用戶的電腦裏安裝了 chrome，就可讓電腦裏面的IE不論是哪一個版本的均可以使 用Webkit引擎及V8引擎進行排版及運算，若是沒有安裝，就顯示IE最新的渲染模式。 例:(根據文檔的寬度,改變body的背景顏色) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> <style> @media screen and (min-width: 1200px){ body{ background-color: red; } } @media screen and (max-width: 1200px) and (min-width: 800px){ body{ background-color: #4376ff; } } @media screen and (max-width: 800px){ body{ background-color: #ffc585; } } </style> </head> <body> </body> </html>五.移動端單位的介紹字體相對單位有：em、ex、ch、rem； px: 絕對（固定）單位 缺點：任何狀況下都是固定值，會致使佈局在不一樣尺寸下的設備錯位 %：相對單位（會有影響發生變化）相對於父級（自身）大小進行定位 缺點：能肯定範圍的仍是比較好計算的，對於不太好肯定值得地方很差使用百分比，而且會致使變形，高度通常很差控制 em: 相對單位 （會有影響發生變化） em=當前字體大小 缺點：會根據當前容器字體大小發生變化，假如每一個容器字體大小不一致，那麼計算會很是麻煩 rem:相對單位 只依賴於html字體大小 須要經過js去控制： 例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> <title>移動端佈局</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } .clearfix:after{ content: ''; display: block; clear: both; } html{ width: 100%; height: 100%; font-size: 100px; overflow: hidden; } body{ width: 100%; height: 100%; overflow: auto; } .head-box{ width: 100%; height: 0.4rem; background-color: red; position: absolute; top: 0; left: 0; } .list{ margin-top: 0.4rem; font-size: 16px; } .list .item{ float: left; width: 1rem; height: 1rem; border: 1px solid black; margin: 0.1rem; } </style> </head> <body> <header class="head-box"> <div class="head-top"></div> <div class="head-bottom"></div> </header> <ul class="list clearfix"> <li class="item">1111111</li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> </body> </html> 動態改變HTML的fontsize: !(function(doc, win) { //獲取HTML對象 var docEle = doc.documentElement, //三元運算符 evt = "onorientationchange" in window ? "orientationchange" : "resize", fn = function() { //獲取HTML文檔的寬度 var width = docEle.clientWidth; console.log(width); //動態設置HTML的fontsize width && (docEle.style.fontSize = 20 * (width / 320) + "px"); }; //只要文檔或窗口發生改變是,執行fn回調函數 win.addEventListener(evt, fn, false); // 每次加載時都從新計算一下頁面尺寸,執行fn回調函數 doc.addEventListener("DOMContentLoaded", fn, false); //自執行函數 }(document, window)); 只要在HTML文檔的最後引入此文件,就能夠達到不管設備尺寸如何,都會顯示咱們想要的那種效果六.Boostrap框架Bootstrap支持移動設備優先 也就是說使用Bootstrap能夠在移動設備上運行。爲了確保適當的繪製和觸屏縮放，須要在<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">Bootstrap重置樣式 爲了加強跨瀏覽器表現的一致性，咱們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。 佈局容器 Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的 緣由，這兩種 容器類不能互相嵌套。 .container 類用於固定寬度並支持響應式佈局的容器。 <div class="container"> ... </div> .container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。 <div class="container-fluid"> ... </div>柵格系統圖 Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列 柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。下面就介紹一下 Bootstrap 柵格系統的工做原理：柵格參數 使用單一的一組 .col-md-* 柵格類，就能夠建立一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一塊兒的（超小屏幕到小屏幕這 一範圍），在桌面（中等）屏幕設備上變爲水平排列。全部「列（column）必須放在 」 .row 內。 例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 --> <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 --> <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6"> Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。 </div> <div class="col-lg-3 col-md-4 col-sm-6"> Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。 </div> <div class="col-lg-3 col-md-4 col-sm-6"> Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。 </div> <div class="col-lg-3 col-md-4 col-sm-6"> Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。 </div> </div> </div> <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>
相關文章
- 1. 響應式佈局與bootstrap框架
- 2. 響應式佈局 Bootstrap（01）
- 3. BootStrap--響應式設計
- 4. Bootstrap響應式佈局
- 5. bootstrap響應式網頁
- 6. Bootstrap 響應式佈局
- 7. bootstrap響應式圖片
- 8. 2017.4.7 Bootstrap響應式設計
- 9. Bootstrap響應式導航欄
- 10. bootstrap的響應式佈局
- 更多相關文章...
- • 如何僞造ARP響應？ - TCP/IP教程
- • HTTP 響應頭信息 - HTTP 教程
- • 委託模式
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章