BootStrap导入及其使用
BootStrap主要是一个CSS框架，用于页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css">
</head>
<body> </body>
</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
BootStrap导入及其使用的更多相关文章
- bootstrap导入JavaScript插件
Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入 ...
- Rails bootstrap导入
创建: 2018/03/24 完成: 2018/03/24 适用于Sass, Scss. Less的自己网上搜吧 如何判断是不是Sass/Scss?项目里搜 gem 'sass-rails' ,gem ...
- bootstrap导入报错
- vue中导入bootstrap.css
1.利用cnpm下载然后导入,用npm也是一样的: cnmp install bootstrap -S 在main.js文件下导入: import "bootstrap/dist/css/b ...
- 关于bootstrap和响应式布局
bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...
- 如何使用bootstrap
前言: 前几天,本想做一个登陆界面,但自己写form表单必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子.但我完全不会bootstrap... 下载&目录 ...
- Flask入门 表单Flask-wtf form原生 Bootstrap渲染(七)
(1) 原生的表单 模板页面,form表单form.html <form action="{{ url_for('/check/') }}" method='post'> ...
- Thinkphp5之Bootstrap自定义BootstrapDetailed分页插件的实现
首先,在此目录建立一个newcrm\thinkphp\library\think\paginator\driver\BootstrapDetailed.php文件,代码如下: <?php // ...
- SAE flask及其扩展 bug指南
1. ImportError: No moudle named ext.bootstrap 导入依赖包失败 SAE会提供一种机制通过导入virtualenv.bundle来解决 此处有坑:官网文档中说 ...
随机推荐
- Zend Studio 12.5.1原版安装破解
安装官方Zend Studio 12.5.1原版,关闭zend studio,然后将破解补丁com.zend.verifier_12.5.1.v20150514-2003.jar覆盖到 安装目录\pl ...
- 2018.5.30 Oracle数据库PLSQL编程---游标的使用
显示游标的步骤 /* 显示游标处理步骤 1.声明游标 语法结构:cursor 游标名称 is SQL 语句; 2.打开游标 语法结构:open游标名称; 3.提取数据 语法结构:fetch 4.关闭游 ...
- java基础编程——获取栈中的最小元素
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 题目代码 /** * Created by YuKai Fan on 2018/9 ...
- SpringBoot2.X最佳实践《一》 之 SpringBoot2.x初体验
SpringBoot2.X最佳实践 前言 本系列文章,从零基础接触 SpringBoot2.x新版本,基础入门使用,热部署,到整合各个主流框架Redis4.x,消息队列AciveMQ, Rocket ...
- 循环引用问题 -- dealloc方法不执行
dealloc不执行 如果一个类在释放过后,dealloc方法没有执行,那么就代表着这个类还被其他对象所引用,引用计数不为0,这样就造成了内存泄露 昨天其他业务线开发告知他所依赖的我这边的父类VC的- ...
- jquery的ajax请求
加载页面内容,如果不加选择器,会加载整个页面内容 加选择器会获取选择器内容 例如: <script> //可以获取json格式的文件 $.ajax({ type:"get&quo ...
- jrtplib移植
jrtplib版本:3.11.1 jthread版本:1.3.3 libsrtp版本:1.6.0 jrtplib库有两种编译方式: 1. 使能jthread编译,此方式可使jrtplib自动在后台轮询 ...
- 最新Python3.6从入门到高级进阶实战视频教程
点击了解更多Python课程>>> 最新Python3.6从入门到高级进阶实战视频教程 第1篇 Python入门导学 第2篇 Python环境装置 第3篇 了解什么是写代码与Pyth ...
- Cluster - 基本概念
1.1 什么是集群 简单的说,集群(cluster)就是一组计算机,它们作为一个整体向用户提供一组网络资源.这些单个的计算机系统就是集群的节点(node).一个理想的集群是,用户从来不会意识到集群系统 ...
- php获取随机字符串
获取随机字符串 /** * 获取随机字符串 * @param int $randLength 长度 * @param int $addtime 是否加入当前时间戳 * @param int $incl ...