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来解决 此处有坑:官网文档中说 ...
随机推荐
- IOS plist的数据 存 取（沙河目录）
应用沙盒目录的常见获取方式 沙盒根目录:NSString *home = NSHomeDirectory(); Documents:(2种方式) 1.利用沙盒根目录拼接”Documents”字符串 N ...
- VERITAS NETBACKUP运维手册（自制）
ps:本文为目录.详情请点如下目录超链接 1 VERITAS NETBACKUP介绍 1.1 NBU基本概念 1.2 配置存储单元 1.3 配置备份策略(Policy) 1.4 配置NetBackup ...
- eclipse关闭无用启动项,降低内存占用
1,我使用的eclipse版本 2.打开windows-->preference 3,勾选掉无用的启动项,我的已经去掉过了, 4,重启eclipse,如果操作后导致一些必须的功能不能用了,可以点 ...
- 黑马基础阶段测试题：创建Phone（手机）类，Phone类中包含以下内容：
package com.swift; public class Phone { private String pinpai; private int dianliang; public String ...
- 牛客NOIP普及组R1 C括号(dp)
题意 题目链接 Sol maya普及组的dp都要想很长时间,我真是越来越菜了qwq 设$f[i][j]$表示当前到第$i$个位置,剩下$j$个左括号没被匹配 转移的时候判断一下即可 /* */ #in ...
- rsync常用命令和使用方法
rsync是一个远程数据同步工具,可以实现数据的增量备份,这点比scp要好,scp只能全量备份.同步可以保持文件原有属性,传输过程加密,数据传输全. rsync 的传输模式有: 1. 本 ...
- 二十一、MySQL NULL 值处理
MySQL NULL 值处理 我们已经知道 MySQL 使用 SQL SELECT 命令及 WHERE 子句来读取数据表中的数据,但是当提供的查询条件字段为 NULL 时,该命令可能就无法正常工作. ...
- vue-cli的build的文件夹下没有dev-server.js文件，怎么配置mock数据
因为最新版本的vue-cli已经放弃dev-server.js,只需在webpack.dev.conf.js配置就行 新版webpack.dev.conf.js配置如下: 在const portfin ...
- Android 性能篇 -- 带你领略Android内存泄漏的前世今生
基础了解 什么是内存泄漏? 内存泄漏是当程序不再使用到的内存时,释放内存失败而产生了无用的内存消耗.内存泄漏并不是指物理上的内存消失,这里的内存泄漏是指由程序分配的内存但是由于程序逻辑错误而导致程序失 ...
- Python数据类型的用法
字符串的用法 res = 'hellow,world' print(res) #res.显示的都是它的方法,下划线的除外 1 判断字符串的结尾字符,返回的值的布尔形式 endswith 判断字符串的开 ...