BootStrap导入及其使用
BootStrap主要是一个CSS框架，用于页面布局
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css"> 7 </head> 8 <body> 9 10 </body> 11 </html>
下载后在页面中link样式
如果想要用到BootStrap提供的js插件，那么还需要引入jQuery框架，因为BootStrap提供的js插件是依赖于jQuery的
<link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css"> <script type="text/javascript" src="../../resources/bootstrap-2/js/bootstrap.js"></script> <script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BootStrap</title> <link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css"> <script type="text/javascript" src="../../resources/bootstrap-2/js/bootstrap.js"></script> <script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="../../resources/js/html5.js"></script> <!--解决手机上的显示问题--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--解决IE低版本问题--> <!--[if lt IE9]> <script type="text/javascript" src="../../resources/js/html5.js"></script> <![endif]--> </head> <body> </body> </html>
/** * @preserve HTML5 Shiv prev3.7.1 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */ ;(function(window, document) { /*jshint evil:true */ /** version */ var version = \'3.7.0\'; /** Preset options */ var options = window.html5 || {}; /** Used to skip problem elements */ var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i; /** Not all elements can be cloned in IE **/ var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i; /** Detect whether the browser supports default html5 styles */ var supportsHtml5Styles; /** Name of the expando, to work with multiple documents or to re-shiv one document */ var expando = \'_html5shiv\'; /** The id for the the documents expando */ var expanID = 0; /** Cached data for each document */ var expandoData = {}; /** Detect whether the browser supports unknown elements */ var supportsUnknownElements; (function() { try { var a = document.createElement(\'a\'); a.innerHTML = \'<xyz></xyz>\'; //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles supportsHtml5Styles = (\'hidden\' in a); supportsUnknownElements = a.childNodes.length == 1 || (function() { // assign a false positive if unable to shiv (document.createElement)(\'a\'); var frag = document.createDocumentFragment(); return ( typeof frag.cloneNode == \'undefined\' || typeof frag.createDocumentFragment == \'undefined\' || typeof frag.createElement == \'undefined\' ); }()); } catch(e) { // assign a false positive if detection fails => unable to shiv supportsHtml5Styles = true; supportsUnknownElements = true; } }()); /*--------------------------------------------------------------------------*/ /** * Creates a style sheet with the given CSS text and adds it to the document. * @private * @param {Document} ownerDocument The document. * @param {String} cssText The CSS text. * @returns {StyleSheet} The style element. */ function addStyleSheet(ownerDocument, cssText) { var p = ownerDocument.createElement(\'p\'), parent = ownerDocument.getElementsByTagName(\'head\')[0] || ownerDocument.documentElement; p.innerHTML = \'x<style>\' + cssText + \'</style>\'; return parent.insertBefore(p.lastChild, parent.firstChild); } /** * Returns the value of `html5.elements` as an array. * @private * @returns {Array} An array of shived element node names. */ function getElements() { var elements = html5.elements; return typeof elements == \'string\' ? elements.split(\' \') : elements; } /** * Returns the data associated to the given document * @private * @param {Document} ownerDocument The document. * @returns {Object} An object of data. */ function getExpandoData(ownerDocument) { var data = expandoData[ownerDocument[expando]]; if (!data) { data = {}; expanID++; ownerDocument[expando] = expanID; expandoData[expanID] = data; } return data; } /** * returns a shived element for the given nodeName and document * @memberOf html5 * @param {String} nodeName name of the element * @param {Document} ownerDocument The context document. * @returns {Object} The shived element. */ function createElement(nodeName, ownerDocument, data){ if (!ownerDocument) { ownerDocument = document; } if(supportsUnknownElements){ return ownerDocument.createElement(nodeName); } if (!data) { data = getExpandoData(ownerDocument); } var node; if (data.cache[nodeName]) { node = data.cache[nodeName].cloneNode(); } else if (saveClones.test(nodeName)) { node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode(); } else { node = data.createElem(nodeName); } // Avoid adding some elements to fragments in IE < 9 because // * Attributes like `name` or `type` cannot be set/changed once an element // is inserted into a document/fragment // * Link elements with `src` attributes that are inaccessible, as with // a 403 response, will cause the tab/window to crash // * Script elements appended to fragments will execute when their `src` // or `text` property is set return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node; } /** * returns a shived DocumentFragment for the given document * @memberOf html5 * @param {Document} ownerDocument The context document. * @returns {Object} The shived DocumentFragment. */ function createDocumentFragment(ownerDocument, data){ if (!ownerDocument) { ownerDocument = document; } if(supportsUnknownElements){ return ownerDocument.createDocumentFragment(); } data = data || getExpandoData(ownerDocument); var clone = data.frag.cloneNode(), i = 0, elems = getElements(), l = elems.length; for(;i<l;i++){ clone.createElement(elems[i]); } return clone; } /** * Shivs the `createElement` and `createDocumentFragment` methods of the document. * @private * @param {Document|DocumentFragment} ownerDocument The document. * @param {Object} data of the document. */ function shivMethods(ownerDocument, data) { if (!data.cache) { data.cache = {}; data.createElem = ownerDocument.createElement; data.createFrag = ownerDocument.createDocumentFragment; data.frag = data.createFrag(); } ownerDocument.createElement = function(nodeName) { //abort shiv if (!html5.shivMethods) { return data.createElem(nodeName); } return createElement(nodeName, ownerDocument, data); }; ownerDocument.createDocumentFragment = Function(\'h,f\', \'return function(){\' + \'var n=f.cloneNode(),c=n.createElement;\' + \'h.shivMethods&&(\' + // unroll the `createElement` calls getElements().join().replace(/[\w\-:]+/g, function(nodeName) { data.createElem(nodeName); data.frag.createElement(nodeName); return \'c("\' + nodeName + \'")\'; }) + \');return n}\' )(html5, data.frag); } /*--------------------------------------------------------------------------*/ /** * Shivs the given document. * @memberOf html5 * @param {Document} ownerDocument The document to shiv. * @returns {Document} The shived document. */ function shivDocument(ownerDocument) { if (!ownerDocument) { ownerDocument = document; } var data = getExpandoData(ownerDocument); if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) { data.hasCSS = !!addStyleSheet(ownerDocument, // corrects block display not defined in IE6/7/8/9 \'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}\' + // adds styling not present in IE6/7/8/9 \'mark{background:#FF0;color:#000}\' + // hides non-rendered elements \'template{display:none}\' ); } if (!supportsUnknownElements) { shivMethods(ownerDocument, data); } return ownerDocument; } /*--------------------------------------------------------------------------*/ /** * The `html5` object is exposed so that more elements can be shived and * existing shiving can be detected on iframes. * @type Object * @example * * // options can be changed before the script is included * html5 = { \'elements\': \'mark section\', \'shivCSS\': false, \'shivMethods\': false }; */ var html5 = { /** * An array or space separated string of node names of the elements to shiv. * @memberOf html5 * @type Array|String */ \'elements\': options.elements || \'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video\', /** * current version of html5shiv */ \'version\': version, /** * A flag to indicate that the HTML5 style sheet should be inserted. * @memberOf html5 * @type Boolean */ \'shivCSS\': (options.shivCSS !== false), /** * Is equal to true if a browser supports creating unknown/HTML5 elements * @memberOf html5 * @type boolean */ \'supportsUnknownElements\': supportsUnknownElements, /** * A flag to indicate that the document\'s `createElement` and `createDocumentFragment` * methods should be overwritten. * @memberOf html5 * @type Boolean */ \'shivMethods\': (options.shivMethods !== false), /** * A string to describe the type of `html5` object ("default" or "default print"). * @memberOf html5 * @type String */ \'type\': \'default\', // shivs the document according to the specified `html5` object options \'shivDocument\': shivDocument, //creates a shived element createElement: createElement, //creates a shived documentFragment createDocumentFragment: createDocumentFragment }; /*--------------------------------------------------------------------------*/ // expose html5 window.html5 = html5; // shiv the document shivDocument(document); }(this, document));
html5.js
版权声明：本文为sherrykid原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。