Bootstrap 2.3.0自定Grid布局-浏览器内核的解析与对比-把内容复制到剪切板

当前位置: 编程技术>WEB前端

本页文章导读:

▪Bootstrap 2.3.0自定Grid布局 Bootstrap（http://twitter.github.com/bootstrap）默认是12列的栅格布局（http://twitter.github.com/bootstrap/scaffolding.html#gridSystem），有时候不满足我们布局的需求，这时侯，可以通过修改less/variables.less文件中.........

▪浏览器内核的解析与对比要搞清楚浏览器内核是什么，首先应该先搞清楚浏览器的构成。简单来说浏览器可以分为两部分，shell【外壳】+内核。其中shell的种类相对比较多，内核则.........

▪把内容复制到剪切板 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conte.........

[1]Bootstrap 2.3.0自定Grid布局

来源: 发布时间: 2013-11-06

Bootstrap（http://twitter.github.com/bootstrap）默认是12列的栅格布局（http://twitter.github.com/bootstrap/scaffolding.html#gridSystem），有时候不满足我们布局的需求，这时侯，可以通过修改less/variables.less文件中关于栅格布局的变量就可以了。

比如我们想修改改为24列的栅格布局，可以参考以下我修改的配置参数：

// GRID
// --------------------------------------------------

// Default 940px grid
// -------------------------
@gridColumns: 24;
@gridColumnWidth: 30px;
@gridGutterWidth: 10px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200: 35px;
@gridGutterWidth1200: 15px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768: 21px;
@gridGutterWidth768: 10px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

修改完成后，在Bootstrap源码目录重新执行编译命令：make bootstrap，这样就可以得到修改过后的bootstrap所有文件。

同理，由于Bootstrap是基于less的，我们可以很方便的通过修改less/variables.less中的变量，定义和生成满足自己需求的bootstrap样式。

如何编译Bootstrap，请参考我的上一篇随笔：

http://www.cnblogs.com/TerryLiang/archive/2013/02/19/2916460.html

本文链接

[2]浏览器内核的解析与对比

来源: 互联网发布时间: 2013-11-06

要搞清楚浏览器内核是什么，首先应该先搞清楚浏览器的构成。简单来说浏览器可以分为两部分，shell【外壳】+内核。其中shell的种类相对比较多，内核则比较少。Shell是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些浏览器并不区分外壳和内核。从Mozilla将Gecko独立出来后，才有了外壳和内核的明确划分。目前主流的浏览器有IE、Chrome、FireFox、Safari、Opera【搜狗、Maxthon、QQ、360】等。

1、什么是浏览器内核

浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。（参见维基百科）JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个ACID来测试引擎的兼容性和性能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Presto、Webkit。

Trident又称MSHTML，是微软开发的渲染引擎（包含了Javascript引擎JScript），他已经深入了Windows操作系统的骨髓，例如Windows Media Play，Windows Explorer，Outlook Express等都使用了。目前很多浏览器都使用这个引擎，例如IE、Maxthon、QQ等。

Gecko是C++开发的，Open Source的渲染引擎，包括了SpiderMonkey(Rhino)。主要的使用者有Firefox。

Webkit是苹果公司基于KHTML开发的。他包括Webcore和JavaScriptCore（SquirrelFish,V8）两个引擎。主要的使用者有Safari，Chrome。

Presto由Opera Software公司开始的，用于Opera的渲染引擎。Macromedia Dreamweaver （MX版本及以上）和Adobe Creative Suite 2也使用了Presto的内核。

2、主流浏览器所使用的内核分类

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上
Webkit内核：Safari,Chrome等

3、主要浏览器内核的优缺点

Trident内核(window)

Trident就是大名鼎鼎的IE浏览器所使用的内核，也是很多浏览器所使用的内核，MS现在采用的越来越少，反之使用webkit的越来越多，老的trident内核（比如IE6）当年占得市场份额很大，后果就是大量的网页是专门为IE6等老trident内核编写，但这些网页的代码并不符合w3c标准，于是完全符合w3c标准的网页在老trident内核下出现了偏差，这就是为什么后来很多人觉得后来的IE9网页排版有点混乱，而IE6正常，其实不是浏览器的兼容性差了，而是你访问的的网页不符合新的标准，目前可供调用的最新版的Trident内核是IE9使用的内核，较之前的版本对w3c的标准支持增了很多。基于Trident内核的浏览器有： ie6，ie7，ie8(Trident 4.0)，ie9(trident 5.0) ，ie10(trident6.0)，世界之窗，360安全浏览器，遨游2.0（3.0以上版本开始采用webkit内核），搜狗浏览器，腾讯TT；其中部分版本的浏览器是双核浏览器，甚至是多核。

Gecko（跨平台）

Natescape6启用的内核，现在又mozilla基金会进行维护，是开源的浏览器内核，目前主流的Gecko内核是mozilla firefox, 由于firefox的出现，IE的霸主地位逐渐被削弱，chrome的出现加速了这个进程，非trident内核的兴起逐渐改变了整个互联网的格局，最直接的推动是编码的标准化，也使MS在竞争的压力下不得不改进IE，不过可惜的是，虽然是开源的，也开发了这么多年，基于Gecko的浏览器并不多见，除了一些简单的改动或者重新编译，深度定制或者增了强外壳的还是比较少见。另外就是一些软件借用了Gecko，比如音乐管理软件songbird。

webkit（跨平台）

由khtml发展而来，也是apple给开源世界的一大贡献，是目前最火热的浏览器内核，火热的不是说它的市场份额，而是应用的面积和势头，因为脱胎于khtml,所以具有高速的特点，同样遵守w3c标准，从目前来看，webkit内核是最具有潜力而且是已经有相当成绩的新型内核，性能非常好，对w3c标准的支持也非常完善，本人十分看好他。常见的基于webkit内核的浏览器主要有：apple 的safari(win/mac/iphone/ipad) 、google的chrome、塞班手机浏览器、android手机默认的浏览器。

Presto（跨平台）

opera所采用的内核，准确的说是opera7.0及以后的版本采用的内核，之前的版本采用的内核是elektra，无容置疑，Presto内核对w3c的支持也很良好，presto对页面文字的解析方面的性能比webkit还要高，对页面有较高的阅读性。基于presto的内核的浏览器有; opera。

作者：jcx5083761 发表于2013-2-25 9:28:17 原文链接

阅读：0 评论：0 查看评论

[3]把内容复制到剪切板

来源: 互联网发布时间: 2013-11-06

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
	function copyToClipBoard(){
		var clipBoardContent='';
		clipBoardContent+='我的空间我做主，有问题请留言! \r\n http://1240840231.qzone.qq.com';
		window.clipboardData.setData("Text",clipBoardContent);
   		alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友");
    }
</script>
</head>

<body>
<a title='点击复制本页地址,将地址发送给好友' onclick='copyToClipBoard ()' style="cursor:hand; font-weight:700">点击复制网址</a></font><th style="vertical-align:bottom ;padding-left:1.5%; border:0">
</body>
</html>

作者：qyf_5445 发表于2013-2-25 9:27:07 原文链接

阅读：0 评论：1 查看评论