diff --git a/.gitignore b/.gitignore index 3b10ffb38483..8c843cb4af0b 100644 --- a/.gitignore +++ b/.gitignore @@ -34,4 +34,4 @@ nbproject .CVS .idea node_modules -dist +dist \ No newline at end of file diff --git a/README.md b/README.md index 4f74a15f2b33..a9556fb0a26f 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,32 @@ +cnBootstrap +============ + # [Bootstrap v2.3.0](http://twitter.github.com/bootstrap) [![Build Status](https://secure.travis-ci.org/twitter/bootstrap.png)](http://travis-ci.org/twitter/bootstrap) -Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat). + +cnBootstrap 是 Twitter 开发的前端框架 Bootstrap 的中文版——是时尚、直观、强大的前端框架,能使Web开发更快,更容易。 + + +cnBootstrap 收集了网络上遇到的大多数[前端 bug 和 fixed](http://www.tcrearor.info/cnBootstrap/cnDocs/bugs-and-fixed.php),列表于此。 To get started, checkout [http://getbootstrap.com](http://getbootstrap.com)! +cnBootstrap 集成了 aliceui 兼容解决方案(包括但不限于aliceui),亦将我所了解的解决方案也整合进了[前端兼容解决方案](http://www.tcrearor.info/cnBootstrap/cnDocs/solution.php)列表,现仍在完善中... + +cnBootstrap 把参考研究的前端界比较好的项目进行了简单的分类,列表于[项目页面](http://www.tcrearor.info/cnBootstrap/cnDocs/project.php) -## Quick start +## 意见反馈 ## -Three quick start options are available: +请在[Blog](http://www.tcrearor.info/cnBootstrap/)留言或在[项目页](https://github.com/webcoding/cnBootstrap)提交BUG -* [Download the latest release](https://github.com/twitter/bootstrap/zipball/master). -* Clone the repo: `git clone git://github.com/twitter/bootstrap.git`. -* Install with Twitter's [Bower](http://twitter.github.com/bower): `bower install bootstrap`. +# Git管理工具指南 +本项目使用Git管理,如果您对Git的使用不甚熟悉,可以参考[useGit使用指南](https://github.com/webcoding/useGit)项目,包含详细的Git教程讲解以及Git命令。 ## Versioning @@ -114,3 +123,4 @@ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. + diff --git a/WF/assets/css/README.md b/WF/assets/css/README.md new file mode 100644 index 000000000000..35f4d1a4a332 --- /dev/null +++ b/WF/assets/css/README.md @@ -0,0 +1,115 @@ + +# About reset.css + +综合自Ocode,html5doctor,aliceui,yahoo,normalize等 + +/* ------------------------------------------------------------ + + - Css Reset v1.0 + - Created: 2011-04-25 + - Last Updated: 2013-03-07 + - Author: cloudYan + - Contact: qqGroup:187260298 + +------------------------------------------------------------ */ + + +/* =更新日志 + + * 2013-03-04 按normalize结构调整reset样式顺序,并引入表单元素的默认效果设置 + * 2012-10-11 参考normalize.css,精良保持浏览器默认的属性或统一默认属性值而非直接去掉默认的属性(如:ul,ol等),此方法是一种新的reset解决方案,做项目使用蛮不错。 + * 2012-05-11 html5新增语义化的标签(除figure外)不必重置样式,默认就没有样式的-陈林 + * 2012-04-04 新项目参考了alipay,yahoo,html5Doctor等结合模块化开发进行研究,html5的Doctype声明,不必写type="text/css" 但是必须要有 rel="stylesheet",html5中单标签不再写结束标记 + * 2011-09-24 解决了IE下超链接使用绝对定位后失效的问题(使用background:url(about:blank)解决是最佳方案) + * 2011-09-19 原项目Ocode取义Original code,参考http://www.tcreator.info/labs/projects/2011/css-reset.html + + * 研究规划 + * 第一步通用reset.css + * 第二步全站公共样式—common.css + - 包括全站统一样式定义;如:a,a:hover等 + - 基础的模块组合样式;如:.f14,.mt10,.tc等 + * 第三步css模块—c_common.css + - 包括模块公共样式提取 + - 公共模块样式 + - 模块个性化样式(类似新模块,但多处使用的) + * 第四步网站架构css差异化如何书写及管理css + - 单页面/项目css(个性化css)规划 + +------------------------------------------------------------ */ + +/* 升级原则——渐进增强(Progressive Enhancement) + +渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲,渐进增强是指在确保页面在禁用JavaScript后能正常运作后,再对页面添加各种特效(JavaScript动画、Ajax异步等等)。我们同样可以运用"渐进增强"原则来使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web规范。 + +某些情况下,是无法让所有用户在任何浏览器下都完全一模一样,特别是那些使用IE6的用户。运用渐进增强策略,可以保证让那些用户至少能使用到你网站(或网络应用)的基本功能。 + +------------------------------------------------------------ */ + + + + +## 关于HTML5中之省略标记元素的问题 + +html5的Doctype声明,不必写type="text/css" 但是必须要有 rel="stylesheet" + +**不允许写结束标记的元素有:** + +<area> <base> <br> <col> <command> <embed> <hr> <img> <input> <keygen> <link> <meta> <param> <source> <track> <wbr> + +**可以省略结束标记的元素有:** 以下仅作知晓,不推荐使用 + +<li> < dt> <dd> <p> <rt rp> <optgroup> <option> <colgroup> < thead> <tbody> <tfoot> <tr> <td> <th> + +**可以省略全部标记的元素有:** + +<html> <head> <body> <colgroup> <tbody> + + +# 代码书写指南 + +参考摘自 [Code-guide](https://github.com/webcoding/code-guide/tree/master/cn),有改动。 + +## 黄金法则 + +> 任何代码库中的所有代码应该看起来像是一个人书写的,不管有多少人贡献过代码。 + +这意味着任何时候都要严格执行这些商定的准则。对于增加或减少代码的法则,请参看 [Code-guide](https://github.com/webcoding/code-guide/tree/master/zh-cn). + +## CSS 书写规范 + +详情请参阅 [CSS 书写规范](http://www.tcreator.info/cnBootstrap/cnDocs/standard.php#css) + + +# 组合样式combo.css + + +/* ------------------------------------------------------------ + + - Css combo v1.0 + - Created: 2011-04-25 + - Last Updated: 2013-03-07 + - Author: cloudYan + - Contact: qqGroup:187260298 + +------------------------------------------------------------ */ + +为方便开发特提供便捷的组合样式,能迅速拼写出想要的样式,秉承样式与结构相分离的原则,此样式不可滥用,否则得不偿失 + +### 适用范围 + +在网页中有部分简单的样式需要时间,此时没有方便可用的 id 或 class,则可尝试使用common.css提供的便捷类,如: + +````默认12px的文本中某名词需要加粗并大一号字体 + +<p>这是一段普通文本</p> +<p>这是另一端普通文本,这里需要 <strong>着重</strong>,使用<b class="f14">大一号的字体</b></p> +```` +如上:这里没有多余的类可用,又没有必要新建类名,使用快捷组合类是实现需求最简单的解决办法。 + + + + + + + + diff --git a/WF/assets/css/combo-dev.css b/WF/assets/css/combo-dev.css new file mode 100644 index 000000000000..c6ac004a04dc --- /dev/null +++ b/WF/assets/css/combo-dev.css @@ -0,0 +1,313 @@ + +/* + @名称: combo.css + @功能: 便捷组合样式 + */ + +/* ============================== + 快捷组合样式common.css + ============================== */ + +/* 居中 */ +.bc { + margin-left: auto; + margin-right: auto; +} + +/* 浮动 */ +.fl, +.fr, +.inline { + display: inline; +} +.fl {float: left;} +.fr {float: right;} +.ib { + display:inline-block; + *display:inline; + *zoom:1; +} + +/* 隐藏显示 */ +.show, +.block { display: block; } +.hide { display: none !important; } + +/* 文本对齐 */ +.tc{ text-align: center; } +.tl{ text-align: left; } +.tr{ text-align: right; } + +/* 颜色取值 */ +.red { color: red; } +.orange { color: orange; } +.pink { color: #e38; } +.gray { color: gray; } +.gray3 { color: #333; } +.gray6 { color: #666; } + +/* 文本大小、行高 */ +.f12 { font-size: 12px; } +.f14 { font-size: 14px; } +.f16 { font-size: 16px; } +.f18 { font-size: 18px; } +.f22 { font-size: 22px; } +.f24 { font-size: 24px; } +.f30 { font-size: 30px; } +.lh18 { line-height: 18px; } +.lh20 { line-height: 20px; } +.lh22 { line-height: 22px; } +.lh24 { line-height: 24px; } +.lh28 { line-height: 28px; } +.lh30 { line-height: 30px; } + +/* 外边界用组合css */ +.m10 { margin: 10px; } +.mt10 { margin-top: 10px; } +.mb10 { margin-bottom: 10px; } +.ml10 { margin-left: 10px; } +.mr10 { margin-right: 10px; } + +.mt20 { margin-top: 20px; } +.mb20 { margin-bottom: 20px; } + +.pd10 { padding: 10px; } +.pt10 { padding-top: 10px; } +.pb10 { padding-bottom: 10px; } +.pl10 { padding-left: 10px; } +.pr10 { padding-right: 10px; } +.plr10 { + padding-left: 10px; + padding-right: 10px; +} + +/* 组合宽度 */ +.w10 { width: 10px; } +.w20 { width: 20px; } +.w30 { width: 30px; } +.w40 { width: 40px; } +.w50 { width: 50px; } +.w60 { width: 60px; } +.w70 { width: 70px; } +.w80 { width: 80px; } +.w90 { width: 90px; } +.w100 { width: 100px; } +.w110 { width: 110px; } +.w120 { width: 120px; } +.w130 { width: 130px; } +.w140 { width: 140px; } +.w150 { width: 150px; } +.w160 { width: 160px; } +.w170 { width: 170px; } +.w180 { width: 180px; } +.w190 { width: 190px; } +.w200 { width: 200px; } +.w210 { width: 210px; } +.w220 { width: 220px; } +.w230 { width: 230px; } +.w240 { width: 240px; } +.w250 { width: 250px; } +.w260 { width: 260px; } +.w270 { width: 270px; } +.w280 { width: 280px; } +.w290 { width: 290px; } +.w300 { width: 300px; } +.w310 { width: 310px; } +.w320 { width: 320px; } +.w330 { width: 330px; } +.w340 { width: 340px; } +.w350 { width: 350px; } +.w360 { width: 360px; } +.w370 { width: 370px; } +.w380 { width: 380px; } +.w390 { width: 390px; } +.w400 { width: 400px; } + +/* 字体,不要使用中文字体名 */ +.yahei { font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1"; } + +/* 使webkit支持10px以下字体 */ +.text-size { + -webkit-text-size-adjust:100%; + -ms-text-size-adjust:100%; +} + +/* 透明 */ +.opacity { + filter:alpha(opacity=50); + opacity:.5; +} +.text-ell { + display:block; + white-space:nowrap; + text-overflow:ellipsis; + overflow:hidden; +} + +/* ============================== + TPL布局样式 + ============================== */ + +/* 间隔空白 */ +.hr_a, +.hr_b, +.hr_c { + font-size: 1px; + line-height: 1px; + display: block; + clear: both; + overflow: hidden; +} +.hr_a { height:10px; } +.hr_b { height:5px; } +.hr_c { height:20px; } + +/* 无背景a元素定位链接 */ +.disa a { + display:block; + width:100%; + height:100%; + background:url(about:blank); + text-indent:-9999px; +} + + +.no_bg { background: none !important; } +.no_bd { border: none !important; } +.p_rel { position: relative; } +.p_abs { position: absolute; } + + +/* 横向列表 */ +.hor li { + display:inline; + float:left; + *zoom:1; +} +.hor li a{ + display:block; + float:left; +} +/* 竖向列表 */ +.ver li { + display:block; + *zoom:1; +} +.ver li a{ + display:block; +} + +/* ============================== + 模块功能划分 + ============================== */ + +/* 半透明背景文字 */ +.text-cover { + position: relative; + display: block; + overflow: hidden; + *zoom:1; + text-align: center; +} +.text-cover img { + position: relative; + z-index: 1; + vertical-align: middle; +} +.text-cover span, +.text-cover i { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + width: 100%; + height: 25px; + line-height: 25px; + display: block; + text-decoration: none; +} +.text-cover span { + background: #000; + filter: alpha(opacity=50); + opacity: 0.5; +} + +.text-cover i{ + text-align: center; + color: #fff; +} +a.text-cover:hover { + text-decoration: none; + cursor: pointer; +} + +/* ============================== + UI设计 + ============================== */ + +/* 链接|展开 更多|详情 */ +.link-more, +.link-details, +.view-more, +.view-details, +.hide-more { + cursor: pointer; +} +.link-more {} +.link-details {} +.view-more {} +.view-details {} +.hide-more {} + +ol.num { + padding:5px 10px 10px 30px; +} +ol.num li { + list-style:decimal outside; + text-indent:0px; + line-height:20px; + margin:5px 0; +} + +/* 全站统一价格标签 */ +dfn, dfn i, +samp, samp i { + font-family:arial; + font-style: normal; + color: #f60; +} +dfn i, samp i{ + font-size: 120%; +} + + +/* 字体颜色控制 */ +.border { + border: 1px solid #eee; +} + +.linear { + background: -webkit-gradient(linear,left top,left bottom,from(#fcfcfc),to(#f1f1f1)); + background: -moz-linear-gradient(top,#fcfcfc,#f1f1f1); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc',endColorstr='#f1f1f1'); + background: -o-linear-gradient(top,#fcfcfc,#f1f1f1); + background: linear-gradient(top,#fcfcfc,#f1f1f1); +} + +.B, .fb, h1, h2, h3, h4, h5 { font-weight: bold; } +.fnb { font-weight: normal; } +h3, h4 { font-size: 14px; } +h5 { font-size: 12px;} +h6 { + font-size: 12px; + font-weight: normal; +} + +.v-t { vertical-align: top; } +.v-m { vertical-align: middle; } +.v-b { vertical-align: bottom; } + +.element-invisible { + position: absolute !important; + clip: rect(1px 1px 1px 1px); +} \ No newline at end of file diff --git a/WF/assets/css/combo.css b/WF/assets/css/combo.css new file mode 100644 index 000000000000..1c14ac3977d1 --- /dev/null +++ b/WF/assets/css/combo.css @@ -0,0 +1,112 @@ +/* + @名称: combo.css + @功能: 便捷组合样式 + */ +.bc{margin-left:auto;margin-right:auto;} +.fl,.fr,.inline{display:inline;} +.fl{float:left;} +.fr{float:right;} +.ib{display:inline;zoom:1;} +.show,.block{display:block;} +.hide{display:none;} +.tc{text-align:center;} +.tl{text-align:left;} +.tr{text-align:right;} +.f16{font-size:16px;} +.f18{font-size:18px;} +.f22{font-size:22px;} +.f24{font-size:24px;} +.f30{font-size:30px;} +.lh18{line-height:18px;} +.lh20{line-height:20px;} +.lh22{line-height:22px;} +.lh24{line-height:24px;} +.lh28{line-height:28px;} +.lh30{line-height:30px;} +.m10{margin:10px;} +.mt10{margin-top:10px;} +.mb10{margin-bottom:10px;} +.ml10{margin-left:10px;} +.mr10{margin-right:10px;} +.mt20{margin-top:20px;} +.mb20{margin-bottom:20px;} +.pd10{padding:10px;} +.pt10{padding-top:10px;} +.pb10{padding-bottom:10px;} +.pl10{padding-left:10px;} +.pr10{padding-right:10px;} +.plr10{padding-left:10px;padding-right:10px;} +.wrap{width:980px;} +.w10{width:10px;} +.w20{width:20px;} +.w30{width:30px;} +.w40{width:40px;} +.w50{width:50px;} +.w60{width:60px;} +.w70{width:70px;} +.w80{width:80px;} +.w90{width:90px;} +.w100{width:100px;} +.w110{width:110px;} +.w120{width:120px;} +.w130{width:130px;} +.w140{width:140px;} +.w150{width:150px;} +.w160{width:160px;} +.w170{width:170px;} +.w180{width:180px;} +.w190{width:190px;} +.w200{width:200px;} +.w210{width:210px;} +.w220{width:220px;} +.w230{width:230px;} +.w240{width:240px;} +.w250{width:250px;} +.w260{width:260px;} +.w270{width:270px;} +.w280{width:280px;} +.w290{width:290px;} +.w300{width:300px;} +.w310{width:310px;} +.w320{width:320px;} +.w330{width:330px;} +.w340{width:340px;} +.w350{width:350px;} +.w360{width:360px;} +.w370{width:370px;} +.w380{width:380px;} +.w390{width:390px;} +.w400{width:400px;} +.yahei{font-family:"Microsoft YaHei",\5FAE\8F6F\96C5\9ED1;} +.text-size{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} +.opacity{filter:alpha(opacity=50);opacity:.5;} +.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} +.hr_a,.hr_b,.hr_c{font-size:1px;line-height:1px;display:block;clear:both;overflow:hidden;} +.hr_a{height:10px;} +.hr_b{height:5px;} +.hr_c{height:20px;} +.disa a{display:block;width:100%;height:100%;background:url(about:blank);text-indent:-9999px;} +.no_bg{background:none!important;} +.no_bd{border:none!important;} +.p_rel{position:relative;} +.p_abs{position:absolute;} +.hor li{display:inline;float:left;zoom:1;} +.hor li a{display:block;float:left;} +.text-cover{position:relative;overflow:hidden;zoom:1;text-align:center;} +.text-cover img{position:relative;z-index:1;vertical-align:middle;} +.text-cover span,.text-cover i{position:absolute;z-index:2;bottom:0;left:0;width:100%;height:25px;line-height:25px;display:block;text-decoration:none;} +.text-cover span{background:#000;filter:alpha(opacity=50);opacity:0.5;} +.text-cover i{text-align:center;color:#fff;} +a.text-cover:hover{text-decoration:none;cursor:pointer;} +.link-more,.link-details,.view-more,.view-details,.hide-more{cursor:pointer;} +ol.num{padding:5px 10px 10px 30px;} +ol.num li{list-style:decimal outside;text-indent:0;line-height:20px;margin:5px 0;} +dfn,dfn i,samp,samp i{font-family:arial;font-style:normal;color:#f60;} +dfn i,samp i{font-size:120%;} +.border{border:1px solid #eee;} +.linear{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc',endColorstr='#f1f1f1');background:linear-gradient(top,#fcfcfc,#f1f1f1);} +.B,.fb,h1,h2,h3,h4,h5{font-weight:700;} +.fnb{font-weight:400;} +h6{font-size:12px;font-weight:400;} +.f12,h5{font-size:12px;} +.f14,h3,h4{font-size:14px;} \ No newline at end of file diff --git a/WF/assets/css/labs.css b/WF/assets/css/labs.css new file mode 100644 index 000000000000..625d49b8aa33 --- /dev/null +++ b/WF/assets/css/labs.css @@ -0,0 +1,496 @@ + +/* + @名称: labs.css + @功能: 样式实验室 + */ + +.hide-clip { + position: absolute !important; + clip: rect(1px 1px 1px 1px); +} +.none { + margin: 0; + padding: 0; + list-style: none; +} + +.wrap{width:980px;} +.nav{list-style:none; margin:0;} +/* code examples +-------------------------------------------------- */ + +/* Base class */ +.docs-example { + position: relative; + margin: 15px 0; + padding: 39px 19px 14px; + *padding-top: 19px; + background-color: #fff; + border: 1px solid #ddd; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +/* Echo out a label for the example */ +.docs-example:after { + content: "Example"; + position: absolute; + top: -1px; + left: -1px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + background-color: #f5f5f5; + border: 1px solid #ddd; + color: #9da0a4; + -webkit-border-radius: 4px 0 4px 0; + -moz-border-radius: 4px 0 4px 0; + border-radius: 4px 0 4px 0; +} + +/* Remove spacing between an example and it's code */ +.docs-example + .prettyprint { + margin-top: -20px; + padding-top: 15px; +} + +/* Tweak examples +------------------------- */ +.docs-example > p:last-child { + margin-bottom: 0; +} +.docs-example .table, +.docs-example .progress, +.docs-example .well, +.docs-example .alert, +.docs-example .hero-unit, +.docs-example .pagination, +.docs-example .navbar, +.docs-example > .nav, +.docs-example blockquote { + margin-bottom: 5px; +} +.bs-docs-example .pagination { + margin-top: 0; +} + +body { + font: 14px/1.5 Tahoma,Arial,\5b8b\4f53; + color:#333; + /* background: #eee; + background:url(../../xOne/images/bg.jpg) #fff center -8px no-repeat; */ +} + +.nav a { + display: block; +} +.main-nav li { + display: inline-block; + *display: inline; + *zoom: 1; +} +.main-nav a{ + padding: 10px 15px; + font-size: 14px; + /* color: #ddd; */ +} +.sidebar, +.main { + border:1px solid #ccc; +} +.sidebar{ + width: 210px; + float:left; + display:inline; + margin-right:20px; +} +.sidebar ul{padding: 10px 10px;} +.main { + overflow:hidden; + padding:0 20px 30px; +} +.footer{ margin:10px 0;} + + + +p { + margin: 0 0 10px; +} + +.lead { + margin-bottom: 20px; + font-size: 21px; + font-weight: 200; + line-height: 30px; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +em { + font-style: italic; +} + +cite { + font-style: normal; +} +.rose { color:#ff0080;} +.white { color: white;} +.red { color: red;} +.green { color: green;} +.blue { color: blue;} +.gray { color: gray;} +.cc1{ color: #e38;} +.cc2{ color: #f60;} + +.muted { + color: #999999; +} + +a.muted:hover, +a.muted:focus { + color: #808080; +} + +.text-warning { + color: #c09853; +} + +a.text-warning:hover, +a.text-warning:focus { + color: #a47e3c; +} + +.text-error { + color: #b94a48; +} + +a.text-error:hover, +a.text-error:focus { + color: #953b39; +} + +.text-info { + color: #3a87ad; +} + +a.text-info:hover, +a.text-info:focus { + color: #2d6987; +} + +.text-success { + color: #468847; +} + +a.text-success:hover, +a.text-success:focus { + color: #356635; +} + +.tl { + text-align: left; +} + +.tr { + text-align: right; +} + +.tc { + text-align: center; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 10px 0; + font-family: inherit; + font-weight: bold; + line-height: 20px; + color: inherit; + text-rendering: optimizelegibility; +} +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + font-weight: normal; + line-height: 1; + color: #888; +} +h1, +h2, +h3 { + line-height: 40px; +} +h1 { font-size:36px;} +h2 { font-size:28px;} +h3 { font-size:22px;} +h4 { font-size:18px;} +h5 { font-size:14px;} +h6 { font-size:12px;} +h1 small { font-size: 24px;} +h2 small { font-size: 18px;} +h3 small { font-size: 14px;} +h4 small { font-size: 14px;} + +.lead { + margin-bottom: 20px; + font-size: 20px; + font-weight: 200; + line-height: 30px; +} +.page-header { + padding-bottom: 9px; + margin: 20px 0 30px; + border-bottom: 1px solid #eeeeee; +} + +ul.ul, +ol.ol { + padding: 0; + margin: 0 0 10px 25px; +} +ul.ul ul, +ul.ul ol, +ol.ol ol, +ol.ol ul { + margin-bottom: 0; +} +ul.ul { list-style-type: disc;} +ol.ol { list-style-type: decimal;} +ul.ul ul , +ol.ol ul { list-style-type: circle;} +ul.ul ol , +ol.ol ol { list-style-type: lower-alpha;} + + +ul.ul.unstyled, +ol.ol.unstyled { + margin-left: 0; + list-style: none; +} + +ul .inline, +ol .inline { + margin-left: 0; + list-style: none; +} + +ul.inline > li, +ol.inline > li { + display: inline-block; + *display: inline; + padding-right: 5px; + padding-left: 5px; + *zoom: 1; +} + +dl { + margin-bottom: 20px; +} + +dt, +dd { + line-height: 20px; +} + +dt { + font-weight: bold; +} + +dd { + margin-left: 10px; +} + +.dl-horizontal { + *zoom: 1; +} + +.dl-horizontal:before, +.dl-horizontal:after { + display: table; + line-height: 0; + content: ""; +} + +.dl-horizontal:after { + clear: both; +} + +.dl-horizontal dt { + float: left; + width: 160px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.dl-horizontal dd { + margin-left: 180px; +} + +hr { + margin: 20px 0; + border: 0; + border-top: 1px solid #eeeeee; + border-bottom: 1px solid #ffffff; +} + +abbr[title], +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted #999999; +} + +abbr.initialism { + font-size: 90%; + text-transform: uppercase; +} + +blockquote { + padding: 0 0 0 15px; + margin: 0 0 20px; + border-left: 5px solid #eeeeee; +} + +blockquote p { + margin-bottom: 0; + font-size: 17.5px; + font-weight: 300; + line-height: 1.25; +} + +blockquote small { + display: block; + line-height: 20px; + color: #999999; +} + +blockquote small:before { + content: '\2014 \00A0'; +} + +blockquote.pull-right { + float: right; + padding-right: 15px; + padding-left: 0; + border-right: 5px solid #eeeeee; + border-left: 0; +} + +blockquote.pull-right p, +blockquote.pull-right small { + text-align: right; +} + +blockquote.pull-right small:before { + content: ''; +} + +blockquote.pull-right small:after { + content: '\00A0 \2014'; +} + +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +address { + display: block; + margin-bottom: 20px; + font-style: normal; + line-height: 20px; +} + +code, +pre { + padding: 0 3px 2px; + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; + font-size: 12px; + color: #333333; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +code { + padding: 2px 4px; + color: #d14; + white-space: nowrap; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} + +pre { + display: block; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + line-height: 20px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +pre.prettyprint { + margin-bottom: 20px; +} + +pre code { + padding: 0; + color: inherit; + white-space: pre; + white-space: pre-wrap; + background-color: transparent; + border: 0; +} + +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} + + + + + +.poetry p{margin:0;} + + + + + + + + + +/* 组件书写规范请参见README.md +============================================================ */ + +/* + === 样式测试 === + javascript:(function(){var a=document,b=a.body,c=a.createElement("link");c.setAttribute("rel","stylesheet");c.setAttribute("href","http://10.3.1.41/cnBootstrap/WF/assets/css/reset.css");a.querySelector("head").appendChild(c);b.style.backgroundColor="white";b.className+=" typo"})() +============================================================ */ diff --git a/WF/assets/css/module.css b/WF/assets/css/module.css new file mode 100644 index 000000000000..ac84a54ef0c5 --- /dev/null +++ b/WF/assets/css/module.css @@ -0,0 +1,36 @@ + +/* + @名称: module.css + @功能: 模块样式 + */ + +/* ============================== + 模块功能划分 + ============================== */ + +/* 模块 */ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/WF/assets/css/noreset.css b/WF/assets/css/noreset.css new file mode 100644 index 000000000000..0203c02b8769 --- /dev/null +++ b/WF/assets/css/noreset.css @@ -0,0 +1,469 @@ +/* ------------------------------------------------------------ + noreset.css v1.0 + Author: Pandora + Adapted from http://necolas.github.io/normalize.css/ +------------------------------------------------------------ */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +/* ============================== + HTML5 显示定义 + ============================== */ + +/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ +article, +aside, +details, +embed, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} +command, +datalist, +keygen, +mark, +meter, +progress, +rp, +rt, +ruby, +time, +wbr { + display: inline; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} +/** + * Address styling not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ============================== + Base + ============================== */ + +/* + * 1. 防止用户自定义背景颜色对网页的影响 这是改为设置到body上 + * 2. 设置默认字体Tahoma + * 3. 防止 iOS 设备方向变化且没有禁用缩放功能时,文字会发生大小变化 + */ +html { + color: #000; /* 1 */ + /* background: #fff; 1 */ + font-family: Tahoma,Arial,\5b8b\4f53;; /* 2 */ + -webkit-text-size-adjust: 100%; /* 3 */ + -ms-text-size-adjust: 100%; /* 3 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; + background: #fff; +} + +/* ============================== + Links + ============================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + + +a:active, +a:hover { + outline: 0; +} +*/ + +/* ============================== + Typography + ============================== */ + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + /* white-space: pre-wrap; + 去除此项,避免空格等产生页面布局上的空行 + */ + word-wrap: break-word; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* 统一上标和下标 */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +/* ============================== + Embedded content + ============================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + + + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ============================== + Forms input button ... + ============================== */ + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. 表单元素并不继承父级 font 的字体,这里设置默认字体,并不让其继承父级字体 + * 2. 表单元素并不继承父级 font 的大小 + * 3. 统一外边距 in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-family: Tahoma,Arial,\5b8b\4f53; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/* + * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; + + /* IE6/7 内间距宽度一致 */ + *overflow: visible; +} + +/* + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/* + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + + +/* ============================== + Tables + ============================== */ + +/* 去掉Tables单元格间距并让相邻边重合 */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* IE bug fixed: th 不继承 text-align*/ +th { + text-align: inherit; +} + + +/* ============================== + Others + ============================== */ + +/* 去除默认边框 */ +fieldset, +img{ + border: 0; +} + +/* ie6 7 8(q) bug 显示为行内表现 */ +iframe { + display: block; +} + +/* 去掉 firefox 下此元素的边框 */ +abbr, +acronym { + border: 0; + font-variant: normal; +} + +/* 一致的 del 样式 */ +del { + text-decoration: line-through; +} + +address, +caption, +cite, +dfn, +em, +i, +var { + /* 这个reset用不到文本斜体 */ + font-style: normal; + font-weight: 500; +} + +/* 对齐是排版最重要的因素, 别让什么都居中 */ +caption, +th { + text-align: left; +} +/* 这条分割线以上为normalize.css的样式 +==================================================================================================== */ + +/* 清除浮动 */ +.clearfix:after, +.wrap:after { + clear: both; + content: ' '; + display: block; + font-size: 0; + line-height: 0; + visibility: hidden; + width: 0; + height: 0; +} +.clearfix, +.wrap { + *zoom:1 +}/* for IE6 IE7 */ + +/* 空标签清除法 */ +.clear { + clear: both; + display: block; + height:0; + overflow: hidden; + visibility: hidden; +} +.wrap, +.bc { + margin-left: auto; + margin-right: auto; +} + + +/* 这条分割线以上为noreset.css,书写规范请参见README.md +============================================================ */ + +/* + === 样式测试 === + javascript:(function(){var a=document,b=a.body,c=a.createElement("link");c.setAttribute("rel","stylesheet");c.setAttribute("href","http://10.3.1.41/cnBootstrap/WF/assets/css/reset.css");a.querySelector("head").appendChild(c);b.style.backgroundColor="white";b.className+=" typo"})() +============================================================ */ diff --git a/WF/assets/css/reset-dev.css b/WF/assets/css/reset-dev.css new file mode 100644 index 000000000000..1fa67f9739a4 --- /dev/null +++ b/WF/assets/css/reset-dev.css @@ -0,0 +1,462 @@ +@charset "utf-8"; +/* + @名称: reset.css + @功能: 重设浏览器默认样式(综合自aliceui,yahoo,normalize) + */ + +/* ============================== + HTML5 显示定义 + ============================== */ + +/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ +article, +aside, +details, +embed, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary { + display: block; +} + +/* HTML5 媒体文件跟 img inline-block属性保持一致 */ +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} +command, +datalist, +keygen, +mark, +meter, +progress, +rp, +rt, +ruby, +time, +wbr { + display: inline; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} +/** + * Address styling not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ============================== + Base + ============================== */ + +/* + * 1. 防止用户自定义背景颜色对网页的影响 这是改为设置到body上 + * 2. 设置默认字体Tahoma + * 3. 防止 iOS 设备方向变化且没有禁用缩放功能时,文字会发生大小变化 + */ +html { + color: #000; /* 1 */ + /* background: #fff; 1 */ + font-family: Tahoma,Arial,\5b8b\4f53;; /* 2 */ + -webkit-text-size-adjust: 100%; /* 3 */ + -ms-text-size-adjust: 100%; /* 3 */ +} +body { background: #fff; } +/* 移除内外边距(内外边距通常让各个浏览器样式的表现位置不同,数目众多可按组划分) */ +body, div, +dl, dt, dd, ol, ul, li, +h1, h2, h3, h4, h5, h6, p, +blockquote, pre, code, +tr, th, td, +hr, +menu { + margin: 0; + padding: 0; +} + +/* 移除表单元素的reset,在form.css中统一设置 */ +fieldset, figure, legend, +form, input, button, textarea {} + +/* 语义化的标签的样式默认的margin,padding都为0,不必reset */ +article, +aside, +details, +figcaption, +footer, +header, +hgroup, +menu, +nav, +section {} + +/* + 大范围的去除列表项并不好,不若使用.none样式,由于习惯限制等问题,使用推荐如下: + - 生产线网站项目使用传统reset样式 + - 前端研究项目使用noreset.css样式(参考normalize并使用.none样式完成此reset功能) + */ +ol, +ul { + list-style-type: none; +} + +/* ============================== + Typography + ============================== */ + +/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ +h1, h2, h3, h4, h5, h6 { + font-size: 100%; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +blockquote, +pre { + /* white-space: pre-wrap; + 去除此项,避免空格等产生页面布局上的空行 + */ + word-wrap: break-word; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* 统一上标和下标 */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +/* ============================== + Embedded content + ============================== */ + +/* + * 移除IE下a标签内img的边框 + */ +img { + border: 0; +} + + +/* ============================== + Links + ============================== */ + +/* + * Address `outline` inconsistency between Chrome and other browsers. + */ + +/* 默认不显示下划线,保持页面简洁 */ +ins,a { + text-decoration: none; +} + +/* 让链接在 hover 状态下显示下划线 */ +a:hover { text-decoration: underline;} + +/* webkit内核浏览器会默认给:focus状态的元素加上outline的样式 + * 不建议去除浏览器默认的outline属性,为使用户体验更好 + +:focus { + outline:0; +} + +下面是normalize的方法 +a:focus { + outline: thin dotted; +} + +a:active, +a:hover { + outline: 0; +} + */ + + +/* ============================== + Forms input button ... + ============================== */ + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Correct color not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. 表单元素并不继承父级 font 的字体,这里设置默认字体,并不让其继承父级字体 + * 2. 表单元素并不继承父级 font 的大小 + * 3. 统一外边距 in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-family: Tahoma,Arial,\5b8b\4f53; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/* + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; + + /* IE6/7 内间距宽度一致 */ + *overflow: visible; +} + +/* + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/* + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + + +/* ============================== + Tables + ============================== */ + +/* 去掉Tables单元格间距并让相邻边重合 */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* IE bug fixed: th 不继承 text-align */ +th { + text-align: inherit; +} + + +/* ============================== + Others + ============================== */ + +/* 去除默认边框 */ +fieldset, +img{ + border: 0; +} + +/* ie6 7 8(q) bug 显示为行内表现 */ +iframe { + display: block; +} + +/* 去掉 firefox 下此元素的边框 */ +abbr, +acronym { + border: 0; + font-variant: normal; +} + +/* 一致的 del 样式 */ +del { + text-decoration: line-through; +} + +address, +caption, +cite, +dfn, +em, +i, +var { + /* 这个reset用不到文本斜体 */ + font-style: normal; + font-weight: 500; +} + +/* 对齐是排版最重要的因素, 别让什么都居中 */ +caption, +th { + text-align: left; +} + + +/* + 修复火狐下图片和文字之间的间隙 + 添加img{vertical-align:top;}、img{vertical-align:middle;}或img{display:block}属性即可解决 + 推荐前者,不要再reset中设置,建议使用时再处理 + +img { + vertical-align: middle; +} + */ + +/* 清除浮动 */ +.clearfix:after, +.wrap:after { + clear: both; + content: ' '; + display: block; + font-size: 0; + line-height: 0; + visibility: hidden; + width: 0; + height: 0; +} +.clearfix, +.wrap { + *zoom:1 +}/* for IE6 IE7 */ + +/* 空标签清除法 */ +.clear { + clear: both; + display: block; + height:0; + overflow: hidden; + visibility: hidden; +} +.wrap, +.bc { + margin-left: auto; + margin-right: auto; +} + + +/* 这条分割线以上为reset.css,书写规范请参见README.md +============================================================ */ + +/* + === 样式测试 === + javascript:(function(){var a=document,b=a.body,c=a.createElement("link");c.setAttribute("rel","stylesheet");c.setAttribute("href","http://10.3.1.41/cnBootstrap/WF/assets/css/reset.css");a.querySelector("head").appendChild(c);b.style.backgroundColor="white";b.className+=" typo"})() +============================================================ */ diff --git a/WF/assets/css/reset.css b/WF/assets/css/reset.css new file mode 100644 index 000000000000..dc1e36c5e3c3 --- /dev/null +++ b/WF/assets/css/reset.css @@ -0,0 +1,43 @@ +@charset utf-8; +/* + @����: reset.css + @����: ���������Ĭ����ʽ(�ۺ���aliceui,yahoo,normalize) + */ +audio,canvas,video{display:inline;zoom:1;} +command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline;} +[hidden]{display:none;} +html{color:#000;background:#fff;font-family:Tahoma,Arial,\5b8b\4f53;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;} +body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,tr,th,td,hr,menu{margin:0;padding:0;} +ol,ul{list-style-type:none;} +h1,h2,h3,h4,h5,h6{font-size:100%;} +b,strong{font-weight:700;} +blockquote,pre{white-space:pre-wrap;word-wrap:break-word;} +q{quotes:\201C \201D \2018 \2019;} +q:before,q:after{content:'';} +small{font-size:80%;} +sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} +sup{top:-.5em;} +sub{bottom:-.25em;} +ins,a{text-decoration:none;} +a:hover{text-decoration:underline;} +fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;} +button,input,select,textarea{font-family:Tahoma,Arial,\5b8b\4f53;font-size:100%;margin:0;} +button,input{line-height:normal;overflow:visible;} +button,select{text-transform:none;} +button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;} +button[disabled],html input[disabled]{cursor:default;} +input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;} +textarea{overflow:auto;vertical-align:top;} +table{border-collapse:collapse;border-spacing:0;} +th{text-align:inherit;} +abbr,acronym{border:0;font-variant:normal;} +del{text-decoration:line-through;} +address,caption,cite,dfn,em,i,var{font-style:normal;font-weight:500;} +caption,th{text-align:left;} +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;} +.clearfix,.wrap{zoom:1;} +.clear{clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} +.wrap,.bc{margin-left:auto;margin-right:auto;} +article,aside,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,iframe{display:block;} +img,fieldset,img{border:0;} +legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} \ No newline at end of file diff --git a/WF/assets/css/responsive.css b/WF/assets/css/responsive.css new file mode 100644 index 000000000000..38b7fcbd07bb --- /dev/null +++ b/WF/assets/css/responsive.css @@ -0,0 +1,40 @@ +@charset "utf-8"; +/* + @名称: responsive.css + @功能: 响应式布局样式 + */ + +/** + max 480 767 979 + 768-979 + min 980 1200 +@media (min-width: 768px) and (max-width: 979px) {} +@media (min-width: 1200px) {} +@media (min-width: 980px) {} +@media (max-width: 480px) {} +@media (max-width: 767px) {} +@media (max-width: 979px) {} +*/ + +/*! + * Custom + */ + +@media (min-width: 1200px) { + .wrap{ width: 1200px; } +} + + + + + + + + + + + + + + + diff --git a/WF/assets/fonts/rei.eot b/WF/assets/fonts/rei.eot new file mode 100644 index 000000000000..5b1f99a1c795 Binary files /dev/null and b/WF/assets/fonts/rei.eot differ diff --git a/WF/assets/fonts/rei.svg b/WF/assets/fonts/rei.svg new file mode 100644 index 000000000000..561311bacbbe --- /dev/null +++ b/WF/assets/fonts/rei.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/WF/assets/fonts/rei.ttf b/WF/assets/fonts/rei.ttf new file mode 100644 index 000000000000..158eecd87a39 Binary files /dev/null and b/WF/assets/fonts/rei.ttf differ diff --git a/WF/assets/fonts/rei.woff b/WF/assets/fonts/rei.woff new file mode 100644 index 000000000000..61e23a38c6ec Binary files /dev/null and b/WF/assets/fonts/rei.woff differ diff --git a/WF/assets/fonts/site.css b/WF/assets/fonts/site.css new file mode 100644 index 000000000000..41e8cddd0544 --- /dev/null +++ b/WF/assets/fonts/site.css @@ -0,0 +1,434 @@ +@font-face { + font-family: 'Actor'; + font-style: normal; + font-weight: 400; + src: local('Actor Regular'), local('Actor-Regular'), url(Actor.woff) format('woff'); +} + +/* alipay iconfont */ +@font-face { + font-family: "rei"; + src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130401"); /* IE9 */ + src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130401#iefix") format("embedded-opentype"), /* IE6-IE8 */ + url("https://i.alipayobjects.com/common/fonts/rei.woff?20130401") format("woff"), /* chrome 6+、firefox 3.6+、Safari5.1+、Opera 11+ */ + url("https://i.alipayobjects.com/common/fonts/rei.ttf?20130401") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ + url("https://i.alipayobjects.com/common/fonts/rei.svg?20130401#rei") format("svg"); /* iOS 4.1- */ +} +.iconfont { + font-family:"rei"; + font-style: normal; + font-weight: normal; + font-size: 12px; + color: #4d4d4d; + cursor: default; + -webkit-font-smoothing: antialiased; +} + +body { + background-color: #F2F0E9; + background-image: url(bg.gif); +} + +pre, code, tt { + font-family: Consolas,"Liberation Mono",Courier,monospace; +} + +#body-wrapper { + margin-left: auto; + margin-right: auto; + max-width: 1040px; + *width: 1040px; + padding-top: 20px; + zoom: 1; +} +#body-wrapper:after { + display: block; + clear: both; + content: " "; + font-size: 0; + height: 0; + visibility: hidden; +} +#sidebar-wrapper { + float: left; + position: fixed; + color: #9c9277; + text-shadow: 0 1px 0 #fff; + font-size: 14px; + width: 220px; + padding-top: 8px; + z-index: 1; +} +#content-wrapper { + float: right; + width: 800px; + font-size: 14px; +} +#sidebar-wrapper h1 { + margin: 0; + font-family: "Actor", sans-serif; +} +#sidebar-wrapper .version { + font-size: 12px; +} +#sidebar-wrapper .source, .source-button { + background-color: #659324; + background-image: linear-gradient(#81BC2E, #659324); + background-repeat: repeat-x; + border: 0 none; + border-radius: 0.25em 0.25em 0.25em 0.25em; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 -2px 0 0 rgba(0, 0, 0, 0.2) inset; + color: #fff; + display: inline-block; + font-family: "Trebuchet MS",sans-serif; + font-size: 16px; + height: 40px; + line-height: 36px; + min-width: 100px; + padding: 0 20px; + text-align: center; + text-decoration: none; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + transition: all 0.25s linear 0s; + opacity: 0.92; +} +#sidebar-wrapper .source:hover { + color: #fff; + opacity: 1; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 -2px 0 0 rgba(0, 0, 0, 0.2) inset, 0 12px 24px 2px #83C822 inset; +} +#sidebar-wrapper .source:active { + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1), 0 -2px 0 0 rgba(0, 0, 0, 0.2) inset, 0 12px 24px 2px #83C822 inset; + top: 2px; + position: relative; +} +#sidebar-wrapper .package-root { + position: relative; + top: -14px; + left: 4px; + font-size: 12px; +} +#sidebar-wrapper .package-root a { + color: rgba(0, 0, 0, 0.2); +} +#sidebar-wrapper .package-root a:hover { + color: rgba(0, 0, 0, 0.33); +} +#navigation { + list-style-type: none; + font-size: 14px; + border-top: 1px dashed #D6D4CD; + border-bottom: 1px dashed #D6D4CD; + margin: 20px 0 0 0; + padding: 10px 0; + zoom: 1; +} +#navigation:after { + display: block; + clear: both; + content: " "; + font-size: 0; +} +#navigation li { + float: left; + margin-left: 8px; +} +#navigation li:first-of-type { + margin-left: 0; +} +#navigation a:hover, +#sidenav a:hover { + border-bottom: 1px dotted #769FD0; +} +#sidebar-wrapper a { + color: #659324; + text-decoration: none; +} +#sidebar-wrapper a:hover { + color: #75AA2E; +} +#navigation .active a { + color: #75AA2E; + font-weight: bold; +} +#content-wrapper { + border: 1px solid #D6D4CE; + border-radius: 4px; + background-color: #FFF; +} +.hentry { + position: relative; + padding: 10px 30px 30px; + line-height: 1.5; + color: #666; +} +.hentry .entry-title { + margin-bottom: 12px; + font-family: "Actor", sans-serif; +} +.hentry .meta { + color: #BCBCBD; + font-size: 12px; + margin: 12px 0; +} +.hentry p, .hentry h1, .hentry h2, .hentry h3, .hentry h4 { + font-family: Georgia,'Xin Gothic','PT Sans','Hiragino Sans GB','Helvetica Neue',Helvetica,Arial,sans-serif; + color: #555; +} +.hentry p, .hentry ul, .hentry ol { +} +.hentry a { + color: #55A4F2; + text-decoration: none; +} +.hentry h2 { + margin-top: 40px; + padding-bottom: 4px; + border-bottom: 1px solid #ccc; + font-family: "Actor", sans-serif; +} +.hentry hr { + display: block; + border: 0; + height: 4px; + background-color: #ddd; + margin-top: 20px; +} +.hentry pre { + margin: 6px 0; + border: 1px solid #ccc; + padding: 6px 10px; + overflow: auto; + border-radius: 3px; + background-color: #F8F8F8; + line-height: 19px; + font-size: 13px; + white-space: pre; +} +.hentry code { + font-size: 13px; + color: rgba(0, 0, 0, 0.75); + background-color: #fee9cc; + padding: 1px 3px; + border-radius: 3px; + margin-left: 3px; + margin-right: 3px; +} +.hentry pre code, .hentry .highlight code { + color: #5D6A6A; + background-color: transparent; + margin: auto; + padding: 0; +} +.hentry blockquote { + border-left: 0.4em solid #ddd; + color: #777; + margin: 15px 0; + padding: 0 15px; +} +.hentry blockquote p { + color: #777; +} +#footer-wrapper { + clear: both; + color: #9C9C9C; + text-shadow: 0 1px 0 #FFF; + font-family: Georgia,'Xin Gothic','PT Sans','Hiragino Sans GB','Helvetica Neue',Helvetica,Arial,sans-serif; + font-size: 12px; + margin-left: auto; + margin-right: auto; + max-width: 1040px; + *width: 1040px; + padding: 10px 0; + text-align: right; +} +#footer-wrapper a { + color: #9C9C9C; + text-decoration: none; +} +#footer-wrapper iframe { + position: relative; + top: 3px; +} + +/* other */ +.hentry .doc-api { + color: #784942; +} +.hentry .doc-api em, .hentry .doc-api code { + font-family: Georgia, serif; + font-weight: normal; + font-size: 14px; + margin-left: 4px; + color: #999; + background: transparent; + font-style: italic; +} +.hentry .nico-iframe { + position: relative; +} +.hentry .nico-iframe iframe { + width: 100%; +} +.hentry .nico-iframe .new-window { + position: absolute; + top: 30px; + right: -40px; + font-size: 12px; + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); +} +.hentry .highlight { + background-color: transparent; + padding-top: 1px; + position: relative; + zoom: 1; +} +.hentry .collapse pre { + overflow: hidden; + height: 60px; +} +.hentry .highlight .code-toggle { + position: absolute; + top: -10px; + right: 2px; + font-size: 12px; + padding: 3px 5px; + background: rgba(0, 0, 0, 0.16); + border-radius: 4px 4px 0 0; + text-decoration: none; + color: #fff; + line-height: 1; +} + +#sidenav { + padding-top: 10px; + margin-top: 0; + font-size: 14px; + line-height: 22px; + padding-left: 20px; +} + +#module-output { + margin: 20px 0 0; + padding: 0; + overflow: hidden; +} +#module-output li { + list-style: none; + float: left; + margin: 0 1px 0 0; + line-height: 1; +} +#module-output a { + font-size: 14px; + line-height: 1; + color: rgba(0, 0, 0, 0.2); +} +#module-output a:hover { + color: rgba(0, 0, 0, 0.35); +} +#output-card { + background: #fff; + border: 1px solid #ccc; + padding: 6px; + color: #888; + position: absolute; + display: none; + width: 200px; +} +#output-card h3, +#output-card p { + margin: 0; + font-size: 12px; +} +#output-card h3 { + margin-bottom: 3px; +} +#module-output li.module-multiable { + font-size: 10px; + padding: 2px; + background: #88C438; + text-shadow: none; + color: #fff; + margin-right: 5px; + border-radius: 1px; +} + +/* responsive */ +@media (max-width: 980px) { + #body-wrapper, #sidebar-wrapper, #content-wrapper { + float: none; + position: static; + width: auto; + } + #navigation { + border: none; + } + #sidebar-wrapper { + padding: 0 40px; + } +} + +/* history history-tag */ +.history-tag { + background: url("history-tags.png") no-repeat scroll 0 50% #fff; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(0, 0, 0, 0.2) inset; + color: #383838; + display: inline-block; + font-family: "Open Sans",sans-serif; + font-size: 11px; + font-style: normal; + line-height: 20px; + min-width: 85px; + padding: 0 15px 0 20px; + text-align: right; + text-shadow: 1px 1px 0 #FFFFFF; + text-transform: uppercase; + width: 85px; + position: absolute; + top: 15px; + left: 8px; +} + +.history-tag-new { + background-color: #FFEDCF; +} +.history-tag-changed { + background-color: #E9CFFF; + background-position: -150px 50%; +} +.history-tag-fixed { + background-color: #F0FFE1; + background-position: -300px 50%; +} +.history-tag-html5 { + background-color: #F8DFD8; + background-position: -450px 50%; +} +.history-tag-improved { + background-color: #DCF6FF; + background-position: -600px 50%; +} +.history-tag-unresolved { + background-color: #FFC8C8; + background-position: -750px 50%; +} +.history-tag-developer { + background-color: #E7E7E7; + background-position: -900px 50%; +} + +.popup-install { + background: #fefefe; + font-size: 12px; + font-family: monospace,serif; + padding: 6px; + border: 1px solid #ddd; + color: #777; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset; +} diff --git a/WF/assets/js/google-code-prettify/prettify.css b/WF/assets/js/google-code-prettify/prettify.css new file mode 100644 index 000000000000..47fdcbf74da8 --- /dev/null +++ b/WF/assets/js/google-code-prettify/prettify.css @@ -0,0 +1,38 @@ +/* + * make code pretty + */ + +.prettyprint *{ + background: none; +} + +.com { color: #93a1a1; } +.lit { color: #195f91; } +.pun, .opn, .clo { color: #93a1a1; } +.fun { color: #dc322f; } +.str, .atv { color: #D14; } +.kwd, .prettyprint .tag { color: #1e347b; } +.typ, .atn, .dec, .var { color: teal; } +.pln { color: #48484c; } + +.prettyprint { + padding: 8px; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} +.prettyprint.linenums { + -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; + -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; + box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; +} + +/* Specify class=linenums on a pre to get line numbering */ +ol.linenums { + margin: 0 0 0 33px; /* IE indents via margin-left */ +} +ol.linenums li { + padding-left: 12px; + color: #bebec5; + line-height: 20px; + text-shadow: 0 1px 0 #fff; +} \ No newline at end of file diff --git a/WF/assets/js/google-code-prettify/prettify.js b/WF/assets/js/google-code-prettify/prettify.js new file mode 100644 index 000000000000..eef5ad7e6a07 --- /dev/null +++ b/WF/assets/js/google-code-prettify/prettify.js @@ -0,0 +1,28 @@ +var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; +(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a= +[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;ci[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m), +l=[],p={},d=0,g=e.length;d=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, +q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/, +q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g, +"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a), +a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e} +for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], +"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"], +H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], +J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+ +I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]), +["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css", +/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}), +["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes", +hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p=0){var k=k.match(g),f,b;if(b= +!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p 1) { + text_height = template.size / (ctx.measureText(text).width / width); + } + //Resetting font size if necessary + ctx.font = "bold " + (text_height * ratio) + "px "+font; + ctx.fillText(text, (width / 2), (height / 2), width); + return canvas.toDataURL("image/png"); +} + +function render(mode, el, holder, src) { + var dimensions = holder.dimensions, + theme = holder.theme, + text = holder.text ? decodeURIComponent(holder.text) : holder.text; + var dimensions_caption = dimensions.width + "x" + dimensions.height; + theme = (text ? extend(theme, { text: text }) : theme); + theme = (holder.font ? extend(theme, {font: holder.font}) : theme); + + var ratio = 1; + if(window.devicePixelRatio && window.devicePixelRatio > 1){ + ratio = window.devicePixelRatio; + } + + if (mode == "image") { + el.setAttribute("data-src", src); + el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption); + + if(fallback || !holder.auto){ + el.style.width = dimensions.width + "px"; + el.style.height = dimensions.height + "px"; + } + + if (fallback) { + el.style.backgroundColor = theme.background; + + } + else{ + el.setAttribute("src", draw(ctx, dimensions, theme, ratio)); + } + } else { + if (!fallback) { + el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")"; + el.style.backgroundSize = dimensions.width+"px "+dimensions.height+"px"; + } + } +}; + +function fluid(el, holder, src) { + var dimensions = holder.dimensions, + theme = holder.theme, + text = holder.text; + var dimensions_caption = dimensions.width + "x" + dimensions.height; + theme = (text ? extend(theme, { + text: text + }) : theme); + + var fluid = document.createElement("div"); + + fluid.style.backgroundColor = theme.background; + fluid.style.color = theme.foreground; + fluid.className = el.className + " holderjs-fluid"; + fluid.style.width = holder.dimensions.width + (holder.dimensions.width.indexOf("%")>0?"":"px"); + fluid.style.height = holder.dimensions.height + (holder.dimensions.height.indexOf("%")>0?"":"px"); + fluid.id = el.id; + + el.style.width=0; + el.style.height=0; + + if (theme.text) { + fluid.appendChild(document.createTextNode(theme.text)) + } else { + fluid.appendChild(document.createTextNode(dimensions_caption)) + fluid_images.push(fluid); + setTimeout(fluid_update, 0); + } + + el.parentNode.insertBefore(fluid, el.nextSibling) + + if(window.jQuery){ + jQuery(function($){ + $(el).on("load", function(){ + el.style.width = fluid.style.width; + el.style.height = fluid.style.height; + $(el).show(); + $(fluid).remove(); + }); + }) + } +} + +function fluid_update() { + for (i in fluid_images) { + if(!fluid_images.hasOwnProperty(i)) continue; + var el = fluid_images[i], + label = el.firstChild; + + el.style.lineHeight = el.offsetHeight+"px"; + label.data = el.offsetWidth + "x" + el.offsetHeight; + } +} + +function parse_flags(flags, options) { + + var ret = { + theme: settings.themes.gray + }, render = false; + + for (sl = flags.length, j = 0; j < sl; j++) { + var flag = flags[j]; + if (app.flags.dimensions.match(flag)) { + render = true; + ret.dimensions = app.flags.dimensions.output(flag); + } else if (app.flags.fluid.match(flag)) { + render = true; + ret.dimensions = app.flags.fluid.output(flag); + ret.fluid = true; + } else if (app.flags.colors.match(flag)) { + ret.theme = app.flags.colors.output(flag); + } else if (options.themes[flag]) { + //If a theme is specified, it will override custom colors + ret.theme = options.themes[flag]; + } else if (app.flags.text.match(flag)) { + ret.text = app.flags.text.output(flag); + } else if(app.flags.font.match(flag)){ + ret.font = app.flags.font.output(flag); + } + else if(app.flags.auto.match(flag)){ + ret.auto = true; + } + } + + return render ? ret : false; + +}; + +if (!canvas.getContext) { + fallback = true; +} else { + if (canvas.toDataURL("image/png") + .indexOf("data:image/png") < 0) { + //Android doesn't support data URI + fallback = true; + } else { + var ctx = canvas.getContext("2d"); + } +} + +var fluid_images = []; + +var settings = { + domain: "holder.js", + images: "img", + bgnodes: ".holderjs", + themes: { + "gray": { + background: "#eee", + foreground: "#aaa", + size: 12 + }, + "social": { + background: "#3a5a97", + foreground: "#fff", + size: 12 + }, + "industrial": { + background: "#434A52", + foreground: "#C2F200", + size: 12 + } + }, + stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}" +}; + + +app.flags = { + dimensions: { + regex: /^(\d+)x(\d+)$/, + output: function (val) { + var exec = this.regex.exec(val); + return { + width: +exec[1], + height: +exec[2] + } + } + }, + fluid: { + regex: /^([0-9%]+)x([0-9%]+)$/, + output: function (val) { + var exec = this.regex.exec(val); + return { + width: exec[1], + height: exec[2] + } + } + }, + colors: { + regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i, + output: function (val) { + var exec = this.regex.exec(val); + return { + size: settings.themes.gray.size, + foreground: "#" + exec[2], + background: "#" + exec[1] + } + } + }, + text: { + regex: /text\:(.*)/, + output: function (val) { + return this.regex.exec(val)[1]; + } + }, + font: { + regex: /font\:(.*)/, + output: function(val){ + return this.regex.exec(val)[1]; + } + }, + auto: { + regex: /^auto$/ + } +} + +for (var flag in app.flags) { + if(!app.flags.hasOwnProperty(flag)) continue; + app.flags[flag].match = function (val) { + return val.match(this.regex) + } +} + +app.add_theme = function (name, theme) { + name != null && theme != null && (settings.themes[name] = theme); + return app; +}; + +app.add_image = function (src, el) { + var node = selector(el); + if (node.length) { + for (var i = 0, l = node.length; i < l; i++) { + var img = document.createElement("img") + img.setAttribute("data-src", src); + node[i].appendChild(img); + } + } + return app; +}; + +app.run = function (o) { + var options = extend(settings, o), images = []; + + if(options.images instanceof window.NodeList){ + imageNodes = options.images; + } + else if(options.images instanceof window.Node){ + imageNodes = [options.images]; + } + else{ + imageNodes = selector(options.images); + } + + if(options.elements instanceof window.NodeList){ + bgnodes = options.bgnodes; + } + else if(options.bgnodes instanceof window.Node){ + bgnodes = [options.bgnodes]; + } + else{ + bgnodes = selector(options.bgnodes); + } + + preempted = true; + + for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]); + + var holdercss = document.getElementById("holderjs-style"); + + if(!holdercss){ + holdercss = document.createElement("style"); + holdercss.setAttribute("id", "holderjs-style"); + holdercss.type = "text/css"; + document.getElementsByTagName("head")[0].appendChild(holdercss); + } + + if(holdercss.styleSheet){ + holdercss.styleSheet += options.stylesheet; + } + else{ + holdercss.textContent+= options.stylesheet; + } + + var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)"); + + for (var l = bgnodes.length, i = 0; i < l; i++) { + var src = window.getComputedStyle(bgnodes[i], null) + .getPropertyValue("background-image"); + var flags = src.match(cssregex); + if (flags) { + var holder = parse_flags(flags[1].split("/"), options); + if (holder) { + render("background", bgnodes[i], holder, src); + } + } + } + + for (var l = images.length, i = 0; i < l; i++) { + var src = images[i].getAttribute("src") || images[i].getAttribute("data-src"); + if (src != null && src.indexOf(options.domain) >= 0) { + var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1) + .split("/"), options); + if (holder) { + if (holder.fluid) { + fluid(images[i], holder, src); + } else { + render("image", images[i], holder, src); + } + } + } + } + return app; +}; + +contentLoaded(win, function () { + if (window.addEventListener) { + window.addEventListener("resize", fluid_update, false); + window.addEventListener("orientationchange", fluid_update, false); + } else { + window.attachEvent("onresize", fluid_update) + } + preempted || app.run(); +}); + +if ( typeof define === "function" && define.amd ) { + define( "Holder", [], function () { return app; } ); +} + +})(Holder, window); \ No newline at end of file diff --git a/WF/assets/js/html5shiv.js b/WF/assets/js/html5shiv.js new file mode 100644 index 000000000000..784f221caf83 --- /dev/null +++ b/WF/assets/js/html5shiv.js @@ -0,0 +1,8 @@ +/* + HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed +*/ +(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); +a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; +c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?: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,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| +"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); +for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d0&&(s.splice(o-1,2),o-=2)}return i.hostPart=r[1],i.directories=s,i.path=r[1]+s.join("/"),i.fileUrl=i.path+(r[4]||""),i.url=i.fileUrl+(r[5]||""),i}function w(t,n,i,s){var o=t.contents||{},u=t.files||{},a=b(t.href,e.location.href),f=a.url,c=l&&l.getItem(f),h=l&&l.getItem(f+":timestamp"),p={css:c,timestamp:h},d;r.relativeUrls?r.rootpath?t.entryPath?d=b(r.rootpath+y(a.path,t.entryPath)).path:d=r.rootpath:d=a.path:r.rootpath?d=r.rootpath:t.entryPath?d=t.entryPath:d=a.path,x(f,t.type,function(e,l){v+=e.replace(/@import .+?;/ig,"");if(!i&&p&&l&&(new Date(l)).valueOf()===(new Date(p.timestamp)).valueOf())S(p.css,t),n(null,null,e,t,{local:!0,remaining:s},f);else try{o[f]=e,(new r.Parser({optimization:r.optimization,paths:[a.path],entryPath:t.entryPath||a.path,mime:t.type,filename:f,rootpath:d,relativeUrls:t.relativeUrls,contents:o,files:u,dumpLineNumbers:r.dumpLineNumbers})).parse(e,function(r,i){if(r)return k(r,f);try{n(r,i,e,t,{local:!1,lastModified:l,remaining:s},f),N(document.getElementById("less-error-message:"+E(f)))}catch(r){k(r,f)}})}catch(c){k(c,f)}},function(e,t){throw new Error("Couldn't load "+t+" ("+e+")")})}function E(e){return e.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\.[a-zA-Z]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function S(e,t,n){var r,i=t.href||"",s="less:"+(t.title||E(i));if((r=document.getElementById(s))===null){r=document.createElement("style"),r.type="text/css",t.media&&(r.media=t.media),r.id=s;var o=t&&t.nextSibling||null;(o||document.getElementsByTagName("head")[0]).parentNode.insertBefore(r,o)}if(r.styleSheet)try{r.styleSheet.cssText=e}catch(u){throw new Error("Couldn't reassign styleSheet.cssText.")}else(function(e){r.childNodes.length>0?r.firstChild.nodeValue!==e.nodeValue&&r.replaceChild(e,r.firstChild):r.appendChild(e)})(document.createTextNode(e));if(n&&l){C("saving "+i+" to cache.");try{l.setItem(i,e),l.setItem(i+":timestamp",n)}catch(u){C("failed to save")}}}function x(e,t,n,i){function a(t,n,r){t.status>=200&&t.status<300?n(t.responseText,t.getResponseHeader("Last-Modified")):typeof r=="function"&&r(t.status,e)}var s=T(),u=o?r.fileAsync:r.async;typeof s.overrideMimeType=="function"&&s.overrideMimeType("text/css"),s.open("GET",e,u),s.setRequestHeader("Accept",t||"text/x-less, text/css; q=0.9, */*; q=0.5"),s.send(null),o&&!r.fileAsync?s.status===0||s.status>=200&&s.status<300?n(s.responseText):i(s.status,e):u?s.onreadystatechange=function(){s.readyState==4&&a(s,n,i)}:a(s,n,i)}function T(){if(e.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(t){return C("browser doesn't support AJAX."),null}}function N(e){return e&&e.parentNode.removeChild(e)}function C(e){r.env=="development"&&typeof console!="undefined"&&console.log("less: "+e)}function k(e,t){var n="less-error-message:"+E(t),i='
  • {content}
  • ',s=document.createElement("div"),o,u,a=[],f=e.filename||t,l=f.match(/([^\/]+(\?.*)?)$/)[1];s.id=n,s.className="less-error-message",u="

    "+(e.message||"There is an error in your .less file")+"

    "+'

    in '+l+" ";var c=function(e,t,n){e.extract[t]&&a.push(i.replace(/\{line\}/,parseInt(e.line)+(t-1)).replace(/\{class\}/,n).replace(/\{content\}/,e.extract[t]))};e.stack?u+="
    "+e.stack.split("\n").slice(1).join("
    "):e.extract&&(c(e,0,""),c(e,1,"line"),c(e,2,""),u+="on line "+e.line+", column "+(e.column+1)+":

    "+"
      "+a.join("")+"
    "),s.innerHTML=u,S([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #dd6666;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.line {","color: #ff0000;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),s.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),r.env=="development"&&(o=setInterval(function(){document.body&&(document.getElementById(n)?document.body.replaceChild(s,document.getElementById(n)):document.body.insertBefore(s,document.body.firstChild),clearInterval(o))},10))}Array.isArray||(Array.isArray=function(e){return Object.prototype.toString.call(e)==="[object Array]"||e instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(e,t){var n=this.length>>>0;for(var r=0;r>>0,n=new Array(t),r=arguments[1];for(var i=0;i>>0,n=0;if(t===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var r=arguments[1];else do{if(n in this){r=this[n++];break}if(++n>=t)throw new TypeError}while(!0);for(;n=t)return-1;n<0&&(n+=t);for(;nh&&(c[u]=c[u].slice(o-h),h=o)}function w(e){var t=e.charCodeAt(0);return t===32||t===10||t===9}function E(e){var t,n,r,i,a;if(e instanceof Function)return e.call(p.parsers);if(typeof e=="string")t=s.charAt(o)===e?e:null,r=1,b();else{b();if(!(t=e.exec(c[u])))return null;r=t[0].length}if(t)return S(r),typeof t=="string"?t:t.length===1?t[0]:t}function S(e){var t=o,n=u,r=o+c[u].length,i=o+=e;while(o=0&&t.charAt(n)!=="\n";n--)r++;return{line:typeof e=="number"?(t.slice(0,e).match(/\n/g)||"").length:null,column:r}}function L(e){return r.mode==="browser"||r.mode==="rhino"?e.filename:n("path").resolve(e.filename)}function A(e,t,n){return{lineNumber:k(e,t).line+1,fileName:L(n)}}function O(e,t){var n=C(e,t),r=k(e.index,n),i=r.line,s=r.column,o=n.split("\n");this.type=e.type||"Syntax",this.message=e.message,this.filename=e.filename||t.filename,this.index=e.index,this.line=typeof i=="number"?i+1:null,this.callLine=e.call&&k(e.call,n).line+1,this.callExtract=o[k(e.call,n).line],this.stack=e.stack,this.column=s,this.extract=[o[i-1],o[i],o[i+1]]}var s,o,u,a,f,l,c,h,p,d=this,t=t||{};t.contents||(t.contents={}),t.rootpath=t.rootpath||"",t.files||(t.files={});var v=function(){},m=this.imports={paths:t.paths||[],queue:[],files:t.files,contents:t.contents,mime:t.mime,error:null,push:function(e,n){var i=this;this.queue.push(e),r.Parser.importer(e,this.paths,function(t,r,s){i.queue.splice(i.queue.indexOf(e),1);var o=s in i.files;i.files[s]=r,t&&!i.error&&(i.error=t),n(t,r,o),i.queue.length===0&&v(i.error)},t)}};return this.env=t=t||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null,p={imports:m,parse:function(e,a){var f,d,m,g,y,b,w=[],S,x=null;o=u=h=l=0,s=e.replace(/\r\n/g,"\n"),s=s.replace(/^\uFEFF/,""),c=function(e){var n=0,r=/(?:@\{[\w-]+\}|[^"'`\{\}\/\(\)\\])+/g,i=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,o=/"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'|`((?:[^`]|\\.)*)`/g,u=0,a,f=e[0],l;for(var c=0,h,p;c0?"missing closing `}`":"missing opening `{`",filename:t.filename},t)),e.map(function(e){return e.join("")})}([[]]);if(x)return a(x,t);try{f=new i.Ruleset([],E(this.parsers.primary)),f.root=!0}catch(T){return a(new O(T,t))}f.toCSS=function(e){var s,o,u;return function(s,o){var u=[],a;s=s||{},typeof o=="object"&&!Array.isArray(o)&&(o=Object.keys(o).map(function(e){var t=o[e];return t instanceof i.Value||(t instanceof i.Expression||(t=new i.Expression([t])),t=new i.Value([t])),new i.Rule("@"+e,t,!1,0)}),u=[new i.Ruleset(null,o)]);try{var f=e.call(this,{frames:u}).toCSS([],{compress:s.compress||!1,dumpLineNumbers:t.dumpLineNumbers})}catch(l){throw new O(l,t)}if(a=p.imports.error)throw a instanceof O?a:new O(a,t);return s.yuicompress&&r.mode==="node"?n("ycssmin").cssmin(f):s.compress?f.replace(/(\s)+/g,"$1"):f}}(f.eval);if(o=0&&s.charAt(N)!=="\n";N--)C++;x={type:"Parse",message:"Syntax Error on line "+y,index:o,filename:t.filename,line:y,column:C,extract:[b[y-2],b[y-1],b[y]]}}this.imports.queue.length>0?v=function(e){e=x||e,e?a(e):a(null,f)}:a(x,f)},parsers:{primary:function(){var e,t=[];while((e=E(this.mixin.definition)||E(this.rule)||E(this.ruleset)||E(this.mixin.call)||E(this.comment)||E(this.directive))||E(/^[\s\n]+/)||E(/^;+/))e&&t.push(e);return t},comment:function(){var e;if(s.charAt(o)!=="/")return;if(s.charAt(o+1)==="/")return new i.Comment(E(/^\/\/.*/),!0);if(e=E(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new i.Comment(e)},entities:{quoted:function(){var e,t=o,n;s.charAt(t)==="~"&&(t++,n=!0);if(s.charAt(t)!=='"'&&s.charAt(t)!=="'")return;n&&E("~");if(e=E(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new i.Quoted(e[0],e[1]||e[2],n)},keyword:function(){var e;if(e=E(/^[_A-Za-z-][_A-Za-z0-9-]*/))return i.colors.hasOwnProperty(e)?new i.Color(i.colors[e].slice(1)):new i.Keyword(e)},call:function(){var e,n,r,s,a=o;if(!(e=/^([\w-]+|%|progid:[\w\.]+)\(/.exec(c[u])))return;e=e[1],n=e.toLowerCase();if(n==="url")return null;o+=e.length;if(n==="alpha"){s=E(this.alpha);if(typeof s!="undefined")return s}E("("),r=E(this.entities.arguments);if(!E(")"))return;if(e)return new i.Call(e,r,a,t.filename)},arguments:function(){var e=[],t;while(t=E(this.entities.assignment)||E(this.expression)){e.push(t);if(!E(","))break}return e},literal:function(){return E(this.entities.ratio)||E(this.entities.dimension)||E(this.entities.color)||E(this.entities.quoted)||E(this.entities.unicodeDescriptor)},assignment:function(){var e,t;if((e=E(/^\w+(?=\s?=)/i))&&E("=")&&(t=E(this.entity)))return new i.Assignment(e,t)},url:function(){var e;if(s.charAt(o)!=="u"||!E(/^url\(/))return;return e=E(this.entities.quoted)||E(this.entities.variable)||E(/^(?:(?:\\[\(\)'"])|[^\(\)'"])+/)||"",x(")"),new i.URL(e.value!=null||e instanceof i.Variable?e:new i.Anonymous(e),t.rootpath)},variable:function(){var e,n=o;if(s.charAt(o)==="@"&&(e=E(/^@@?[\w-]+/)))return new i.Variable(e,n,t.filename)},variableCurly:function(){var e,n,r=o;if(s.charAt(o)==="@"&&(n=E(/^@\{([\w-]+)\}/)))return new i.Variable("@"+n[1],r,t.filename)},color:function(){var e;if(s.charAt(o)==="#"&&(e=E(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/)))return new i.Color(e[1])},dimension:function(){var e,t=s.charCodeAt(o);if(t>57||t<43||t===47||t==44)return;if(e=E(/^([+-]?\d*\.?\d+)(px|%|em|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn|dpi|dpcm|dppx|rem|vw|vh|vmin|vm|ch)?/))return new i.Dimension(e[1],e[2])},ratio:function(){var e,t=s.charCodeAt(o);if(t>57||t<48)return;if(e=E(/^(\d+\/\d+)/))return new i.Ratio(e[1])},unicodeDescriptor:function(){var e;if(e=E(/^U\+[0-9a-fA-F?]+(\-[0-9a-fA-F?]+)?/))return new i.UnicodeDescriptor(e[0])},javascript:function(){var e,t=o,n;s.charAt(t)==="~"&&(t++,n=!0);if(s.charAt(t)!=="`")return;n&&E("~");if(e=E(/^`([^`]*)`/))return new i.JavaScript(e[1],o,n)}},variable:function(){var e;if(s.charAt(o)==="@"&&(e=E(/^(@[\w-]+)\s*:/)))return e[1]},shorthand:function(){var e,t;if(!N(/^[@\w.%-]+\/[@\w.-]+/))return;g();if((e=E(this.entity))&&E("/")&&(t=E(this.entity)))return new i.Shorthand(e,t);y()},mixin:{call:function(){var e=[],n,r,u=[],a=[],f,l,c,h,p,d,v,m=o,b=s.charAt(o),w,S,C=!1;if(b!=="."&&b!=="#")return;g();while(n=E(/^[#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/))e.push(new i.Element(r,n,o)),r=E(">");if(E("(")){p=[];while(c=E(this.expression)){h=null,S=c;if(c.value.length==1){var k=c.value[0];k instanceof i.Variable&&E(":")&&(p.length>0&&(d&&T("Cannot mix ; and , as delimiter types"),v=!0),S=x(this.expression),h=w=k.name)}p.push(S),a.push({name:h,value:S});if(E(","))continue;if(E(";")||d)v&&T("Cannot mix ; and , as delimiter types"),d=!0,p.length>1&&(S=new i.Value(p)),u.push({name:w,value:S}),w=null,p=[],v=!1}x(")")}f=d?u:a,E(this.important)&&(C=!0);if(e.length>0&&(E(";")||N("}")))return new i.mixin.Call(e,f,m,t.filename,C);y()},definition:function(){var e,t=[],n,r,u,a,f,c=!1;if(s.charAt(o)!=="."&&s.charAt(o)!=="#"||N(/^[^{]*\}/))return;g();if(n=E(/^([#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+)\s*\(/)){e=n[1];do{E(this.comment);if(s.charAt(o)==="."&&E(/^\.{3}/)){c=!0,t.push({variadic:!0});break}if(!(u=E(this.entities.variable)||E(this.entities.literal)||E(this.entities.keyword)))break;if(u instanceof i.Variable)if(E(":"))a=x(this.expression,"expected expression"),t.push({name:u.name,value:a});else{if(E(/^\.{3}/)){t.push({name:u.name,variadic:!0}),c=!0;break}t.push({name:u.name})}else t.push({value:u})}while(E(",")||E(";"));E(")")||(l=o,y()),E(this.comment),E(/^when/)&&(f=x(this.conditions,"expected condition")),r=E(this.block);if(r)return new i.mixin.Definition(e,t,r,f,c);y()}}},entity:function(){return E(this.entities.literal)||E(this.entities.variable)||E(this.entities.url)||E(this.entities.call)||E(this.entities.keyword)||E(this.entities.javascript)||E(this.comment)},end:function(){return E(";")||N("}")},alpha:function(){var e;if(!E(/^\(opacity=/i))return;if(e=E(/^\d+/)||E(this.entities.variable))return x(")"),new i.Alpha(e)},element:function(){var e,t,n,r;n=E(this.combinator),e=E(/^(?:\d+\.\d+|\d+)%/)||E(/^(?:[.#]?|:*)(?:[\w-]|[^\x00-\x9f]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)||E("*")||E("&")||E(this.attribute)||E(/^\([^()@]+\)/)||E(/^[\.#](?=@)/)||E(this.entities.variableCurly),e||E("(")&&(r=E(this.entities.variableCurly)||E(this.entities.variable)||E(this.selector))&&E(")")&&(e=new i.Paren(r));if(e)return new i.Element(n,e,o)},combinator:function(){var e,t=s.charAt(o);if(t===">"||t==="+"||t==="~"||t==="|"){o++;while(s.charAt(o).match(/\s/))o++;return new i.Combinator(t)}return s.charAt(o-1).match(/\s/)?new i.Combinator(" "):new i.Combinator(null)},selector:function(){var e,t,n=[],r,u;if(E("("))return e=E(this.entity),E(")")?new i.Selector([new i.Element("",e,o)]):null;while(t=E(this.element)){r=s.charAt(o),n.push(t);if(r==="{"||r==="}"||r===";"||r===","||r===")")break}if(n.length>0)return new i.Selector(n)},attribute:function(){var e="",t,n,r;if(!E("["))return;if(t=E(/^(?:[_A-Za-z0-9-]|\\.)+/)||E(this.entities.quoted))(r=E(/^[|~*$^]?=/))&&(n=E(this.entities.quoted)||E(/^[\w-]+/))?e=[t,r,n.toCSS?n.toCSS():n].join(""):e=t;if(!E("]"))return;if(e)return"["+e+"]"},block:function(){var e;if(E("{")&&(e=E(this.primary))&&E("}"))return e},ruleset:function(){var e=[],n,r,u,a;g(),t.dumpLineNumbers&&(a=A(o,s,t));while(n=E(this.selector)){e.push(n),E(this.comment);if(!E(","))break;E(this.comment)}if(e.length>0&&(r=E(this.block))){var f=new i.Ruleset(e,r,t.strictImports);return t.dumpLineNumbers&&(f.debugInfo=a),f}l=o,y()},rule:function(){var e,t,n=s.charAt(o),r,a;g();if(n==="."||n==="#"||n==="&")return;if(e=E(this.variable)||E(this.property)){e.charAt(0)!="@"&&(a=/^([^@+\/'"*`(;{}-]*);/.exec(c[u]))?(o+=a[0].length-1,t=new i.Anonymous(a[1])):e==="font"?t=E(this.font):t=E(this.value),r=E(this.important);if(t&&E(this.end))return new i.Rule(e,t,r,f);l=o,y()}},"import":function(){var e,n,r=o;g();var s=E(/^@import(?:-(once))?\s+/);if(s&&(e=E(this.entities.quoted)||E(this.entities.url))){n=E(this.mediaFeatures);if(E(";"))return new i.Import(e,m,n,s[1]==="once",r,t.rootpath)}y()},mediaFeature:function(){var e,t,n=[];do if(e=E(this.entities.keyword))n.push(e);else if(E("(")){t=E(this.property),e=E(this.entity);if(!E(")"))return null;if(t&&e)n.push(new i.Paren(new i.Rule(t,e,null,o,!0)));else{if(!e)return null;n.push(new i.Paren(e))}}while(e);if(n.length>0)return new i.Expression(n)},mediaFeatures:function(){var e,t=[];do if(e=E(this.mediaFeature)){t.push(e);if(!E(","))break}else if(e=E(this.entities.variable)){t.push(e);if(!E(","))break}while(e);return t.length>0?t:null},media:function(){var e,n,r,u;t.dumpLineNumbers&&(u=A(o,s,t));if(E(/^@media/)){e=E(this.mediaFeatures);if(n=E(this.block))return r=new i.Media(n,e),t.dumpLineNumbers&&(r.debugInfo=u),r}},directive:function(){var e,n,r,u,a,f,l,c,h,p;if(s.charAt(o)!=="@")return;if(n=E(this["import"])||E(this.media))return n;g(),e=E(/^@[a-z-]+/);if(!e)return;l=e,e.charAt(1)=="-"&&e.indexOf("-",2)>0&&(l="@"+e.slice(e.indexOf("-",2)+1));switch(l){case"@font-face":c=!0;break;case"@viewport":case"@top-left":case"@top-left-corner":case"@top-center":case"@top-right":case"@top-right-corner":case"@bottom-left":case"@bottom-left-corner":case"@bottom-center":case"@bottom-right":case"@bottom-right-corner":case"@left-top":case"@left-middle":case"@left-bottom":case"@right-top":case"@right-middle":case"@right-bottom":c=!0;break;case"@page":case"@document":case"@supports":case"@keyframes":c=!0,h=!0;break;case"@namespace":p=!0}h&&(e+=" "+(E(/^[^{]+/)||"").trim());if(c){if(r=E(this.block))return new i.Directive(e,r)}else if((n=p?E(this.expression):E(this.entity))&&E(";")){var d=new i.Directive(e,n);return t.dumpLineNumbers&&(d.debugInfo=A(o,s,t)),d}y()},font:function(){var e=[],t=[],n,r,s,o;while(o=E(this.shorthand)||E(this.entity))t.push(o);e.push(new i.Expression(t));if(E(","))while(o=E(this.expression)){e.push(o);if(!E(","))break}return new i.Value(e)},value:function(){var e,t=[],n;while(e=E(this.expression)){t.push(e);if(!E(","))break}if(t.length>0)return new i.Value(t)},important:function(){if(s.charAt(o)==="!")return E(/^! *important/)},sub:function(){var e;if(E("(")&&(e=E(this.expression))&&E(")"))return e},multiplication:function(){var e,t,n,r;if(e=E(this.operand)){while(!N(/^\/[*\/]/)&&(n=E("/")||E("*"))&&(t=E(this.operand)))r=new i.Operation(n,[r||e,t]);return r||e}},addition:function(){var e,t,n,r;if(e=E(this.multiplication)){while((n=E(/^[-+]\s+/)||!w(s.charAt(o-1))&&(E("+")||E("-")))&&(t=E(this.multiplication)))r=new i.Operation(n,[r||e,t]);return r||e}},conditions:function(){var e,t,n=o,r;if(e=E(this.condition)){while(E(",")&&(t=E(this.condition)))r=new i.Condition("or",r||e,t,n);return r||e}},condition:function(){var e,t,n,r,s=o,u=!1;E(/^not/)&&(u=!0),x("(");if(e=E(this.addition)||E(this.entities.keyword)||E(this.entities.quoted))return(r=E(/^(?:>=|=<|[<=>])/))?(t=E(this.addition)||E(this.entities.keyword)||E(this.entities.quoted))?n=new i.Condition(r,e,t,s,u):T("expected expression"):n=new i.Condition("=",e,new i.Keyword("true"),s,u),x(")"),E(/^and/)?new i.Condition("and",n,E(this.condition)):n},operand:function(){var e,t=s.charAt(o+1);s.charAt(o)==="-"&&(t==="@"||t==="(")&&(e=E("-"));var n=E(this.sub)||E(this.entities.dimension)||E(this.entities.color)||E(this.entities.variable)||E(this.entities.call);return e?new i.Operation("*",[new i.Dimension(-1),n]):n},expression:function(){var e,t,n=[],r;while(e=E(this.addition)||E(this.entity))n.push(e);if(n.length>0)return new i.Expression(n)},property:function(){var e;if(e=E(/^(\*?-?[_a-z0-9-]+)\s*:/))return e[1]}}}};if(r.mode==="browser"||r.mode==="rhino")r.Parser.importer=function(e,t,n,r){!/^([a-z-]+:)?\//.test(e)&&t.length>0&&(e=t[0]+e),w({href:e,title:e,type:r.mime,contents:r.contents,files:r.files,rootpath:r.rootpath,entryPath:r.entryPath,relativeUrls:r.relativeUrls},function(e,i,s,o,u,a){e&&typeof r.errback=="function"?r.errback.call(null,a,t,n,r):n.call(null,e,i,a)},!0)};(function(e){function t(t){return e.functions.hsla(t.h,t.s,t.l,t.a)}function n(t,n){return t instanceof e.Dimension&&t.unit=="%"?parseFloat(t.value*n/100):r(t)}function r(t){if(t instanceof e.Dimension)return parseFloat(t.unit=="%"?t.value/100:t.value);if(typeof t=="number")return t;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function i(e){return Math.min(1,Math.max(0,e))}e.functions={rgb:function(e,t,n){return this.rgba(e,t,n,1)},rgba:function(t,i,s,o){var u=[t,i,s].map(function(e){return n(e,256)});return o=r(o),new e.Color(u,o)},hsl:function(e,t,n){return this.hsla(e,t,n,1)},hsla:function(e,t,n,i){function u(e){return e=e<0?e+1:e>1?e-1:e,e*6<1?o+(s-o)*e*6:e*2<1?s:e*3<2?o+(s-o)*(2/3-e)*6:o}e=r(e)%360/360,t=r(t),n=r(n),i=r(i);var s=n<=.5?n*(t+1):n+t-n*t,o=n*2-s;return this.rgba(u(e+1/3)*255,u(e)*255,u(e-1/3)*255,i)},hsv:function(e,t,n){return this.hsva(e,t,n,1)},hsva:function(e,t,n,i){e=r(e)%360/360*360,t=r(t),n=r(n),i=r(i);var s,o;s=Math.floor(e/60%6),o=e/60-s;var u=[n,n*(1-t),n*(1-o*t),n*(1-(1-o)*t)],a=[[0,3,1],[2,0,1],[1,0,3],[1,2,0],[3,1,0],[0,1,2]];return this.rgba(u[a[s][0]]*255,u[a[s][1]]*255,u[a[s][2]]*255,i)},hue:function(t){return new e.Dimension(Math.round(t.toHSL().h))},saturation:function(t){return new e.Dimension(Math.round(t.toHSL().s*100),"%")},lightness:function(t){return new e.Dimension(Math.round(t.toHSL().l*100),"%")},red:function(t){return new e.Dimension(t.rgb[0])},green:function(t){return new e.Dimension(t.rgb[1])},blue:function(t){return new e.Dimension(t.rgb[2])},alpha:function(t){return new e.Dimension(t.toHSL().a)},luma:function(t){return new e.Dimension(Math.round((.2126*(t.rgb[0]/255)+.7152*(t.rgb[1]/255)+.0722*(t.rgb[2]/255))*t.alpha*100),"%")},saturate:function(e,n){var r=e.toHSL();return r.s+=n.value/100,r.s=i(r.s),t(r)},desaturate:function(e,n){var r=e.toHSL();return r.s-=n.value/100,r.s=i(r.s),t(r)},lighten:function(e,n){var r=e.toHSL();return r.l+=n.value/100,r.l=i(r.l),t(r)},darken:function(e,n){var r=e.toHSL();return r.l-=n.value/100,r.l=i(r.l),t(r)},fadein:function(e,n){var r=e.toHSL();return r.a+=n.value/100,r.a=i(r.a),t(r)},fadeout:function(e,n){var r=e.toHSL();return r.a-=n.value/100,r.a=i(r.a),t(r)},fade:function(e,n){var r=e.toHSL();return r.a=n.value/100,r.a=i(r.a),t(r)},spin:function(e,n){var r=e.toHSL(),i=(r.h+n.value)%360;return r.h=i<0?360+i:i,t(r)},mix:function(t,n,r){r||(r=new e.Dimension(50));var i=r.value/100,s=i*2-1,o=t.toHSL().a-n.toHSL().a,u=((s*o==-1?s:(s+o)/(1+s*o))+1)/2,a=1-u,f=[t.rgb[0]*u+n.rgb[0]*a,t.rgb[1]*u+n.rgb[1]*a,t.rgb[2]*u+n.rgb[2]*a],l=t.alpha*i+n.alpha*(1-i);return new e.Color(f,l)},greyscale:function(t){return this.desaturate(t,new e.Dimension(100))},contrast:function(e,t,n,r){return e.rgb?(typeof n=="undefined"&&(n=this.rgba(255,255,255,1)),typeof t=="undefined"&&(t=this.rgba(0,0,0,1)),typeof r=="undefined"?r=.43:r=r.value,(.2126*(e.rgb[0]/255)+.7152*(e.rgb[1]/255)+.0722*(e.rgb[2]/255))*e.alpha255?255:e<0?0:e).toString(16),e.length===1?"0"+e:e}).join("")},operate:function(t,n){var r=[];n instanceof e.Color||(n=n.toColor());for(var i=0;i<3;i++)r[i]=e.operate(t,this.rgb[i],n.rgb[i]);return new e.Color(r,this.alpha+n.alpha)},toHSL:function(){var e=this.rgb[0]/255,t=this.rgb[1]/255,n=this.rgb[2]/255,r=this.alpha,i=Math.max(e,t,n),s=Math.min(e,t,n),o,u,a=(i+s)/2,f=i-s;if(i===s)o=u=0;else{u=a>.5?f/(2-i-s):f/(i+s);switch(i){case e:o=(t-n)/f+(t255?255:e<0?0:e).toString(16),e.length===1?"0"+e:e}).join("")},compare:function(e){return e.rgb?e.rgb[0]===this.rgb[0]&&e.rgb[1]===this.rgb[1]&&e.rgb[2]===this.rgb[2]&&e.alpha===this.alpha?0:-1:-1}}}(n("../tree")),function(e){e.Comment=function(e,t){this.value=e,this.silent=!!t},e.Comment.prototype={toCSS:function(e){return e.compress?"":this.value},eval:function(){return this}}}(n("../tree")),function(e){e.Condition=function(e,t,n,r,i){this.op=e.trim(),this.lvalue=t,this.rvalue=n,this.index=r,this.negate=i},e.Condition.prototype.eval=function(e){var t=this.lvalue.eval(e),n=this.rvalue.eval(e),r=this.index,i,i=function(e){switch(e){case"and":return t&&n;case"or":return t||n;default:if(t.compare)i=t.compare(n);else{if(!n.compare)throw{type:"Type",message:"Unable to perform comparison",index:r};i=n.compare(t)}switch(i){case-1:return e==="<"||e==="=<";case 0:return e==="="||e===">="||e==="=<";case 1:return e===">"||e===">="}}}(this.op);return this.negate?!i:i}}(n("../tree")),function(e){e.Dimension=function(e,t){this.value=parseFloat(e),this.unit=t||null},e.Dimension.prototype={eval:function(){return this},toColor:function(){return new e.Color([this.value,this.value,this.value])},toCSS:function(){var e=this.value+this.unit;return e},operate:function(t,n){return new e.Dimension(e.operate(t,this.value,n.value),this.unit||n.unit)},compare:function(t){return t instanceof e.Dimension?t.value>this.value?-1:t.value":e.compress?">":" > ","|":e.compress?"|":" | "}[this.value]}}(n("../tree")),function(e){e.Expression=function(e){this.value=e},e.Expression.prototype={eval:function(t){return this.value.length>1?new e.Expression(this.value.map(function(e){return e.eval(t)})):this.value.length===1?this.value[0].eval(t):this},toCSS:function(e){return this.value.map(function(t){return t.toCSS?t.toCSS(e):""}).join(" ")}}}(n("../tree")),function(e){e.Import=function(t,n,r,i,s,o){var u=this;this.once=i,this.index=s,this._path=t,this.features=r&&new e.Value(r),this.rootpath=o,t instanceof e.Quoted?this.path=/(\.[a-z]*$)|([\?;].*)$/.test(t.value)?t.value:t.value+".less":this.path=t.value.value||t.value,this.css=/css([\?;].*)?$/.test(this.path),this.css||n.push(this.path,function(t,n,r){t&&(t.index=s),r&&u.once&&(u.skip=r),u.root=n||new e.Ruleset([],[])})},e.Import.prototype={toCSS:function(e){var t=this.features?" "+this.features.toCSS(e):"";return this.css?(typeof this._path.value=="string"&&!/^(?:[a-z-]+:|\/)/.test(this._path.value)&&(this._path.value=this.rootpath+this._path.value),"@import "+this._path.toCSS()+t+";\n"):""},eval:function(t){var n,r=this.features&&this.features.eval(t);return this.skip?[]:this.css?this:(n=new e.Ruleset([],this.root.rules.slice(0)),n.evalImports(t),this.features?new e.Media(n.rules,this.features.value):n.rules)}}}(n("../tree")),function(e){e.JavaScript=function(e,t,n){this.escaped=n,this.expression=e,this.index=t},e.JavaScript.prototype={eval:function(t){var n,r=this,i={},s=this.expression.replace(/@\{([\w-]+)\}/g,function(n,i){return e.jsify((new e.Variable("@"+i,r.index)).eval(t))});try{s=new Function("return ("+s+")")}catch(o){throw{message:"JavaScript evaluation error: `"+s+"`",index:this.index}}for(var u in t.frames[0].variables())i[u.slice(1)]={value:t.frames[0].variables()[u].value,toJS:function(){return this.value.eval(t).toCSS()}};try{n=s.call(i)}catch(o){throw{message:"JavaScript evaluation error: '"+o.name+": "+o.message+"'",index:this.index}}return typeof n=="string"?new e.Quoted('"'+n+'"',n,this.escaped,this.index):Array.isArray(n)?new e.Anonymous(n.join(", ")):new e.Anonymous(n)}}}(n("../tree")),function(e){e.Keyword=function(e){this.value=e},e.Keyword.prototype={eval:function(){return this},toCSS:function(){return this.value},compare:function(t){return t instanceof e.Keyword?t.value===this.value?0:1:-1}},e.True=new e.Keyword("true"),e.False=new e.Keyword("false")}(n("../tree")),function(e){e.Media=function(t,n){var r=this.emptySelectors();this.features=new e.Value(n),this.ruleset=new e.Ruleset(r,t),this.ruleset.allowImports=!0},e.Media.prototype={toCSS:function(e,t){var n=this.features.toCSS(t);return this.ruleset.root=e.length===0||e[0].multiMedia,"@media "+n+(t.compress?"{":" {\n ")+this.ruleset.toCSS(e,t).trim().replace(/\n/g,"\n ")+(t.compress?"}":"\n}\n")},eval:function(t){t.mediaBlocks||(t.mediaBlocks=[],t.mediaPath=[]);var n=new e.Media([],[]);return this.debugInfo&&(this.ruleset.debugInfo=this.debugInfo,n.debugInfo=this.debugInfo),n.features=this.features.eval(t),t.mediaPath.push(n),t.mediaBlocks.push(n),t.frames.unshift(this.ruleset),n.ruleset=this.ruleset.eval(t),t.frames.shift(),t.mediaPath.pop(),t.mediaPath.length===0?n.evalTop(t):n.evalNested(t)},variable:function(t){return e.Ruleset.prototype.variable.call(this.ruleset,t)},find:function(){return e.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return e.Ruleset.prototype.rulesets.apply(this.ruleset)},emptySelectors:function(){var t=new e.Element("","&",0);return[new e.Selector([t])]},evalTop:function(t){var n=this;if(t.mediaBlocks.length>1){var r=this.emptySelectors();n=new e.Ruleset(r,t.mediaBlocks),n.multiMedia=!0}return delete t.mediaBlocks,delete t.mediaPath,n},evalNested:function(t){var n,r,i=t.mediaPath.concat([this]);for(n=0;n0;n--)t.splice(n,0,new e.Anonymous("and"));return new e.Expression(t)})),new e.Ruleset([],[])},permute:function(e){if(e.length===0)return[];if(e.length===1)return e[0];var t=[],n=this.permute(e.slice(1));for(var r=0;r0){c=!0;for(a=0;athis.params.length)return!1;if(this.required>0&&n>this.params.length)return!1}r=Math.min(n,this.arity);for(var s=0;si.selectors[o].elements.length?Array.prototype.push.apply(r,i.find(new e.Selector(t.elements.slice(1)),n)):r.push(i);break}}),this._lookups[o]=r)},toCSS:function(t,n){var r=[],i=[],s=[],o=[],u=[],a,f,l;this.root||this.joinSelectors(u,t,this.selectors);for(var c=0;c0){f=e.debugInfo(n,this),a=u.map(function(e){return e.map(function(e){return e.toCSS(n)}).join("").trim()}).join(n.compress?",":",\n");for(var c=i.length-1;c>=0;c--)s.indexOf(i[c])===-1&&s.unshift(i[c]);i=s,r.push(f+a+(n.compress?"{":" {\n ")+i.join(n.compress?"":"\n ")+(n.compress?"}":"\n}\n"))}return r.push(o),r.join("")+(n.compress?"\n":"")},joinSelectors:function(e,t,n){for(var r=0;r0)for(i=0;i0&&this.mergeElementsOnToSelectors(g,a);for(s=0;s0&&(l[0].elements=l[0].elements.slice(0),l[0].elements.push(new e.Element(f.combinator,"",0))),y.push(l);else for(o=0;o0?(h=l.slice(0),m=h.pop(),d=new e.Selector(m.elements.slice(0)),v=!1):d=new e.Selector([]),c.length>1&&(p=p.concat(c.slice(1))),c.length>0&&(v=!1,d.elements.push(new e.Element(f.combinator,c[0].elements[0].value,0)),d.elements=d.elements.concat(c[0].elements.slice(1))),v||h.push(d),h=h.concat(p),y.push(h)}a=y,g=[]}}g.length>0&&this.mergeElementsOnToSelectors(g,a);for(i=0;i0?i[i.length-1]=new e.Selector(i[i.length-1].elements.concat(t)):i.push(new e.Selector(t))}}}(n("../tree")),function(e){e.Selector=function(e){this.elements=e},e.Selector.prototype.match=function(e){var t=this.elements,n=t.length,r,i,s,o;r=e.elements.slice(e.elements.length&&e.elements[0].value==="&"?1:0),i=r.length,s=Math.min(n,i);if(i===0||n1?"["+e.value.map(function(e){return e.toCSS(!1)}).join(", ")+"]":e.toCSS(!1)}}(n("./tree"));var o=/^(file|chrome(-extension)?|resource|qrc|app):/.test(location.protocol);r.env=r.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||o?"development":"production"),r.async=r.async||!1,r.fileAsync=r.fileAsync||!1,r.poll=r.poll||(o?1e3:1500);if(r.functions)for(var u in r.functions)r.tree.functions[u]=r.functions[u];var a=/!dumpLineNumbers:(comments|mediaquery|all)/.exec(location.hash);a&&(r.dumpLineNumbers=a[1]),r.watch=function(){return r.watchMode||(r.env="development",f()),this.watchMode=!0},r.unwatch=function(){return clearInterval(r.watchTimer),this.watchMode=!1},/!watch/.test(location.hash)&&r.watch();var l=null;if(r.env!="development")try{l=typeof e.localStorage=="undefined"?null:e.localStorage}catch(c){}var h=document.getElementsByTagName("link"),p=/^text\/(x-)?less$/;r.sheets=[];for(var d=0;d + + + + + + + +
    + + +
    +
    +

    管理发布

    +

    项目要管理发布,就要有一套良好的流程,只有这样才能确保项目的高效管理

    + +

    计划

    +
      +
    • 使用 Nodejs 平台管理
    • +
    • 支持语法等错误检查
    • +
    • 自动打包、测试、发布等
    • +
    +
    + + + + +
    + +
    + + + + \ No newline at end of file diff --git a/WF/common/comment.html b/WF/common/comment.html new file mode 100644 index 000000000000..3140ecd3de8d --- /dev/null +++ b/WF/common/comment.html @@ -0,0 +1,3 @@ + +

    欢迎大家多提意见:

    +
    \ No newline at end of file diff --git a/WF/common/footer.html b/WF/common/footer.html new file mode 100644 index 000000000000..9aafaac282f4 --- /dev/null +++ b/WF/common/footer.html @@ -0,0 +1,52 @@ + +
    + + + + + + + + + + + +
    + +
    + diff --git a/WF/common/header.php b/WF/common/header.php new file mode 100644 index 000000000000..8c86097f35b7 --- /dev/null +++ b/WF/common/header.php @@ -0,0 +1,51 @@ +
    + + + + + + + +
    + + \ No newline at end of file diff --git a/WF/common/meta.php b/WF/common/meta.php new file mode 100644 index 000000000000..2b1a61cbfaef --- /dev/null +++ b/WF/common/meta.php @@ -0,0 +1,25 @@ + + + + +Pandora - <?php echo $title; ?> + + + + + + + + + + + + + diff --git a/WF/demo/fixed.html b/WF/demo/fixed.html new file mode 100644 index 000000000000..323a4e927098 --- /dev/null +++ b/WF/demo/fixed.html @@ -0,0 +1,88 @@ + + + + +IE6 的 fixed 解决方案 + + + + + + + + +
    +

    IE6 的 fixed 解决方案

    +

    下面的是我最喜欢的办法了,代码精简css就能解决问题,虽然用了css表达式,但是毕竟IE6用户越来越少了。

    + +
    +

    修正IE6不支持position:fixed的bug,摘自:position-fixed.css

    +

    用的最多的是上下位置控制,左右的方法可直接无视。

    +
    +
    +/*Make position:fixed work in IE6!*/
    + 
    +.fixed-top    /* position fixed Top    */{position:fixed;bottom:auto;top:0;}
    +.fixed-bottom /* position fixed Bottom */{position:fixed;bottom:0;top:auto;}
    +.fixed-left   /* position fixed Left   */{position:fixed;right:auto;left:0;top:0;}
    +.fixed-right  /* position fixed right  */{position:fixed;right:0;left:auto;top:0;}
    + 
    +* html,* html body   /* IE6 Fixed Position Jitter Fix */{background-image:url(about:blank);background-attachment:fixed;}
    +* html .fixed-top    /* IE6 position fixed Top        */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
    +* html .fixed-right  /* IE6 position fixed right      */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
    +* html .fixed-bottom /* IE6 position fixed Bottom     */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
    +* html .fixed-left   /* IE6 position fixed Left       */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
    +
    +/* 左右方向控制 */
    +.fixed-left,
    +.fixed-right{top:0;}
    +
    +.test-top,
    +.test-bottom{left:50%;}
    +.test-top{margin-left:-540px;top:100px;}
    +.test-bottom{margin-left:500px;bottom:100px;}
    +
    +关于上下的灵活定位,ie6下需要添加一个修改
    +
    + +
    设置一个空元素,撑起页面高度
    + + +
    fixed-top
    +
    fixed-right
    +
    fixed-bottom
    +
    fixed-left
    + +
    定位上
    +
    定位下
    + + + +
    + + + \ No newline at end of file diff --git a/WF/demo/smartfloat.html b/WF/demo/smartfloat.html new file mode 100644 index 000000000000..040bb63118c0 --- /dev/null +++ b/WF/demo/smartfloat.html @@ -0,0 +1,112 @@ + + + + +跟随滚动 + + + + + + + + +
    +

    跟随滚动

    +

    js页面滚动时层智能浮动定位实现

    +

    代码实现原理详情请参考: js页面滚动时层智能浮动定位实现

    +
    + 我是个腼腆羞涩的浮动层,你可以轻轻地 点击我(去首页)。 +
    +
    +<script>
    +$.fn.smartFloat = function() {
    +    var position = function(element) {
    +        var top = element.position().top, pos = element.css("position");
    +        $(window).scroll(function() {
    +            var scrolls = $(this).scrollTop();
    +            if (scrolls > top) {
    +                if (window.XMLHttpRequest) {
    +                    element.css({
    +                        position: "fixed",
    +                        top: 0
    +                    });    
    +                } else {
    +                    element.css({
    +                        top: scrolls
    +                    });    
    +                }
    +            }else {
    +                element.css({
    +                    position: "absolute",
    +                    top: top
    +                });    
    +            }
    +        });
    +    };
    +    return $(this).each(function() {
    +        position($(this));                         
    +    });
    +};
    +
    +//绑定
    +$("#float").smartFloat();
    +</script>
    +
    + + +
    + + + + + \ No newline at end of file diff --git a/WF/demo/test.html b/WF/demo/test.html new file mode 100644 index 000000000000..ed0c6cd4a28c --- /dev/null +++ b/WF/demo/test.html @@ -0,0 +1,35 @@ + + + + +测试 + + + + + + + + +
    +

    组件名称

    +

    描述

    +

    TODO:

    + +
    + + +
    +
    +
    +
    + + +
    + + + \ No newline at end of file diff --git a/WF/demo/tongzhi.html b/WF/demo/tongzhi.html new file mode 100644 index 000000000000..5c940ccf5b34 --- /dev/null +++ b/WF/demo/tongzhi.html @@ -0,0 +1,48 @@ + + + + +通知函 + + + + +
    +

    通知函

    +

    尊敬的用户:

    +

    感谢您参与驴妈妈旅游网五周年庆大促活动, 恭喜您抢购到,该订单订购产品使用规则如下:

    +
    +

    1、此订单需要您在2小时内完成支付才代表抢购成功。

    +

    2、此订单订购的产品出游日期有相应限制,请提前致电1010-6060确定具体出游日期并签署相应旅游合同。如未按此产品详情描述页面规定的时间致电预订并签订合同的,即视为用户自动放弃该出游机会 。

    +

    3、此订单如有需用户另行支付的自理费用(包括但不限于飞机燃油税、机场建设费、房差、保险等费用),请在签订合同时支付。

    +

    4、此订单均不予退换,并不可转让使用。

    +

    5、使用此订单须同时遵守《驴妈妈五周年亲活动规则》。

    +

    特此告知!

    +
    + +

    驴妈妈旅游网

    +

    (上海驴妈妈兴旅国际旅行社有限公司)

    + + + +
    + + + \ No newline at end of file diff --git a/WF/demo/waterfall.html b/WF/demo/waterfall.html new file mode 100644 index 000000000000..608beb43bbe3 --- /dev/null +++ b/WF/demo/waterfall.html @@ -0,0 +1,106 @@ + + + + +瀑布广告 + + + + + + + + +
    +
    topbar
    +
    + +
    +

    瀑布广告

    +

    简单瀑布广告代码

    +
    +<script>
    +$(function(){
    +    // html代码
    +    var _activebox = '<div id="indexSilde" style="width:980px;margin:0 auto;position:relative;overflow:hidden;height:0;">'
    +            + '<div id="xslide1" style="position:absolute;z-index:11;top:0;display:none;">'
    +            + '<a target="_blank" href="http://zhounianqing.lvmama.com/?losc=019677">'
    +            + '<img src="http://pic.lvmama.com/img/v3/coupon.jpg" width="980" height="80">'
    +            + '</a></div>'
    +            + '<div id="xslide2" style="position:relative;top:0;z-index:10;">'
    +            + '<a target="_blank"  href="http://zhounianqing.lvmama.com/?losc=019677">'
    +            + '<img src="http://pic.lvmama.com/img/v3/couponbig.jpg" width="980" height="500">'
    +            + '</a></div>'
    +            + '</div>';
    +    
    +    $('.hh_shortcut_box').after(_activebox);
    +    
    +    // 瀑布广告
    +    var _indexSilde = $('#indexSilde');
    +	var _xslide1 = $('#xslide1');
    +	function _shouqi(){ 
    +		_indexSilde.animate({'height':80},1000,function(){
    +			_xslide1.fadeIn(500).siblings().fadeOut(500,function(){
    +				if($.browser.msie && parseInt($.browser.version)<=8){ 
    +					//$.fx.off = true; 
    +				}
    +			});
    +		});
    +	};
    +	
    +	function _showslide(){
    +		_indexSilde.animate({'height':500},1000,function(){
    +			setTimeout(_shouqi,4000);
    +		});
    +	}
    +	//$.fx.off = false;
    +	setTimeout(_showslide,1000);
    +})
    +</script>
    +
    + + +
    + + + + + \ No newline at end of file diff --git a/WF/framework.php b/WF/framework.php new file mode 100644 index 000000000000..2169c5ff9f0c --- /dev/null +++ b/WF/framework.php @@ -0,0 +1,241 @@ + + + + + + + + +
    + +
    +
    +

    排版 详细参见 typo.css

    +

    首先应用 Reset 重设,对常用标签进行使用规划,使其应用达到恰到好处的效果。

    + +

    normalizereset 重设

    +

    reset.css 是 Pandora 的浏览器重设样式,消除浏览器布局标签的默认属性,使用前可引用无差异化样式 normalize.css 效果更佳。

    +

    Pandora 的 reset.css 是极精简的重置样式,并综合AliceUI 及 bootstrap等修改 normalize.css 形成无差异化的浏览器基础样式,统一浏览器的默认标签属性。

    + +

    reset.css 以及 Pandora 适合中文排版的 typo.css 样式(修改自 typobootstrap)外,Pandora 还内置了大量可组合的便捷实用的样式,需要注意这类样式,如:.btn,详情参看Pandora项目保留字

    +

    注意! 当前国内布局通常要使用reset,但现在也有越来越多的攻城师开始注意 normalize的作用了,充分发挥浏览器默认属性的优势。

    + +

    常用功能类

    + +
    +normalize.css 无差异样式及清除浮动
    +reset.css 传统重设样式
    +combo.css 便捷组合样式表
    +
    + +
      +
    • clearfix 清除浮动

    • +
    • hide 隐藏元素

    • +
    • .fl .fr 左右浮动

    • +
    • center-box center-item 浮动居中

    • +
    • ellipsis 文字单行溢出省略号

      +
      单行文本,这里文字太多了太多了
      +
    • +
    • text-justify 文本两端对齐

    • +
    +
    + + + +
    +

    图标/字体集

    +

    针对使用图标字体集的需求,不论市场还是技术,都已经非常成熟,推广使用大势所趋。Pandora项目暂时使用支付宝图标字体集 rei,如果不能满足您的需求,你可以使用 fontello 项目来扩展字体集或者使用ICON图标。

    +

    如此,便能对最常用图标使用字体集来表示,如 通知提醒,下面是关于 rei 的介绍:

    +

    Rei(读音为“丽”)是支付宝的 iconfont 集,是一种把图标放入自定义字体中,然后使用字体图标来替代普通图标的技术。同时,Rei 也是动漫女神。

    +

    +

    字体图标具有良好的兼容性,矢量,规范,减少图片请求,适应性强等特点,大量先进的网站(包括 github 等)正在使用这种技术。 Alice 全面使用了 iconfont 技术,使得所有的通用样式模块都不会产生图片请求,并且也获得了良好的兼容性和通用性。

    +

    Rei 目前涵盖了网站常用各类图标约 70 多个,兼容包括 ie6/7/8 在内的各主流浏览器,你可以自由的在页面中使用它。

    + + +
    +<i class="iconfont" title="灯泡">&#x00E3;</i>
    +
    + +
    +
    + 盾牌-阳 + 代付 + 预付卡 + 信用支付 + 集分宝 + 集分宝反色 + 基金 + 账户通 + 红包 + 银行卡 + 更多 + 常见问题 + 自助服务 + 回收站 + 日历/日期 + 喜欢 + 收藏 + 设置 + 播放 + 添加-圆 + 添加-方 + 添加-无框 + 声音 + 右向 + 关闭/错误 + 选择/对勾 + 查询/搜索 + 安卓系统 + 苹果系统 + windows Phone + 显示器 + 菱形 + 视频 + 建议/对话 + 联系邮箱 + 手机 + 首页 + 单箭头左 + 单箭头右 + 双箭头左 + 双箭头右 + 左三角形 + 右三角形 + 上三角形 + 下三角形 + 旺旺 + 用户 + 返回 + 图片 + 正方形 + 账单 + 全部账单 + 出错 + 提示 + 警告 + 阻止 + 成功 + 疑问 + 等待 + 详情 + 切换 + 统计 + 下载 + 礼盒 + 备注 + 添加联系人 + 申请还款 + 信用卡管理 + 记录 + 优惠劵 + 购物袋 +
    + +

    你可以右键查看源代码或访问 rei 来获取字体代码。

    +
    + +

    注: 虽然可通过图表字体集实现ICON等,但需求总是千变万化的,需要使用图标ICON 的时候,可用CSS Sprites分类保存在对应的图标集上,随后会推荐一款自动化处理工具。

    +
    + + + +
    +

    栅格系统

    +

    目前栅格系统很难满足国内的紧凑布局方式,在多变的电商网站中就更显得不足,综合各种情况的对比,不使用栅格就是最好的解决方案。

    +

    但能够实现提高用户体验的响应式布局,虽然无法完美应用栅格系统布局紧凑页面,但并不是不能用响应式,仅考虑宽屏布局,在窄屏下隐藏掉部分内容是最具优势的响应式布局解决方案。

    +

    在较小宽度或移动设备布局情况下,Bootstrap的12列栅格效果不错,虽在实现小尺寸元素上表现不够精细,但不影响其强悍的适应能力,在前端项目中具备

    + +

    注: 生产线仍然无法使用,难以精准布局

    +
    + + + +
    +

    流动栅格

    +

    在后台页面使用广泛,流动栅格可以不考虑,但是流动布局应用广泛,最经典的布局方式大概三四种。但最经得起考验的布局,也许只有下面一种。

    +
    + + + +
    +

    布局模板

    +

    尽管网页布局千变万化,但针对实现总有经典的布局方式不断地被重复使用,这部分可以作为布局模板提取出来。

    +
    + + + +
    +

    响应式设计

    +

    如果考虑响应式则暂时只考虑两种分辨率,1200px和980/990px,并以大分辨率为基准,小分辨率适当隐藏一部分内容,而针对移动设备可以另加考虑480px和760px。

    +

    注: 以上结论适用于电商的复杂布局,简单布局可以使用响应式的栅格系统实现。

    +
    + + + +
    +

    CSS3 Animate

    +

    随着css3的大量普及使用,更多的动画效果展示在页面上,渐进式地提升用户体验。

    +
    + + + + +
    +
    + + + + + \ No newline at end of file diff --git a/WF/index.php b/WF/index.php new file mode 100644 index 000000000000..207f4b5c3066 --- /dev/null +++ b/WF/index.php @@ -0,0 +1,243 @@ + + + + + + + + +
    + +
    +
    +

    Pandora 项目

    +
    +

    无论你身在何方处在何时,请记住要永存希望。「 晓寒 」

    +
    + +

    初期制作计划

    +
      +
    • 修正reset样式的实现,首先是无差异化重设 normalize.css,之后是传统意义上的reset.css效果
    • +
    • 首先确定排版样式 typo.css,内置大量(如 .pd10 .mt10) 排版组合样式及固定用法 combo.css,
    • +
    • 之后是模块组件,专一的模块实现,如button、表单等 module
    • +
    • javascript 插件工具类,如tooltip,dialog等
    • +
    • 基础样式及扩展前缀,如btn 外嵌套 metro_style(metro风格) 或 google_style(Google风格)实现不同的风格系统
    • +
    • 自定义字体图标jackey的使用
    • +
    • 应用自动化打包管理工具等
    • +
    + +

    计划修正

    +
      +
    • 排版呈现使之更贴近生产环境效果
    • +
    • 每天可以完成一两个简单的模块,但一周至少要完成一个稳定版的模块
    • +
    • 推进 NodeJS,完成项目在 NodeJS 环境下的开发、测试、部署发布等
    • +
    +
    + + + +
    +

    项目规划 tododoingdone

    + +

    注意: 开发模块组件之前请严格按照 代码开发规范 执行。

    + +

    基础

    + + +

    CSS 组件

    + + +

    JavaScript 组件

    + + +

    常用 JS 代码段

    + +

    主要项目案例 DEMO 内网访问

    +
    +
    +
    驴妈妈
    +
    + index +
    +
    定制游
    +
    + custom + custom-page +
    +
    积分商城
    +
    + points + points-list + points-details +
    +
    频道页面
    +
    + 景点门票 + 周边游 + 国内游 + 出境游 + 特色酒店 +
    +
    +
    + + +

    工具准备

    + + + +

    注意:确保样式的安全使用,尽量把样式定义在相应的容器中,而不是作为全局使用

    +
    +/* 全局样式:
    + * 除非非常通用,不允许新建全局样式,如果你要建,请先问一下晓寒,不然可能随时被干掉(^_^)
    + */
    +.red{color:red!imporant;}
    +
    +/* 作用域:限定在一定的容器中
    + * 像 .hover 这样的选择器是非常普通的,如何使用?
    + * 这样两个容器的 .hover 就不相互影响了,记得限定作用域
    + */
    +.module-1 .hover{ ... }
    +.module-2 .hover{ ... }
    +
    +
    + + + +
    +

    一个简单的例子

    +

    实现一个metro风格的橙色按钮居中显示,仅仅使用预设样式组合即可:

    +
    +

    + +

    +
    +
    +<p class="tc metro_style">
    +    <button class="btn btn-orange">居中按钮</button>
    +</p>
    +
    +
    + + + +
    +

    开始使用

    + +

    本项目已经开始在生产线测试使用,样式文件为 core.css 如下:

    +
    +reset.css   |-- core.css
    +combo.css   |
    +buttons.css |
    +
    +

    此项目中具备新版线上项目的静态版页面,供调试研究使用。

    +

    延迟加载的图片或内容使用的 loading 图标:两种尺寸

    +

    28px: http://pic.lvmama.com/img/new_v/ui_scrollLoading/loading.gif

    +

    46px: http://pic.lvmama.com/img/new_v/ui_scrollLoading/loadingGIF46px.gif

    + +
    + + + +
    +

    关于 Pandora

    +

    这项目一路艰辛,借鉴Bootstrap的思想并结合自己的工作想整合一个适合自己当前工作的前端框架,到底被什么绊住了呢,看着日子一天天过,真是揪心啊,AliceUI 还是比较给力,这么快新版就出来了,还好之前已经整理过部分 前端解决方案,这里可以直接使用了,曾经的努力虽然少,但还是有些许价值。

    + +

    看到人家的项目都有卡通形象,着实比较可爱,我也用一个,咱的就叫做 潘多拉 - Pandora 吧

    + +

    潘多拉(Pandora,也作潘朵拉),古希腊神话人物。在古希腊语中,潘是所有的意思,多拉则是礼物,意为“被授予一切优点的人”。

    + +

    根据神话,潘多拉出于好奇打开一个「魔盒」(应作坛子,希腊文原作πίθος,πίθοι,英语:pandora's box)释放出人世间的所有邪恶——贪婪、虚无、诽谤、嫉妒、痛苦等等,当她再盖上盒子时,只剩下希望在里面。Pandora 放出了邪恶,却把最大的希望留在了盒子里,如今她为我们所承受的困苦要做一个解决方案,把希望带给大家,并取名 Pandora 项目。

    + +

    Pandora 项目第一站——前端解决方案,接下来就让我们看看 Pandora 的表现吧!

    + +
    + + +
    +
    + + + + + \ No newline at end of file diff --git a/WF/javascript.php b/WF/javascript.php new file mode 100644 index 000000000000..05a716c3d245 --- /dev/null +++ b/WF/javascript.php @@ -0,0 +1,45 @@ + + + + + + + + +
    + +
    +
    +

    常用的JS效果

    +

    图片轮播、图片滚动、浮层提示、倒计时、下拉选项、多维排序、分页、弹窗内容、自动提醒、星星打分、字数检测、表单验证等

    +

    注:所有这些插件都可配置,举例倒计时插件,可以指定时间格式,如yyyy-mm-dd-ss或dd天mm分ss秒,再者如冒泡提醒插件,支持自定义模板、方位、偏移、延时及触发事件选择,对ajax加载的内容也具备冒泡提醒支持。

    +
    + + + + +
    +
    + + + + + + + \ No newline at end of file diff --git a/WF/labs.php b/WF/labs.php new file mode 100644 index 000000000000..c9aee817dc9a --- /dev/null +++ b/WF/labs.php @@ -0,0 +1,139 @@ + + + + + + + + +
    + +
    +
    +

    兼容解决方案

    +

    头痛的问题,我们提前搞定

    +

    详情参看: 兼容解决方案

    +
    + + + +
    +

    JS代码段

    +

    常用的JS代码段,很有用处,值得收集!

    + +

    瀑布广告 查看demo

    +
    +<script>
    +$(function(){
    +    // html代码
    +    var _activebox = '<div id="indexSilde" style="width:980px;margin:0 auto;position:relative;overflow:hidden;height:0;">'
    +            + '<div id="xslide1" style="position:absolute;z-index:11;top:0;display:none;">'
    +            + '<a target="_blank" href="http://zhounianqing.lvmama.com/?losc=019677">'
    +            + '<img src="http://pic.lvmama.com/img/v3/coupon.jpg" width="980" height="80">'
    +            + '</a></div>'
    +            + '<div id="xslide2" style="position:relative;top:0;z-index:10;">'
    +            + '<a target="_blank"  href="http://zhounianqing.lvmama.com/?losc=019677">'
    +            + '<img src="http://pic.lvmama.com/img/v3/couponbig.jpg" width="980" height="500">'
    +            + '</a></div>'
    +            + '</div>';
    +    
    +    $('.hh_shortcut_box').after(_activebox);
    +    
    +    // 瀑布广告
    +    var _indexSilde = $('#indexSilde');
    +	var _xslide1 = $('#xslide1');
    +	function _shouqi(){ 
    +		_indexSilde.animate({'height':80},1000,function(){
    +			_xslide1.fadeIn(500).siblings().fadeOut(500,function(){
    +				if($.browser.msie && parseInt($.browser.version)<=8){ 
    +					// 开启低版本浏览器的动画效果
    +                    // $.fx.off = true;  
    +				}
    +			});
    +		});
    +	};
    +	
    +	function _showslide(){
    +		_indexSilde.animate({'height':500},1000,function(){
    +			setTimeout(_shouqi,4000);
    +		});
    +	}
    +	//$.fx.off = false;
    +	setTimeout(_showslide,1000);
    +})
    +</script>
    +
    +

    跟随滚动 查看demo

    +

    实现滚动后一定位置后,某内容悬浮在特定位置

    +

    注意事项:实现此浮动的标签需要默认具备定位属性,如position:absolute;

    +
    +<script>
    +$.fn.smartFloat = function() {
    +    var position = function(element) {
    +        var top = element.position().top, pos = element.css("position");
    +        $(window).scroll(function() {
    +            var scrolls = $(this).scrollTop();
    +            if (scrolls > top) {
    +                if (window.XMLHttpRequest) {
    +                    element.css({
    +                        position: "fixed",
    +                        top: 0
    +                    });    
    +                } else {
    +                    element.css({
    +                        top: scrolls
    +                    });    
    +                }
    +            }else {
    +                element.css({
    +                    position: "absolute",
    +                    top: top
    +                });    
    +            }
    +        });
    +    };
    +    return $(this).each(function() {
    +        position($(this));                         
    +    });
    +};
    +
    +//绑定
    +$("#float").smartFloat();
    +</script>
    +
    + + + +
    + + + +
    +

    HTML5探索

    +

    关注HTML5文档,可参看:HTML5

    +
    + + + +
    +

    CSS3研究

    +

    CSS3实现的功能越发强悍了,这个必须关注!

    +
    + + + + +
    +
    + + + + + \ No newline at end of file diff --git a/WF/module.php b/WF/module.php new file mode 100644 index 000000000000..0012d4adbe52 --- /dev/null +++ b/WF/module.php @@ -0,0 +1,843 @@ + + + + + + + + +
    + +
    +
    +

    布局模板

    +

    最常用的布局结构堪称经典,可以作为布局模板使用——内容盒子,列表,图文混排,图片滚动,下拉菜单等

    +

    经典布局不是指单一的某一种布局,针对不同的风格设计,都有优良的布局经典,敏捷开发无处不在,这里仅就某一类设计浅谈布局实现(@此处实例多是修改BT项目实例或引用lvmama的项目或针对未来需求的预设实现)。

    +

    注: 针对公共模块提取调整,立足实际应用,除此外其他的不做规划。

    + + + +

    区块 box

    +

    实现布局块,保证良好的扩展性

    + +
    +
    +
    + 更多 » +

    标题 一些说明

    +
    +
    +

    box-content 有默认内边距

    +
    +
    +
    + + +

    列表实现 list

    +

    实现常见的布局列表,具备良好的扩展性

    + + +

    图片列表 imglist

    +

    + + +

    图文混排 imgtext

    +

    + + +
    + + + +
    +

    表格

    +

    页面中常用的表格,信息展示,布局表格,产品列表,特定功能类。

    +

    详情参看: tables

    +
    + + + +
    +

    按钮

    +

    集合五种尺寸的按钮,3中类型,四种标签,N*4种风格(默认+metro_style+google_stylr+lv_style),更可以与图标/字体集组合,能满足大部分的按钮需求。

    +

    详情参看: buttons

    +
    + + + +
    +

    按钮组

    +

    实现一组功能相关的按钮,如单选按钮组等

    +

    详情参看: buttons

    +
    + + + +
    +

    按钮菜单

    +

    由按钮组合实现的下拉菜单

    +

    详情参看: buttons

    +
    + + + +
    +

    表单

    +

    处理表单最头疼的事情莫过于N中不同的排版杂糅在一起,以致于对齐甚至都要单独个性化处理。

    +

    这里总结了两种尺寸下的四种常见form布局方式,支持混合使用,几乎统一了表单的各类布局实现。

    +

    详情参看: forms

    +
    + + + + + + + + + + + +
    +

    分页

    +

    实现功能完备的分页组件,扩展辅助js时可实现前端分页。

    +

    事实上一个网站也许只有一两种风格的分页模块,下面列举两种尺寸,两种风格的分页布局供大家参考

    +

    详见:paging

    +
    + + + +
    +

    标签标记

    +

    标签 标签和注释文字

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    标签代码
    + 默认 + + <span class="label">默认</span> +
    + 成功 + + <span class="label label-success">成功</span> +
    + 警告 + + <span class="label label-warning">警告</span> +
    + 重要 + + <span class="label label-important">重要</span> +
    + 信息 + + <span class="label label-info">信息</span> +
    + 相反 + + <span class="label label-inverse">相反</span> +
    + +

    标记 标记信息、未完成任务、未读信息等

    +

    用来显示指示信息或标识某某数量(未完成任务、未读信息等)的简洁小组件。在CRM中往往用在任务处理列表或消息提醒上。

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名称例子代码
    + 默认 + + 1 + + <span class="badge">1</span> +
    + 成功 + + 2 + + <span class="badge badge-success">2</span> +
    + 警告 + + 4 + + <span class="badge badge-warning">4</span> +
    + 重要 + + 6 + + <span class="badge badge-important">6</span> +
    + 信息 + + 8 + + <span class="badge badge-info">8</span> +
    + 相反 + + 10 + + <span class="badge badge-inverse">10</span> +
    + +

    tags标签 依赖tags.css

    +
    +

    Intelligent son 聪明的儿子

    +

    + One day, the father lets eight year-old son send a letter, the son took the letter , the father then remembered didn't write the address and addressee's name on the envelope.
    + After the son comes back, the father asks him: "You have thrown the letter in the mail box?"
    + "Certainly"
    + "You have not seen on the envelope not to write the address and the addressee name?"
    + "I certainly saw nothing written on the envelope."
    + "Then why you didn't take it back?"
    + "I also thought that you do not write the address and the addressee, is for does not want to let me know that you do send the letter to who!" +

    + +

    之乎者也,如果用的是中文呢?来点English混排一下。

    + +

    来个小字体版的:之乎者也,如果用的是中文呢?来点English混排一下。

    +
    + + +

    lvmama标签统一 促销、返现、提示

    +
    +

    默认设置了margin:0 2px,保证连用标签的间距(换行会产生一个空格),使用时注意保持统一

    +

    纯色标签 tags10*

    +

    <span class="tags101">文字</span> + 多人多惠 + 促销 +

    +

    <span class="tags102">文字</span> + 元旦 + 国庆 + 端午 + 微旅游日 + 中秋 + 清明 + 五一 +

    +

    <span class="tags103">文字</span> + 热卖
    +

    +

    <span class="tags104">文字</span> + 新品
    +

    + + +

    促销标签 tags20*

    +

    + <span class="tags201">促销</span> + 信用卡促销 + 多人促销 + 早订惠 + 招 行 +

    + + +

    分类标签 tags30*

    +

    + <span class="tags301">超级自由行</span> + 超级自由行 +

    +

    + <span class="tags302">开心驴行</span> + 开心驴行 +

    + + +

    放到文字中看看效果:标题中 多人多惠折扣7.9折超级自由行

    + +

    段落中:驴妈妈的多人多惠超级自由行产品一直在热卖,并且节假日还时常发布新品并伴随促销活动开心驴行,转发微博还有好礼不断哦!

    + + +

    返现类标签 橙色

    +

    + 折扣7.9折 + + 销量1208 + + 5元 + + 折扣返现20元 +

    <span class="tagsback" tip-title="提示标题" tip-content="提示内容"><em>折扣</em><i>7.9折</i></span>
    +

    + +

    积分100分

    + +

    关于 tooltip ,参看 tooltip 工具提醒

    + +

    复杂标签测试: 折扣返现20元

    +
    + + +

    轻松实现折叠效果

    +

    当没有任何内容时,可以很方便的将标签和徽章折叠起来(通过CSS的 :empty 选择器)。针对低版本浏览器需要js修复支持

    + +
    + + + +
    +

    poptip 提示层

    + +
    +
    + Little Robert asked his mother for two cents. "What did you do with the money I gave you yesterday?"
    + "I gave it to a poor old woman," he answered.
    + "You're a good boy," said the mother proudly. "Here are two cents more. But why are you so interested in the old woman?"
    + "She is the one who sells the candy."
    +
    + +
    +
    +
    +
    + + +
    + × +
    + 我是内容我是内容我是内容我是内容我是内容我是内容 +
    +
    +
    +
    + +
    +
    +
    +
    + + +
    + × +
    +
    我是内容。
    +
    我是内容我是内容我是内容。
    + +
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    + 我是内容我是内容我是内容我是内容我是内容我是内容 +
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    + 我是内容我是内容我是内容我是内容我是内容我是内容 +
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    + 我是内容我是内容我是内容我是内容我是内容我是内容 +
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    + 我是内容我是内容我是内容我是内容我是内容我是内容 +
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    + 我是内容我是内容我是内容我是内容我是内容我是内容 +
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    + 我是内容我是内容我是内容我是内容我是内容我是内容 +
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    我是内容我是内容我是内容我是内容我是内容我是内容
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    我是内容我是内容我是内容我是内容我是内容我是内容
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    我是内容我是内容我是内容我是内容我是内容我是内容
    +
    +
    +
    + +
    + +
    + + + +
    +

    提示文本

    +

    老版本 ICON 使用的图片,请参考 信息提示框

    +

    提醒: 字体图标集虽已全兼容,但字体加载仍有延迟,有时会出现闪动,另外针对信息提示框的显示,表示字体图标不够精致,可设置两个方案,精致版的图标集,简单方便扩展的文字图标集。

    +

    带各类图标的提示文案,可带有提示箭头。以下摘自 AliceUI:

    +
    +

    + + 错误提醒:自行编辑,非系统消息 +

    + +

    + + 消息提醒:自行编辑,非系统消息 +

    + +

    + + 警告提醒:自行编辑,非系统消息 +

    + +

    + + 停止提醒:自行编辑,非系统消息 +

    + +

    + + 成功提醒:自行编辑,非系统消息 +

    + +

    + + 帮助提醒:自行编辑,非系统消息 +

    + +

    + + 等待提醒:自行编辑,非系统消息 +

    + +
    + +
    + +
    +

    + + 错误提醒:自行编辑,非系统消息 +

    +
    + +
    +

    + + 消息提醒:自行编辑,非系统消息 +

    +
    +
    + +
    +

    + + 警告提醒:自行编辑,非系统消息 +

    +
    + +
    +

    + + 停止提醒:自行编辑,非系统消息 +

    +
    + +
    +

    + + 成功提醒:自行编辑,非系统消息 +

    +
    + +
    +

    + + 帮助提醒:自行编辑,非系统消息 +

    +
    + +
    +

    + + 等待提醒:自行编辑,非系统消息 +

    +
    + + + + + 消息提醒:自行编辑,非系统消息 + + + +
    +
    + + +
    +

    + + 消息提醒:自行编辑,非系统消息 +

    +
    + +
    +
    + + +
    +

    + + 消息提醒:自行编辑,非系统消息 +

    +
    + +
    +
    + + +
    +

    + + 消息提醒:自行编辑,非系统消息 +

    +
    + +
    +
    + + + +
    +

    提示框

    + +
    +
    +
    + +
    +
    +

    错误标题

    +

    完成操作的一些说明。

    +

    查看详情 | 返回首页

    +
    +
    + +
    +
    + +
    +
    +

    提示标题

    +

    完成操作的一些说明。

    +

    查看详情 | 返回首页

    +
    +
    + +
    +
    + +
    +
    +

    警告标题

    +

    完成操作的一些说明。

    +

    查看详情 | 返回首页

    +
    +
    + +
    +
    + +
    +
    +

    阻止标题

    +

    完成操作的一些说明。

    +

    查看详情 | 返回首页

    +
    +
    + +
    +
    + +
    +
    +

    成功标题

    +

    完成操作的一些说明。

    +

    查看详情 | 返回首页

    +
    +
    + +
    +
    + +
    +
    +

    疑问标题

    +

    完成操作的一些说明。

    +

    查看详情 | 返回首页

    +
    +
    + +
    +
    + +
    +
    +

    等待标题

    +

    完成操作的一些说明。

    +

    查看详情 | 返回首页

    +
    +
    +
    +
    + + + +
    +

    进度条

    +

    显示某操作进程进度

    +
    + + + +
    +

    媒体对象

    +

    图文混排等

    +
    + + + +
    +

    步骤

    +

    操作步骤的常用布局实现

    +
    + + + +
    +

    杂项

    +

    消息墙等组件

    +
    + + + + +
    +
    + + + + \ No newline at end of file diff --git a/WF/rule.php b/WF/rule.php new file mode 100644 index 000000000000..f4928b228dbd --- /dev/null +++ b/WF/rule.php @@ -0,0 +1,445 @@ + + + + + + + + +
    + +
    +
    +

    规范说明

    +
    +

    写在规则前面的话——项目的可维护性第一。

    + 阿当 +
    +

    此规范为参考规范,不全是硬性要求,部分硬性约定见 文档结构 & 书写规范,统一团队编码规范和风格。

    +

    目标是让所有代码都是有规可循的,并且能够得到沉淀,减少重复劳动。

    +
    大家一起完善。 也可以参考引自:开发规范来完善。
    +
    + + + +
    +

    文档结构

    +
    +
    +
    + +

    目录、文档结构

    +
      +
    1. 文件和目录名只能包含 [a-z\d-],并以英文字母开头
    2. +
    3. 首选合适的英文单词
    4. +
    5. data api 命名为小写并用连字符,如 data-trigger-type
    6. +
    7. 事件名为驼峰,如 .trigger('itemSelected')
    8. +
    9. 符合规范 +
        +
      • 常量全大写 UPPERCASE_WORD
      • +
      • 变量驼峰 camelName
      • +
      • 类名驼峰,并且首字母要大写 CamelName
      • +
      +
    10. +
    +
    + + + +
    +

    命名规范

    +
      +
    1. 文件和目录名只能包含 [a-z\d-],并以英文字母开头
    2. +
    3. 首选合适的英文单词
    4. +
    5. data api 命名为小写并用连字符,如 data-trigger-type
    6. +
    7. 事件名为驼峰,如 .trigger('itemSelected')
    8. +
    9. 符合规范 +
        +
      • 常量全大写 UPPERCASE_WORD
      • +
      • 变量驼峰 camelName
      • +
      • 类名驼峰,并且首字母要大写 CamelName
      • +
      +
    10. +
    +

    常用词命名统一表

    +
    规则:
    + + +
    + + + +
    +

    HTML书写规范

    + +

    * 第一行统一使用HTML5标准:<!DOCTYPE html>

    +

    HTML5 头部声明简单有效,故在每个HTML页面强制执行此标准模式。

    +
    +<!DOCTYPE html>
    +<html>
    +<head>
    +<meta charset="utf-8" />
    +<title>your title</title>
    +<link rel="stylesheet" href="css_example_url" />
    +<script src="http://code.jquery.com/jquery-latest.js"></script>
    +</head>
    +<body>
    +...
    +</body>
    +</html>
    +
    + +

    Meta 的使用:(需根据具体项目选择)参考 cool-head

    +
      +
    • <img> 标签默认缺省格式:<img src="xxx.png" alt="缺省时文字" /> 避免出现 src="" 问题
    • +
    • <a> 标签缺省格式:<a href="###" title="链接名称">xxx</> 注:target="_blank" 根据需求决定
    • +
    • 标签预留链接占位符使用 ###,参见: a标签占位符问题
    • +
    • 所有标签需要符合XHTML标准闭合
    • +
    • 一律统一标签结尾斜杠的书写形式:<br /> <hr /> 注意之间空格
    • +
    • 避免使用已过时标签,如:<b> <u> <i> 而用 <strong> <em> 等代替
    • +
    • 使用 data-xxx 来添加自定义数据,如:<input data-xxx="yyy"/>
    • +
    • 避免使用 style="xxx:xxx;" 的内联样式表
    • +
    • 特殊符号使用参考 HTML 符号实体
    • +
    +

    HTML 书写规范

    +
      +
    • 无特殊说明,编码统一为utf-8;
    • +
    +

    HTML 细化规范

    +
      +
    • HTML head 部分的结构参看:cool-head (摘取必要内容即可)
    • +
    • css 文件置于都 头部
    • +
    • jQueryGoogle Analytics 引用置于 头部
    • +
    • 其他效果 js统计代码 文件置于 尾部
    • +
    • HTML 代码尽量过一遍 HTML5 验证
    • +
    • HTML 占位图片使用 temp.im & placehold.us 图片服务
    • +
    + +

    书写规范

    +
      +
    • 使用四个空格的 soft-tabs 缩进
    • +
    • body 里应每层嵌套元素缩进一次(4个空格)
    • +
    • 请务必实用双引号,而非单引号
    • +
    • 不要自闭元素包括一个斜线
    • +
    + +

    实用大于语义

    +

    努力保持HTML的标准和语义,但不要牺牲实用性。用最少的复杂度尽可能少的标签实现需求。

    + +

    属性顺序

    +

    HTML 属性应该遵循特定的顺序,以便能更易阅读代码。

    +
      +
    • class
    • +
    • id
    • +
    • data-*
    • +
    • for|type|href
    • +
    +

    比如你的代码看起来应该像这样:

    +
    +<a class="" id="" data-modal="" href="">链接示例</a>
    +
    +
    + + + +
    +

    CSS 书写规范

    +

    外部CSS引用,必须使用如下格式( rel 在前,href 在后,无 type="text/css" 及 charset ):

    +
    <link rel="stylesheet" href="http://pic.lvmama.com/styles/v3/combo.css" >
    +

    CSS 注意事项

    +
      +
    • 无特殊说明,编码统一为utf-8;
    • +
    • 防止文件合并及编码转换时造成问题,请将样式中文字体名字改成对应的英文名字(unicode码),如:宋体( \5b8b\4f53)微软雅黑(”Microsoft YaHei”,”\5FAE\8F6F\96C5\9ED1″);
    • +
    • 书写代码前,考虑并提高样式重复使用率;
    • +
    • 禁止使用 expression 表达式;
    • +
    • 禁止滥用 !important
    • +
    • 能缩写的尽量缩写,如 padding:5px 0 0 5px;
    • +
    • 层级(z-index)必须清晰明确,适当划分组件层级范围,禁止层级间盲目攀比;
    • +
    • 为方便组件模块化和提高弹性,正常情况下,为避免外边界冲突,组件不应设置外边界,外边界用组合css方式实现,如:m10{margin:10px}mt10{margin-top:10px}等;
    • +
    • 必须为大区块&重要模块的样式添加注释,小区块适量注释;
    • +
    • 正式发布前应进行压缩,压缩后文件的命名应添加”.min”后缀;
    • +
    • 代码缩进与格式:请参照以下 CSS 书写规范;
    • +
    + +

    CSS 书写规范

    +

    以下书写规范针对组件开发使用,非组件书写格式建议使用单行式排版。

    +
      +
    • 使用四个空格的 soft-tabs 缩进
    • +
    • 写组选择器时,保持选择器各占一行
    • +
    • 在属性块的左 “{” 前应该有一个空格
    • +
    • 关闭属性块的右 “}” 要新起一行
    • +
    • 每个属性的 “:” 后包含一个空格
    • +
    • 每个属性应该自己独占一行
    • +
    • 分割选择器的 “,” 后应该包含一个空格
    • +
    • Don't include spaces after commas in RGB or RGBa colors, and don't preface values with a leading zero
    • +
    • 小写所有16进制值, 例如, #fff 而非 #FFF
    • +
    • 使用简写16进制值, 例如, #fff 而非 #ffffff
    • +
    • 选择器中引用属性值, 例如, input[type="text"] +
    • +
    • 避免0值设置单位, 例如, margin: 0; 而非 margin: 0px;
    • +
    +

    为方便调试,css底部必须书写此css名称以及功能描述,如下:

    +
    +/* 
    + @名称: channel.css
    + @功能: 各大频道页样式 //注意适当的隔行划分
    + */
    +
    +/* 频道全局样式 */
    +.col-w { width: 780px; float: right;}
    +.aside { width: 200px; float: left;}
    +
    +
    +/* 频道侧边栏 */
    +.side-box { margin-bottom: 15px;}
    +
    +
    +/* 频道主内容区域 */
    +.ctitle { }
    +
    +
    +/* 特色酒店 */
    +.pro-search { }
    +
    +
    +/* 火车票 */
    +.ticket-search { }
    +
    + +

    错误示例:

    +
    +.selector, .selector-secondary, .selector[type=text] {
    +    padding:15px;
    +    margin:0px 0px 15px;
    +    background-color:rgba(0, 0, 0, 0.5);
    +    box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF
    +}
    +
    + +

    正确示例:

    +
    +.selector,
    +.selector-secondary,
    +.selector[type="text"] {
    +    padding: 15px;
    +    margin: 0 0 15px;
    +    background-color: rgba(0,0,0,.5);
    +    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
    +}
    +
    + + +

    常见的CSS术语,请参见 syntax section of the Cascading Style Sheets article on Wikipedia.

    + +

    属性顺序

    +
    +.declaration-order {
    +    /* Positioning 定位 */
    +    position: absolute;
    +    top: 0;
    +    right: 0;
    +    bottom: 0;
    +    left: 0;
    +    z-index: 100;
    +    
    +    /* Box-model 盒模型 */
    +    display: block;
    +    float: right;
    +    width: 100px;
    +    height: 100px;
    +    
    +    /* Typography 排版 */
    +    font: normal 13px "Helvetica Neue", sans-serif;
    +    line-height: 1.5
    +    color: #333;
    +    text-align: center;
    +    
    +    /* Visual 视觉 */
    +    background-color: #f5f5f5;
    +    border: 1px solid #e5e5e5;
    +    border-radius: 3px;
    +    
    +    /* Misc 其他 */
    +    opacity: 1;
    +}
    +
    + +

    相关属性应放在一起,将定位与盒模型属性写在最前面,其次是排版和视觉效果的属性。

    +

    关于属性顺序的完整列表,请参考 Recess.

    + +

    格式化例外

    +

    某些情况下,这是有道理的,稍微偏离默认的 语法.

    + +

    前缀属性

    +

    当使用供应商前缀的属性时,每个属性缩进到vlaue值垂直对齐的位置,方便多行编辑。

    + +
    +/* Corner radius-圆角 */
    +.selector {
    +  -webkit-border-radius: 3px;
    +     -moz-border-radius: 3px;
    +          border-radius: 3px;
    +}
    +
    + +

    注:-khtml-border-radius: 3px; 是苹果的那个浏览器的,现在使用 -webkit-

    +

    在 Textmate、Sublime Text 2 以及 notepad++等工具中, 都支持多行编辑。

    + +

    单一属性的书写规则

    +

    在有些情况下,每个样式只有一个属性,考虑到可读性及更快地编辑删除等,保持同一行书写。

    + +
    +.span1 { width: 60px; }
    +.span2 { width: 140px; }
    +.span3 { width: 220px; }
    +
    +.sprite {
    +    display: inline-block;
    +    width: 16px;
    +    height: 15px;
    +    background-image: url(../img/sprite.png);
    +}
    +.icon           { background-position: 0 0; }
    +.icon-home      { background-position: 0 -20px; }
    +.icon-account   { background-position: 0 -40px; }
    +
    + +

    可读性

    +

    代码是由人来书写和维护的。确保你的代码有很好的注释描述,以便他人使用。

    + +

    注释

    +

    好的代码都有一个良好的代码注释而不仅仅是一个类名

    + +

    Bad example:

    +
    +/* Modal header */
    +.modal-header {
    +  ...
    +}
    +
    + +

    Good example:

    +
    +/* Wrapping element for .modal-title and .modal-close */
    +.modal-header {
    +  ...
    +}
    +
    + +

    类名与命名

    +
      +
    • 保持类名使用小写字母或连接符 (不要使用下划线或驼峰命名法)
    • +
    • 避免使用随意的首字符命名法
    • +
    • 保持命名尽可能短并简洁
    • +
    • 使用有意义的命名;使用结构化或目的性的意义名称
    • +
    • 根据最近的父组件基类作为命名前缀
    • +
    • 为JavaScript预留钩子的命名,请以 JS_ 起始,比如:JS_ui-tab, JS_slidebox;或者使用 data-* 挂钩JS功能
    • +
    + +

    Bad example:

    +
    +.t { ... }
    +.red { ... }
    +.header { ... }
    +
    + +

    Good example:

    +
    +.tweet { ... }
    +.important { ... }
    +.tweet-header { ... }
    +
    + +

    选择器

    +
      +
    • 在通用的元素标签中使用类
    • +
    • 要保持尽量简短,并限制每个选择器最多三个class
    • +
    • 必要时使用最近的父类 (如,在不使用前缀类时)
    • +
    + +

    Bad example:

    +
    +span { ... }
    +.page-container #stream .stream-item .tweet .tweet-header .username { ... }
    +.avatar { ... }
    +
    + +

    Good example:

    +
    +.avatar { ... }
    +.tweet-header .username { ... }
    +.tweet .avatar { ... }
    +
    + +

    组织

    +
      +
    • 组织代码段的组成部分
    • +
    • 指定一个一致的注释层次结构
    • +
    • 如果使用多个css文件,则按组件进行划分
    • +
    + + +

    更多详情常见:CSS目录下 readme.md 文件

    +
    + + + +
    +

    JavaScript 编码风格

    +
    + + + +
    +

    JSON格式规范

    +

    参考JSON Style Guide翻译,原版:Google JSON Style Guide

    +
    + + + +
    +

    说明文档书写规范

    + +
    + + + +
    +

    EDM 制作规范

    +
      +
    • CSS 只可使用 内联样式表 ,如:style="margin:0;"
    • +
    • 设计之初遵循: 图上无文本,文本后无底纹 的规则
    • +
    • 使用 MailChimp HTML Email CSS Fix 参看下文链接
    • +
    • 引入 CSS Reset for HTML Email 参看下文链接
    • +
    • 使用 Table 布局而非 DIV
    • +
    • 所有图片使用 IMG 标签,如:<img style="style="display:block" "src="" />
    • +
    • 可以适当使用占位符 spacer.gif
    • +
    • 多用 <br /> 换行而非 <p>
    • +
    • 整体最佳宽度为:550-600px
    • +
    • 不使用 Javascript
    • +
    • 正式发送给用户之前,多次测试
    • +
    +

    更多细节参考下面链接:
    12 Killer Tips and Tricks for Building HTML Email

    +
    + + + + +
    +
    + + + + \ No newline at end of file diff --git a/WF/start.php b/WF/start.php new file mode 100644 index 000000000000..2c6070145aea --- /dev/null +++ b/WF/start.php @@ -0,0 +1,28 @@ + + + + + + + + +
    + +
    + + + + +
    +
    + + + + + \ No newline at end of file diff --git a/WF/svn.php b/WF/svn.php new file mode 100644 index 000000000000..8a64b5da08dc --- /dev/null +++ b/WF/svn.php @@ -0,0 +1,155 @@ + + + + +SVN 维护常用项目地址 + + + + + + + + +
    +

    SVN 常用的维护项目地址

    +

    SVN 最常用的维护地址,你可以在评论处添加最常用的地址连接,我会统一整理:

    +

    TODO:

    + +
    +

    super中常用项目文件夹:

    +
    +
    首页及频道:
    +
    E:\SVN_work\super-chanpinbu\Super_front\WebContent\WEB-INF\pages\www
    +
    我的驴妈妈后台:
    +
    E:\SVN_work\super-chanpinbu\Super_front\WebContent\WEB-INF\pages\myspace
    +
    点评项目:
    +
    E:\SVN_work\super-chanpinbu\Super_front\WebContent\WEB-INF\pages\comment
    +
    积分商城:
    +
    E:\SVN_work\super-chanpinbu\Super_front\WebContent\WEB-INF\pages\shop
    + +
    境外酒店:
    +
    E:\SVN_work\super-chanpinbu\Super_globalhotel\WebContent\WEB-INF\pages\abroadhotel
    + +
    +

    focus中常用项目文件夹:

    +
    +
    搜索结果页:
    +
    E:\SVN_work\focus\pet\pet_search\src\main\webapp\WEB-INF\ftl
    +
    登陆注册
    +
    E:\SVN_work\focus\pet\pet_sso\src\main\webapp\login.jsp
    +
    +
    +
    + +

    头部文件修改:包含以下文件夹路径

    +
    +
    super
    +
    super 分支、定制游的静态html文件
    +
    focus
    +
    focus 分支
    +
    攻略 guide
    +
    guide 分支
    +
    资讯 info
    +
    资讯频道
    +
    诚聘英才
    +
    php文件:yingcai
    +
    + +

    底部文件footer修改:统一为一个 copyright.js

    +
    +
    super
    +
    super 分支、定制游的静态html文件
    +
    focus
    +
    focus 分支
    +
    攻略 guide
    +
    guide 分支
    +
    资讯 info
    +
    资讯频道
    +
    诚聘英才
    +
    php文件:http://www.lvmama.com/public/jobs
    +
    + +

    SVN 产品部分支

    +
    +
    PIC:
    +
    http://192.168.0.7/svn/pics/branches/develop
    +
    产品部分支-super:
    +
    http://192.168.0.7/svn/super/branches/chanpinbu
    +
    产品部分支-focus:
    +
    http://192.168.0.7/svn/focus/branches/chanpinbu
    +
    +

    SVN 主干

    +
    +
    PIC:
    +
    http://192.168.0.7/svn/pics/trunk
    +
    super:
    +
    http://192.168.0.7/svn/super/trunk
    +
    focus:
    +
    http://192.168.0.7/svn/focus
    +
    资讯 info:
    +
    http://192.168.0.7/svn/others/projects/info/trunk
    +
    攻略 guide:
    +
    http://192.168.0.7/svn/others/projects/guide/trunk
    +
    +

    常用测试地址:可以使用SwitchHosts!管理工具切换host

    +
    仿真243-245:
    +
    +# 仿真测试环境,通常称 243-245 环境
    +192.168.0.243 www.lvmama.com
    +192.168.0.243 cmt.lvmama.com
    +192.168.0.243 dest.lvmama.com
    +192.168.0.243 search.lvmama.com
    +192.168.0.243 cc.lvmama.com
    +192.168.0.243 login.lvmama.com
    +192.168.0.243 pcadmin.lvmama.com
    +192.168.0.243 super.lvmama.com
    +192.168.0.243 pay.lvmama.com
    +
    +192.168.0.245 pic.lvmama.com
    +
    +
    临时测试:
    +
    +# 配合最新项目的测试地址
    +10.3.1.43 pic.lvmama.com
    +10.3.1.43 s1.lvjs.com.cn
    +10.3.1.43 s2.lvjs.com.cn
    +10.3.1.43 s3.lvjs.com.cn
    +
    + + +
    +
    +
    +
    + + +

    这里收集和汇总各项目对应的文件:

    +
    + + +
    + + + + + + + + + \ No newline at end of file diff --git a/WF/test/buttons.html b/WF/test/buttons.html new file mode 100644 index 000000000000..a10fb9c45dab --- /dev/null +++ b/WF/test/buttons.html @@ -0,0 +1,79 @@ + + + + +按钮 + + + + + + + + + +
    +

    buttons

    +

    按钮样式类别

    + + + + + + + + + + + + + + + + + + + +

    按钮禁用样式

    + + + + + + + + + + + + + + + + + + + +

    + + + +

    + + + + +
    + + \ No newline at end of file diff --git a/WF/test/custom.less b/WF/test/custom.less new file mode 100644 index 000000000000..40b66cbdef84 --- /dev/null +++ b/WF/test/custom.less @@ -0,0 +1,6 @@ +@import 'styles.less'; + +h2 { + font-size:@size *3; + color: @orange; +} diff --git a/WF/test/index.html b/WF/test/index.html new file mode 100644 index 000000000000..c6a639984f5e --- /dev/null +++ b/WF/test/index.html @@ -0,0 +1,34 @@ + + + + +LESS 测试 + + + + + + +

    LESS 测试

    + +

    第一节 使用

    + + + + + diff --git a/WF/test/styles.less b/WF/test/styles.less new file mode 100644 index 000000000000..2f30348092eb --- /dev/null +++ b/WF/test/styles.less @@ -0,0 +1,12 @@ + +@color: #ff0000; +@size: 20px; +@orange: orange; + +#header { + color: @color; +} +h1 { + color: @color; + font-size:@size *2; +} diff --git a/WF/test/test.html b/WF/test/test.html new file mode 100644 index 000000000000..d6148ee895a1 --- /dev/null +++ b/WF/test/test.html @@ -0,0 +1,33 @@ + + + + +测试 + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/WF/tool.php b/WF/tool.php new file mode 100644 index 000000000000..01713d54826d --- /dev/null +++ b/WF/tool.php @@ -0,0 +1,26 @@ + + + + + + + + +
    + +
    + + + + +
    +
    + + + + + \ No newline at end of file diff --git a/WF/tpl.php b/WF/tpl.php new file mode 100644 index 000000000000..76a06e6cc20f --- /dev/null +++ b/WF/tpl.php @@ -0,0 +1,74 @@ + + + + + + + + +
    + + +
    +
    +

    前端布局模板

    +

    以下实例多是引用lvmama项目中的布局实现

    +
    + + + +
    +

    区块 box

    +

    实现布局块,保证良好的扩展性

    +
    +
    +
    +

    标题 一些说明

    + 更多 » +
    +
    +

    这是列表或其它内容

    +
    +
    +
    +
    + + + +
    +

    列表实现 list

    +

    实现常见的布局列表,具备良好的扩展性

    +
    + + + +
    +

    图片列表 list

    +

    +
    + + + +
    +

    图文混排 list

    +

    +
    + + + + +
    + +
    + + + + \ No newline at end of file diff --git a/WF/wheel.php b/WF/wheel.php new file mode 100644 index 000000000000..4a6a7d26a5d3 --- /dev/null +++ b/WF/wheel.php @@ -0,0 +1,126 @@ + + + + + + + + +
    + +
    +
    +

    造好的轮子

    +

    这里收集那些造好的轮子,具备良好的设计与实现,并方便我们进行快速开发使用的工具

    +

    注:如果你也知道一些好的轮子,不妨拿出来和大家分享一下!

    +

    TODO: 可想而知好轮子很多,所以左侧导航要按分类来整理,每个轮子的介绍中附加一些参考网址效果更好。

    +
    + + + +
    +

    开发工具

    +

    这里收集那些优良的前端开发工具,具备良好使用便捷。

    + +

    注:如果你也知道一些好的开发工具,也可以给大家推荐一下!

    +
    + + +
    +

    Markdown

    +

    详情请参考:Markdown 语法说明

    +

    Markdown 语法的目标是:成为一种适用于网络的书写语言。

    +

    可读性,无论如何,都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响,包括 SetextatxTextilereStructuredTextGrutatextEtText,而最大灵感来源其实是纯文本电子邮件的格式。

    +

    Markdown 最适合来书写使用说明、介绍或规范等,通常用于书写 Readme.md

    +

    更多详情常见 Markdown 语法说明,这里还提供 Mrakdown 免费编辑器

    +
    + + + +
    +

    Minify

    +

    Minify: 在服务端合并和压缩JavaScript和CSS文件

    +

    详情请参考:Minify

    +
    + + + +
    +

    Less

    +

    Less: 一种动态样式语言

    +

    详情请参考:Less

    +
    + + + +
    +

    Git

    +

    详情请参考:useGit项目

    +
    + + + +
    +

    Nodejs

    +

    更多请参考:

    + +
    + + + +
    +

    CSS Lint

    +

    CSSLint 是一个用来帮你找出 CSS 代码中问题的工具,它可做基本的语法检查以及使用一套预设的规则来检查代码中的问题,规则是可以扩展的。

    +

    详情请参考:CSS Lint

    +
    + + + +
    +

    JSHint

    +

    JSHint跟JSLint非常像,都是Javascript代码验证工具,这种工具可以检查你的代码并提供相关的代码改进意见。

    +

    详情请参考:JSHint

    +
    + + + +
    +

    Modernizr

    +

    Modernizr: the feature detection library for HTML5/CSS3

    +

    详情请参考:Modernizr

    +
    + + + +
    +

    HTML特殊符号对照表

    +

    HTML特殊字符编码大全,建议将最常用的记住!

    +

    详情请参考:HTML特殊符号对照表

    +
    + + + +
    +
    + + + + \ No newline at end of file diff --git a/WF/xOne/alerts.html b/WF/xOne/alerts.html new file mode 100644 index 000000000000..0b2246954bf2 --- /dev/null +++ b/WF/xOne/alerts.html @@ -0,0 +1,35 @@ + + + + +alert 信息提示框 + + + + + + + + +
    +

    alert 信息提示框

    +

    给成功、警告及错误消息统一指定样式

    +

    TODO:

    + +
    + + +
    +
    +
    +
    + + +
    + + + \ No newline at end of file diff --git a/WF/xOne/breadcrumb.html b/WF/xOne/breadcrumb.html new file mode 100644 index 000000000000..80fda47ad466 --- /dev/null +++ b/WF/xOne/breadcrumb.html @@ -0,0 +1,54 @@ + + + + +面包屑导航 + + + + + + + + +
    +

    面包屑导航

    +

    面包屑的作用

    +
      +
    • 让用户了解当前所处位置,以及当前页面在整个网站中的位置。
    • +
    • 提供返回各个层级的快速入口,方便用户操作。
    • +
    • 降低跳出率,面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。
    • +
    • 面包屑有利于网站内链的建设,用面包屑大大增加了网站的内部连接,提高用户体验。
    • +
    + +
    +
    +

    + 您当前所处的位置: + 首页 > + 组件 > + 面包屑 +

    +
    + +
    +
    +<div class="crumbs">
    +    <p>
    +        <span>您当前所处的位置:</span>
    +        <a href="../">首页</a> &gt; 
    +        <a href="../module.php">组件</a> &gt; 
    +        面包屑
    +    </p>
    +</div>
    +
    + + +
    + + + \ No newline at end of file diff --git a/WF/xOne/buttons.html b/WF/xOne/buttons.html new file mode 100644 index 000000000000..5be8de458f90 --- /dev/null +++ b/WF/xOne/buttons.html @@ -0,0 +1,336 @@ + + + + +网页中的按钮 + + + + + + + + +
    +

    网页中的按钮

    +

    关于按钮,BT项目中已经做了大量的研究,也比较完美了,唯一的缺憾是不支持IE6以及在Firefox及IE7中表现的并不一致。

    +

    这里专门针对网页中的按钮做了进一步的测试研究与实践,提供了兼容的解决方案能完全满足你的需求,并能与网站的其他组件友好的组合使用。(由于之前已经做过一部分CSS通用按钮测试,此处继续前面的测试进行组件开发,这里主要侧重于应用级。)

    + +
    +

    buttons.css

    +

    按钮尺寸5种、类别3+种、样式N种、风格3+种 可任意组合

    +

    风格包含默认的BT,还有metro_style、google_style

    + + + + + + +

    + + + + + + + + + + + + + + + + +

    按钮禁用样式

    + + + + + + +

    + + + + + + + + + + + + + + + +

    + + + +

    + + + +普通按钮 + +

    关于按钮与图标的组合,此处暂未定稿,初步规划 icon 尺寸3种(14px,18px,24px),而与字体集组合则全兼容没有问题。

    +

    big:icon-18px/font-16px/margin-top:-1px;
    large:icon-24px/font-20px/margin-top:0;

    + +
    + + + + + +
    + +

    若使用字体集,则 ICON 统一使用 .iconfont 样式

    + +
    + + + + + + +

    如果按钮不满足想要的宽度,可使用&nbsp;占空白符位,如下: 不要使用全角空格,低版本IE下出现按钮中文本不局中现象

    + +
    + +
    +
    +<button class="btn btn-mini">迷你按钮</button>
    +<button class="btn btn-small">小按钮</button>
    +<button class="btn">默认按钮</button>
    +<button class="btn btn-big">大按钮</button>
    +<button class="btn btn-large">超大按钮</button>
    +
    +<button class="btn btn-primary">主按钮</button>
    +<button class="btn btn-info">次按钮</button>
    +<button class="btn btn-success">成功</button>
    +<button class="btn btn-warning">警告</button>
    +<button class="btn btn-danger">危险</button>
    +<button class="btn btn-inverse">反色</button>
    +<button class="btn btn-link">链接</button>
    +
    +<button class="btn btn-buff">浅黄</button>
    +<button class="btn btn-orange">橙色</button>
    +<button class="btn btn-pink">玫红</button>
    +
    +<button class="btn btn-large btn-block">块级按钮</button>
    +
    +<button class="btn disabled">禁用按钮</button>
    +<button class="btn"><i class="icon--user"></i> 组合按钮</button>
    +<span class="btn">普通按钮</span>
    +
    +

    问题及注意事项:

    +

    按钮使用中的注意事项,请参考 按钮兼容最佳方案

    + +

    按钮组

    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +<div class="btn-group">
    +  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    +    Action
    +    <span class="caret"></span>
    +  </a>
    +  <ul class="dropdown-menu">
    +    <!-- dropdown menu links -->
    +  </ul>
    +</div>
    +
    + +

    按钮菜单

    +
    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    +<div class="btn-group">
    +  <button class="btn">Action</button>
    +  <button class="btn dropdown-toggle" data-toggle="dropdown">
    +    <span class="caret"></span>
    +  </button>
    +  <ul class="dropdown-menu">
    +    <!-- dropdown menu links -->
    +    <li><a href="#">动作</a></li>
    +    <li><a href="#">另一个动作</a></li>
    +    <li><a href="#">其他</a></li>
    +    <li class="divider"></li>
    +    <li><a href="#">被间隔的链接</a></li>
    +  </ul>
    +</div>
    +
    +
    + + + + + + + + \ No newline at end of file diff --git a/WF/xOne/countdown.html b/WF/xOne/countdown.html new file mode 100644 index 000000000000..8263a3fd87fb --- /dev/null +++ b/WF/xOne/countdown.html @@ -0,0 +1,105 @@ + + + + +倒计时 + + + + + + + + +
    +

    倒计时插件

    +

    实现可定制的倒计时

    +

    依赖:http://pic.lvmama.com/min/index.php?f=/js/new_v/jquery-1.7.2.min.js,/js/ui/lvmamaUI/lvmamaUI.js

    + +
    +

    默认传入倒计时间的 UNIX 时间戳 即可

    +
    +
    默认效果:
    +
    2531275871
    + +
    调整时间差:
    +
    2531275871
    + +
    自定义效果:
    +
    2531275871
    + +
    自定义时间格式:
    +
    2531275871
    + +
    自定义结束提醒:
    +
    5000
    + +
    +
    +
    +<span class="time">5000</span>  标签内为倒计时间
    +
    +<script>
    +$(function(){
    +    // 默认调用倒计时 
    +    $("span.time").ui("countdown");
    +    
    +    // 自定义参数说明
    +    $("span.countdown").ui("countdown",{
    +        format: "dd:hh:mm:ss",  // 自定义倒计时类型 现支持 dd:hh:mm:ss(默认) hh:mm:ss dd:hh:mm mm:ss 四种格式
    +        prezero: true,  // 设置前导零
    +        effect : false,  // 自定义样式效果
    +        overtips : "已结束",  // 自定义结束提醒
    +        timediff : 0  // 调整时间差,单位毫秒
    +    });
    +});
    +</script>
    +
    + + +
    + + + + + \ No newline at end of file diff --git a/WF/xOne/css/xone.css b/WF/xOne/css/xone.css new file mode 100644 index 000000000000..a3b0cefcf0d3 --- /dev/null +++ b/WF/xOne/css/xone.css @@ -0,0 +1,67 @@ + +body{font:12px/22px Tahoma,Arial,\5b8b\4f53; color:#333; background:url(../images/bg.jpg) #fff center top no-repeat;} + +.element-invisible { + position: absolute !important; + clip: rect(1px 1px 1px 1px); +} + +.wrap{width:980px;} + +/* header */ +.header{position:relative;height:50px; background:#000;} + +/* hasfixed +#hasfixed{margin-top: 71px;} +#hasfixed .header{position: fixed;top: 0;left: 0;width: 100%;z-index: 999;} + +/* logo */ +.brand{ float:left; background:url(../img/logo.png) left center no-repeat; width:140px; height:30px; text-indent:-9999px; border-right:1px solid #444; margin:10px 20px 0 0} + +/* nav */ +.main-menu,.quick-menu{ padding:0;text-shadow:1px 1px 1px #33363B;position:relative;z-index:2;} +.main-menu{float:left;margin:10px 20px 0 0;font-size:14px;} +.quick-menu{float:right;margin-top:10px;} + +.nav li{ list-style-type:none; padding:0;float:left;position:relative;margin:0 1px 0 0} +.nav li a{color:#ddd;padding:5px 12px 6px;height:20px;line-height:20px;display:block;cursor: pointer;} +.nav li a:hover {text-decoration: none;} + +.nav a:hover,.nav .active a{color:#fff;background-color:#82CC00;} + +.nav-pills a,.active a{border-radius:3px} +.nav li:hover a{background-color:#132e00;color:#fff;} +.nav .active:hover a{background-color:#82CC00;} +.dropdown:hover .dropdown-menu {display:block} + +.sub-menu{position:absolute;top:28px;left:0;border-radius:0 0 4px 4px;min-width:106px;z-index:10;display:none;padding:4px 0;background-color:#132e00;line-height: 18px;font-size: 12px;} +.sub-menu li{float:none;margin-right: 0} +.sub-menu li a{padding:5px 12px;color:#bbb;display: block;} +.sub-menu li a:hover{background-color:#0f2500;color:#82CC00} + +.dropdown i{display:inline-block;margin:0 0 0 3px;position:relative;top:-2px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #999} + +.quick-menu a{padding:5px 10px;} + +/* search-form */ +.search-form{float:left;margin-top:10px;} +.search-form input{float: left;} +.search-input{border-radius:2px 0 0 2px;border:none;display:block;font-size:13px;height:20px;line-height:20px;padding:4px 8px;background-color:#eee;width:100px;color:#B3B3B3} +.search-input:focus{color:#444;background-color: #fff;} +.search-submit{background-color: #8CAC52;border-radius: 0 2px 2px 0;height: 28px;color:#fff;padding:0 10px;border: none;cursor: pointer;} +.search-submit:hover{background-color: #7BAB2E;} + +/* xOne 测试项目 +============================================================ */ + +/* .navbar +============================================================ */ + +.special_menu{padding:10px; font-size:12px;line-height:22px;overflow:hidden} +.special_menu a{margin-right:10px;color:#333;} +.special_menu h4{float:left;padding-right:10px;} + + + + + diff --git a/WF/xOne/form-element.html b/WF/xOne/form-element.html new file mode 100644 index 000000000000..3bad81a51e55 --- /dev/null +++ b/WF/xOne/form-element.html @@ -0,0 +1,167 @@ + + + + +表单 + + + + + + + + + + +
    + + + +
    +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    +
    + +
    + + + \ No newline at end of file diff --git a/WF/xOne/forms.html b/WF/xOne/forms.html new file mode 100644 index 000000000000..bbf183e42f01 --- /dev/null +++ b/WF/xOne/forms.html @@ -0,0 +1,411 @@ + + + + +表单 + + + + + + + + +
    +

    表单布局及应用实例

    +

    这里实现基本的四种表单布局实例,测试各种使用环境,方便调试引用等

    +

    一些定制参数:

    +
      +
    • 表单基本单元 control-group controls input-*
    • +
    • 四种布局 form[-default] .form-inline .form-hor .form-search
    • +
    • 六种尺寸 .input-min .input-mini .input-small .input-medium .input-large .input-xxlarge
    • +
    • 定制 .input-date .help-block .help-inline
    • +
    +
    +

    基本表单控件 无论如何复杂的表单布局,都由基本表单控件组合构成

    +
    +

    input

    +
    + +
    + +

    例如 块级的帮助文本。

    +
    +
    +
    + +
    + +

    帮助信息

    +
    +
    +
    + +
    + +
    +
    + +

    单/复选项

    +
    + +
    + + +
    +
    +
    + +
    + + + +
    +
    +
    + +
    + + +
    +
    +
    + +
    + + + +
    +
    + + +

    下拉框/菜单

    +
    + +
    + +
    +
    +
    + +
    + +
    +
    + +

    按钮

    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    + +
    + + +

    关于disabled状态的按钮,需要再设置一种表现形式 btn-disabled,暂定灰色,不可点击状态(低版本IE 会添加文字投影)

    +
    +
    + + + + + +
    + + + +

    内联布局 同一行

    + + + +
    + +
    +
    + + + + +
    + + + + + + + +
    +

    垂直表单(默认)

    +
    +
    + 表单标题 + + + 例如 块级的帮助文本。 + + +
    +
    +
    + +

    搜索表单

    + +
    + +

    内联表单

    +
    + + + + +
    +
    + +

    水平表单

    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + +
    +
    +
    + +
    + +

    组合框 按钮紧邻输入框

    +
    + + +
    + +
    + +

    垂直表单(默认)

    +
    +
    + 表单标题 + + + 例如 块级的帮助文本。 + + +
    +
    +
    + +

    搜索表单

    + +
    + +

    内联表单

    +
    + + + + +
    +
    + +

    水平表单

    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + +
    +
    +
    + +
    + +

    组合框 按钮紧邻输入框

    +
    + + +
    + +
    + +
    + + +
    + +

    综合应用

    +

    实现常见的较为复杂的表单布局,可以使用表格、dl横向排列、或者扩展布局

    + +
    常见的一些布局元素
    +

    + + + + +

    + +

    + + + + + + + + + + + +

    + +
    使用表格 使用了 table 但适应性最强
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    驴妈妈用户名:
    *真实姓名:
    *性别: + + +
    *年龄: + + + + + + +
    *手机号:
    职业:
    月收入:
    Email:
    留言:
    验证码: 换一张
    + + + + +
    + + + + +
    + + + + + \ No newline at end of file diff --git a/WF/xOne/htmlchar.html b/WF/xOne/htmlchar.html new file mode 100644 index 000000000000..f2ce5ced3241 --- /dev/null +++ b/WF/xOne/htmlchar.html @@ -0,0 +1,450 @@ + + + + +HTML特殊符号对照表 + + + + + + + + +
    +

    HTML特殊符号对照表

    +

    这是html特殊符号对照表,建议将最常用的记住!如: &nbsp; &lt; &gt; &yen; &bull; &hellip; &rarr; &raquo;

    + +
    +
    +

    HTML特殊字符编码大全

    + 更多 » +
    +
    +

    HTML特殊符号对照表

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    特殊符号命名实体十进制编码特殊符号命名实体十进制编码
    &&amp;&#38;
    Α&Alpha;&#913;Β&Beta;&#914;
    Γ&Gamma;&#915;Δ&Delta;&#916;
    Ε&Epsilon;&#917;Ζ&Zeta;&#918;
    Η&Eta;&#919;Θ&Theta;&#920;
    Ι&Iota;&#921;Κ&Kappa;&#922;
    Λ&Lambda;&#923;Μ&Mu;&#924;
    Ν&Nu;&#925;Ξ&Xi;&#926;
    Ο&Omicron;&#927;Π&Pi;&#928;
    Ρ&Rho;&#929;Σ&Sigma;&#931;
    Τ&Tau;&#932;Υ&Upsilon;&#933;
    Φ&Phi;&#934;Χ&Chi;&#935;
    Ψ&Psi;&#936;Ω&Omega;&#937;
    α&alpha;&#945;β&beta;&#946;
    γ&gamma;&#947;δ&delta;&#948;
    ε&epsilon;&#949;ζ&zeta;&#950;
    η&eta;&#951;θ&theta;&#952;
    ι&iota;&#953;κ&kappa;&#954;
    λ&lambda;&#955;μ&mu;&#956;
    ν&nu;&#957;ξ&xi;&#958;
    ο&omicron;&#959;π&pi;&#960;
    ρ&rho;&#961;ς&sigmaf;&#962;
    特殊符号命名实体十进制编码特殊符号命名实体十进制编码
    σ &sigma;&#963;τ &tau;&#964;
    υ &upsilon;&#965;φ &phi;&#966;
    χ &chi;&#967;ψ &psi;&#968;
    ω &omega;&#969;ϑ &thetasym;&#977;
    ϒ &upsih;&#978;ϖ &piv;&#982;
    &bull;&#8226;&hellip;&#8230;
    &prime;&#8242;&Prime;&#8243;
    &oline;&#8254;&frasl;&#8260;
    &weierp;&#8472;&image;&#8465;
    &real;&#8476;&trade;&#8482;
    &alefsym;&#8501;&larr;&#8592;
    &uarr;&#8593;&rarr;&#8594;
    &darr;&#8595;&harr;&#8596;
    &crarr;&#8629;&lArr;&#8656;
    &uArr;&#8657;&rArr;&#8658;
    &dArr;&#8659;&hArr;&#8660;
    &forall;&#8704;&part;&#8706;
    &exist;&#8707;&empty;&#8709;
    &nabla;&#8711;&isin;&#8712;
    &notin;&#8713;&ni;&#8715;
    &prod;&#8719;&sum;&#8721;
    特殊符号命名实体十进制编码特殊符号命名实体十进制编码
    &minus;&#8722;&lowast;&#8727;
    &radic;&#8730;&prop;&#8733;
    &infin;&#8734;&ang;&#8736;
    &and;&#8869;&or;&#8870;
    &cap;&#8745;&cup;&#8746;
    &int;&#8747;&there4;&#8756;
    &sim;&#8764;&cong;&#8773;
    &asymp;&#8773;&ne;&#8800;
    &equiv;&#8801;&le;&#8804;
    &ge;&#8805;&sub;&#8834;
    &sup;&#8835;&nsub;&#8836;
    &sube;&#8838;&supe;&#8839;
    &oplus;&#8853;&otimes;&#8855;
    &perp;&#8869;&sdot;&#8901;
    &lceil;&#8968;&rceil;&#8969;
    &lfloor;&#8970;&rfloor;&#8971;
    &loz;&#9674;&spades;&#9824;
    &clubs;&#9827;&hearts;&#9829;
    &diams;&#9830; &nbsp;&#160;
    ¡ &iexcl;&#161;¢ &cent;&#162;
    £ &pound;&#163;¤ &curren;&#164;
    特殊符号命名实体十进制编码特殊符号命名实体十进制编码
    ¥ &yen;&#165;¦ &brvbar;&#166;
    § &sect;&#167;¨ &uml;&#168;
    © &copy;&#169;ª &ordf;&#170;
    « &laquo;&#171;» &raquo;&#187;
    ¬ &not;&#172;® &reg;&#174;
    ¯ &macr;&#175;° &deg;d&#176;
    ± &plusmn;&#177;ˆ &circ;&#710;
    ² &sup2;&#178;³ &sup3;&#179;
    ´ &acute;&#180;· &middot;&#183;
    µ &micro;&#181;­ &shy;&#173;
    ½ &frac12;&#189;¼ &frac14;&#188;
    &frac13;&#8531;¾ &frac34;&#190;
    &lsquo;&#8216;&rsquo;&#8217;
    &ldquo;&#8220;&rdquo;&#8221;
    &lsaquo;&#8249;&rsaquo;&#8250;
    &ndash;&#8211;&mdash;&#8212;
    &dagger;&#8224;&Dagger;&#8225;
    &permil;&#8240;&euro;&#8364;
    + + +
    +
    + +
    + + \ No newline at end of file diff --git a/WF/xOne/images/bg.jpg b/WF/xOne/images/bg.jpg new file mode 100644 index 000000000000..a301501abd84 Binary files /dev/null and b/WF/xOne/images/bg.jpg differ diff --git a/WF/xOne/img/glyphicons-halflings-white.png b/WF/xOne/img/glyphicons-halflings-white.png new file mode 100644 index 000000000000..3bf6484a29d8 Binary files /dev/null and b/WF/xOne/img/glyphicons-halflings-white.png differ diff --git a/WF/xOne/img/glyphicons-halflings.png b/WF/xOne/img/glyphicons-halflings.png new file mode 100644 index 000000000000..a9969993201f Binary files /dev/null and b/WF/xOne/img/glyphicons-halflings.png differ diff --git a/WF/xOne/img/logo.png b/WF/xOne/img/logo.png new file mode 100644 index 000000000000..71fde6b91e53 Binary files /dev/null and b/WF/xOne/img/logo.png differ diff --git a/WF/xOne/index.html b/WF/xOne/index.html new file mode 100644 index 000000000000..40b85d37d5a1 --- /dev/null +++ b/WF/xOne/index.html @@ -0,0 +1,402 @@ + + + + +wf.css - 测试网页reset、排版与公共组件 + + + + + + + + + + +
    +

    wf.css 集成了各种组件css

    +

    buttons.css http://pic.lvmama.com/styles/v3/button.css

    +

    按钮尺寸、类别 可组合

    + + + + + + +

    + + + + + + + + + + + + + + +

    按钮禁用样式

    + + + + + + +

    + + + + + + + + + + + + + +

    + + + +

    + + + + +

    pages 分页组件 http://pic.lvmama.com/styles/v3/plugin.css

    + + + + + +

    升级版

    +

    此设置默认为橙色,文字右对齐

    +
    +
    上一页1下一页
    +
    + + + + +
    +
    上一页1下一页
    +
    + + + + + + + + + + + + + + +

    信息提示框

    +

    一般信息ico

    + + + + + + + + + + + + +

    简单块级行提醒

    + +

    + 安全提醒:自行编辑,非系统消息 +

    +
    + + 消息提醒:自行编辑,非系统消息 +
    +
    + + 警告提醒:自行编辑,非系统消息 +
    +
    + + 错误提醒:自行编辑,非系统消息 +
    +
    + + 成功提醒:自行编辑,非系统消息 +
    +
    + + 帮助提醒:自行编辑,非系统消息 +
    +
    + + 停止提醒:自行编辑,非系统消息 +
    +
    + + 等待提醒:自行编辑,非系统消息 +
    +

    内联行提醒

    + + + 安全提醒:自行编辑,非系统消息 + + + + + +

    操作反馈框

    + +
    +

    恭喜!操作成功!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    Binggo!操作状态提醒!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    注意!操作有风险,付款需谨慎!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    对不起!操作有误!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    恭喜!操作成功!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    有疑问?您可以参考以下内容!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    警告!此删除操作后数据将不可恢复!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    驴妈妈正在努力的为您查找,请稍后…

    +

    您现在可以去畅游网络了。

    +
    + + + + +

    包含按钮链接的提醒框仍在筹划中……

    + +
    + +
    +
    提示标题
    +
    提示描述
    +
    + 按钮 + 链接 +
    +
    +
    + + +

    常用表格

    + + + + + + + + + + + +
    表格布局承载布局元素这是一种常用的布局方式
    布局样式表单,信息展示等两列方便对齐,如:左侧右对齐,右侧左对齐且水平对齐
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名称样式描述 此表为.table-info
    默认表格没有任何其他样式,仅是行和列,无边框
    单边表格.table仅使用一组横向边线
    简单信息表.table-info存放一般表格信息
    有边框的表格.table-border添加外边框
    有:hover的表格.table-hover添加悬停/滑过(hover)状态
    奇偶相间的表格.table-striped行间添加奇偶背景色 (1, 3, 5, etc)
    100%宽度表格.table-full100%宽度
    + + + + + + + + + + + + + + +
    名称默认表格
    样式
    描述没有任何其他样式,仅是行和列,无边框
    +

    表格布局表单

    + + + + + + + + + +
    用户名:
    密码:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    驴妈妈用户名:
    *真实姓名:
    *性别: + + +
    *年龄: + + + + + +
    *手机号:
    职业:
    月收入:
    Email:
    留言:
    验证码: 换一张
    + + +

    + + + + +

    + +

    + + + + + + + + + + + +

    + + + + + + + + + + + diff --git a/WF/xOne/less/README.md b/WF/xOne/less/README.md new file mode 100644 index 000000000000..d423f2666da5 --- /dev/null +++ b/WF/xOne/less/README.md @@ -0,0 +1,108 @@ +Pandora 样式组 +============= + +Pandora样式组规划结构参照Bootstrap项目,其对页面组件功能实现具备非常良好的划分,值得广而用之。 + +底层样式改动较大,整合normalize.css,BT,typo.css,针对新的结构指定了其功能实现,如下: + +- normalize.css 实现浏览器无差异化的标签默认属性 +- reset.css 传统的重置样式,生产线使用 +- typo-dev.css 实现统一的标签默认样式(非生产线) +- typo.css 扩展实现统一的标签样式(可用于生产线) +- combo.css 内置的便捷组合样式 + +一些说明: + + same.css + 包含small,strong,em,del,b,i,a,p,blockquote,q,code,pre,sub,sup + + typo-dev.css + 包含ul/ol/dl/h1~h6,p + + typo.css 在typo样式下起效 + 包含ul/ol/dl/h1~h6,p + +效果可通过排版测试页面 typo.html 浏览测试。 + +**注:**实际开发使用core样式,具备code/ul/ol/dl等统一属性,且良好一致的排版效果及大量的内置组合样式可以提高开发效率且使用灵活。 + + Pandora CSS架构 + + normalize.css |- core-dev.css + typo-dev.css | + combo.css | + + normalize.css |- core.css + reset.css | + typo.css | + combo.css | + + module.css + plugin.css + +此处系Pandora项目保留字: + +> .btn + + 以下为Bootstrap中的样式组结构(暂未做修改仅供参考) + /* Core variables and mixins */ + /* Modify this for custom colors, font-sizes, etc */ + @import "variables.css"; + @import "mixins.css"; + + /* CSS Reset + @import "normalize.css"; + @import "reset.css"; + @import "combo.css"; + @import "module.css"; + */ + /* Grid system and page structure */ + @import "scaffolding.css"; + @import "grid.css"; + @import "layouts.css"; + + /* Base CSS */ + @import "type.css"; + @import "code.css"; + @import "forms.css"; + @import "tables.css"; + + /* Components: common */ + @import "sprites.css"; + @import "dropdowns.css"; + @import "wells.css"; + @import "component-animations.css"; + @import "close.css"; + + /* Components: Buttons & Alerts */ + @import "buttons.css"; + @import "button-groups.css"; + @import "alerts.css"; /* Note: alerts share common CSS with buttons and thus have styles in buttons.css */ + + /* Components: Nav */ + @import "navs.css"; + @import "navbar.css"; + @import "breadcrumbs.css"; + @import "pagination.css"; + @import "pager.css"; + + /* Components: Popovers */ + @import "modals.css"; + @import "tooltip.css"; + @import "popovers.css"; + + /* Components: Misc */ + @import "thumbnails.css"; + @import "media.css"; + @import "labels-badges.css"; + @import "progress-bars.css"; + @import "accordion.css"; + @import "carousel.css"; + @import "hero-unit.css"; + + /* Utility classes */ + @import "utilities.css"; /* Has to be last to override when necessary */ + + /* Plugin classes */ + @import "plugin.css"; + diff --git a/WF/xOne/less/alerts.css b/WF/xOne/less/alerts.css new file mode 100644 index 000000000000..26f94be0df34 --- /dev/null +++ b/WF/xOne/less/alerts.css @@ -0,0 +1,66 @@ + +/*! + * alert v0.1 + * Adapted from https://github.com/webcoding/cnBootstrap + */ + +.alert { + padding: 8px 35px 8px 14px; + margin-bottom: 20px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + background-color: #fcf8e3; + border: 1px solid #fbeed5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.alert, +.alert h4 { + color: #c09853; +} +.alert h4 { + margin: 0; +} +.alert .close { + position: relative; + top: -2px; + right: -21px; + line-height: 20px; +} +.alert-success { + background-color: #dff0d8; + border-color: #d6e9c6; + color: #468847; +} +.alert-success h4 { + color: #468847; +} +.alert-danger, +.alert-error { + background-color: #f2dede; + border-color: #eed3d7; + color: #b94a48; +} +.alert-danger h4, +.alert-error h4 { + color: #b94a48; +} +.alert-info { + background-color: #d9edf7; + border-color: #bce8f1; + color: #3a87ad; +} +.alert-info h4 { + color: #3a87ad; +} +.alert-block { + padding-top: 14px; + padding-bottom: 14px; +} +.alert-block > p, +.alert-block > ul { + margin-bottom: 0; +} +.alert-block p + p { + margin-top: 5px; +} diff --git a/WF/xOne/less/button-groups.css b/WF/xOne/less/button-groups.css new file mode 100644 index 000000000000..4ee1af1ee434 --- /dev/null +++ b/WF/xOne/less/button-groups.css @@ -0,0 +1,422 @@ + +/* + @名称: button-groups.css + @功能: 按钮组 + */ + +.btn-group { + position: relative; + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; + font-size: 0; + vertical-align: middle; + white-space: nowrap; + *margin-left: .3em; +} +.btn-group:first-child { + *margin-left: 0; +} +.btn-group + .btn-group { + margin-left: 5px; +} +.btn-toolbar { + font-size: 0; + margin-top: 10px; + margin-bottom: 10px; +} +.btn-toolbar > .btn + .btn, +.btn-toolbar > .btn-group + .btn, +.btn-toolbar > .btn + .btn-group { + margin-left: 5px; +} +.btn-group > .btn { + position: relative; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} +.btn-group > .btn + .btn { + margin-left: -1px; +} +.btn-group > .btn, +.btn-group > .dropdown-menu, +.btn-group > .popover { + font-size: 14px; +} +.btn-group > .btn-mini { + font-size: 10.5px; +} +.btn-group > .btn-small { + font-size: 11.9px; +} +.btn-group > .btn-large { + font-size: 17.5px; +} +.btn-group > .btn:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; +} +.btn-group > .btn:last-child, +.btn-group > .dropdown-toggle { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; +} +.btn-group > .btn.large:first-child { + margin-left: 0; + -webkit-border-top-left-radius: 6px; + -moz-border-radius-topleft: 6px; + border-top-left-radius: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + border-bottom-left-radius: 6px; +} +.btn-group > .btn.large:last-child, +.btn-group > .large.dropdown-toggle { + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topright: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-bottomright: 6px; + border-bottom-right-radius: 6px; +} +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active { + z-index: 2; +} +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} +.btn-group > .btn + .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; + -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + *padding-top: 5px; + *padding-bottom: 5px; +} +.btn-group > .btn-mini + .dropdown-toggle { + padding-left: 5px; + padding-right: 5px; + *padding-top: 2px; + *padding-bottom: 2px; +} +.btn-group > .btn-small + .dropdown-toggle { + *padding-top: 5px; + *padding-bottom: 4px; +} +.btn-group > .btn-large + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; + *padding-top: 7px; + *padding-bottom: 7px; +} +.btn-group.open .dropdown-toggle { + background-image: none; + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); +} +.btn-group.open .btn.dropdown-toggle { + background-color: #e6e6e6; +} +.btn-group.open .btn-primary.dropdown-toggle { + background-color: #0044cc; +} +.btn-group.open .btn-warning.dropdown-toggle { + background-color: #f89406; +} +.btn-group.open .btn-danger.dropdown-toggle { + background-color: #bd362f; +} +.btn-group.open .btn-success.dropdown-toggle { + background-color: #51a351; +} +.btn-group.open .btn-info.dropdown-toggle { + background-color: #2f96b4; +} +.btn-group.open .btn-inverse.dropdown-toggle { + background-color: #222222; +} +.btn .caret { + margin-top: 8px; + margin-left: 0; +} +.btn-large .caret { + margin-top: 6px; +} +.btn-large .caret { + border-left-width: 5px; + border-right-width: 5px; + border-top-width: 5px; +} +.btn-mini .caret, +.btn-small .caret { + margin-top: 8px; +} +.dropup .btn-large .caret { + border-bottom-width: 5px; +} +.btn-primary .caret, +.btn-warning .caret, +.btn-danger .caret, +.btn-info .caret, +.btn-success .caret, +.btn-inverse .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; +} +.btn-group-vertical { + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; +} +.btn-group-vertical > .btn { + display: block; + float: none; + max-width: 100%; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} +.btn-group-vertical > .btn + .btn { + margin-left: 0; + margin-top: -1px; +} +.btn-group-vertical > .btn:first-child { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} +.btn-group-vertical > .btn:last-child { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} +.btn-group-vertical > .btn-large:first-child { + -webkit-border-radius: 6px 6px 0 0; + -moz-border-radius: 6px 6px 0 0; + border-radius: 6px 6px 0 0; +} +.btn-group-vertical > .btn-large:last-child { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} +.dropup, +.dropdown { + position: relative; +} +.dropdown-toggle { + *margin-bottom: -3px; +} +.dropdown-toggle:active, +.open .dropdown-toggle { + outline: 0; +} +.caret { + display: inline-block; + width: 0; + height: 0; + vertical-align: top; + border-top: 4px solid #000000; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + content: ""; +} +.dropdown .caret { + margin-top: 8px; + margin-left: 2px; +} +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + background-color: #ffffff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + *border-right-width: 2px; + *border-bottom-width: 2px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} +.dropdown-menu.pull-right { + right: 0; + left: auto; +} +.dropdown-menu .divider { + *width: 100%; + height: 1px; + margin: 9px 1px; + *margin: -5px 0 5px; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid #ffffff; +} +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 20px; + color: #333333; + white-space: nowrap; +} +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus, +.dropdown-submenu:hover > a, +.dropdown-submenu:focus > a { + text-decoration: none; + color: #ffffff; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); +} +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: #ffffff; + text-decoration: none; + outline: 0; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); +} +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: #999999; +} +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + cursor: default; +} +.open { + *z-index: 1000; +} +.open > .dropdown-menu { + display: block; +} +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + border-top: 0; + border-bottom: 4px solid #000000; + content: ""; +} +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; +} +.dropdown-submenu { + position: relative; +} +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} +.dropup .dropdown-submenu > .dropdown-menu { + top: auto; + bottom: 0; + margin-top: 0; + margin-bottom: -2px; + -webkit-border-radius: 5px 5px 5px 0; + -moz-border-radius: 5px 5px 5px 0; + border-radius: 5px 5px 5px 0; +} +.dropdown-submenu > a:after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: #cccccc; + margin-top: 5px; + margin-right: -10px; +} +.dropdown-submenu:hover > a:after { + border-left-color: #ffffff; +} +.dropdown-submenu.pull-left { + float: none; +} +.dropdown-submenu.pull-left > .dropdown-menu { + left: -100%; + margin-left: 10px; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} +.dropdown .dropdown-menu .nav-header { + padding-left: 20px; + padding-right: 20px; +} +.typeahead { + z-index: 1051; + margin-top: 2px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + diff --git a/WF/xOne/less/buttons.css b/WF/xOne/less/buttons.css new file mode 100644 index 000000000000..7dcd10cc0965 --- /dev/null +++ b/WF/xOne/less/buttons.css @@ -0,0 +1,614 @@ + +/* + @名称: buttons.css + @功能: 按钮样式 + Adapted from Bootstrap buttons.css + */ + +button, +input { + line-height: normal; + + /* IE6/7 内间距宽度一致 */ + *overflow: visible; +} + +.btn { + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; + padding: 4px 12px; + margin-bottom: 0; + font-size: 14px; + line-height: 20px; + text-align: center; + vertical-align: middle; + cursor: pointer; + color: #333333; + background-color: #f5f5f5; + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); + background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); + border-color: #e6e6e6 #e6e6e6 #bfbfbf; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #e6e6e6; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + border: 1px solid #cccccc; + *border: 0; + border-bottom-color: #b3b3b3; + *margin-left: .3em; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); +} +.btn:hover, +.btn:focus, +.btn:active, +.btn.active, +.btn.disabled, +.btn[disabled] { + color: #333333; + background-color: #e6e6e6; + *background-color: #d9d9d9; +} +.btn:active, +.btn.active { + background-color: #cccccc \9; +} +.btn:first-child { + *margin-left: 0; +} +.btn:hover, +.btn:focus { + color: #333333; + text-decoration: none; + background-position: 0 -15px; + -webkit-transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + transition: background-position 0.1s linear; +} +.btn:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +.btn.active, +.btn:active { + background-image: none; + outline: 0; + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); +} +.btn.disabled, +.btn[disabled] { + cursor: default; + background-image: none; + opacity: 0.65; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.btn-big { + padding: 7px 15px; + font-size: 14px; + font-weight: bold; +} +.btn-big [class^="icon-"], +.btn-big [class*=" icon-"] { + margin-top: 2px; +} +.btn-large { + padding: 11px 19px; + font-size: 18px; + font-weight: bold; +} +.btn-large [class^="icon-"], +.btn-large [class*=" icon-"] { + margin-top: 4px; +} +.btn-small { + padding: 2px 10px; + font-size: 12px; +} +.btn-small [class^="icon-"], +.btn-small [class*=" icon-"] { + margin-top: 0; +} +.btn-mini [class^="icon-"], +.btn-mini [class*=" icon-"] { + margin-top: -1px; +} +.btn-mini { + padding: 0 6px; + font-size: 12px; +} +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.btn-block + .btn-block { + margin-top: 5px; +} +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; +} +.btn-primary.active, +.btn-warning.active, +.btn-danger.active, +.btn-success.active, +.btn-info.active, +.btn-inverse.active { + color: rgba(255, 255, 255, 0.75); +} +.btn-primary { + color: #ffffff; + background-color: #006dcc; + background-image: -moz-linear-gradient(top, #0088cc, #0044cc); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); + background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); + background-image: -o-linear-gradient(top, #0088cc, #0044cc); + background-image: linear-gradient(to bottom, #0088cc, #0044cc); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); + border-color: #0044cc #0044cc #002a80; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #0044cc; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active, +.btn-primary.active, +.btn-primary.disabled, +.btn-primary[disabled] { + color: #ffffff; + background-color: #0044cc; + *background-color: #003bb3; +} +.btn-primary:active, +.btn-primary.active { + background-color: #003399 \9; +} + +.btn-warning { + color: #ffffff; + background-color: #faa732; + background-image: -moz-linear-gradient(top, #fbb450, #f89406); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); + background-image: -webkit-linear-gradient(top, #fbb450, #f89406); + background-image: -o-linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); + border-color: #f89406 #f89406 #ad6704; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #f89406; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-warning:hover, +.btn-warning:focus, +.btn-warning:active, +.btn-warning.active, +.btn-warning.disabled, +.btn-warning[disabled] { + color: #ffffff; + background-color: #f89406; + *background-color: #df8505; +} +.btn-warning:active, +.btn-warning.active { + background-color: #c67605 \9; +} + +/* 新增样式 浅黄色buff 橙色orange 玫红色pink 白色white 暗灰色dark */ +.btn-buff { + color: #555555; + background-color: #fdf7ed; + background-image: -moz-linear-gradient(top, #fdf7ed, #ffdfa9); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdf7ed), to(#ffdfa9)); + background-image: -webkit-linear-gradient(top, #fdf7ed, #ffdfa9); + background-image: -o-linear-gradient(top, #fdf7ed, #ffdfa9); + background-image: linear-gradient(to bottom, #fdf7ed, #ffdfa9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffdf7ed', endColorstr='#ffffdfa9', GradientType=0); + border-color: #ffdfa9 #ffdfa9 #e8b96c; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #ffdfa9; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-buff:hover, +.btn-buff:focus, +.btn-buff:active, +.btn-buff.active, +.btn-buff.disabled, +.btn-buff[disabled] { + color: #333333; + background-color: #ffdfa9; + *background-color: #fdd38b; +} +.btn-buff:active, +.btn-buff.active { + background-color: #ffdfa9 \9; +} + +.btn-orange { + color: #ffffff; + background-color: #fe8500; + background-image: -moz-linear-gradient(top, #fd944a, #fd6932); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fd944a), to(#fd6932)); + background-image: -webkit-linear-gradient(top, #fd944a, #fd6932); + background-image: -o-linear-gradient(top, #fd944a, #fd6932); + background-image: linear-gradient(to bottom, #fd944a, #fd6932); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffd944a', endColorstr='#fffd6932', GradientType=0); + border-color: #fd6932 #fd6932 #e8b96c; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #fd6932; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-orange:hover, +.btn-orange:focus, +.btn-orange:active, +.btn-orange.active, +.btn-orange.disabled, +.btn-orange[disabled] { + color: #ffffff; + background-color: #fd6932; + *background-color: #f05400; +} +.btn-orange:active, +.btn-orange.active { + background-color: #fd6932 \9; +} + +.btn-pink { + color: #ffffff; + background-color: #fd238f; + background-image: -moz-linear-gradient(top, #fd238f, #de126f); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fd238f), to(#de126f)); + background-image: -webkit-linear-gradient(top, #fd238f, #de126f); + background-image: -o-linear-gradient(top, #fd238f, #de126f); + background-image: linear-gradient(to bottom, #fd238f, #de126f); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffd238f', endColorstr='#ffde126f', GradientType=0); + border-color: #de126f #de126f #e8b96c; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #de126f; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-pink:hover, +.btn-pink:focus, +.btn-pink:active, +.btn-pink.active, +.btn-pink.disabled, +.btn-pink[disabled] { + color: #ffffff; + background-color: #de126f; + *background-color: #df8505; +} +.btn-pink:active, +.btn-pink.active { + background-color: #de126f \9; +} + +.btn-white { + color: #333; + background-color: #f2f2f2; + background-image: -moz-linear-gradient(top, #ffffff, #ebebeb); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ebebeb)); + background-image: -webkit-linear-gradient(top, #ffffff, #ebebeb); + background-image: -o-linear-gradient(top, #ffffff, #ebebeb); + background-image: linear-gradient(to bottom, #ffffff, #ebebeb); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffebebeb', GradientType=0); + border-color: #ebebeb #ebebeb #F6F6F6; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #f6f6f6; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-white:hover, +.btn-white:focus, +.btn-white:active, +.btn-white.hover, +.btn-white.active, +.btn-white.disabled, +.btn-white[disabled] { + color: #333; + background-color: #f6f6f6; + background: linear-gradient(to bottom, #f6f6f6, #f0f0f0); + *background-color: #f0f0f0; +} +.btn-white:active, +.btn-white.active { + background-color: #f0f0f0 \9; +} + +.btn-dark { + color: #333; + background-color: #aaaaaa; + background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cccccc), to(#aaaaaa)); + background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa); + background-image: -o-linear-gradient(top, #cccccc, #aaaaaa); + background-image: linear-gradient(to bottom, #cccccc, #aaaaaa); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcccccc', endColorstr='#ffaaaaaa', GradientType=0); + border-color: #dddddd #aaaaaa #cccccc; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #cccccc; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-dark:hover, +.btn-dark:focus, +.btn-dark:active, +.btn-dark.hover, +.btn-dark.active, +.btn-dark.disabled, +.btn-dark[disabled] { + color: #333; + background-color: #cccccc; + background: linear-gradient(to bottom, #dddddd, #999999); + *background-color: #aaaaaa; +} +.btn-dark:active, +.btn-dark.active { + background-color: #aaaaaa \9; +} + +.btn-danger { + color: #ffffff; + background-color: #da4f49; + background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); + background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); + background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); + background-image: linear-gradient(to bottom, #ee5f5b, #bd362f); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0); + border-color: #bd362f #bd362f #802420; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #bd362f; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-danger:hover, +.btn-danger:focus, +.btn-danger:active, +.btn-danger.active, +.btn-danger.disabled, +.btn-danger[disabled] { + color: #ffffff; + background-color: #bd362f; + *background-color: #a9302a; +} +.btn-danger:active, +.btn-danger.active { + background-color: #942a25 \9; +} +.btn-success { + color: #ffffff; + background-color: #5bb75b; + background-image: -moz-linear-gradient(top, #62c462, #51a351); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); + background-image: -webkit-linear-gradient(top, #62c462, #51a351); + background-image: -o-linear-gradient(top, #62c462, #51a351); + background-image: linear-gradient(to bottom, #62c462, #51a351); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0); + border-color: #51a351 #51a351 #387038; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #51a351; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-success:hover, +.btn-success:focus, +.btn-success:active, +.btn-success.active, +.btn-success.disabled, +.btn-success[disabled] { + color: #ffffff; + background-color: #51a351; + *background-color: #499249; +} +.btn-success:active, +.btn-success.active { + background-color: #408140 \9; +} +.btn-info { + color: #ffffff; + background-color: #49afcd; + background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); + background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); + background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); + background-image: linear-gradient(to bottom, #5bc0de, #2f96b4); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); + border-color: #2f96b4 #2f96b4 #1f6377; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #2f96b4; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-info:hover, +.btn-info:focus, +.btn-info:active, +.btn-info.active, +.btn-info.disabled, +.btn-info[disabled] { + color: #ffffff; + background-color: #2f96b4; + *background-color: #2a85a0; +} +.btn-info:active, +.btn-info.active { + background-color: #24748c \9; +} +.btn-inverse { + color: #ffffff; + background-color: #363636; + background-image: -moz-linear-gradient(top, #444444, #222222); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); + background-image: -webkit-linear-gradient(top, #444444, #222222); + background-image: -o-linear-gradient(top, #444444, #222222); + background-image: linear-gradient(to bottom, #444444, #222222); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); + border-color: #222222 #222222 #000000; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + *background-color: #222222; + /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} +.btn-inverse:hover, +.btn-inverse:focus, +.btn-inverse:active, +.btn-inverse.active, +.btn-inverse.disabled, +.btn-inverse[disabled] { + color: #ffffff; + background-color: #222222; + *background-color: #151515; +} +.btn-inverse:active, +.btn-inverse.active { + background-color: #080808 \9; +} + +button.btn, +input[type="submit"].btn { + *padding-top: 3px; + *padding-bottom: 3px; +} +button.btn::-moz-focus-inner, +input[type="submit"].btn::-moz-focus-inner { + padding: 0; + border: 0; +} +button.btn.btn-large, +input[type="submit"].btn.btn-large { + *padding-top: 7px; + *padding-bottom: 7px; +} +button.btn.btn-small, +input[type="submit"].btn.btn-small { + *padding-top: 3px; + *padding-bottom: 3px; +} +button.btn.btn-mini, +input[type="submit"].btn.btn-mini { + *padding-top: 1px; + *padding-bottom: 1px; +} +.btn-link, +.btn-link:active, +.btn-link[disabled] { + background-color: transparent; + background-image: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.btn-link { + border-color: transparent; + cursor: pointer; + color: #0088cc; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} +.btn-link:hover, +.btn-link:focus { + color: #005580; + text-decoration: underline; + background-color: transparent; +} +.btn-link[disabled]:hover, +.btn-link[disabled]:focus { + color: #333333; + text-decoration: none; +} + + +.btn { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.btn-big { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.btn-large { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.btn-small { + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} +.btn-mini { + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} + +/* 按钮文字阴影 */ +/* 暂时不使用 +.btn, +.btn-buff { + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); +} +.btn-primary, +.btn-warning, +.btn-orange, +.btn-pink, +.btn-danger, +.btn-success, +.btn-info, +.btn-inverse { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} +*/ + + diff --git a/WF/xOne/less/code.css b/WF/xOne/less/code.css new file mode 100644 index 000000000000..8a1bd07a069d --- /dev/null +++ b/WF/xOne/less/code.css @@ -0,0 +1,57 @@ + +/*! + * Code (inline and block) + * ------------------------------ + */ + +code, +pre { + padding: 0 3px 2px; + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; + font-size: 12px; + color: #333333; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +code { + padding: 2px 4px; + color: #d14; + white-space: nowrap; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} + +pre { + display: block; + padding: 10px; + margin: 0 0 10px; + font-size: 13px; + line-height: 20px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +pre.prettyprint { + margin-bottom: 20px; +} +pre code { + padding: 0; + color: inherit; + white-space: pre; + white-space: pre-wrap; + background-color: transparent; + border: 0; +} +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} diff --git a/WF/xOne/less/combo.css b/WF/xOne/less/combo.css new file mode 100644 index 000000000000..4f9cad468b6c --- /dev/null +++ b/WF/xOne/less/combo.css @@ -0,0 +1,400 @@ + +/*! + * combo.css v0.9 + * 内置的便捷组合样式 + */ + +.hide-clip { + position: absolute !important; + clip: rect(1px 1px 1px 1px); +} +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; + margin: 0; +} + +/* 居中 */ +.bc { + margin-left: auto; + margin-right: auto; +} + +/* 浮动 */ +.fl, +.fr, +.inline { + display: inline; +} +.fl {float: left;} +.fr {float: right;} +.ib { + display:inline-block; + *display:inline; + *zoom:1; +} + +/* 隐藏显示 */ +.show, +.block { display: block; } +body .hide { display: none; } + +/* 清除默认属性 */ +body .none { + margin: 0; + padding: 0; + list-style: none; +} +/* 文本对齐 */ +.tl, +.text-left { + text-align: left; +} + +.tr, +.text-right { + text-align: right; +} + +.tc, +.text-center { + text-align: center; +} + +/* 颜色取值 */ +.red { color: red; } +.orange { color: orange; } +.pink { color: #e38; } +.gray { color: gray; } +.gray3 { color: #333; } +.gray6 { color: #666; } + +/* 文本大小、行高 */ +.f12 { font-size: 12px; } +.f14 { font-size: 14px; } +.f16 { font-size: 16px; } +.f18 { font-size: 18px; } +.f22 { font-size: 22px; } +.f24 { font-size: 24px; } +.f30 { font-size: 30px; } +.lh18 { line-height: 18px; } +.lh20 { line-height: 20px; } +.lh22 { line-height: 22px; } +.lh24 { line-height: 24px; } +.lh28 { line-height: 28px; } +.lh30 { line-height: 30px; } + +/* 外边界用组合css */ +.m10 { margin: 10px; } +.mt10 { margin-top: 10px; } +.mb10 { margin-bottom: 10px; } +.ml10 { margin-left: 10px; } +.mr10 { margin-right: 10px; } + +.mt20 { margin-top: 20px; } +.mb20 { margin-bottom: 20px; } + +.pd10 { padding: 10px; } +.pt10 { padding-top: 10px; } +.pb10 { padding-bottom: 10px; } +.pl10 { padding-left: 10px; } +.pr10 { padding-right: 10px; } +.plr10 { + padding-left: 10px; + padding-right: 10px; +} + +.no_m { margin : 0;} +.no_pd { padding: 0;} +.no_bg { background: none !important;} +.no_bd { border: none !important;} +.p_rel { position: relative;} +.p_abs { position: absolute;} + +/* 组合宽度 */ +.w10 { width: 10px; } +.w20 { width: 20px; } +.w30 { width: 30px; } +.w40 { width: 40px; } +.w50 { width: 50px; } +.w60 { width: 60px; } +.w70 { width: 70px; } +.w80 { width: 80px; } +.w90 { width: 90px; } +.w100 { width: 100px; } +.w110 { width: 110px; } +.w120 { width: 120px; } +.w130 { width: 130px; } +.w140 { width: 140px; } +.w150 { width: 150px; } +.w160 { width: 160px; } +.w170 { width: 170px; } +.w180 { width: 180px; } +.w190 { width: 190px; } +.w200 { width: 200px; } +.w210 { width: 210px; } +.w220 { width: 220px; } +.w230 { width: 230px; } +.w240 { width: 240px; } +.w250 { width: 250px; } +.w260 { width: 260px; } +.w270 { width: 270px; } +.w280 { width: 280px; } +.w290 { width: 290px; } +.w300 { width: 300px; } +.w310 { width: 310px; } +.w320 { width: 320px; } +.w330 { width: 330px; } +.w340 { width: 340px; } +.w350 { width: 350px; } +.w360 { width: 360px; } +.w370 { width: 370px; } +.w380 { width: 380px; } +.w390 { width: 390px; } +.w400 { width: 400px; } + +/* 字体,不要使用中文字体名 */ +.yahei { font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1"; } + +/* 使webkit支持10px以下字体 */ +.text-size { + -webkit-text-size-adjust:100%; + -ms-text-size-adjust:100%; +} + +/* 透明 */ +.opacity { + filter:alpha(opacity=50); + opacity:.5; +} +.text-ell { + display:block; + white-space:nowrap; + text-overflow:ellipsis; + overflow:hidden; +} + +/* ============================== + TPL布局样式 + ============================== */ + +/* 间隔空白 */ +.hr_a, +.hr_b, +.hr_c { + font-size: 1px; + line-height: 1px; + display: block; + clear: both; + overflow: hidden; +} +.hr_a { height:10px; } +.hr_b { height:5px; } +.hr_c { height:20px; } + +/* 无背景a元素定位链接 */ +.disa a { + display:block; + width:100%; + height:100%; + background:url(about:blank); + text-indent:-9999px; +} + + +/* 横向列表 */ +.hor li { + display:inline; + float:left; + *zoom:1; +} +.hor li a{ + display:block; + float:left; +} +/* 竖向列表 */ +.ver li { + display:block; + *zoom:1; +} +.ver li a{ + display:block; +} + +/* ============================== + 模块功能划分 + ============================== */ + +/* 半透明背景文字 */ +.text-cover { + position: relative; + display: block; + overflow: hidden; + *zoom:1; + text-align: center; +} +.text-cover img { + position: relative; + z-index: 1; + vertical-align: middle; +} +.text-cover span, +.text-cover i { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + width: 100%; + height: 25px; + line-height: 25px; + display: block; + text-decoration: none; +} +.text-cover span { + background: #000; + filter: alpha(opacity=50); + opacity: 0.5; +} + +.text-cover i{ + text-align: center; + color: #fff; +} +a.text-cover:hover { + text-decoration: none; + cursor: pointer; +} + +/* ============================== + UI设计 + ============================== */ + +/* 链接|展开 更多|详情 */ +.link-more, +.link-details, +.view-more, +.view-details, +.hide-more { + cursor: pointer; +} +.link-more {} +.link-details {} +.view-more {} +.view-details {} +.hide-more {} + +ol.num { + padding:5px 10px 10px 30px; +} +ol.num li { + list-style:decimal outside; + text-indent:0px; + line-height:20px; + margin:5px 0; +} + +/* 全站统一价格标签 */ +dfn, dfn i, .price +samp, samp i, .price { + font-family:arial,sans-serif; + font-style: normal; + color: #f60; +} +dfn i, samp i{ + font-size: 120%; +} + + +/* 字体颜色控制 */ +.border { + border: 1px solid #eee; +} + +.linear { + background: -webkit-gradient(linear,left top,left bottom,from(#fcfcfc),to(#f1f1f1)); + background: -moz-linear-gradient(top,#fcfcfc,#f1f1f1); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc',endColorstr='#f1f1f1'); + background: -o-linear-gradient(top,#fcfcfc,#f1f1f1); + background: linear-gradient(top,#fcfcfc,#f1f1f1); +} + +.B, .fb { font-weight: bold; } +.fnb { font-weight: normal; } + +.v-t { vertical-align: top; } +.v-m { vertical-align: middle; } +.v-b { vertical-align: bottom; } + + + + +.lead { + margin: 1em 0; + font-size: 1.4em; + font-weight: 200; + line-height: 1em; +} + + +.rose { color:#ff0080;} +.white { color: white;} +.red { color: red;} +.green { color: green;} +.blue { color: blue;} +.orange { color: orange;} +.gray { color: gray;} +.cc1{ color: #e38;} +.cc2{ color: #f60;} +.lightbox{ background:#f8f8f8; } + +.muted { + color: #999999; +} + +a.muted:hover, +a.muted:focus { + color: #808080; +} + +.text-warning { + color: #c09853; +} + +a.text-warning:hover, +a.text-warning:focus { + color: #a47e3c; +} + +.text-error { + color: #b94a48; +} + +a.text-error:hover, +a.text-error:focus { + color: #953b39; +} + +.text-info { + color: #3a87ad; +} + +a.text-info:hover, +a.text-info:focus { + color: #2d6987; +} + +.text-success { + color: #468847; +} + +a.text-success:hover, +a.text-success:focus { + color: #356635; +} + + + + diff --git a/WF/xOne/less/docs.css b/WF/xOne/less/docs.css new file mode 100644 index 000000000000..2de3c2f5fc29 --- /dev/null +++ b/WF/xOne/less/docs.css @@ -0,0 +1,409 @@ + +/*! + * Pandora's documentation styles + * Special styles for presenting Pandora's documentation and examples + */ + +body { + font: 14px/1.5 Tahoma,Arial,\5b8b\4f53,sans-serif; + color:#333; + background: #fcfcfc; + /* + background:url(../../xOne/images/bg.jpg) #fff center -8px no-repeat; */ +} + +/* 三种字体的对比 + * 宋体表示英文实在太差,既锐利有不好看 + * Tahoma 表示英文字母间还是太紧凑以至于链接起来了 + 如: cillum 中 ci TI 等字母都连在一起,可读性变差, + 但经过测试奇数字号表现良好,以下可用于测试 + * Arial 表示英文比Tahoma锐利清晰,字母之间独立不互联,但表示中文不若 Tahoma + * + * 结论,可针对实现英文区域使用 Arial字体样式.en或使用 Tahoma奇数字号 + 对 tag标签使用 Arial字体,垂直居中表现很好 + + 突然发现 Verdana不错,缺点是现实英文占用更多空间,字母稍大间隙稍大 + */ +body{font-family: \5b8b\4f53,sans-serif;} +body{font-family: Arial,sans-serif;} +body{font-family: Tahoma,Arial,sans-serif;} +body{font-family: Verdana,Tahoma,Arial,sans-serif;} +body .en{font-family:Arial,sans-serif;} + +a { + color: #245DC1; + text-decoration: none; +} +a:visited { + color: #7759AE; + _color: inherit; +} + +.warning-bar { + -webkit-box-shadow: inset 0 0 4px #777; + -moz-box-shadow: inset 0 0 4px #777; + box-shadow: inset 0 0 4px #777; + background-color: #dd4b39; + color: #fff; + padding: 6px 0; + text-align: center; +} +.warning-bar a { + color: #fff; + text-decoration: underline; +} + + +.wrap { width: 990px;} +.topbar { + background: #F5F5F5; + background-image: -moz-linear-gradient(top,#F7F7F7,#F5F5F5); + background-image: -webkit-linear-gradient(top,#F7F7F7,#F5F5F5); + background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F7F7F7),color-stop(1,#F5F5F5)); + background-image: linear-gradient(top,#F7F7F7,#F5F5F5); + border-bottom: 1px solid #EEE; + position: relative; + z-index: 2; + height: 28px; + line-height: 28px; + font-size: 12px; +} +.header { + background: #F5F5F5; + background: -moz-linear-gradient(top,#FAFAFA,#F5F5F5); + background: -webkit-linear-gradient(top,#FAFAFA,#F5F5F5); + background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(1,#F5F5F5)); + background: linear-gradient(top,#FAFAFA,#F5F5F5); + border-bottom: 1px solid #EEE; + color: #444; + min-height: 44px; + padding: 14px 15px 13px; +} +.brand:hover { text-decoration: none; cursor: pointer;} +.header h1 { + margin: 0; + float: left; + padding-top: 3px; +} +.header h1 small{ + vertical-align: middle; +} +.header h1 small:before { + border: solid #E5E5E5; + border-width: 0 0 0 1px; + content: ""; + float: left; + height: 26px; + margin: 0 12px 0 14px; +} +.search-util{ + float: right; + padding-top: 10px; +} +.search-util form { + margin: 0; +} + +/* +.google_style .searchbox input { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + background-color: rgba(0, 0, 0, 0); + border: 0; + font-size: 13px; + height: 28px; + margin: 0; + outline: none; + padding: 5px 2px; + width: 100%; +} +.google_style .searchbox { + position: absolute; + left: 0px; + right: 81px; + background-color: #FFF; + border: 1px solid rgba(0, 0, 0, 0.15); + border-top: 1px solid rgba(0, 0, 0, 0.25); + height: 28px; + padding-left: 4px; +} +.google_style .searchbox:hover { + -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px inset; + -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px inset; + box-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px inset; + border: 1px solid #4D90FE; +} +*/ +.search-icon { + display:inline-block; + /* text-indent: -9999px; + 针对inline-block元素使用此属性会导致IE6/7下该元素不显示 */ + + margin-left: 10px; + margin-right: 10px; +} +.google_style .navbar { + background: #325DA7; + background: -moz-linear-gradient(top, #4E78C2, #325DA7); + background: -webkit-linear-gradient(top, #4E78C2, #325DA7); + background: -webkit-gradient(linear, left top, left bottom, from(0,#4E78C2), to(1,#325DA7)); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e78c2', endColorstr='#325da7'); + background: linear-gradient(top,#4E78C2,#325DA7); + color: #fff; + padding: 0 15px; + *zoom: 1; +} + +.nav a { + display: block; +} +.nav i { + font-style: normal; +} +.main-nav { + margin:0; +} +.main-nav li { + display: inline; + float:left; +} +.main-nav a{ + /* 仅仅使用padding在IE6/7下效果不好,结合height与line-height控制更为精准 */ + /* padding: 10px 15px; */ + display: inline-block; + padding: 0 15px; + height: 40px; + line-height: 40px; + font-size: 14px; + + /* color: #ddd; */ +} +.main-nav a { + color:#e1e5f2; +} +.main-nav a:hover { + color:#fff; +} +.main-nav .active a { + color:#fff; + font-weight: bold; +} +.global { + background: #F6F9FF; + border: 1px solid #EFF2F9; + border-radius: 2px; + margin: 20px -16px; + padding-top: 20px; +} + +#pa-signature{ + clear:both; + margin:100px auto 0; + max-width:978px; + min-height:4px +} +#pa-signature:after,#pa-signature:before{ + content:""; + float:right; + height:4px +} +[dir=rtl]#pa-signature:after,[dir=rtl]#pa-signature:before{ + float:left +} +#pa-signature:after,[dir="rtl"]#pa-signature:before{ + border-left:34px solid #0089fa; + border-right:35px solid #ff002b +} +#pa-signature:before,[dir="rtl"]#pa-signature:after{ + border-left:35px solid #ffa900; + border-right:34px solid #00a753 +} +.footer{ + clear: both; + background: #F5F5F5; +} +.footer ul, +.footer p { + margin: 0; +} + +.footer-local, +.footer-global { + padding: 10px 15px; +} + +.footer-local { + background: #F9F9F9; + border-top: 1px solid #F5F5F5; + min-height: 24px; +} +.footer-global { + border-top: 1px solid #eee; +} + +.sidebar { + margin-top:20px; + border: 1px solid #ccc; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + background-color: #F9F9F9; +} +.sidebar { + width: 210px; + float: left; + display: inline; + margin-right: 20px; + line-height: 2; + background: #f5f5f5; +} + +.sidebar ul { padding: 10px 10px;} +.sidebar li { + position: relative; + *zoom:1; +} + +.sidebar small { + position: absolute; + right: 11px; + font-size: 12px; +} +.main { + overflow:hidden; + padding: 0 20px 30px; + *zoom:1; +} +.main section{ + padding: 1px 0; +} +.modules{ + margin-right: -10px; + +} +.modules a { + display: inline-block; + *zoom: 1; + width: 165px; + border: 1px solid #eee\9; /* all-IE */ + border: none\9\0; /* IE9 */ + /* + background: #fff1ff; + */ + background: #eee; + + box-shadow: 0 0 1px rgba(0, 0, 0, 0.55); + margin: 0 5px 10px 0; + padding: 3px 0; + overflow: hidden; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + border-left: 4px solid #ddd; + position: relative; +} +.modules a:hover { + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3); + color: #6C97C2; + text-decoration: none; +} +.modules a.todo { border-left: 4px solid #ccc; background: #eee; cursor: default; } +.modules a.doing { border-left: 4px solid #f80; background: #FDF1DC; } +.modules a.done { border-left: 4px solid #0b0; background: #DDFDCD; } + +span.label { margin-left:5px; } +span.todo { } +span.doing { background: #f80; } +span.done { background: #0b0; } + +.demolist dd a { + display: inline-block; + width: 100px; +} +/* code examples +-------------------------------------------------- */ + +/* Base class */ +.docs-example { + position: relative; + margin: 15px 0; + padding: 39px 19px 14px; + *padding-top: 19px; + background-color: #fff; + border: 1px solid #ddd; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +/* Echo out a label for the example */ +.docs-example:after { + content: "Example"; + position: absolute; + top: -1px; + left: -1px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + background-color: #f5f5f5; + border: 1px solid #ddd; + color: #9da0a4; + -webkit-border-radius: 4px 0 4px 0; + -moz-border-radius: 4px 0 4px 0; + border-radius: 4px 0 4px 0; +} + +/* Remove spacing between an example and it's code */ +.docs-example + pre, +.docs-example + .prettyprint { + margin-top: -20px; + padding-top: 15px; +} + +/* Tweak examples +------------------------- */ +.docs-example > p:last-child { + margin-bottom: 0; +} +.docs-example .table, +.docs-example .progress, +.docs-example .well, +.docs-example .alert, +.docs-example .hero-unit, +.docs-example .pagination, +.docs-example .navbar, +.docs-example > .nav, +.docs-example blockquote { + margin-bottom: 5px; +} +.bs-docs-example .pagination { + margin-top: 0; +} + + +.docs-example > h1:first-child, +.docs-example > h2:first-child, +.docs-example > h3:first-child, +.docs-example > h4:first-child, +.docs-example > p:first-child { + margin-top: 0; +} + + + +.google-style code{ color: green;} + + + +/* module test */ +.ui-tiptext, +.ui-tiptext-container{ margin-bottom:10px;} +.ui-tiptext-container .ui-tiptext{ margin-bottom:0;} +.ui-tipbox, +.ui-poptip{ + margin-bottom:10px; +} + diff --git a/WF/xOne/less/form.css b/WF/xOne/less/form.css new file mode 100644 index 000000000000..0874dbfdd3ff --- /dev/null +++ b/WF/xOne/less/form.css @@ -0,0 +1,313 @@ + +/* ------------------------------------------------------------ + form.css v1.0 + Adapted from Bootstrap forms.css + 对于不支持 input[type="text"] 属性选择符的IE6,由样式input-text控制 + 使用 IE7.js 修复效果很不好 +------------------------------------------------------------ */ + +/* reset中已包含 +button, +input { + line-height: normal; + /* IE6/7 内间距宽度一致 + *overflow: visible; +} + +*/ + + +i.req { + padding-right: 3px; + font-style: normal; + font-weight: normal; + color: red; +} + +/* 表单控件 */ + +label, +input, +button, +select, +textarea { + font-size: 12px; + font-weight: normal; + line-height: 20px; +} + +input, +button, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +form label { + display: block; + margin-bottom: 5px; +} + +select, +textarea, +.input-text, +.input-password, +.input-date, +.input-number, +.uneditable-input { + display: inline-block; + height: 20px; + padding: 4px 6px; + margin-bottom: 10px; + font-size: 14px; + line-height: 20px; + color: #555555; + vertical-align: middle; +} + +.input-radius { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +input, +textarea, +.uneditable-input { + width: 156px; +} + +textarea { + height: auto; +} + +textarea, +.input-text, +.input-password, +.input-date, +.input-number, +.uneditable-input { + background-color: #ffffff; + border: 1px solid #aabbcc; + -webkit-box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.075); + box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.075); + /* 载入页面刷新时出现黑框 + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -o-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; + */ +} + +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.textarea-focus, +.input-focus, +.input-text-focus, +.input-password-focus, +.input-date-focus, +.input-number-focus, +.uneditable-input:focus { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} + +input[type="radio"], +input[type="checkbox"], +.input-radio, +.input-checkbox { + margin: 3px 0 0; + margin-top: 2px \9; + *margin-top: 0; + line-height: normal; + cursor: pointer; +} + +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"], +.input-file, +.input-image, +.input-submit, +.input-reset, +.input-button, +.input-radio, +.input-checkbox { + width: auto; +} + +select, +input[type="file"], +.input-file { + height: 26px; + /* In IE7, the height of the select element cannot be changed by height, only font-size */ + + *margin-top: 4px; + /* For IE7, add top margin to align select with labels */ + + line-height: 30px; +} + +select { + width: 170px; + background-color: #ffffff; + border: 1px solid #aabbcc; +} + +select[multiple], +select[size], +.selects, +.select-multiple, +.select-size { + height: auto; +} + + + +.radio, +.checkbox { + min-height: 20px; + margin-right: 10px; +} + +.radio input[type="radio"], +.checkbox input[type="checkbox"], +.radio .input-radio, +.checkbox .input-checkbox { + /* float: left;*/ + margin-right: 3px; + vertical-align: text-top; +} + + +label.inline, +label.inline { + display: inline-block; + padding-top: 5px; + margin-bottom: 0; + vertical-align: middle; +} + + + + + + + + + + + + + +.help-block, +.help-inline { + color: #595959; +} + +.help-block { + display: block; + margin:0 0 10px; +} + +.help-inline { + display: inline-block; + *display: inline; + padding-left: 5px; + vertical-align: middle; + *zoom: 1; +} + + + + + + + + + + + + +.control-group { + margin-bottom: 10px; +} + +legend + .control-group { + margin-top: 20px; + -webkit-margin-top-collapse: separate; +} + +.form-horizontal .control-group { + margin-bottom: 20px; + *zoom: 1; +} + +.form-horizontal .control-group:before, +.form-horizontal .control-group:after { + display: table; + line-height: 0; + content: ""; +} + +.form-horizontal .control-group:after { + clear: both; +} + +.form-horizontal .control-label { + float: left; + width: 160px; + padding-top: 5px; + text-align: right; +} + +.form-horizontal .controls { + *display: inline-block; + *padding-left: 20px; + margin-left: 180px; + *margin-left: 0; +} + +.form-horizontal .controls:first-child { + *padding-left: 180px; +} + +.form-horizontal .help-block { + margin-bottom: 0; +} + + + + + +/* IE6 */ +input.input-radio, +input.input-checkbox { + width: 16px; + height: 16px; +} +label.inline { *display:inline;} diff --git a/WF/xOne/less/forms.css b/WF/xOne/less/forms.css new file mode 100644 index 000000000000..280f2fb4928b --- /dev/null +++ b/WF/xOne/less/forms.css @@ -0,0 +1,1091 @@ + +/* ------------------------------------------------------------ + forms.css v1.0 + Adapted from Bootstrap forms.css +------------------------------------------------------------ */ + +button, +input { + line-height: normal; + /* IE6/7 内间距宽度一致 */ + *overflow: visible; +} + +i.req { + padding-right: 3px; + font-style: normal; + font-weight: normal; + color: red; +} +/* +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 20px; + font-size: 21px; + line-height: 40px; + color: #333333; + border: 0; + border-bottom: 1px solid #e5e5e5; +} +legend small { + font-size: 15px; + color: #999999; +} +*/ + +label, +input, +button, +select, +textarea { + font-size: 14px; + font-weight: normal; + line-height: 20px; +} + +input, +button, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +label { + display: block; + margin-bottom: 5px; +} + +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + display: inline-block; + height: 20px; + padding: 4px 6px; + margin-bottom: 10px; + font-size: 14px; + line-height: 20px; + color: #555555; + vertical-align: middle; +} + +input-radius { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +input, +textarea, +.uneditable-input { + width: 156px; +} + +textarea { + height: auto; +} + +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: #ffffff; + border: 1px solid #aabbcc; + -webkit-box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.075); + box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.075); + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -o-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; +} + +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.uneditable-input:focus { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} + +input[type="radio"], +input[type="checkbox"] { + margin: 3px 0 0; + margin-top: 2px \9; + *margin-top: 0; + line-height: normal; + cursor: pointer; +} + +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; +} + +select, +input[type="file"] { + height: 26px; + /* In IE7, the height of the select element cannot be changed by height, only font-size */ + + *margin-top: 4px; + /* For IE7, add top margin to align select with labels */ + + line-height: 30px; +} + +select { + width: 170px; + background-color: #ffffff; + border: 1px solid #aabbcc; +} + +select[multiple], +select[size] { + height: auto; +} + +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +.uneditable-input, +.uneditable-textarea { + color: #999999; + cursor: not-allowed; + background-color: #fcfcfc; + border-color: #cccccc; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); +} + +.uneditable-input { + overflow: hidden; + white-space: nowrap; +} + +.uneditable-textarea { + width: auto; + height: auto; +} + +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #999999; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #999999; +} + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #999999; +} + +.radio, +.checkbox { + min-height: 20px; + padding-left: 20px; +} + +.radio input[type="radio"], +.checkbox input[type="checkbox"] { + float: left; + margin-left: -20px; +} + +.controls > .radio:first-child, +.controls > .checkbox:first-child { + padding-top: 5px; +} + +.radio.inline, +.checkbox.inline { + display: inline-block; + padding-top: 5px; + margin-bottom: 0; + vertical-align: middle; +} + +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left: 10px; +} +.input-min { + width: 42px; +} +.input-mini { + width: 60px; +} + +.input-small { + width: 90px; +} + +.input-medium { + width: 150px; +} + +.input-large { + width: 210px; +} + +.input-xlarge { + width: 270px; +} + +.input-xxlarge { + width: 530px; +} + +/* +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"] { + float: none; + margin-left: 0; +} + +.input-append input[class*="span"], +.input-append .uneditable-input[class*="span"], +.input-prepend input[class*="span"], +.input-prepend .uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"], +.row-fluid .input-prepend [class*="span"], +.row-fluid .input-append [class*="span"] { + display: inline-block; +} +*/ +input, +textarea, +.uneditable-input { + margin-left: 0; +} +/* +.controls-row [class*="span"] + [class*="span"] { + margin-left: 20px; +} + +input.span12, +textarea.span12, +.uneditable-input.span12 { + width: 926px; +} + +input.span11, +textarea.span11, +.uneditable-input.span11 { + width: 846px; +} + +input.span10, +textarea.span10, +.uneditable-input.span10 { + width: 766px; +} + +input.span9, +textarea.span9, +.uneditable-input.span9 { + width: 686px; +} + +input.span8, +textarea.span8, +.uneditable-input.span8 { + width: 606px; +} + +input.span7, +textarea.span7, +.uneditable-input.span7 { + width: 526px; +} + +input.span6, +textarea.span6, +.uneditable-input.span6 { + width: 446px; +} + +input.span5, +textarea.span5, +.uneditable-input.span5 { + width: 366px; +} + +input.span4, +textarea.span4, +.uneditable-input.span4 { + width: 286px; +} + +input.span3, +textarea.span3, +.uneditable-input.span3 { + width: 206px; +} + +input.span2, +textarea.span2, +.uneditable-input.span2 { + width: 126px; +} + +input.span1, +textarea.span1, +.uneditable-input.span1 { + width: 46px; +} +*/ +.controls-row { + *zoom: 1; +} + +.controls-row:before, +.controls-row:after { + display: table; + line-height: 0; + content: ""; +} + +.controls-row:after { + clear: both; +} + +.controls-row [class*="span"], +.row-fluid .controls-row [class*="span"] { + float: left; +} + +.controls-row .checkbox[class*="span"], +.controls-row .radio[class*="span"] { + padding-top: 5px; +} + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + cursor: not-allowed; + background-color: #eeeeee; +} + +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; +} + +.control-group.warning .control-label, +.control-group.warning .help-block, +.control-group.warning .help-inline { + color: #c09853; +} + +.control-group.warning .checkbox, +.control-group.warning .radio, +.control-group.warning input, +.control-group.warning select, +.control-group.warning textarea { + color: #c09853; +} + +.control-group.warning input, +.control-group.warning select, +.control-group.warning textarea { + border-color: #c09853; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.warning input:focus, +.control-group.warning select:focus, +.control-group.warning textarea:focus { + border-color: #a47e3c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; +} + +.control-group.warning .input-prepend .add-on, +.control-group.warning .input-append .add-on { + color: #c09853; + background-color: #fcf8e3; + border-color: #c09853; +} + +.control-group.error .control-label, +.control-group.error .help-block, +.control-group.error .help-inline { + color: #b94a48; +} + +.control-group.error .checkbox, +.control-group.error .radio, +.control-group.error input, +.control-group.error select, +.control-group.error textarea { + color: #b94a48; +} + +.control-group.error input, +.control-group.error select, +.control-group.error textarea { + border-color: #b94a48; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.error input:focus, +.control-group.error select:focus, +.control-group.error textarea:focus { + border-color: #953b39; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; +} + +.control-group.error .input-prepend .add-on, +.control-group.error .input-append .add-on { + color: #b94a48; + background-color: #f2dede; + border-color: #b94a48; +} + +.control-group.success .control-label, +.control-group.success .help-block, +.control-group.success .help-inline { + color: #468847; +} + +.control-group.success .checkbox, +.control-group.success .radio, +.control-group.success input, +.control-group.success select, +.control-group.success textarea { + color: #468847; +} + +.control-group.success input, +.control-group.success select, +.control-group.success textarea { + border-color: #468847; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.success input:focus, +.control-group.success select:focus, +.control-group.success textarea:focus { + border-color: #356635; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; +} + +.control-group.success .input-prepend .add-on, +.control-group.success .input-append .add-on { + color: #468847; + background-color: #dff0d8; + border-color: #468847; +} + +.control-group.info .control-label, +.control-group.info .help-block, +.control-group.info .help-inline { + color: #3a87ad; +} + +.control-group.info .checkbox, +.control-group.info .radio, +.control-group.info input, +.control-group.info select, +.control-group.info textarea { + color: #3a87ad; +} + +.control-group.info input, +.control-group.info select, +.control-group.info textarea { + border-color: #3a87ad; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.info input:focus, +.control-group.info select:focus, +.control-group.info textarea:focus { + border-color: #2d6987; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; +} + +.control-group.info .input-prepend .add-on, +.control-group.info .input-append .add-on { + color: #3a87ad; + background-color: #d9edf7; + border-color: #3a87ad; +} + +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { + color: #b94a48; + border-color: #ee5f5b; +} + +input:focus:invalid:focus, +textarea:focus:invalid:focus, +select:focus:invalid:focus { + border-color: #e9322d; + -webkit-box-shadow: 0 0 6px #f8b9b7; + -moz-box-shadow: 0 0 6px #f8b9b7; + box-shadow: 0 0 6px #f8b9b7; +} + +.form-actions { + padding: 19px 20px 20px; + margin-top: 20px; + margin-bottom: 20px; + background-color: #f5f5f5; + border-top: 1px solid #e5e5e5; + *zoom: 1; +} + +.form-actions:before, +.form-actions:after { + display: table; + line-height: 0; + content: ""; +} + +.form-actions:after { + clear: both; +} + +.help-block, +.help-inline { + color: #595959; +} + +.help-block { + display: block; + margin-bottom: 10px; +} + +.help-inline { + display: inline-block; + *display: inline; + padding-left: 5px; + vertical-align: middle; + *zoom: 1; +} + +.input-append, +.input-prepend { + display: inline-block; + margin-bottom: 5px; + font-size: 0; + white-space: nowrap; + vertical-align: middle; +} + +.input-append input, +.input-prepend input, +.input-append select, +.input-prepend select, +.input-append .uneditable-input, +.input-prepend .uneditable-input, +.input-append .dropdown-menu, +.input-prepend .dropdown-menu, +.input-append .popover, +.input-prepend .popover { + font-size: 14px; +} + +.input-append input, +.input-prepend input, +.input-append select, +.input-prepend select, +.input-append .uneditable-input, +.input-prepend .uneditable-input { + position: relative; + margin-bottom: 0; + *margin-left: 0; + vertical-align: top; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-append input:focus, +.input-prepend input:focus, +.input-append select:focus, +.input-prepend select:focus, +.input-append .uneditable-input:focus, +.input-prepend .uneditable-input:focus { + z-index: 2; +} + +.input-append .add-on, +.input-prepend .add-on { + display: inline-block; + width: auto; + height: 20px; + min-width: 16px; + padding: 4px 5px; + font-size: 14px; + font-weight: normal; + line-height: 20px; + text-align: center; + text-shadow: 0 1px 0 #ffffff; + background-color: #eeeeee; + border: 1px solid #ccc; +} + +.input-append .add-on, +.input-prepend .add-on, +.input-append .btn, +.input-prepend .btn, +.input-append .btn-group > .dropdown-toggle, +.input-prepend .btn-group > .dropdown-toggle { + vertical-align: top; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.input-append .active, +.input-prepend .active { + background-color: #a9dba9; + border-color: #46a546; +} + +.input-prepend .add-on, +.input-prepend .btn { + margin-right: -1px; +} + +.input-prepend .add-on:first-child, +.input-prepend .btn:first-child { + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.input-append input, +.input-append select, +.input-append .uneditable-input { + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.input-append input + .btn-group .btn:last-child, +.input-append select + .btn-group .btn:last-child, +.input-append .uneditable-input + .btn-group .btn:last-child { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-append .add-on, +.input-append .btn, +.input-append .btn-group { + margin-left: -1px; +} + +.input-append .add-on:last-child, +.input-append .btn:last-child, +.input-append .btn-group:last-child > .dropdown-toggle { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-prepend.input-append input, +.input-prepend.input-append select, +.input-prepend.input-append .uneditable-input { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.input-prepend.input-append input + .btn-group .btn, +.input-prepend.input-append select + .btn-group .btn, +.input-prepend.input-append .uneditable-input + .btn-group .btn { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-prepend.input-append .add-on:first-child, +.input-prepend.input-append .btn:first-child { + margin-right: -1px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.input-prepend.input-append .add-on:last-child, +.input-prepend.input-append .btn:last-child { + margin-left: -1px; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-prepend.input-append .btn-group:first-child { + margin-left: 0; +} + +input.search-query { + padding-right: 14px; + padding-right: 4px \9; + padding-left: 14px; + padding-left: 4px \9; + /* IE7-8 doesn't have border-radius, so don't indent the padding */ + + margin-bottom: 0; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} + +/* Allow for input prepend/append in search forms */ + +.form-search .input-append .search-query, +.form-search .input-prepend .search-query { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.form-search .input-append .search-query { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + +.form-search .input-append .btn { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .search-query { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .btn { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + +.form-search input, +.form-inline input, +.form-horizontal input, +.form-search textarea, +.form-inline textarea, +.form-horizontal textarea, +.form-search select, +.form-inline select, +.form-horizontal select, +.form-search .help-inline, +.form-inline .help-inline, +.form-horizontal .help-inline, +.form-search .uneditable-input, +.form-inline .uneditable-input, +.form-horizontal .uneditable-input, +.form-search .input-prepend, +.form-inline .input-prepend, +.form-horizontal .input-prepend, +.form-search .input-append, +.form-inline .input-append, +.form-horizontal .input-append { + display: inline-block; + *display: inline; + margin-bottom: 0; + vertical-align: middle; + *zoom: 1; +} + +.form-search .hide, +.form-inline .hide, +.form-horizontal .hide { + display: none; +} + +.form-search label, +.form-inline label, +.form-search .btn-group, +.form-inline .btn-group { + display: inline-block; +} + +.form-search .input-append, +.form-inline .input-append, +.form-search .input-prepend, +.form-inline .input-prepend { + margin-bottom: 0; +} + +.form-search .radio, +.form-search .checkbox, +.form-inline .radio, +.form-inline .checkbox { + padding-left: 0; + margin-bottom: 0; + vertical-align: middle; +} + +.form-search .radio input[type="radio"], +.form-search .checkbox input[type="checkbox"], +.form-inline .radio input[type="radio"], +.form-inline .checkbox input[type="checkbox"] { + float: left; + margin-right: 3px; + margin-left: 0; +} + +.control-group { + margin-bottom: 10px; +} + +legend + .control-group { + margin-top: 20px; + -webkit-margin-top-collapse: separate; +} + +.form-horizontal .control-group { + margin-bottom: 20px; + *zoom: 1; +} + +.form-horizontal .control-group:before, +.form-horizontal .control-group:after { + display: table; + line-height: 0; + content: ""; +} + +.form-horizontal .control-group:after { + clear: both; +} + +.form-horizontal .control-label { + float: left; + width: 160px; + padding-top: 5px; + text-align: right; +} + +.form-horizontal .controls { + *display: inline-block; + *padding-left: 20px; + margin-left: 180px; + *margin-left: 0 !important; + overflow:hidden; +} + +.form-horizontal .controls:first-child { + *padding-left: 180px; +} + +.form-horizontal .help-block { + margin-bottom: 0; +} + +.form-horizontal input + .help-block, +.form-horizontal select + .help-block, +.form-horizontal textarea + .help-block, +.form-horizontal .uneditable-input + .help-block, +.form-horizontal .input-prepend + .help-block, +.form-horizontal .input-append + .help-block { + margin-top: 10px; +} + +.form-horizontal .form-actions { + padding-left: 180px; +} + + +.close { + float: right; + font-size: 24px; + font-weight: bold; + line-height: 24px; + color: #000000; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.5; + filter: alpha(opacity=50); +} + +.close:hover { + color: #000000; + text-decoration: none; + cursor: pointer; + opacity: 0.8; + filter: alpha(opacity=80); +} + +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} + + +/* + 表单样式结束 +*/ + +.form-small label, +.form-small input, +.form-small select, +.form-small textarea { + font-size: 12px; + line-height:16px +} + +.form-small input{ + height: 16px; +} +.form-small input[type="radio"], +.form-small input[type="checkbox"] { + margin-top: 0px; + margin-top: -1px \9; +} +.form-small .help-block { + font-size:12px; +} +.form-small .form-horizontal .control-group { + margin-bottom: 10px; +} + + +/* 表格布局表单 */ +.form-table { + max-width: 100%; + width:auto; + border-collapse:collapse; + border-spacing:0; +} +.form-table th, +.form-table td { + border: none; + padding: 5px 10px 5px 5px; + text-align: left; +} +.form-table th { + background:#697795; + color:#fff; +} +.form-table td.f_label { + padding-right: 0; + text-align: right; + vertical-align: top; + background: none; + color: inherit; + text-shadow: none; +} +.form-table .textarea { + width:400px; + height:100px; +} +.vmimg img { + vertical-align: middle; +} + +/* IE6 */ +input.input-radio, +input.input-checkbox { + width:16px; + height:16px; +} +label.inline { *display:inline;} diff --git a/WF/xOne/less/google-style.css b/WF/xOne/less/google-style.css new file mode 100644 index 000000000000..7f14f1e2e4e1 --- /dev/null +++ b/WF/xOne/less/google-style.css @@ -0,0 +1,68 @@ + +/*! + * google-style v1.0 + * 在外层添加 .google_style 实现 google 风格的样式 + */ + + +.google_style .btn { + +} +.google_style form input:not([type]), +.google_style form input[type="text"], +.google_style form textarea{ + border:1px solid #ebebeb; + border-top-color:#dcdcdc; + color:#444; + font-family:arial,sans-serif; + line-height:normal; + padding:6px 10px; + width:300px; +} +.google_style form textarea{ + height:150px +} +.google_style form input:not([type]):focus, +.google_style form input[type="text"]:focus, +.google_style form textarea:focus{ + border-color:#5e94ff; + -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.2); + -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.2); + box-shadow:inset 0 1px 2px rgba(0,0,0,.2); + outline:0 +} +.google_style form input[disabled], +.google_style form textarea[disabled], +.google_style form label.form-disabled{ + color:#999 +} +.google_style form input:not([type])[disabled], +.google_style form input[type="text"][disabled], +.google_style form textarea[disabled]{ + background-color:#ebebeb +} + +.google_style form input[type="text"]{ + border:1px solid #e5e5e5; + border-top-color:#dcdcdc; + color:#666; + display:inline-block; + line-height:normal; + margin:0 10px 0 0; + padding:6px 10px; + height:auto; + width:200px; + box-shadow:none; + transition:0; +} +[dir="rtl"].google_style input[type="text"]{ + margin:0 0 0 10px +} +.google_style input[type="text"]:focus{ + border-color:#5e94ff; + -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.2); + -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.2); + box-shadow:inset 0 1px 2px rgba(0,0,0,.2); + color:#444; + outline:0 +} \ No newline at end of file diff --git a/WF/xOne/less/iconfont.css b/WF/xOne/less/iconfont.css new file mode 100644 index 000000000000..4aa61f9ca734 --- /dev/null +++ b/WF/xOne/less/iconfont.css @@ -0,0 +1,32 @@ + +/*! + * iconfont.css v1.0 + * Adapted from http://aliceui.org/docs/framework.html#rei-iconfont + * 此处暂时使用支付宝图标字体集 + */ + +@font-face { + font-family: 'Actor'; + font-style: normal; + font-weight: 400; + src: local('Actor Regular'), local('Actor-Regular'), url(Actor.woff) format('woff'); +} + +/* alipay iconfont */ +@font-face { + font-family: "rei"; + src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130419"); /* IE9 */ + src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130419#iefix") format("embedded-opentype"), /* IE6-IE8 */ + url("https://i.alipayobjects.com/common/fonts/rei.woff?20130419") format("woff"), /* chrome 6+、firefox 3.6+、Safari5.1+、Opera 11+ */ + url("https://i.alipayobjects.com/common/fonts/rei.ttf?20130419") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */ + url("https://i.alipayobjects.com/common/fonts/rei.svg?20130419#rei") format("svg"); /* iOS 4.1- */ +} +.iconfont { + font-family:"rei"; + font-style: normal; + font-weight: normal; + font-size: 12px; + color: #4d4d4d; + cursor: default; + -webkit-font-smoothing: antialiased; +} \ No newline at end of file diff --git a/WF/xOne/less/labels-badges.css b/WF/xOne/less/labels-badges.css new file mode 100644 index 000000000000..239768a54871 --- /dev/null +++ b/WF/xOne/less/labels-badges.css @@ -0,0 +1,110 @@ + +/*! + * module v1.0 + * Adapted from https://github.com/webcoding/cnBootstrap + */ + + +.label, +.badge { + display: inline-block; + padding: 2px 4px; + font-size: 12px; + font-weight: bold; + line-height: 14px; + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + white-space: nowrap; + vertical-align: baseline; + background-color: #999999; +} + +.label { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.badge { + padding-right: 9px; + padding-left: 9px; + -webkit-border-radius: 9px; + -moz-border-radius: 9px; + border-radius: 9px; +} + +.label:empty, +.badge:empty { + display: none; +} + +a.label:hover, +a.label:focus, +a.badge:hover, +a.badge:focus { + color: #ffffff; + text-decoration: none; + cursor: pointer; +} + +.label-important, +.badge-important { + background-color: #b94a48; +} + +.label-important[href], +.badge-important[href] { + background-color: #953b39; +} + +.label-warning, +.badge-warning { + background-color: #f89406; +} + +.label-warning[href], +.badge-warning[href] { + background-color: #c67605; +} + +.label-success, +.badge-success { + background-color: #468847; +} + +.label-success[href], +.badge-success[href] { + background-color: #356635; +} + +.label-info, +.badge-info { + background-color: #3a87ad; +} + +.label-info[href], +.badge-info[href] { + background-color: #2d6987; +} + +.label-inverse, +.badge-inverse { + background-color: #333333; +} + +.label-inverse[href], +.badge-inverse[href] { + background-color: #1a1a1a; +} + +.btn .label, +.btn .badge { + position: relative; + top: -1px; +} + +.btn-mini .label, +.btn-mini .badge { + top: 0; +} + diff --git a/WF/xOne/less/layout.css b/WF/xOne/less/layout.css new file mode 100644 index 000000000000..e15dff87406c --- /dev/null +++ b/WF/xOne/less/layout.css @@ -0,0 +1,6 @@ + +/*! + * layout.css v0.9 + * + */ + diff --git a/WF/xOne/less/metro-style.css b/WF/xOne/less/metro-style.css new file mode 100644 index 000000000000..c996758023cb --- /dev/null +++ b/WF/xOne/less/metro-style.css @@ -0,0 +1,12 @@ + +/*! + * metro-style v1.0 + * 在外层添加 .metro_style 实现 metro 风格的样式 + */ + + + .metro_style .btn { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + } \ No newline at end of file diff --git a/WF/xOne/less/module.css b/WF/xOne/less/module.css new file mode 100644 index 000000000000..ffccac5222aa --- /dev/null +++ b/WF/xOne/less/module.css @@ -0,0 +1,23 @@ + +/*! + * module v1.0 + * Adapted from https://github.com/webcoding/cnBootstrap + */ + +/* alice要实现每个组件都不依赖基础样式,这样有必要么, + * 在做测试的时候 +.module * { + margin:0; + padding:0; +} +*/ + + + + + + +/* + === 样式测试 === + javascript:(function(){var a=document,b=a.body,c=a.createElement("link");c.setAttribute("rel","stylesheet");c.setAttribute("href","http://10.3.1.41/cnBootstrap/WF/assets/css/reset.css");a.querySelector("head").appendChild(c);b.style.backgroundColor="white";b.className+=" typo"})() +============================================================ */ \ No newline at end of file diff --git a/WF/xOne/less/noreset.css b/WF/xOne/less/noreset.css new file mode 100644 index 000000000000..12a594b4e27f --- /dev/null +++ b/WF/xOne/less/noreset.css @@ -0,0 +1,482 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + noreset.css v1.0 + Author: Pandora + Adapted from http://necolas.github.io/normalize.css/ +------------------------------------------------------------ */ + +/* ============================== + HTML5 显示定义 + ============================== */ + +/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ +article, +aside, +details, +embed, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary { + display: block; +} + +/* HTML5 媒体文件跟 img inline-block 属性保持一致 */ +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} +command, +datalist, +keygen, +mark, +meter, +progress, +rp, +rt, +ruby, +time, +wbr { + display: inline; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ============================== + Base + ============================== */ + +/* + * 1. 防止用户自定义背景颜色对网页的影响 这是改为设置到body上 + * 2. 设置默认字体Tahoma + * 3. 防止 iOS 设备方向变化且没有禁用缩放功能时,文字会发生大小变化 + */ +html { + color: #000; /* 1 */ + /* background: #fff; 1 */ + font-family: Tahoma,Arial,\5b8b\4f53,sans-serif; /* 2 */ + -webkit-text-size-adjust: 100%; /* 3 */ + -ms-text-size-adjust: 100%; /* 3 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; + background: #fff; +} + + +/* ============================== + Typography + ============================== */ + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + /* white-space: pre-wrap; + 去除此项,避免空格等产生页面布局上的空行 + */ + word-wrap: break-word; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* 统一上标和下标 */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +/* ============================== + Embedded content + ============================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + + + +/* ============================== + Figures + ============================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} +/* ============================== + Links + ============================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +/* 默认不显示下划线,保持页面简洁 */ +ins,a { + text-decoration: none; +} + +/* 让链接在 hover 状态下显示下划线 */ +a:hover { text-decoration: underline;} + +/* webkit内核浏览器会默认给:focus状态的元素加上outline的样式 + * 不建议去除浏览器默认的outline属性,为使用户体验更好 + +:focus { + outline:0; +} + +下面是normalize的方法 +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + + +a:active, +a:hover { + outline: 0; +} + */ + + +/* ============================== + Forms input button ... + ============================== */ + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. 表单元素并不继承父级 font 的字体,这里设置默认字体,并不让其继承父级字体 + * 2. 表单元素并不继承父级 font 的大小 + * 3. 统一外边距 in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-family: Tahoma,Arial,\5b8b\4f53; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; + + /* IE6/7 内间距宽度一致 */ + *overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + + +/* ============================== + Tables + ============================== */ + +/* 去掉Tables单元格间距并让相邻边重合 */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* IE bug fixed: th 不继承 text-align */ +th { + text-align: inherit; +} + + +/* ============================== + Others + ============================== */ + +/* 去除默认边框 */ +fieldset, +img{ + border: 0; +} + +/* 解决 IE6-7 图片缩放锯齿问题 */ +img { + -ms-interpolation-mode: bicubic; +} + +/* ie6 7 8(q) bug 显示为行内表现 */ +iframe { + display: block; +} + +/* 去掉 firefox 下此元素的边框 */ +abbr, +acronym { + border: 0; + font-variant: normal; +} + +/* 一致的 del 样式 */ +del { + text-decoration: line-through; +} + +address, +caption, +cite, +dfn, +em, +i, +var { + /* 这个reset用不到文本斜体 */ + font-style: normal; + font-weight: 500; +} + +/* 对齐是排版最重要的因素, 别让什么都居中 */ +caption, +th { + text-align: left; +} + + +/* 清除浮动 */ +.clearfix:after, +.wrap:after { + clear: both; + content: ' '; + display: block; + font-size: 0; + line-height: 0; + visibility: hidden; + width: 0; + height: 0; +} +.clearfix, +.wrap { + *zoom:1 +}/* for IE6 IE7 */ + +/* 空标签清除法 */ +.clear { + clear: both; + display: block; + height:0; + overflow: hidden; + visibility: hidden; +} +.wrap, +.bc { + margin-left: auto; + margin-right: auto; +} + + +/* 这条分割线以上为noreset.css,书写规范请参见README.md +============================================================ */ + + diff --git a/WF/xOne/less/normalize.css b/WF/xOne/less/normalize.css new file mode 100644 index 000000000000..9c453c9e60e0 --- /dev/null +++ b/WF/xOne/less/normalize.css @@ -0,0 +1,506 @@ +/* ------------------------------------------------------------ + normalize.css v0.9 + Project: Pandora - 实现无差异化的标签默认属性 + Adapted from http://necolas.github.io/normalize.css/ + http://typo.sofish.de/ +------------------------------------------------------------ */ + + + +/* ========================================================================== + HTML5 显示定义 + ========================================================================== */ + +/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ +article, +aside, +details, +embed, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +summary { + display: block; +} + +/* HTML5 媒体文件跟 img inline-block 属性保持一致 */ +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} +command, +datalist, +keygen, +mark, +meter, +progress, +rp, +rt, +ruby, +time, +wbr { + display: inline; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +[hidden] { + display: none; +} + + + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. 防止用户自定义背景颜色对网页的影响 改为设置到body上适应性更好 ? + * 2. 设置默认字体Tahoma + * 3. 防止 iOS 设备方向变化且没有禁用缩放功能时,文字会发生大小变化 + */ + +html { + color: #000; /* 1 */ + background: #fff; /* 1 */ + font-family: Tahoma,Arial,\5b8b\4f53,sans-serif; /* 2 */ + -webkit-text-size-adjust: 100%; /* 3 */ + -ms-text-size-adjust: 100%; /* 3 */ +} + +body { + margin: 0; +} + +/** + * Remove default margin. + + +body { + margin: 0; + background: #fff; +} + */ + + +/* ========================================================================== + Typography + ========================================================================== */ + +/* Firefox 以外,元素没有下划线,需添加 */ +abbr, +acronym { + border-bottom: 1px dotted; + font-variant: normal; +} + +/** + * 添加鼠标问号,进一步确保应用的语义是正确的 + *(要知道,交互他们也有洁癖,如果你不去掉,那得多花点口舌) + */ + +abbr { + cursor: help; +} + +address, +caption, +cite, +code, +dfn, +i, +th, +var { + font-style: normal; + font-weight: 400; +} + +/* 文本斜体使用 em */ +em { + font-style: italic; +} + +/* 统一加粗样式 */ +b, +strong { + font-weight: bold; +} + +/* 一致的 del 样式 */ +del { + text-decoration: line-through; +} + +/** + * 专名号:虽然 u 已经重回 html5 Draft,但在所有浏览器中都是可以使用的, + * 要做到更好,向后兼容的话,添加 class="typo-u" 来显示专名号 + * 关于 标签:http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element + * 被放弃的是 4,之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated + * 一篇关于 标签的很好文章:http://html5doctor.com/u-element/ + */ + +u { + text-decoration: underline; +} + + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/* 一致化 horizonal rule +hr { + border: none; + border-bottom: 1px solid #cfcfcf; + margin-bottom: 10px; + *color: pink; + *filter: chroma(color=pink); + height: 10px; + *margin: -7px 0 2px; +} + */ + +/** + * Address styling not present in IE 8/9. + * 标记,类似于手写的荧光笔的作用 + */ + +mark { + background: #ff0; + color: #000; +} + +/* 统一代码片断默认字体 && 块/段落引用 */ +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-family: "Courier New", Courier, monospace, serif; + font-size: 1em; +} + +/* 提高预格式化文本的可读性 */ +pre { + white-space: pre-wrap; + word-wrap: break-word; +} + +/* Set consistent quote types. */ +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/* 一致的非强调文本、底部印刷体、版本等标记效果 */ +small { + font-size: 80%; + color: #888; + font-weight: normal; +} + +/* 统一上标和下标 */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { top: -0.5em; } +sub { bottom: -0.25em; } + + + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* 去除IE下 a 标签内产生的意外边框 */ +img { + border: 0; +} + +/* 去除 figure 在 IE 8/9 and Safari 5 中的外边距 */ +figure { + margin: 0; +} + + +/* ========================================================================== + Links + ========================================================================== */ + +/* 默认不显示下划线,保持页面简洁 */ +ins,a { + text-decoration: none; +} + +/* 让链接在 hover 状态下显示下划线 */ +a:hover { + text-decoration: underline; +} + + +/* webkit内核浏览器会默认给:focus状态的元素加上outline的样式 + * 不建议去除浏览器默认的outline属性,为使用户体验更好 + +/** + * Address `outline` inconsistency between Chrome and other browsers. + + +:focus { + outline:0; +} + +下面是normalize的方法 +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + + +a:active, +a:hover { + outline: 0; +} + + */ + + + +/* ========================================================================== + Forms input button ... + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. 表单元素并不继承父级 font 的字体,这里设置默认字体,并不让其继承父级字体 + * 2. 表单元素并不继承父级 font 的大小 + * 3. 统一外边距 in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-family: Tahoma,Arial,\5b8b\4f53,sans-serif; /* 1 */ + font-size: 100%; /* 2 */ + line-height: 1; + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; + + /* IE6/7 内间距宽度一致 */ + *overflow: visible; + + /* 让 input 和 button 一样高 + line-height:22px; */ +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + + + +/* ========================================================================== + Tables + ========================================================================== */ + +/* 去掉Tables单元格间距并让相邻边重合 */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* IE bug fixed: th 不继承 text-align */ +th { + text-align: inherit; +} + +/* 对齐是排版最重要的因素, 别让什么都居中 */ +caption, th { + text-align: left; +} + + + +/* ========================================================================== + Others + ========================================================================== */ + +/* 解决 IE6-7 图片缩放锯齿问题 */ +img { + -ms-interpolation-mode: bicubic; +} + +/* ie6 7 8(q) bug 显示为行内表现 */ +iframe { + display: block; +} + + + +/* ========================================================================== + 清除浮动 + ========================================================================== */ + +.clearfix, +.wrap { + /* for IE6 IE7 */ + *zoom: 1; +} + +.clearfix:before, +.clearfix:after, +.wrap:before, +.wrap:after { + display: table; + line-height: 0; + content: ""; +} + +.clearfix:after, +.wrap:after { + clear: both; +} + +.wrap{ + width: 980px; + margin-left: auto; + margin-right: auto; +} + +/* 空标签清除法 */ +.clear { + clear: both; + display: block; + height:0; + overflow: hidden; + visibility: hidden; +} + + +/* 以上为normalize.css,书写规范请参见cssREADME.md +========================================================================== */ + diff --git a/WF/xOne/less/nowf.css b/WF/xOne/less/nowf.css new file mode 100644 index 000000000000..4732762fb800 --- /dev/null +++ b/WF/xOne/less/nowf.css @@ -0,0 +1,78 @@ +/*! + * WebFrame v1.0 + * Adapted from https://github.com/webcoding/cnBootstrap + */ + +/* Core variables and mixins */ +/* Modify this for custom colors, font-sizes, etc */ +@import "variables.css"; +@import "mixins.css"; + +/* CSS Reset +@import "../../assets/css/noreset-dev.css"; +@import "../../assets/css/combo-dev.css"; +@import "../../assets/css/module.css"; + */ +@import "noreset.css"; +@import "reset.css"; +@import "combo.css"; +@import "module.css"; + +/* Grid system and page structure */ +@import "scaffolding.css"; +@import "grid.css"; +@import "layouts.css"; + +/* Base CSS */ +@import "type.css"; +@import "code.css"; +@import "forms.css"; +@import "tables.css"; + +/* Components: common */ +@import "sprites.css"; +@import "dropdowns.css"; +@import "wells.css"; +@import "component-animations.css"; +@import "close.css"; + +/* Components: Buttons & Alerts */ +@import "buttons.css"; +@import "button-groups.css"; +@import "alerts.css"; /* Note: alerts share common CSS with buttons and thus have styles in buttons.css */ + +/* Components: Nav */ +@import "navs.css"; +@import "navbar.css"; +@import "breadcrumbs.css"; +@import "pagination.css"; +@import "pager.css"; + +/* Components: Popovers */ +@import "modals.css"; +@import "tooltip.css"; +@import "popovers.css"; + +/* Components: Misc */ +@import "thumbnails.css"; +@import "media.css"; +@import "labels-badges.css"; +@import "progress-bars.css"; +@import "accordion.css"; +@import "carousel.css"; +@import "hero-unit.css"; + +/* Utility classes */ +@import "utilities.css"; /* Has to be last to override when necessary */ + +/* Plugin classes */ +@import "plugin.css"; + + +/* 书写规范请参见README.md +============================================================ */ + +/* + === 样式测试 === + javascript:(function(){var a=document,b=a.body,c=a.createElement("link");c.setAttribute("rel","stylesheet");c.setAttribute("href","http://10.3.1.41/WF/assets/css/reset.css");a.querySelector("head").appendChild(c);b.style.backgroundColor="white";})() +============================================================ */ diff --git a/WF/xOne/less/pager.css b/WF/xOne/less/pager.css new file mode 100644 index 000000000000..6824cccfceb2 --- /dev/null +++ b/WF/xOne/less/pager.css @@ -0,0 +1,130 @@ + +/*! + * pager v1.0 + * 分页组件 + */ + +.pages { + text-align: right; +} +.pages a, +.pages span { + font-size: 12px; + display: inline-block; + margin-left: 5px; + padding: 3px 9px; + line-height: 18px; +} +.pages a { + border: 1px solid #ddd; + color: #333; + background: #fff; +} +.pages .PageSel, +.rosestyle .PageSel { + font-weight: bold; + border: 1px solid #df1a7a; + color: #fff; + background: #df1a7a; +} +.pages a:hover, +.rosestyle a:hover { + border-color: #df1a7a; + color: #df1a7a; + text-decoration: none; +} +.orangestyle .PageSel { + font-weight: bold; + border: 1px solid #f80; + color: #fff; + background: #f80; +} +.orangestyle a:hover { + border-color: #f80; + color: #f80; + text-decoration: none; +} + +/* Pages页码控制 默认橙色 */ +.pages { + text-align: right; +} +.Pages a, .Pages span { + display: inline-block; + margin-left: 5px; + padding: 0 9px; + height: 25px; + line-height: 25px; +} +.Pages a { + border: 1px solid #ddd; + color: #333; + color: #07c; + background: #fff; +} +.Pages .PageSel, +.orangestyle .PageSel { + font-weight: bold; + color: #fff; + border: 1px solid #f80; + background: #f80; +} +.Pages a:hover, +.orangestyle a:hover { + text-decoration: none; + border-color: #f80; + color: #f80; +} + +.Pages .PrevPage, +.Pages .NextPage { + width: 55px; + padding: 0; + height: 25px; + /* color: #07c;*/ + line-height: 24px; + background: url(http://pic.lvmama.com/img/new_v/newBtn_bg.gif) 1000px 1000px no-repeat; +} +.Pages .PrevPage { + background-position: 0 -1817px; + text-align: right; + padding-right: 10px; +} +.Pages .NextPage { + background-position: -144px -1817px; + text-align: left; + padding-left: 10px; +} +.Pages span.PrevPage, +.Pages span.NextPage { + color: #ccc; + border: 1px solid #ddd; +} +.Pages span.PrevPage { + background-position: 0 -1776px; +} +.Pages span.NextPage { + background-position: -144px -1776px; +} +/* 玫红色 */ +.rosestyle .PageSel { + border: 1px solid #df1a7a; + background: #df1a7a; +} +.rosestyle a:hover { + border-color: #df1a7a; + color: #df1a7a; +} +/* 橙黄色 */ +.orangestyle .PageSel { + border: 1px solid #f80; + background: #f80; +} +.orangestyle a:hover { + border-color: #f80; + color: #f80; +} + + + + diff --git a/WF/xOne/less/pandora.css b/WF/xOne/less/pandora.css new file mode 100644 index 000000000000..a4d978e33254 --- /dev/null +++ b/WF/xOne/less/pandora.css @@ -0,0 +1,86 @@ + +/*! + * WebFrame v1.0 + * Adapted from https://github.com/webcoding/cnBootstrap + */ + +/* + * 在32个"style"方法(style, link, @import)后浏览器会忽略后面的样式(IE6/7/8) + */ + +/* Core variables and mixins */ +/* Modify this for custom colors, font-sizes, etc +@import "variables.css"; +@import "mixins.css"; + */ + +/* CSS Reset */ +@import "iconfont.css"; +@import "normalize.css"; +@import "typo-dev.css"; +@import "combo.css"; + +/* Grid system and page structure +@import "scaffolding.css"; +@import "grid.css"; +@import "layouts.css"; + */ +/* Base CSS */ +@import "code.css"; +@import "buttons.css"; +@import "button-groups.css"; +@import "form.css"; +@import "tables.css"; + +/* Components: common +@import "module.css"; +@import "sprites.css"; +@import "dropdowns.css"; +@import "wells.css"; +@import "component-animations.css"; +@import "close.css"; +*/ +/* Components: Buttons & Alerts */ +@import "tips.css"; + +@import "alerts.css"; /* Note: alerts share common CSS with buttons and thus have styles in buttons.css */ + + +/* Components: Nav +@import "navs.css"; +@import "navbar.css"; */ +@import "breadcrumbs.css"; +@import "pagination.css"; +@import "pager.css"; +@import "poptip.css"; + +/* Components: Popovers */ +@import "modals.css"; +@import "tooltip.css"; +@import "popovers.css"; + +/* Components: Misc */ +@import "thumbnails.css"; +@import "media.css"; +@import "tags.css"; +@import "labels-badges.css"; +/* +@import "progress-bars.css"; +@import "accordion.css"; +@import "carousel.css"; +@import "hero-unit.css"; +*/ +/* Utility classes +@import "utilities.css"; /* Has to be last to override when necessary */ + +/* Plugin classes +@import "plugin.css"; + */ + +/* Other Style */ +@import "metro-style.css"; +@import "google-style.css"; + +/* 书写规范请参见README.md +============================================================ */ + diff --git a/WF/xOne/less/plugin.css b/WF/xOne/less/plugin.css new file mode 100644 index 000000000000..152cf90d4e40 --- /dev/null +++ b/WF/xOne/less/plugin.css @@ -0,0 +1,340 @@ + +/* + @名称: plugin.css + @功能: 组件样式 + */ + +/* + * @name : mini-tips ===tips alert msg- + * @explain : 操作提示 + * @type : 基类 .tips .alert + * @expand : 扩展 -info -success -error -warning -help -stop -wait === message danger + * @dependent : Oricode + * @author : Cloudyan + * @version : 1.0 + * @html : + + */ +.mtips,.tips-ico,span.tips,.alert-ico{display:inline-block;*display:inline;*zoom:1;} +.mtips,.tips-ico,.alert-ico{ background:url(../../../../cnBootstrap/cnDocs/solutions/img/icon-alert.png) -1000px -1000px no-repeat; } + +/* tips */ +.mtips,.tips .tips-ico{ width:14px; height:14px; margin-right:5px; background-position:0 -34px} +.tips .tips-ico {float:left;} +.tips{ margin:0; background:#f9f9f9;border:1px solid #d4d4d4;padding:8px 10px; line-height:14px;} +.tips-info .tips-ico,.tips-ico-info{ background-position:0 -34px} +.tips-warning .tips-ico,.tips-ico-warning{ background-position:-14px -34px} +.tips-error .tips-ico,.tips-ico-error{background-position:-28px -34px} +.tips-success .tips-ico,.tips-ico-success{ background-position:-42px -34px} +.tips-help .tips-ico,.tips-ico-help{ background-position:-56px -34px} +.tips-stop .tips-ico,.tips-ico-stop{ background-position:-70px -34px} +.tips-wait .tips-ico,.tips-ico-wait{ background-position:-84px -34px} + +.tips-info{background:#e5f5ff;border:1px solid #c9d5e2} +.tips-warning{background:#ffffe0;border:1px solid #ff8801} +.tips-error{background:#fff2f2;border:1px solid #f44} +.tips-success{background:#f1ffe2;border:1px solid #7dc25e} +.tips-help{background:#e5f5ff;border:1px solid #c9d5e2} +.tips-stop{background:#fceee8;border:1px solid #f6c8b5} +.tips-wait{background:#e5f5ff;border:1px solid #c9d5e2} + +.tips-arrowup{display:inline-block;height:10px;left:40px;margin-left:-8px;position:absolute;text-indent:-9999em;width:16px;z-index:1;top:-9px;_top:-8px} +.tips-arrowup-message{background-position:-194px -39px} +.tips-arrowup-warning{background-position:-211px -39px} + +/* mini-tips */ +.mtips{ border:none;width:14px; height:14px;} + +/* alert */ +.alert .alert-ico{ width:32px; height:32px; float:left; margin:0 0 0 -45px; background-position:0 -34px} +.alert{ background:#f9f9f9;border:1px solid #d4d4d4; padding:20px 30px 20px 65px;} +.alert .alert-title{ font-size:14px; font-weight:bold;} +.alert .alert-title,.alert .alert-line,.alert p{ margin:0} +.alert-info .alert-ico{ background-position:0 0} +.alert-warning .alert-ico{ background-position:-32px 0} +.alert-error .alert-ico{background-position:-64px 0} +.alert-success .alert-ico{ background-position:-96px 0} +.alert-help .alert-ico{ background-position:-128px 0} +.alert-stop .alert-ico{ background-position:-160px 0} +.alert-wait .alert-ico{ background-position:-192px 0} + +.alert-info{background:#e5f5ff;border:1px solid #c9d5e2} +.alert-warning{background:#ffffe0;border:1px solid #ff8801} +.alert-error{background:#fff2f2;border:1px solid #f44} +.alert-success{background:#f1ffe2;border:1px solid #7dc25e} +.alert-help{background:#e5f5ff;border:1px solid #c9d5e2} +.alert-stop{background:#fceee8;border:1px solid #f6c8b5} +.alert-wait{background:#e5f5ff;border:1px solid #c9d5e2} + +.alert-title{ font-size:14px; font-weight:bold} +.alert-line{ font-size:12px; line-height:22px;} + +button.close {padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;} +.alert .close{position:relative; width:24px; height:24px;top:-18px;right:-28px;line-height:22px;} + + + + + + + + +/* pages页码小组件 + * 样式默认玫红色(可缺省rosestyle) + * 可组合样式orangestyle橙色 + * @html + + + + + */ +.pages{text-align:right;} +.pages a,.pages span{font-size:12px;display:inline-block;zoom:1;*display:inline;margin-left:5px;padding:3px 9px; line-height:18px;} +.pages a{border:1px solid #ddd;color:#333;background:#fff;} +.pages .PageSel,.rosestyle .PageSel{font-weight:bold;border:1px solid #df1a7a;color:#fff;background:#df1a7a;} +.pages a:hover,.rosestyle a:hover{ border-color:#df1a7a;color:#df1a7a; text-decoration:none} +.orangestyle .PageSel{font-weight:bold;border:1px solid #f80;color:#fff;background:#f80;} +.orangestyle a:hover{ border-color:#f80;color:#f80; text-decoration:none} + +/* Pages页码控制 默认橙色 */ +.pages{text-align:right;} +.Pages a,.Pages span{display:inline-block;zoom:1;*display:inline;margin-left:5px;padding:0 9px; height:25px; line-height:25px;} +.Pages a{border:1px solid #ddd;color:#333; color:#07c;background:#fff;} +.Pages .PageSel,.orangestyle .PageSel{font-weight:bold;color:#fff;border:1px solid #f80;background:#f80;} +.Pages a:hover,.orangestyle a:hover{ text-decoration:none;border-color:#f80;color:#f80;} + +.Pages .PrevPage,.Pages .NextPage{ width:55px; padding:0; height:25px;/* color:#07c;*/ line-height:24px; background:url(http://pic.lvmama.com/img/new_v/newBtn_bg.gif) 1000px 1000px no-repeat} +.Pages .PrevPage{ background-position:0 -1817px; text-align:right; padding-right:10px;} +.Pages .NextPage{ background-position:-144px -1817px; text-align:left; padding-left:10px;} +.Pages span.PrevPage,.Pages span.NextPage{color:#ccc;border:1px solid #ddd;} +.Pages span.PrevPage{ background-position:0 -1776px;} +.Pages span.NextPage{ background-position:-144px -1776px;} +.rosestyle .PageSel{border:1px solid #df1a7a;background:#df1a7a;} +.rosestyle a:hover{ border-color:#df1a7a;color:#df1a7a;} +.orangestyle .PageSel{border:1px solid #f80;background:#f80;} +.orangestyle a:hover{ border-color:#f80;color:#f80;} + + + + + +/* + * @name : table + * @explain : 表格 + * @type : 基类 .table table-line table-border table-full table-striped table-hover + * @expand :扩展 table-info table-layout ptable ui-table xtable .***-table + * @dependent : 无 + * @author : Cloudyan + * @version : 1.0 + * @html : + + */ + +table { + max-width: 100%; + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; +} + +.table { + margin-bottom: 20px; +} +.table-full { + width: 100%; +} +.table th, +.table td { + padding: 8px; + line-height: 20px; + text-align: left; + vertical-align: top; + border-top: 1px solid #dddddd; +} + +.table th { + font-weight: bold; +} + +.table thead th { + vertical-align: bottom; +} + +.table caption + thead tr:first-child th, +.table caption + thead tr:first-child td, +.table colgroup + thead tr:first-child th, +.table colgroup + thead tr:first-child td, +.table thead:first-child tr:first-child th, +.table thead:first-child tr:first-child td { + border-top: 0; +} + +.table tbody + tbody { + border-top: 2px solid #dddddd; +} + +.table .table { + background-color: #ffffff; +} + +.table-condensed th, +.table-condensed td { + padding: 4px 5px; +} + +.table-bordered { + border: 1px solid #dddddd; + border-collapse: separate; + *border-collapse: collapse; + border-left: 0; +} + +.table-bordered th, +.table-bordered td { + border-left: 1px solid #dddddd; +} + +.table-bordered caption + thead tr:first-child th, +.table-bordered caption + tbody tr:first-child th, +.table-bordered caption + tbody tr:first-child td, +.table-bordered colgroup + thead tr:first-child th, +.table-bordered colgroup + tbody tr:first-child th, +.table-bordered colgroup + tbody tr:first-child td, +.table-bordered thead:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child td { + border-top: 0; +} + +.table-striped tbody > tr:nth-child(odd) > td, +.table-striped tbody > tr:nth-child(odd) > th { + background-color: #f9f9f9; +} + +.table-hover tbody tr:hover td { + background-color: #f5f5f5; +} + +.table tbody tr.success td { + background-color: #dff0d8; +} + +.table tbody tr.error td { + background-color: #f2dede; +} + +.table tbody tr.warning td { + background-color: #fcf8e3; +} + +.table tbody tr.info td { + background-color: #d9edf7; +} + +.table-hover tbody tr.success:hover td { + background-color: #d0e9c6; +} + +.table-hover tbody tr.error:hover td { + background-color: #ebcccc; +} + +.table-hover tbody tr.warning:hover td { + background-color: #faf2cc; +} + +.table-hover tbody tr.info:hover td { + background-color: #c4e3f3; +} + + +/* 表格扩展 */ + +table th, +table td { + padding:4px 5px; + line-height: 20px; +} + +table th { + font-weight: bold; +} +table td { + text-align: left; +} +.table-full { + width: 100%; +} + +.table-border th, +.table-border td{ + border:1px solid #ccc; +} + +/* 布局表格 */ +.table-layout th,.table-layout td{padding: 5px 10px;text-align:left;} +.table-layout .label,.table-layout .f_label{text-align:right;padding-right:0;} +.f_label{background: #e2eaf4;} +/* 信息表格 */ +table.table-info{border:1px solid #888;border-collapse:collapse;margin-bottom:1em} +table.table-info pre{background-color:transparent;margin:0;padding:0;width:auto;} +table.table-info th,table.table-info td{padding:5px 15px 5px 10px;text-align:left;} +table.table-info th{background-color:#ccc;border: 1px solid #888;vertical-align: baseline;} +table.table-info td{background-color:#efefef;border:1px solid #aaa;vertical-align:text-top;} +table.table-info p{margin:0 0 2px;} +table.table-info ul,table.table-info li{list-style-type:none;margin:0;padding:0;} +table.table-info td em{color:#00F;font-weight:normal;} +table.table-info .table_value{color: #0F93D2;} +/*table.table-info tr:hover td{ background-color:#f5f5f5}*/ + + + + diff --git a/WF/xOne/less/poptip.css b/WF/xOne/less/poptip.css new file mode 100644 index 000000000000..7f932bb73247 --- /dev/null +++ b/WF/xOne/less/poptip.css @@ -0,0 +1,176 @@ + +/*! + * poptip v1.0 + * Adapted from AliceUI + */ + +.ui-poptip{ + color:#DB7C22; + z-index:101; + font-size:12px; + line-height:1.5; + zoom:1 +} +.ui-poptip-shadow{ + background-color:rgba(229,169,107,.15); + FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#26e5a96b,endColorstr=#26e5a96b); + border-radius:2px; + padding:2px; + zoom:1; + _display:inline +} +.ui-poptip-container{ + position:relative; + background-color:#FFFCEF; + border:1px solid #ffbb76; + border-radius:2px; + padding:5px 15px; + zoom:1; + _display:inline +} +.ui-poptip:after,.ui-poptip-shadow:after,.ui-poptip-container:after{ + visibility:hidden; + display:block; + font-size:0; + content:" "; + clear:both; + height:0 +} +a.ui-poptip-close{ + position:absolute; + right:3px; + top:3px; + border:1px solid #ffc891; + text-decoration:none; + border-radius:3px; + width:12px; + height:12px; + font-family:tahoma; + color:#dd7e00; + line-height:10px; + *line-height:12px; + text-align:center; + font-size:14px; + background:#ffd7af; + background:-webkit-gradient(linear,left top,left bottom,from(#FFF0E1),to(#FFE7CD)); + background:-moz-linear-gradient(top,#FFF0E1,#FFE7CD); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF0E1',endColorstr='#FFE7CD'); + background:-o-linear-gradient(top,#FFF0E1,#FFE7CD); + background:linear-gradient(top,#FFF0E1,#FFE7CD); + overflow:hidden +} +a.ui-poptip-close:hover{ + border:1px solid #ffb24c; + text-decoration:none; + color:#dd7e00; + background:#ffd7af; + background:-webkit-gradient(linear,left top,left bottom,from(#FFE5CA),to(#FFCC98)); + background:-moz-linear-gradient(top,#FFE5CA,#FFCC98); + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFE5CA',endColorstr='#FFCC98'); + background:-o-linear-gradient(top,#FFE5CA,#FFCC98); + background:linear-gradient(top,#FFE5CA,#FFCC98) +} +.ui-poptip-arrow,.ui-poptip-arrow em,.ui-poptip-arrow span{ + position:absolute; + font-size:14px; + font-family:SimSun,Hiragino Sans GB; + font-style:normal; + line-height:21px; + z-index:10; + *zoom:1 +} +.ui-poptip-arrow em{ + color:#ffbb76 +} +.ui-poptip-arrow span{ + color:#FFFCEF; + top:0; + left:0 +} +.ui-poptip-arrow-10{ + top:6px; + left:-6px +} +.ui-poptip-arrow-10 em{ + top:0; + left:-1px +} +.ui-poptip-arrow-2{ + top:6px; + right:7px +} +.ui-poptip-arrow-2 em{ + top:0; + left:1px +} +.ui-poptip-arrow-11{ + left:14px; + top:-10px; + top:-9px +} +.ui-poptip-arrow-11 em{ + top:-1px; + left:0 +} +.ui-poptip-arrow-1{ + right:28px; + top:-10px; + top:-9px +} +.ui-poptip-arrow-1 em{ + top:-1px; + left:0 +} +.ui-poptip-arrow-7{ + left:14px; + bottom:10px +} +.ui-poptip-arrow-7 em{ + top:1px; + left:0 +} +.ui-poptip-arrow-5{ + right:28px; + bottom:10px +} +.ui-poptip-arrow-5 em{ + top:1px; + left:0 +} +:root .ui-poptip-shadow{ + FILTER:none9 +} +.ui-poptip-blue{ + color:#4d4d4d +} +.ui-poptip-blue .ui-poptip-shadow{ + background-color:rgba(0,0,0,.05); + FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#0c000000,endColorstr=#0c000000) +} +.ui-poptip-blue .ui-poptip-container{ + background-color:#F8FCFF; + border:1px solid #B9C8D3 +} +.ui-poptip-blue .ui-poptip-arrow em{ + color:#B9C8D3 +} +.ui-poptip-blue .ui-poptip-arrow span{ + color:#F8FCFF +} +.ui-poptip-white{ + color:#333 +} +.ui-poptip-white .ui-poptip-shadow{ + background-color:rgba(0,0,0,.05); + FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#0c000000,endColorstr=#0c000000) +} +.ui-poptip-white .ui-poptip-container{ + background-color:#fff; + border:1px solid #b1b1b1 +} +.ui-poptip-white .ui-poptip-arrow em{ + color:#b1b1b1 +} +.ui-poptip-white .ui-poptip-arrow span{ + color:#fff +} \ No newline at end of file diff --git a/WF/xOne/less/reset.css b/WF/xOne/less/reset.css new file mode 100644 index 000000000000..bcd000ec7575 --- /dev/null +++ b/WF/xOne/less/reset.css @@ -0,0 +1,137 @@ + +/* ------------------------------------------------------------ + reset.css v0.9 + Project: Pandora + Adapted from normalize.css +------------------------------------------------------------ */ + +/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG),css 中设置block属性 */ +article, +aside, +details, +embed, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/* HTML5 媒体文件跟 img inline-block 属性保持一致 */ +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} +command, +datalist, +keygen, +mark, +meter, +progress, +rp, +rt, +ruby, +time, +wbr { + display: inline; +} + +/* 移除内外边距(内外边距通常导致各个浏览器样式的表现位置不同,数目众多可按组划分) */ +body, div, +dl, dt, dd, ol, ul, li, +h1, h2, h3, h4, h5, h6, p, +blockquote, pre, code, +tr, th, td, +hr, +menu { + margin: 0; + padding: 0; +} + +body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + margin: 0; + padding: 0; +} + +/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ +h1, h2, h3, h4, h5, h6 { + font-size: 100%; +} +/* 移除表单元素的reset,在form.css中统一设置 */ +fieldset, figure, legend, +form, input, button, textarea {} + +/* 语义化的标签的样式默认的margin,padding都为0,不必reset +article, +aside, +details, +figcaption, +footer, +header, +hgroup, +menu, +nav, +section {} + */ + +/* + 大范围的去除列表项并不好,不若使用.none样式,由于习惯限制等问题,使用推荐如下: + - 研究类项目使用无差异样式 normalize.css 即可 + - 生产线上需使用传统的 reset.css 样式 + */ +ol, +ul { + list-style-type: none; +} + +/* 去掉列表前的标识, li 会继承,大部分网站通常用列表来很多内容,所以应该当去 */ +ul, ol { + list-style: none; +} + +/* 去除默认边框 */ +fieldset, img { + border: 0; +} + +/* 去除 IE6 input/button 多余的空白 */ +button, input { + *width: auto; + *overflow: visible; + + /* 让 input 和 button 一样高 */ + line-height:22px; +} + +/* 默认不显示下划线,保持页面简洁 */ +ins,a { + text-decoration: none; +} + +/* 让链接在 hover 状态下显示下划线 */ +a:hover { text-decoration: underline;} + +img { border: 0;} + +/* + 修复火狐下图片和文字之间的间隙 + 添加img{vertical-align:top;}、img{vertical-align:middle;}或img{display:block}属性即可解决 + 推荐前者,不要再reset中设置,建议使用时再处理 + +img { + vertical-align: middle; +} + */ + +/* 这条分割线以上为reset.css,书写规范请参见cssREADME.md +============================================================ */ + diff --git a/WF/xOne/less/sprites.css b/WF/xOne/less/sprites.css new file mode 100644 index 000000000000..c737830e4514 --- /dev/null +++ b/WF/xOne/less/sprites.css @@ -0,0 +1,462 @@ + +/* + @名称: buttons.css + @功能: 图标集 + */ + +[class^="icon-"], +[class*=" icon-"] { + display: inline-block; + width: 14px; + height: 14px; + *margin-right: .3em; + line-height: 14px; + vertical-align: text-top; + background-image: url("../img/glyphicons-halflings.png"); + background-position: 14px 14px; + background-repeat: no-repeat; + margin-top: 1px; +} +/* White icons with optional class, or on hover/focus/active states of certain elements */ +.icon-white, +.nav-pills > .active > a > [class^="icon-"], +.nav-pills > .active > a > [class*=" icon-"], +.nav-list > .active > a > [class^="icon-"], +.nav-list > .active > a > [class*=" icon-"], +.navbar-inverse .nav > .active > a > [class^="icon-"], +.navbar-inverse .nav > .active > a > [class*=" icon-"], +.dropdown-menu > li > a:hover > [class^="icon-"], +.dropdown-menu > li > a:focus > [class^="icon-"], +.dropdown-menu > li > a:hover > [class*=" icon-"], +.dropdown-menu > li > a:focus > [class*=" icon-"], +.dropdown-menu > .active > a > [class^="icon-"], +.dropdown-menu > .active > a > [class*=" icon-"], +.dropdown-submenu:hover > a > [class^="icon-"], +.dropdown-submenu:focus > a > [class^="icon-"], +.dropdown-submenu:hover > a > [class*=" icon-"], +.dropdown-submenu:focus > a > [class*=" icon-"] { + background-image: url("../img/glyphicons-halflings-white.png"); +} +.icon-glass { + background-position: 0 0; +} +.icon-music { + background-position: -24px 0; +} +.icon-search { + background-position: -48px 0; +} +.icon-envelope { + background-position: -72px 0; +} +.icon-heart { + background-position: -96px 0; +} +.icon-star { + background-position: -120px 0; +} +.icon-star-empty { + background-position: -144px 0; +} +.icon-user { + background-position: -168px 0; +} +.icon-film { + background-position: -192px 0; +} +.icon-th-large { + background-position: -216px 0; +} +.icon-th { + background-position: -240px 0; +} +.icon-th-list { + background-position: -264px 0; +} +.icon-ok { + background-position: -288px 0; +} +.icon-remove { + background-position: -312px 0; +} +.icon-zoom-in { + background-position: -336px 0; +} +.icon-zoom-out { + background-position: -360px 0; +} +.icon-off { + background-position: -384px 0; +} +.icon-signal { + background-position: -408px 0; +} +.icon-cog { + background-position: -432px 0; +} +.icon-trash { + background-position: -456px 0; +} +.icon-home { + background-position: 0 -24px; +} +.icon-file { + background-position: -24px -24px; +} +.icon-time { + background-position: -48px -24px; +} +.icon-road { + background-position: -72px -24px; +} +.icon-download-alt { + background-position: -96px -24px; +} +.icon-download { + background-position: -120px -24px; +} +.icon-upload { + background-position: -144px -24px; +} +.icon-inbox { + background-position: -168px -24px; +} +.icon-play-circle { + background-position: -192px -24px; +} +.icon-repeat { + background-position: -216px -24px; +} +.icon-refresh { + background-position: -240px -24px; +} +.icon-list-alt { + background-position: -264px -24px; +} +.icon-lock { + background-position: -287px -24px; +} +.icon-flag { + background-position: -312px -24px; +} +.icon-headphones { + background-position: -336px -24px; +} +.icon-volume-off { + background-position: -360px -24px; +} +.icon-volume-down { + background-position: -384px -24px; +} +.icon-volume-up { + background-position: -408px -24px; +} +.icon-qrcode { + background-position: -432px -24px; +} +.icon-barcode { + background-position: -456px -24px; +} +.icon-tag { + background-position: 0 -48px; +} +.icon-tags { + background-position: -25px -48px; +} +.icon-book { + background-position: -48px -48px; +} +.icon-bookmark { + background-position: -72px -48px; +} +.icon-print { + background-position: -96px -48px; +} +.icon-camera { + background-position: -120px -48px; +} +.icon-font { + background-position: -144px -48px; +} +.icon-bold { + background-position: -167px -48px; +} +.icon-italic { + background-position: -192px -48px; +} +.icon-text-height { + background-position: -216px -48px; +} +.icon-text-width { + background-position: -240px -48px; +} +.icon-align-left { + background-position: -264px -48px; +} +.icon-align-center { + background-position: -288px -48px; +} +.icon-align-right { + background-position: -312px -48px; +} +.icon-align-justify { + background-position: -336px -48px; +} +.icon-list { + background-position: -360px -48px; +} +.icon-indent-left { + background-position: -384px -48px; +} +.icon-indent-right { + background-position: -408px -48px; +} +.icon-facetime-video { + background-position: -432px -48px; +} +.icon-picture { + background-position: -456px -48px; +} +.icon-pencil { + background-position: 0 -72px; +} +.icon-map-marker { + background-position: -24px -72px; +} +.icon-adjust { + background-position: -48px -72px; +} +.icon-tint { + background-position: -72px -72px; +} +.icon-edit { + background-position: -96px -72px; +} +.icon-share { + background-position: -120px -72px; +} +.icon-check { + background-position: -144px -72px; +} +.icon-move { + background-position: -168px -72px; +} +.icon-step-backward { + background-position: -192px -72px; +} +.icon-fast-backward { + background-position: -216px -72px; +} +.icon-backward { + background-position: -240px -72px; +} +.icon-play { + background-position: -264px -72px; +} +.icon-pause { + background-position: -288px -72px; +} +.icon-stop { + background-position: -312px -72px; +} +.icon-forward { + background-position: -336px -72px; +} +.icon-fast-forward { + background-position: -360px -72px; +} +.icon-step-forward { + background-position: -384px -72px; +} +.icon-eject { + background-position: -408px -72px; +} +.icon-chevron-left { + background-position: -432px -72px; +} +.icon-chevron-right { + background-position: -456px -72px; +} +.icon-plus-sign { + background-position: 0 -96px; +} +.icon-minus-sign { + background-position: -24px -96px; +} +.icon-remove-sign { + background-position: -48px -96px; +} +.icon-ok-sign { + background-position: -72px -96px; +} +.icon-question-sign { + background-position: -96px -96px; +} +.icon-info-sign { + background-position: -120px -96px; +} +.icon-screenshot { + background-position: -144px -96px; +} +.icon-remove-circle { + background-position: -168px -96px; +} +.icon-ok-circle { + background-position: -192px -96px; +} +.icon-ban-circle { + background-position: -216px -96px; +} +.icon-arrow-left { + background-position: -240px -96px; +} +.icon-arrow-right { + background-position: -264px -96px; +} +.icon-arrow-up { + background-position: -289px -96px; +} +.icon-arrow-down { + background-position: -312px -96px; +} +.icon-share-alt { + background-position: -336px -96px; +} +.icon-resize-full { + background-position: -360px -96px; +} +.icon-resize-small { + background-position: -384px -96px; +} +.icon-plus { + background-position: -408px -96px; +} +.icon-minus { + background-position: -433px -96px; +} +.icon-asterisk { + background-position: -456px -96px; +} +.icon-exclamation-sign { + background-position: 0 -120px; +} +.icon-gift { + background-position: -24px -120px; +} +.icon-leaf { + background-position: -48px -120px; +} +.icon-fire { + background-position: -72px -120px; +} +.icon-eye-open { + background-position: -96px -120px; +} +.icon-eye-close { + background-position: -120px -120px; +} +.icon-warning-sign { + background-position: -144px -120px; +} +.icon-plane { + background-position: -168px -120px; +} +.icon-calendar { + background-position: -192px -120px; +} +.icon-random { + background-position: -216px -120px; + width: 16px; +} +.icon-comment { + background-position: -240px -120px; +} +.icon-magnet { + background-position: -264px -120px; +} +.icon-chevron-up { + background-position: -288px -120px; +} +.icon-chevron-down { + background-position: -313px -119px; +} +.icon-retweet { + background-position: -336px -120px; +} +.icon-shopping-cart { + background-position: -360px -120px; +} +.icon-folder-close { + background-position: -384px -120px; + width: 16px; +} +.icon-folder-open { + background-position: -408px -120px; + width: 16px; +} +.icon-resize-vertical { + background-position: -432px -119px; +} +.icon-resize-horizontal { + background-position: -456px -118px; +} +.icon-hdd { + background-position: 0 -144px; +} +.icon-bullhorn { + background-position: -24px -144px; +} +.icon-bell { + background-position: -48px -144px; +} +.icon-certificate { + background-position: -72px -144px; +} +.icon-thumbs-up { + background-position: -96px -144px; +} +.icon-thumbs-down { + background-position: -120px -144px; +} +.icon-hand-right { + background-position: -144px -144px; +} +.icon-hand-left { + background-position: -168px -144px; +} +.icon-hand-up { + background-position: -192px -144px; +} +.icon-hand-down { + background-position: -216px -144px; +} +.icon-circle-arrow-right { + background-position: -240px -144px; +} +.icon-circle-arrow-left { + background-position: -264px -144px; +} +.icon-circle-arrow-up { + background-position: -288px -144px; +} +.icon-circle-arrow-down { + background-position: -312px -144px; +} +.icon-globe { + background-position: -336px -144px; +} +.icon-wrench { + background-position: -360px -144px; +} +.icon-tasks { + background-position: -384px -144px; +} +.icon-filter { + background-position: -408px -144px; +} +.icon-briefcase { + background-position: -432px -144px; +} +.icon-fullscreen { + background-position: -456px -144px; +} diff --git a/WF/xOne/less/tables.css b/WF/xOne/less/tables.css new file mode 100644 index 000000000000..9e6474e86c8e --- /dev/null +++ b/WF/xOne/less/tables.css @@ -0,0 +1,132 @@ + +/*! + * tables.css v1.0 + * Adapted from https://github.com/webcoding/cnBootstrap + */ + +table { + max-width: 100%; + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; +} + +.table { + width: 100%; + margin-bottom: 20px; +} + +.table th, +.table td { + padding: 8px; + line-height: 20px; + text-align: left; + vertical-align: top; + border-top: 1px solid #dddddd; +} + +.table th { + font-weight: bold; +} + +.table thead th { + vertical-align: bottom; +} + + + + + + +/* 表格扩展 */ + +table th, +table td { + padding:4px 5px; + line-height: 20px; +} + +table th { + font-weight: bold; +} +table td { + text-align: left; +} +.table-full { + width: 100%; +} + +.table-border th, +.table-border td{ + border:1px solid #ccc; +} + +/* 信息表格 */ +.table-info th, +.table-info td, +.table-info td table caption{ + border: 1px solid #ddd; + padding: 5px 10px; +} +.table-info th { + background: #fbfbfb; +} +.table-info td { + background: #fff; +} +.table-info th { + background: #f1f1f1; +} +.table-info table .caption { + border-bottom:none; +} + +table.darktable { + border: 1px solid #888; + border-collapse: collapse; + margin-bottom: 1em +} +table.darktable pre { + margin: 0; + padding: 0; + width: auto; + background-color: transparent; +} +table.darktable th, +table.darktable td { + padding: 5px 10px; + text-align: left; +} +table.darktable th { + background-color: #ccc; + border: 1px solid #888; + vertical-align: baseline; +} +table.darktable td { + background-color: #efefef; + border: 1px solid #aaa; + vertical-align: text-top; +} +table.darktable p { + margin: 0 0 2px; +} +table.darktable ul, +table.table-info li { + margin: 0; + padding: 0; + list-style-type: none; +} +table.darktable td em { + color: #00F; + font-weight: normal; +} +table.darktable .table_value { + color: #0F93D2; +} +/*table.table-info tr:hover td{ background-color:#f5f5f5}*/ + +/* 布局表格 */ +.table-layout{} +.table-layout th,.table-layout td{padding: 5px 10px;text-align:left;} +.table-layout .label,.table-layout .f_label{text-align:right;padding-right:0;} +.f_label{background: #e2eaf4;} diff --git a/WF/xOne/less/tags.css b/WF/xOne/less/tags.css new file mode 100644 index 000000000000..e2c090140462 --- /dev/null +++ b/WF/xOne/less/tags.css @@ -0,0 +1,311 @@ + +/*! + * tags.css v1.0 + * Author Pandora + */ + +/* tagcc,tagback */ + +/* 新的tags标签 tags.css: tagcc,tagback */ +.tagscc, +.tagsback, +.tagsgift { + display: inline-block; + margin: 0 2px; + font-size: 12px; + font-style: normal; + font-weight: normal; + text-indent:0; + cursor: default; +} + +.tagscc { + padding: 0 4px; + background: #ff9614; + color: #fff; + height: 16px; + line-height: 16px; +} + +.tagsback, +.tagsgift { + font-size: 12px; + height: 14px; + line-height: 14px; + text-decoration: none; +} + +.tagscc:empty, +.tagsback:empty { + display: none; +} + +.tagsback { + border: 1px solid #ff9614; + color: #ff9614; +} + +.tagsback:hover { + text-decoration: none; + color: #ff9614; +} + +.tagsback em, +.tagsback i, +.tagsgift em, +.tagsgift i { + font-size: 12px; + display: inline-block; + font-style: normal; + font-weight: normal !important; + overflow: hidden; + height: 100%; +} + +.tagsback em, +.tagsgift em { + display: inline-block; + padding: 0 2px; + *float: left; + height: 100%; +} + +.tagsback em { + background: #ff9614; + color: #fff; +} + +.tagsback i, +.tagsgift i { + padding: 0 3px; + min-width: 30px; + _width: 30px; + text-align: center; + color: #ff9614; +} + +.tagsgift, +.tagblue { + border: 1px solid #ccddee; + color: #17afe3; +} + +.tagsgift:hover, +.tagblue:hover { + text-decoration: none; + color: #17afe3; +} + +.tagsgift em, +.tagblue em { + background: #f0f5fc; + color: #17afe3; +} + +.tagsgift i, +.tagblue i { + color: #17afe3; +} + +/* tags101 纯色标签 101橙色 102粉红 103红色 104绿色 105玫红 */ +.tags101, +.tags102, +.tags103, +.tags104, +.tags105, +.tags106, +.tags107, +.tags108, +.tags109 { + display: inline-block; + margin: 0 2px; + font-size: 12px; + font-style: normal; + font-weight: normal !important; + text-indent:0; + cursor: default; + + padding: 0 4px; + background: #ff9614; + color: #fff; + height: 16px; + line-height: 16px; +} +.tags101{ background: #ff8800;} /* 橙色 */ +.tags102{ background: #fa65b0;} /* 粉红 */ +.tags103{ background: #ff4444;} /* 红色 */ +.tags104{ background: #6bbd00;} /* 绿色 */ +.tags105{ background: #dd1177;} /* 玫红 */ +.tags106{ background: ;} /* */ +.tags107{ background: ;} /* */ +.tags108{ background: ;} /* */ +.tags109{ background: ;} /* */ + +/* tags背景 */ +.tags201, +.tags301, +.tags302 { + background: url(http://pic.lvmama.com/img/new_v/ob_search/combo.gif) no-repeat; + display: inline-block; + *display: inline; + *zoom: 1; + font-family: Tahoma,Arial,\5b8b\4f53; + text-indent: 0; +} + +/* tags201 促销大ICON-橙色 */ +.tags201 { + width: 72px; + height: 26px; + line-height: 26px; + margin: 0 0 8px 0; + padding: 0 0 9px 0; + overflow: hidden; + white-space: nowrap; + background-position: -32px -136px; + font-size: 12px; + color: #ee6600; + text-align: center; + text-indent: 0; +} + +/* tags301 项目tags 301超级自由行 302开心驴行 */ +.tags301, +.tags302 { + display:inline-block; + margin:0 2px; + height: 17px; + line-height: 17px; + width: 76px; + overflow: hidden; + font-size: 12px; + text-indent: -9999px; +} + +.tags301{ background-position: -190px 0; width: 88px;} +.tags302{ background-position: -190px -17px; width: 76px;} + + + +/* .tag 标签内使用 arial 字体垂直居中表现很好 + * author: linjianfeng@baixing.com + */ +.tag { + font-family: Arial,sans-serif; + display: inline-block; + padding: 0 3px; + padding: 1px 3px 0\9; + background: #eee; + margin: 0 3px; + border-radius: 2px; + color: #888 !important; +} +.tag-blue, +.tag-green, +.tag-red, +a.tag:hover { + color: #fff !important; +} +.tag-blue { background: #08c; } +.tag-green { background: #5ba533; } +.tag-red { background: #f36; } +a.tag:hover { + background: #888; + text-decoration: none; + color: #fff !important; +} + + +/* 与文本的垂直对齐问题 */ +[class^="tags"], +[class*=" tags"], +.tagscc, +.tagsback, +.tagsgift, +.tags101, +.tags102, +.tags103, +.tags104, +.tags105, +.tags106, +.tags107, +.tags108, +.tags109, +.tags301, +.tags302 { + vertical-align: middle ; + /* + vertical-align: middle; + position: relative; + top: -1px; + *top: 1px; */ +} + + + +/* tags测试 */ +.testtags { + display: inline-block; + margin: 0 2px; + font-size: 12px; + font-style: normal; + font-weight: normal; + text-indent:0; + cursor: default; + zoom: 1; + vertical-align:middle; +} + +.testtags { + font-size: 12px; + height: 14px; + line-height: 14px; + text-decoration: none; +} + + +.testtags { + border: 1px solid #ff9614; + color: #ff9614; + *zoom:1; + overflow:hidden; +} +.testtags{ display:inline-block; font-weight:normal; font-style:normal; height:30px; line-height:30px;} +.testtags em, +.testtags i{ + font-size: 12px; + display: inline-block; + font-style: normal; + font-weight: normal !important; + overflow: hidden; + height: 100%; + *zoom:1; +} + + + +.testtags em { + display: inline-block; + padding: 0 2px; + *vertical-align: top; +} + +.testtags em { + background: #ff9614; + color: #fff; +} + +.testtags i { + padding: 0 3px; + min-width: 30px; + _width: 30px; + text-align: center; + color: #ff9614; +} + + + + + + + diff --git a/WF/xOne/less/tips.css b/WF/xOne/less/tips.css new file mode 100644 index 000000000000..ecb3f8ffda31 --- /dev/null +++ b/WF/xOne/less/tips.css @@ -0,0 +1,282 @@ + +/*! + * tips.css v1.0 信息提示(提示层/提示文本/提示框) + * Adapted from aliceui + */ + +/* 提示框 */ + +.ui-tipbox{ + position:relative; + zoom:1; + font-size:12px; + line-height:22px +} +.ui-tipbox .ui-tipbox-icon{ + background:#fff; + width:20px; + height:20px; + position:absolute; + top:22px; + left:48px +} +.ui-tipbox-icon .iconfont{ + font-size:36px; + position:absolute; + top:-7px; + left:-7px; + width:32px; + height:32px; + line-height:36px; + text-shadow:1px 1px #fff +} +.ui-tipbox-message{ + border:1px solid#CBD7E2; + background:#E4F5FE +} +.ui-tipbox-message .ui-tipbox-icon .iconfont{ + color:#0483CF +} +.ui-tipbox-success{ + border:1px solid#E1E1CA; + background:#EDFED0 +} +.ui-tipbox-success .ui-tipbox-icon .iconfont{ + color:#20DC19 +} +.ui-tipbox-error{ + background:#FDEEE9; + border:1px solid#F6C7B8 +} +.ui-tipbox-error .ui-tipbox-icon .iconfont{ + color:#FF4800 +} +.ui-tipbox-warning{ + background:#FEFEA4; + border:1px solid#E6C46A +} +.ui-tipbox-warning .ui-tipbox-icon .iconfont{ + color:#FFA700 +} +.ui-tipbox-question{ + border:1px solid#CBD7E2; + background:#E4F5FE +} +.ui-tipbox-question .ui-tipbox-icon .iconfont{ + color:#00B5F3 +} +.ui-tipbox-stop{ + background:#FDEEE9; + border:1px solid#F4C7B5 +} +.ui-tipbox-stop .ui-tipbox-icon .iconfont{ + color:#F50 +} +.ui-tipbox-wait{ + border:1px solid#E6CBB1; + background:#FFF9D9 +} +.ui-tipbox-wait .ui-tipbox-icon .iconfont{ + color:#B26100 +} +.ui-tipbox-content{ + margin:14px 0 14px 87px +} +.ui-tipbox-content .ui-tipbox-title{ + margin:0; + padding:0 +} +.ui-tipbox-content h3.ui-tipbox-title, +.ui-tipbox-content-simple h3.ui-tipbox-title{ + color:#333; + font-size:14px; + font-weight:700 +} +.ui-tipbox-content-simple{ + margin:22px 0 22px 88px +} +.ui-tipbox-explain{ + margin:0; + padding:0; + color:gray +} +.ui-tipbox-white{ + background:#fff; + border:1px solid transparent; + _border-color:tomato; + _filter:chroma(color=tomato) +} + + + + + + + + +/* 提示文本 */ + +.ui-tiptext { + margin:0; + color:#4D4D4D; + position:relative; + font-size:12px; + *zoom:1 +} +.ui-tiptext-container { + padding:8px 12px; + position:relative; + *zoom:1 +} +.ui-tiptext .iconfont { + font-size:1.33em; + line-height:1em; + text-shadow:0 1px 0#fff; + position:relative; + top:2px +} +.ui-tiptext-icon { + display:inline-block; + *display:inline; + *zoom:1 +} +.ui-tiptext-message .ui-tiptext-icon { + color:#0483CF +} +.ui-tiptext-container-message { + background:#e5f5ff; + border:1px solid #c9d5e2 +} +.ui-tiptext-success .ui-tiptext-icon { + color:#20DC19 +} +.ui-tiptext-container-success { + background:#E7FFCE; + border:1px solid #B9E2A0 +} +.ui-tiptext-error .ui-tiptext-icon { + color:#FF4800 +} +.ui-tiptext-container-error { + background:#fceee8; + border:1px solid #f6c8b5 +} +.ui-tiptext-warning .ui-tiptext-icon { + color:#FFA700 +} +.ui-tiptext-container-warning { + background:#ffff8d; + border:1px solid #e7c560 +} +.ui-tiptext-question .ui-tiptext-icon { + color:#00B5F3 +} +.ui-tiptext-container-question { + background:#e5f5ff; + border:1px solid #c9d5e2 +} +.ui-tiptext-stop .ui-tiptext-icon { + color:#F50 +} +.ui-tiptext-container-stop{ + background:#fceee8; + border:1px solid #f6c8b5 +} +.ui-tiptext-wait .ui-tiptext-icon { + color:#B26100 +} +.ui-tiptext-container-wait { + background:#FFF9D9; + border:1px solid #E6CBB1 +} +.ui-tiptext-arrowup, +.ui-tiptext-arrowup em, +.ui-tiptext-arrowup span, +.ui-tiptext-arrowleft, +.ui-tiptext-arrowleft em, +.ui-tiptext-arrowleft span, +.ui-tiptext-arrowdown, +.ui-tiptext-arrowdown em, +.ui-tiptext-arrowdown span { + position:absolute; + font-size:14px; + font-family:SimSun; + font-style:normal; + line-height:1 +} +.ui-tiptext-arrowup, +.ui-tiptext-arrowleft, +.ui-tiptext-arrowdown { + height:10px; + width:16px +} +.ui-tiptext-arrowup { + left:32px; + top:-7px +} +.ui-tiptext-arrowup em { + top:-1px +} +.ui-tiptext-arrowleft { + left:-6px; + top:10px +} +.ui-tiptext-arrowleft em { + left:-1px +} +.ui-tiptext-arrowdown { + left:32px; + bottom:-3px +} +.ui-tiptext-arrowdown em { + top:1px +} +.ui-tiptext-container-message .ui-tiptext-arrow em { + color:#c9d5e2 +} +.ui-tiptext-container-message .ui-tiptext-arrow span { + color:#e5f5ff +} +.ui-tiptext-container-success .ui-tiptext-arrow em { + color:#B9E2A0 +} +.ui-tiptext-container-success .ui-tiptext-arrow span { + color:#E7FFCE +} +.ui-tiptext-container-error .ui-tiptext-arrow em { + color:#f6c8b5 +} +.ui-tiptext-container-error .ui-tiptext-arrow span { + color:#fceee8 +} +.ui-tiptext-container-warning .ui-tiptext-arrow em { + color:#e7c560 +} +.ui-tiptext-container-warning .ui-tiptext-arrow span { + color:#ffff8d +} +.ui-tiptext-container-question .ui-tiptext-arrow em { + color:#c9d5e2 +} +.ui-tiptext-container-question .ui-tiptext-arrow span { + color:#e5f5ff +} +.ui-tiptext-container-stop .ui-tiptext-arrow em { + color:#f6c8b5 +} +.ui-tiptext-container-stop .ui-tiptext-arrow span { + color:#fceee8 +} +.ui-tiptext-container-wait .ui-tiptext-arrow em { + color:#E6CBB1 +} +.ui-tiptext-container-wait .ui-tiptext-arrow span { + color:#FFF9D9 +} +.ui-tiptext-close{ + position:absolute; + right:10px; + top:9px; + color:#60A2C5; + cursor:pointer +} diff --git a/WF/xOne/less/typo-dev.css b/WF/xOne/less/typo-dev.css new file mode 100644 index 000000000000..ab27c00f394e --- /dev/null +++ b/WF/xOne/less/typo-dev.css @@ -0,0 +1,291 @@ + +/*! + * typo-dev.css v0.9 + * 依赖于 normalize.css + * 修改自 bootstrap,实现统一的标签样式(非生产线使用) + */ + +/* + * 基于 如下 body 属性 + * body { font: 14px/1.5 Tahoma,Arial,\5b8b\4f53,sans-serif;} + * 用于开发研究,默认 14px 字体 + */ + +.small { + font-size: 80%; + color: #888; + font-weight: normal; +} +.em { + font-style: italic; +} + +/* p有上边距,在table中导致td的下边框未合并? */ +table p { margin-top: 0;} + +/* 紧凑段落布局 TODO */ +.compact_p p { + margin : 0; + line-height: 1.6em; +} + +.page-header { + padding-bottom: 9px; + margin: 20px 0 30px; + border-bottom: 1px solid #eeeeee; +} + +ul, +ol { + padding: 0; + margin: 10px 0 10px 25px; + margin: 10px 0 10px 2em; +} + +ul ul, +ul ol, +ol ol, +ol ul { + margin-top: 0; + margin-bottom: 0; +} + +ul.unstyled, +ol.unstyled { + margin-left: 0; + list-style: none; +} + +ul.inline, +ol.inline { + margin-left: 0; + list-style: none; +} + +ul.inline > li, +ol.inline > li { + display: inline-block; + /* IE7 inline-block hack */ + + *display: inline; + padding-right: 5px; + padding-left: 5px; + *zoom: 1; +} + +/* + *
  • + * 字体为宋体时 • 能良好的表示 ul 列表项中的点 + */ + +ul.ul, +ol.ol { + font-family: \5b8b\4f53, sans-serif; +} + + +/* + * 同 ul/ol,在文章中应具备 table 基本格式 + * 此处仅设置样式 .table-info + * 出于统一的目的,更多表格设置请参看 tables.css + */ + +.table-info th, +.table-info td, +.table-info td table caption{ + border: 1px solid #ddd; + padding: 4px 8px; +} +.table-info th { + background: #fbfbfb; +} +.table-info td { + background: #fff; +} +.table-info thead th { + background: #f1f1f1; +} +.table-info table .caption { + border-bottom:none; +} + +dt, +dd { + line-height: 20px; +} + +dt { + font-weight: bold; +} + +dd { + margin-left: 10px; +} +.dl-hor, +.dl-horizontal { + *zoom: 1; +} +.dl-hor:before, +.dl-hor:after, +.dl-horizontal:before, +.dl-horizontal:after { + display: table; + line-height: 0; + content: ""; +} +.dl-hor:after, +.dl-horizontal:after { + clear: both; +} +.dl-hor dt, +.dl-horizontal dt { + float: left; + width: 160px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.dl-horizontal dd { + margin-left: 180px; +} +.dl-hor dt { + width: 100px; + font-weight: normal; +} +.dl-hor dd { + margin-left: 120px; +} +hr { + margin: 20px 0; + border: 0; + border-top: 1px solid #eeeeee; + border-bottom: 1px solid #ffffff; +} + +abbr[title], +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted #999999; +} + +abbr.initialism { + font-size: 90%; + text-transform: uppercase; +} + +blockquote { + padding: 0 15px; + margin: 15px 0; + border-left: 5px solid #ddd; + color: #555; +} + +blockquote p { + margin: 0.6em 0 0.4em; + line-height: 1.5; +} + +blockquote small { + display: block; + line-height: 20px; + color: #999; +} + +blockquote small:before { + content: '\2014 \00A0'; +} +blockquote em { + margin-left: 1em; + color: green; +} +blockquote blockquote { + margin-left: 2em; + padding: 0 15px; +} + +blockquote.pull-right { + float: right; + float: none; + padding-right: 15px; + padding-left: 0; + border-right: 5px solid #ddd; + border-left: 0; +} + +blockquote.pull-right p, +blockquote.pull-right small { + text-align: right; +} + +blockquote.pull-right small:before { + content: ''; +} + +blockquote.pull-right small:after { + content: '\00A0 \2014'; +} + +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +address { + display: block; + margin-bottom: 20px; + font-style: normal; + line-height: 20px; +} + +p { + margin: 0 0 0 10px; + margin: 0.8em 0 0.6em; +} + +h1, h2, h3, h4, h5, h6 { + margin: 10px 0; + font-weight: bold; + line-height: 22px; +} + +h1 { font-size: 36px;} +h2 { font-size: 28px;} +h3 { font-size: 22px;} +h4 { font-size: 18px;} +h5 { font-size: 14px;} +h6 { font-size: 12px;} + +/* 标题应该更贴紧内容,并与其他块区分,margin 值要相应做优化 @引自sofish的typo.css */ +h1, h2, h3, h4, h5, h6 { + margin: 1em 0 0.6em; + line-height: 1; + font-weight: bold; +} +h1 { font-size: 2.6em;} +h2 { font-size: 2.0em;} +h3 { font-size: 1.6em;} +h4 { font-size: 1.3em;} +h5 { font-size: 1em;} +h6 { font-size: 12px;} + +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + line-height: 1; + color: #888; + display: inline-block; +} +h1 small { font-size: 24px;} +h2 small { font-size: 18px;} +h3 small { font-size: 14px;} +h4 small { font-size: 14px;} +h5 small, +h6 small { font-size: 12px;} diff --git a/WF/xOne/less/typo.css b/WF/xOne/less/typo.css new file mode 100644 index 000000000000..cfdd92a2ce5a --- /dev/null +++ b/WF/xOne/less/typo.css @@ -0,0 +1,205 @@ + +/*! + * typo.css v0.9 + * 依赖于 normalize.css reset.css + * 修改自 typo.css@sofish 实现 typo-dev 的生产线版本 + */ + +/* + * 基于 如下 body 属性 + * body { font: 12px/1.5 Tahoma,Arial,\5b8b\4f53,sans-serif;} + * 生产线使用 12px 字体,可根据需求自定义修改 + */ + +.typo p { margin: 1em 0 0.6em;} +.typo table p { margin-top: 0;} + +/* 专名号:虽然 u 已经重回 html5 Draft,但在所有浏览器中都是可以使用的, + * 要做到更好,向后兼容的话,添加 class="typo-u" 来显示专名号 + * 关于 标签:http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element + * 被放弃的是 4,之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated + * 一篇关于 标签的很好文章:http://html5doctor.com/u-element/ + */ +u, .typo-u { + text-decoration: underline; +} + + +/* 保证块/段落之间的空白隔行 */ +.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, +.typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table { + margin-bottom: 1em; +} + +h1, h2, h3, h4, h5, h6{ + +} + +/* 标题应该更贴紧内容,并与其他块区分,margin 值要相应做优化 + * 这里相对于12px/14px字体设置 + */ +.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6, +.typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6 { + margin: 1em 0 0.6em; + line-height: 1; + font-weight: bold; +} +.typo h1, .typo-h1 { + font-size: 2.6em; +} +.typo h2, .typo-h2 { + font-size: 2.0em; +} +.typo h3, .typo-h3 { + font-size: 1.6em; +} +.typo h4, .typo-h4 { + font-size: 1.3em; +} +.typo h5, .typo-h5 { + font-size: 1em; +} +.typo h6, .typo-h6 { + font-size: 1em; +} + +/* 在文章中,还原 ul 和 ol 的样式,布局更便捷迅速 */ + +.typo ul, +.typo-ul, +.typo ol, +.typo-ol { + padding: 0; + margin: 10px 0 10px 25px; + margin: 10px 0 10px 2em; +} + +.typo ul, .typo-ul { + list-style: disc; +} +.typo ol, .typo-ol { + list-style: decimal; +} + +.typo li ul, +.typo li ol, +.typo-ul ul, +.typo-ul ol, +.typo-ol ul, +.typo-ol ol { + margin-bottom: 0; + margin-bottom: 0; + margin-left: 2em; +} + +.typo li ul, +.typo-ul ul, +.typo-ol ul { + list-style: circle; +} + + + +ul.unstyled, +ol.unstyled { + margin-left: 0; + list-style: none; +} + +ul.inline, +ol.inline { + margin-left: 0; + list-style: none; +} + +ul.inline > li, +ol.inline > li { + display: inline-block; + /* IE7 inline-block hack */ + + *display: inline; + padding-right: 5px; + padding-left: 5px; + *zoom: 1; +} + + +/* + *
  • + * 字体为宋体时 • 能良好的表示 ul 列表项中的点 + */ +ul.ul, +ol.ol { + font-family: \5b8b\4f53, sans-serif; +} + +/* + * 同 ul/ol,在文章中应具备 table 基本格式 + * 此处仅设置 .typo table 样式(同.table-info) + * 出于统一的目的,更多表格设置请参看 tables.css + */ + +.typo table th, +.typo table td, +.typo-table th, +.typo-table td .typo table caption{ + border: 1px solid #ddd; + padding: 4px 8px; +} +.typo table th, +.typo-table th { + background: #fbfbfb; +} +.typo table thead th, +.typo-table thead th { + background: #f1f1f1; +} +.typo table .caption { + border-bottom:none; +} + +/* 块/段落引用 */ +.typo blockquote { + padding: 0 0 0 15px; + margin: 0 0 20px; + border-left: 5px solid #eeeeee; +} + +.typo blockquote p { + margin-bottom: 0; + font-size: 14px; + font-weight: 300; + line-height: 1.5; +} + +.typo blockquote small { + display: block; + line-height: 20px; + color: #999999; +} + +.typo blockquote small:before { + content: '\2014 \00A0'; +} + +/* 代码片断 请参见 code.css */ +pre, code { } + +/* 表单元素 请参见 forms.css */ +input { } + +/* 去除 webkit 中 input 和 textarea 的默认样式 */ +.typo-input, .typo-textarea{ + -webkit-appearance:none; + border-radius:0; +} + +/* 高亮选中 */ +::-moz-selection {background:#08c;color:#fff;} +::selection {background:#08c;color:#fff;} + +/* TODO: 供着重号使用 */ +.typo-em, .typo em, legend, caption { + font-weight: 700; + font-style: normal; +} diff --git a/WF/xOne/less/wf.css b/WF/xOne/less/wf.css new file mode 100644 index 000000000000..4b8abb5a7ff6 --- /dev/null +++ b/WF/xOne/less/wf.css @@ -0,0 +1,74 @@ + +/*! + * WebFrame v1.0 + * Adapted from https://github.com/webcoding/cnBootstrap + */ + +/* Core variables and mixins */ +/* Modify this for custom colors, font-sizes, etc */ +@import "variables.css"; +@import "mixins.css"; + +/* CSS Reset +@import "../../assets/css/reset-dev.css"; +@import "../../assets/css/combo-dev.css"; +@import "../../assets/css/module.css"; + */ +/* Grid system and page structure */ +@import "scaffolding.css"; +@import "grid.css"; +@import "layouts.css"; + +/* Base CSS */ +@import "type.css"; +@import "code.css"; +@import "forms.css"; +@import "tables.css"; + +/* Components: common */ +@import "sprites.css"; +@import "dropdowns.css"; +@import "wells.css"; +@import "component-animations.css"; +@import "close.css"; + +/* Components: Buttons & Alerts */ +@import "buttons.css"; +@import "button-groups.css"; +@import "alerts.css"; /* Note: alerts share common CSS with buttons and thus have styles in buttons.css */ + +/* Components: Nav */ +@import "navs.css"; +@import "navbar.css"; +@import "breadcrumbs.css"; +@import "pagination.css"; +@import "pager.css"; + +/* Components: Popovers */ +@import "modals.css"; +@import "tooltip.css"; +@import "popovers.css"; + +/* Components: Misc */ +@import "thumbnails.css"; +@import "media.css"; +@import "labels-badges.css"; +@import "progress-bars.css"; +@import "accordion.css"; +@import "carousel.css"; +@import "hero-unit.css"; + +/* Utility classes */ +@import "utilities.css"; /* Has to be last to override when necessary */ + +/* Plugin classes */ +@import "plugin.css"; + + +/* 书写规范请参见README.md +============================================================ */ + +/* + === 样式测试 === + javascript:(function(){var a=document,b=a.body,c=a.createElement("link");c.setAttribute("rel","stylesheet");c.setAttribute("href","http://10.3.1.41/WF/assets/css/reset.css");a.querySelector("head").appendChild(c);b.style.backgroundColor="white";})() +============================================================ */ diff --git a/WF/xOne/markdown.html b/WF/xOne/markdown.html new file mode 100644 index 000000000000..330f6d9f783c --- /dev/null +++ b/WF/xOne/markdown.html @@ -0,0 +1,872 @@ + + + + +Markdown 语法 - (简体中文版) + + + + + + + + + + + + + + + + + + + +
    + + diff --git a/WF/xOne/nav.html b/WF/xOne/nav.html new file mode 100644 index 000000000000..a88a40388f6f --- /dev/null +++ b/WF/xOne/nav.html @@ -0,0 +1,230 @@ + + + + +导航 + + + + + + + + + + +
    +

    导航

    +

    经常用到的有顶部导航,边栏导航及浮动导航等,除此外还经常用到topbar及底部导航

    +

    注意: 一层导航使用精简布局即可,多层级导航,建议使用经典布局

    + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/WF/xOne/navbar.html b/WF/xOne/navbar.html new file mode 100644 index 000000000000..fb1c2ca73408 --- /dev/null +++ b/WF/xOne/navbar.html @@ -0,0 +1,131 @@ + + + + +xOne——研究响应式布局、Less、SeaJS + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/WF/xOne/paging.html b/WF/xOne/paging.html new file mode 100644 index 000000000000..8d68f670c6f2 --- /dev/null +++ b/WF/xOne/paging.html @@ -0,0 +1,105 @@ + + + + +分页 + + + + + + + + +
    +

    分页组件

    +

    此处实例时驴妈妈网站的页码结构,下面将此基础上修改并实现以下结构。

    +

    TODO:全信息的组合展示、全页码的展现形式、JS实现分页

    + +
    + +

    分页组件

    +

    此分页组件在驴妈妈已开发页码代码基础上优化,实现了两种需求的样式,默认为玫红色

    + + + + + + + + + +

    升级版

    +

    此设置默认为橙色,且页码右对齐(不是右浮动,即可设置左对齐/居中)

    +
    +
    上一页1下一页
    +
    + + + + +
    +
    上一页1下一页
    +
    + + + +
    +
    +<div class="pages rosestyle">
    +    <div class="Pages">
    +        <span class="PrevPage">上一页</span>
    +        <span class="PageSel">1</span>
    +        <span class="NextPage">下一页</span>
    +    </div>
    +</div>
    +
    +<div class="pages orangestyle">
    +    <div class="Pages">
    +        <a class="PrevPage" href="#">上一页</a>
    +        <a href="#">1</agt;<span class="PageSel">2</span>
    +        <a href="#">3</a>
    +        <a href="#">4</a>
    +        <a href="#">5</a>
    +        <a href="#">6</a>
    +        <span class="PageMore">...</span>
    +        <a href="#">20</a>
    +        <a class="NextPage" href="#">下一页</a>
    +    </div>
    +</div>
    +
    + +
    +

    全信息的组合展示

    +

    包含总页数,跳转到第几页等信息

    + + +

    全页码的展现形式

    +

    页码全部展示,页码过多显示省略号,但是鼠标经过将展示隐藏的页码。

    + + +

    JS实现分页

    +

    使用JS分页组件实现前端分页,支持分页的多维数据排序。

    +
    + + + + + + +
    + + + + + + + \ No newline at end of file diff --git a/WF/xOne/smartfloat.html b/WF/xOne/smartfloat.html new file mode 100644 index 000000000000..325edc2d9575 --- /dev/null +++ b/WF/xOne/smartfloat.html @@ -0,0 +1,35 @@ + + + + +测试 + + + + + + + + +
    +

    组件名称

    +

    描述

    +

    TODO:

    + +
    + + +
    +
    +
    +
    + + +
    + + + \ No newline at end of file diff --git a/WF/xOne/tables.html b/WF/xOne/tables.html new file mode 100644 index 000000000000..7403bc8a6af5 --- /dev/null +++ b/WF/xOne/tables.html @@ -0,0 +1,308 @@ + + + + +测试 + + + + + + + + +
    +

    表格研究

    +

    表格仍然是网页布局中不可或缺的部分,表格数据最佳选择就是使用表格来制作,表格在这方面有得天独厚的优势,这是其他标签所不能比拟的。

    +

    下面对表格进行深入研究,制定适用于我们的表格样式,并内置样式表中,避免重复开发定义,以提升效率。为了避免与BT中定义的表格样式发生冲突,保留BT的表格样式 .table-***,针对我们新定义的表格样式,使用其他的名称,如下:

    +

    按最常见需求进行研究

    +
      +
    • 默认表格及BT表格(.table table-striped table-bordered table-hover等)
    • +
    • 内置经典表格(边框表格 table-border 信息表格 table-info 全宽表格 table-full
    • +
    • 定制的表格(布局表格 table-layout 订单/产品表格 table-order 复杂订单列表 table-xorder
    • +
    • 其他扩展定制(定制原型 xtable .***-table
    • +
    +

    借鉴Button的实现,需要的表格不需要组合太多的class实现(默认,某一特色效果级别,定制级别)

    +

    下面是将要实现最基本需求的表格:组合表格命名使用class="table-***",定制表格使用class="***-table"

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名称样式描述 此表为.table-info
    默认表格没有任何其他样式,仅是行和列,无边框
    单边表格.table仅使用一组横向边线
    简单信息表.table-info存放一般表格信息
    有边框的表格.table-border添加外边框
    有:hover的表格.table-hover添加悬停/滑过(hover)状态
    奇偶相间的表格.table-striped行间添加奇偶背景色 (1, 3, 5, etc)
    100%宽度表格.table-full100%宽度
    + + + + + + + + + + + + + + +
    名称深色信息表格
    样式.darktable
    描述用于显示表格信息,与table-info一致,但边框及背景颜色稍深
    +
    +

    这里将放置复选选项,在下面的区域展示各种样式组合的效果展示!

    +

    基础表格

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名称需求描述
    默认表格适用于表格布局没有任何其他样式,仅是行和列,布局紧凑
    基本表格(行)适用于表格布局行列表行间只有水平的线
    普通表格承载表格数据表格边框及自适应的布局,承载多样的表格式数据,并添加悬停/滑过(hover)状态等
    产品列表表格适用于订单列表比较复杂的表格,承载订单列表等复杂表格
    其他定制表格扩展的表格扩展其他更完善的功能:行间添加奇偶背景色 (1, 3, 5, etc)标准浏览器支持等
    + +

    布局表格 .table-layout

    + + + + + + + + + + + +
    表格布局承载布局元素这是一种常用的布局方式
    布局样式表单,信息展示等两列方便对齐,如:左侧右对齐,右侧左对齐且水平对齐
    + + + + + + + + + +
    用户名:
    密码:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    *产品名称:产品ID:lv123456
    *签证有效期:*送签类型: + +
    *销售价:是否附加: +    + +
    *结算价:产品编号: + +
    市场价:材料截止收取提前: + +
    币种:所属公司: +
    关联供应商:产品经理:
    结算对象:
    预订须知: + +
    +

    定制表格 产品列表订单等

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    产品名称金额(元)订单状态合同状态 操作 其它操作
    订单号:195770365703415 下单时间:2012-07-15 22:31 支付方式:在线支付
    + 三亚蜈支洲岛、天涯海角、扬帆海钓美食海景双飞5日游三三亚蜈支洲岛扬帆海钓美食海景双飞5日游亚蜈支洲岛天涯海角扬帆海钓美食海景双飞5日游
    + 自助游天下,就找驴妈妈 +
    111等待支付未签约立即支付
    订单号:195770365703415 下单时间:2012-07-15 22:31 支付方式:在线支付
    +

    三亚蜈支洲岛、天涯海角、扬帆海钓美食海景双飞5日游三三亚蜈支洲岛扬帆海钓美食海景双飞5日游亚蜈支洲岛天涯海角扬帆海钓美食海景双飞5日游

    +

    自助游天下,就找驴妈妈

    +
    111交易完成已签约点评
    + + + + +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + \ No newline at end of file diff --git a/WF/xOne/test.html b/WF/xOne/test.html new file mode 100644 index 000000000000..325edc2d9575 --- /dev/null +++ b/WF/xOne/test.html @@ -0,0 +1,35 @@ + + + + +测试 + + + + + + + + +
    +

    组件名称

    +

    描述

    +

    TODO:

    + +
    + + +
    +
    +
    +
    + + +
    + + + \ No newline at end of file diff --git a/WF/xOne/tooltip.html b/WF/xOne/tooltip.html new file mode 100644 index 000000000000..3d397899c444 --- /dev/null +++ b/WF/xOne/tooltip.html @@ -0,0 +1,113 @@ + + + + +工具提醒 + + + + + + + + +
    +

    工具提醒

    +

    提供一种悬浮提醒的效果,支持两个模板、八个方位,以及对触发事件进行自定义调用。对于延迟加载或Ajax加载的内容,需要加载后再调用一次 tooltip 事件。这是由于UI的不完备限制导致的。

    +

    依赖:http://pic.lvmama.com/min/index.php?f=js/new_v/jquery-1.7.2.min.js,/js/ui/lvmamaUI/lvmamaUI.js

    +
    +
    日历优惠活动提醒
    + +
    + + 奖金折扣101元 + + 早订优惠 + + 多订优惠 + + 积分抵扣 + +

    + + + +

    + +
    + + +
    + +
    +
    +<div class="calendar" tip-content='今天预订11.03日产品,可同时享受以下优惠:<br>早订早惠:成人价,每份最大优惠50元。<br>多订多惠:成人价,预订满N份(含)以上,每份最大优惠50元。'>日历</div>
    +	
    +<span class="tagsback" tip-title="提醒标题" tip-content='提醒内容'><em>奖金折扣</em></i>101元</i></a>
    +<span class="tagscc" tip-content='提醒内容'>早订优惠</span>
    +<i class="tagscc" tip-content='提醒内容'>多订优惠</i>
    +<i class="tagscc" tip-content='提醒内容'>积分抵扣</i>
    +
    +<script src="http://pic.lvmama.com/min/index.php?f=js/new_v/jquery-1.7.2.min.js,/js/ui/lvmamaUI/lvmamaUI.js"></script>
    +$(function(){
    +    $('.calendar').ui('lvtip',{
    +        templete : 2,
    +        place: 'bottom-left',
    +        offsetX: 0,
    +        events : "live"  //live方法有问题,后添加元素ui不被调用
    +    });
    +    $('span[class=tagsback]').ui('lvtip',{
    +        place: 'bottom'
    +    });
    +    $('.tagscc').ui('lvtip',{
    +        place: 'bottom',
    +        events : "live"
    +    });
    +});
    +
    + + +
    + + + + \ No newline at end of file diff --git a/WF/xOne/topbar.html b/WF/xOne/topbar.html new file mode 100644 index 000000000000..b398805621db --- /dev/null +++ b/WF/xOne/topbar.html @@ -0,0 +1,41 @@ + + + + +topbar + + + + + + + + +
    +

    topbar 顶部工具栏

    +

    页面顶部的操作工具栏,通常具备便捷的操作入口(登录注册、账户操作等)

    +

    TODO:

    + +
    + + +
    +
    +
    +
    + + +
    + +
    +
    + +
    +
    + + + \ No newline at end of file diff --git a/WF/xOne/typo.html b/WF/xOne/typo.html new file mode 100644 index 000000000000..bc3f8540af43 --- /dev/null +++ b/WF/xOne/typo.html @@ -0,0 +1,671 @@ + + + + +页面排版 + + + + + + + + + + + + +
    + +

    网页排版布局 typo.css

    +

    此排版设计参考修改自 typo.cssBootstrap,首先用 normalize 对默认属性实现无差异化,然后规划常用标签的默认属性并优化显示效果。

    +

    实现此 TYPO.CSS 是为展示基本元素样式,并用于项目开发,在 .typo 样式下生产线页面也会表现的与此一致!

    +

    对于4.27雅安同胞们遭受的灾难,我们深感不幸!

    +

    作为前端攻城师,我们让网站变灰以表达哀悼之情,设置如下:

    +
    +html {
    +    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    +    -webkit-filter: grayscale(1);
    +}
    +
    +

    normalizereset 重设

    +

    reset.css 是 Pandora 的浏览器重设样式,消除浏览器布局标签的默认属性,使用前可引用无差异化样式 normalize.css 效果更佳。

    +

    Pandora 的 reset.css 是极精简的重置样式,并综合 AliceUI 及 bootstrap 等修改 normalize.css 形成无差异化的浏览器基础样式,统一浏览器的默认标签属性。

    + +

    reset.css 以及 Pandora 适合中文排版的 typo.css 样式(修改自 typobootstrap)外,Pandora 还内置了大量可组合的便捷实用的样式,需要注意这类样式,如:.btn,详情参看Pandora项目保留字

    +

    注意! 当前国内布局通常要使用reset,但现在也有越来越多的攻城师开始注意 normalize的作用了,充分发挥浏览器默认属性的优势。

    + +

    标题

    +

    HTML中定义的所有标题标签, 从<h1><h6> 都是可用的。

    +
    +

    h1. 一级标题 副标题或说明

    +

    h2. 二级标题 副标题或说明

    +

    h3. 三级标题 一些说明

    +

    h4. 四级标题 一些说明

    +
    h5. 五级标题 一些说明
    +
    h6. 六级标题 一些说明
    +
    + +

    字体

    +

    reset.css 采用了 12 像素,1.5 的行高,并且兼容 Mac 和 Window 的字体配置,非常适合国内的网站样式。

    +
    +body,button,input,select,textarea {
    +    font:12px/1.5 Tahoma,Arial,\5b8b\4f53,sans-serif;
    +}
    +
    + +
    扩展阅读
    + +

    段落强调 .lead

    +

    通过添加 .lead 实现段落强调。

    +
    +

    写在规则前面的话——项目的可维护性第一。

    +
    + +

    强调标签 <small> <strong> <em> <b> <i>

    +

    使用HTML默认的强调标签,达到代码精简的目的。

    +
    +

    强调标签

    +

    <small> 针对不需要强调的 inline或block类型的文本 使用。

    +

    <strong> 用增加 font-weight 值的方式 加粗强调 一段文本。

    +

    <em>斜体字 强调一段文本。

    +

    <b> 是为了 高亮词短语 而不会赋予重要含义。

    +

    <i> 主要被用来表示 语音、技术术语 等。

    +
    + +

    注意! 在HTML5中仍然可以使用 <b><i> 标签,但是它们的用途已经发生了改变。<b> 在过去仅仅用来加粗单词或短语,没有任何语义上的含义,现在定义需要强调的部分(如果您希望把文本标记为相比其他文本更为重要,应该使用 <strong> 标签。)。而 <i> 主要用在语音和技术等方面。

    +

    强调类 通过颜色来表示强调的工具类

    +
    +

    水调歌头 cc1 宋 ⋅ 苏轼 &sdot; &bull;

    + +

    + 丙辰中秋,欢饮达旦,大醉,作此篇,兼怀子由。 gray
    + --------- 分割线 --------- orange
    + 明月几时有?把酒问青天。 red
    + 不知天上宫阙,今夕是何年。 green
    + 我欲乘风归去,又恐琼楼玉宇,高处不胜寒。 blue
    + 起舞弄清影,何似在人间。 cc2
    + --------- 分割线 --------- muted
    + 转朱阁,低绮户,照无眠。 text-warning
    + 不应有恨,何事长向别时圆? text-error
    + 人有悲欢离合,月有阴晴圆缺,此事古难全。 text-info
    + 但愿人长久,千里共婵娟。 text-success +

    +
    + +

    缩写形式

    +

    HTML的 <abbr> 标签是为缩写语或缩写词在hover状态时能显示扩展的文本。使用 title 属性的 <abbr> 会带有点状(dotted)底边线,鼠标经过时会显示带问号的箭头,并提示完整的字词信息。

    +
    +

    要在缩写词上实现hover时的扩展文本,应该包含 title 属性.

    +

    单词 attribute 的缩写是 attr


    + +

    对缩写词元素应用 .initialism 会减小一号字体大小,以协调排版效果。

    +

    HTML 是自切片面包问世以来最棒的发明。

    +
    + +

    地址 定义文档作者或拥有者的联系信息。

    +

    地址标签 <address> 通过行尾的 <br> 标签保持格式。

    +
    +
    + tCreator文化有限公司
    + 某省某市某大道404号
    + 佚名大厦, A座49楼
    + P: (123) 456-7890 +
    +
    + 有关负责人
    + first.last@gmail.com +
    +
    + +

    引用 定义摘自另一个源的块引用

    +

    <blockquote> 嵌套 HTML 即可实现引用。对于连续的引用内容,建议使用 <p> 标签。

    + + + + + + + + + + + + + + + + + + + + +
    元素使用方式备注
    <blockquote> 用于引用外部内容的块级元素 +

    cite 属性可以用来标注文字出处,如:URL。

    +

    class设置为 .pull-left.pull-right 决定是内容居左还是居右浮动对齐。

    +
    <small> 可选元素,用于添加针对用户的引用,通常用于引言的作者。 可以将引言或出处置于 <cite> 标签内。
    +
    +
    +

    菩提本无树,明镜亦非台;本来无一物,何处惹尘埃。

    +
    +
    +

    引用出处

    +

    可以添加一个可选的 <small> 元素来表示引用的出处,该元素会利用样式在内容前加入宽度为一个字长的破折号 &mdash;。可以将引言或出处置于 <cite> 标签内。

    +
    +
    +

    远看山有色,近听水无声。春去花还在,人来鸟不惊。

    + 王维 《画》 +
    +
    +
    +
    +

    曾经沧海难为水,除却巫山不是云。取次花丛懒回顾,半缘修道半缘君。

    + 元稹 《离思五首》之四 +
    +
    +
    +

    此示例摘自 sofishtypo.css

    +
    +

    《论语学而篇》

    +

    作者:孔子

    +

    《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章,内容涉及诸多方面。其中重点是“吾日三省吾身”;“节用而爱人,使民以时”;“礼之用,和为贵”以及仁、孝、信等道德范畴。

    +
    +

    子曰[1]:“学[2]而时习[3]之,不亦说[4]乎?有朋[5]自远方来,不亦乐[6]乎?人不知[7],而不愠[8],不亦君子[9]乎?”

    +
    +

    注释

    +

    + [1] 子:中国古代对于有地位、有学问的男子的尊称,有时也泛称男子。《论语》书中“子曰”的子,都是指孔子而言。
    + [2] 学:孔子在这里所讲的“学”,主要是指学习西周的礼、乐、诗、书等传统文化典籍。
    + [3] 时习:在周秦时代,“时”字用作副词,意为“在一定的时候”或者“在适当的时候”。但朱熹在《论语集注》一书中把“时”解释为“时常”。“习”,指演习礼、乐;复习诗、书。也含有温习、实习、练习的意思。
    + [4] 说:音yuè,同悦,愉快、高兴的意思。
    + [5] 有朋:一本作“友朋”。旧注说,“同门曰朋”,即同在一位老师门下学习的叫朋,也就是志同道合的人。
    + [6] 乐:与说有所区别。旧注说,悦在内心,乐则见于外。
    + [7] 人不知:此句不完整,没有说出人不知道什么。缺少宾语。一般而言,知,是了解的意思。人不知,是说别人不了解自己。
    + [8] 愠:音yùn,恼怒,怨恨。
    + [9] 君子:《论语》书中的君子,有时指有德者,有时指有位者。此处指孔子理想中具有高尚人格的人。 +

    +

    译文

    +

    孔子说:“学了又时常温习和练习,不是很愉快吗?有志同道合的人从远方来,不是很令人高兴的吗?人家不了解我,我也不怨恨、恼怒,不也是一个有德的君子吗?”

    +

    评析

    +

    宋代著名学者朱熹对此章评价极高,说它是“入道之门,积德之基”。本章这三句话是人们非常熟悉的。历来的解释都是:学了以后,又时常温习和练习,不也高兴吗等等。三句话,一句一个意思,前后句子也没有什么连贯性。但也有人认为这样解释不符合原义,指出这里的“学”不是指学习,而是指学说或主张;“时”不能解为时常,而是时代或社会的意思,“习”不是温习,而是使用,引申为采用。而且,这三句话不是孤立的,而是前后相互连贯的。这三句的意思是:自己的学说,要是被社会采用了,那就太高兴了;退一步说,要是没有被社会所采用,可是很多朋友赞同的学说,纷纷到我这里来讨论问题,我也感到快乐;再退一步说,即使社会不采用,人们也不理解我,我也不怨恨,这样做,不也就是君子吗?(见《齐鲁学刊》1986年第6期文)这种解释可以自圆其说,而且也有一定的道理,供读者在理解本章内容时参考。

    +

    此外,在对“人不知,而不愠”一句的解释中,也有人认为,“人不知”的后面没有宾语,人家不知道什么呢?当时因为孔子有说话的特定环境,他不需要说出知道什么,别人就可以理解了,却给后人留下一个谜。有人说,这一句是接上一句说的,从远方来的朋友向我求教,我告诉他,他还不懂,我却不怨恨。这样,“人不知”就是“人家不知道我所讲述的”了。这样的解释似乎有些牵强。

    +

    总之,本章提出以学习为乐事,做到人不知而不愠,反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见,有助于对第一章内容的深入了解。

    +
    +
    + +

    列表

    +

    无序列表

    +

    定义一个 没有 明确重要性的项目列表

    +
    +
      +
    • YUI是个好框架
    • +
    • artTemplate是个好的JS模板
    • +
    • Git是个好工具
    • +
    • 为什么选择Git +
        +
      • 更方便的 Merge
      • +
      • 更方便的管理
      • +
      • 更健壮的系统
      • +
      • 对网络的依赖性更低
      • +
      • 更少的“仓库污染”
      • +
      +
    • +
    • AliceUI是个好框架
    • +
    • raphaeljs是个好框架
    • +
    +
    + + +

    有序列表

    +

    定义一个 明确重要性的项目列表

    +
    +
      +
    1. CSS规范-减少依赖,避免耦合
    2. +
    3. 统一风格,让代码有规可循,保证团队协作效率
    4. +
    5. 文件编码必须使用utf-8(无BOM)
    6. +
    7. 文件一律通过 link 链入 (NOT @import)
    8. +
    9. 当只是单个页面使用时,才写在 <head> 的 <style> 中
    10. +
    +
    + +

    无样式列表

    +

    没有 list-style 即没有左侧内边距的列表。

    +
    +
      +
    • 以动手实践为荣 , 以只看不练为耻;
    • +
    • 以打印日志为荣 , 以单步跟踪为耻;
    • +
    • 以空格缩进为荣 , 以制表缩进为耻;
    • +
    • 以单元测试为荣 , 以人工测试为耻;
    • +
    • 以模块复用为荣 , 以复制粘贴为耻;
    • +
    • 以多态应用为荣 , 以分支判断为耻;
    • +
    • 以精简干练为荣 , 以冗余拖沓为耻;
    • +
    • 以总结分享为荣 , 以跪求其解为耻;
    • +
    +
    + +

    行内列表

    +

    使用 inline-block 让列表项水平排列一行,同时每项都有少量的内补(padding)。

    +
    +
      +
    • 首页
    • +
    • 前端开发
    • +
    • 项目研究
    • +
    • 关于我们
    • +
    +
    + +

    字符表示法

    +

    页面字体为宋体 \5b8b\4f53 时,使用 &bull; 可全兼容实现 ul 列表项前的点(•)效果如下。

    + + + +

    描述 对一个列表(或条目)进行关联描述

    +
    +
    +
    描述列表
    +
    适用于术语的定义/解释
    +
    计算机
    +
    用来计算的仪器 ... ...
    +
    显示器
    +
    以视觉方式显示信息的装置 ... ...
    +
    +
    +

    横向描述 使 <dl> 中的每个条目和描述同一对一水平显示。

    +
    +
    +
    描述列表
    +
    适用于术语的定义/解释
    +
    Coffee
    +
    Black hot drink. A drink made from the roasted and ground beanlike seeds of a tropical shrub, served hot or iced
    +
    Milk
    +
    White cold drink. An opaque white fluid rich in fat and protein, secreted by female mammals for the nourishment of their young
    +
    +
    +

    注意! 水平列表中如果项目名称太长,需要添加 text-overflow 属性。在小分辨率下,他们会以堆叠式布局显示。

    + +

    排版应用

    +

    充足的弹性,才能满足多变的排版需求。

    +
    +

    古文

    +
    +

    《为学一首示子侄》彭端淑

    + +

    天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。人之为学[1] 有难易乎?学之,则难者亦易矣;不学,则易者亦难矣。

    +

    吾资之昏,不逮[2] 人也,吾材之庸,不逮人也;旦旦[3] 而学之,久而不怠焉,迄乎成,而亦不知其昏与庸也。吾资之聪,倍人也,吾材之敏,倍人也;屏弃而不用,其与昏与庸无以异也。圣人之道,卒于鲁也传之。然则昏庸聪敏之用,岂有常哉?

    +

    [4] 之鄙[5] 有二僧,其一贫,其一富。贫者语于富者曰:“吾欲之[6] 南海,何如?”

    +

    富者曰:“子何恃而往[7]

    +

    ”曰:“吾一瓶一钵足矣。”

    +

    富者曰:“吾数年来欲买舟而下,犹未能也。子何恃而往?”

    +

    越明年,贫者自[8] 南海还,以告富者。富者有惭色。

    +

    西蜀之去南海,不知几千里也,僧富者不能至而贫者至蔫。人之立志,顾[9] 不如蜀鄙之僧哉?是故聪与敏,可恃而不可恃也;自恃其聪与敏而不学者,自败[10] 者也。昏与庸,可限而不可限也;不自限其昏与庸,而力学不倦者,自力者也。

    +
    + + + [1] 为学:求学、做学问。
    + [2] 逮:赶不上。
    + [3] 旦旦:每天。
    + [4] 蜀:地名,今四川一带。
    + [5] 鄙:边远的地方,边境。
    + [6] 之:去,往,到。
    + [7] 子何恃而往:您凭着什么去?恃,倚仗、凭借。
    + [8] 自:从。
    + [9] 顾:表示较强的转折副词,可译为难道,反而。
    + [10] 败:衰弱,颓废。这里为使动用法,可译为使自己荒废。 + +
    + +

    论文

    + +

    英文

    +
    +

    + +

    表单元素

    +

    各类表单元素,其布局设置详见 forms.css,此处仅展示表单元素的默认效果。

    +
    + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + +
    + + + + + + + +
    + + + + +
    + + + + +
    + +
    +

    常用功能类 扩展的工具类

    +
      +
    • clearfix 清除浮动

    • +
    • hide 隐藏元素

    • +
    • .fl .fr 左右浮动

    • +
    • center-box center-item 浮动居中

    • +
    • ellipsis 文字单行溢出省略号

      +
      单行文本,这里文字太多了太多了
      +
    • +
    • text-justify 文本两端对齐

    • +
    + +
    /* 标题应该更贴紧内容,并与其他块区分,margin 值要相应做优化 */
    +h1,h2,h3,h4,h5,h6 {
    +    margin: 1em 0 0.6em;
    +    line-height: 1;
    +    font-weight: bold;
    +}
    +h1 { font-size: 2.6em;}
    +h2 { font-size: 2em;}
    +h3 { font-size: 1.6em;}
    +h4 { font-size: 1.3em;}
    +h5, h6 { font-size: 1em;}
    +
    +/* 现代排版:保证块/段落之间的空白隔行 */
    +.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr{
    +    margin:1em 0 0.6em;
    +}
    +
    + + +

    Pandora 项目保留字

    +
    +

    所有保留字效果基于引用 pandora.css 样式有效。

    +
    +
    基础标签
    +
    所有基础标签,在生产线环境 typo 内表现为排版样式,标签具备指定的用法功能
    +
    按钮
    +
    btn btn-block disabled
    btn-[large/big/small/mini]
    btn-[primary/info/success/warning/danger/inverse/link]
    btn-[buff/orange/pink/white]
    +
    按钮组
    +
    btn-group
    +
    列表
    +
    +
    +
    + +

    TYPO.CSS 排版偏重点 以下摘自 typo.css 有改动,待完善

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    类型语义标签注意点
    基础标签标题h1h6全局不强制大小,开发版与发布版统一设置实现相应的大小,且标题与其对应的内容应紧贴
    上、下标sup/sub保持与 MicroSoft Office Word 等程序的日常排版一致。
    引用blockquote显示/嵌套样式
    缩写abbr统一都有下划线,鼠标 hover 为帮助手势
    分割线hr显示的 paddingmargin正确
    列表ul/ol/dl发布版无 list-style及间距等,开发版与 .typo 中保持默认样式
    定义列表dl内置默认列表描述(block)属性及横向描述 .dl-hor .dl-horizontal 样式
    表单元素input[type=text[radio|checkbox]解决 form 元素排版时是否(水平/垂直)对齐,详细请参见 form.css 样式表
    斜体em斜体字 强调一段文本,只设置此一种斜体,让 icite 显示为正体
    强调i显示为正体(lvmama中大量用于组合功能 如:dfn>i 的组合¥300
    加强strong/b表示强调显示为粗体
    标记mark类似荧光笔 background: #ff0;
    印刷small保持为页面字体的 80% 大小,颜色设置为浅灰色 #333
    表格table全局不显示线条,在 typo 中显示表格外框,并且表头有浅灰背景(同 .table-info
    代码pre/code字体使用 courier 系字体,保持与 serif 有比较一致的显示效果,详见 code.css
    特殊符号• &bull;字体为宋体 \5b8b\4f53 时,使用 &bull; 可全兼容实现列表项前的点 •
    专名号sofish专名号,有下划线,可使用 u.typo-u 类,此处直接指定暂不使用此标签。
    破折号——保持一划,而非两划
    人民币¥ / ¥使用两平等线的符号(需设置Arial字体),或者 HTML 实体符号 &yen;
    删除符已删除(deleted)一致化的删除符效果,中英混排正确
    加强类专名号.typo-u由于 u 被 HTML4 放弃,在向后兼容上推荐使用 class="typo-u" …,暂时我们不使用
    着重符.typo-em在文字下加点(•),利用 :after:before 在浏览器上渐进增强实现着重符
    首字下沉.typo-first特殊排版
    清除浮动.clearfix与一般 CSS Reset 保持一对致 API
    注意点(1)中英文混排行高/行距
    (2)上下标在 IE 中显示效果
    (3)块/段落分割空白是否符合设计原则
    (4)input 多余空白问题
    (5)默认字体色彩,目前采用 #333 在各种浏览显示比较好
    + + + + + +
    + + diff --git a/WF/xOne/waterfall.html b/WF/xOne/waterfall.html new file mode 100644 index 000000000000..e6db2edb4cee --- /dev/null +++ b/WF/xOne/waterfall.html @@ -0,0 +1,110 @@ + + + + +瀑布广告 + + + + + + + + +
    +
    topbar
    +
    + +
    +

    瀑布广告

    +

    简单瀑布广告代码

    +
    +<script>
    +$(function(){
    +    // html代码
    +    var _activebox = '<div id="indexSilde" style="width:980px;margin:0 auto;position:relative;overflow:hidden;height:0;">'
    +            + '<div id="xslide1" style="position:absolute;z-index:11;top:0;display:none;">'
    +            + '<a target="_blank" href="http://zhounianqing.lvmama.com/?losc=019677">'
    +            + '<img src="http://pic.lvmama.com/img/temp/waterfall.jpg" width="980" height="80">'
    +            + '</a></div>'
    +            + '<div id="xslide2" style="position:relative;top:0;z-index:10;">'
    +            + '<a target="_blank"  href="http://zhounianqing.lvmama.com/?losc=019677">'
    +            + '<img src="http://pic.lvmama.com/img/temp/waterfallbig.jpg" width="980" height="500">'
    +            + '</a></div>'
    +            + '</div>';
    +    
    +    $('.hh_shortcut_box').after(_activebox);
    +    
    +    // 瀑布广告
    +    var _indexSilde = $('#indexSilde');
    +	var _xslide1 = $('#xslide1');
    +	function _shouqi(){ 
    +		_indexSilde.animate({'height':80},1000,function(){
    +			_xslide1.fadeIn(500).siblings().fadeOut(500,function(){
    +				if($.browser.msie && parseInt($.browser.version)<=8){ 
    +					//$.fx.off = true; 
    +				}
    +			});
    +		});
    +	};
    +	
    +	function _showslide(){
    +		_indexSilde.animate({'height':500},1000,function(){
    +			setTimeout(_shouqi,4000);
    +		});
    +	}
    +	//$.fx.off = false;
    +	setTimeout(_showslide,1000);
    +})
    +</script>
    +
    + + +
    + + + + + \ No newline at end of file diff --git a/WF/xOne/x1.html b/WF/xOne/x1.html new file mode 100644 index 000000000000..80fe535b7585 --- /dev/null +++ b/WF/xOne/x1.html @@ -0,0 +1,154 @@ + + + + +xOne——研究响应式布局、Less、SeaJS + + + + + + + + + + + + +
    + +
    + + + + + + +
    +
    + 主要内容 +
    + + + + + + +
    + +
    + + +
    + + +
    + + + + + \ No newline at end of file diff --git a/assets/css/noreset.css b/assets/css/noreset.css new file mode 100644 index 000000000000..4b86c81e8141 --- /dev/null +++ b/assets/css/noreset.css @@ -0,0 +1,413 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + Css Reset v0.9 + Created: 2012-12-19 + Last Updated: 2012-12-29 + Author: cloudYan + Contact: qqGroup:187260298 +------------------------------------------------------------ */ + +/* =更新日志 + * 2012-12-29 在normalize的基础上,添加清除浮动等常用样式 + * 2012-10-11 新计划noreset,精良保持浏览器默认的属性或统一默认属性值而非直接去掉默认的属性(如:ul,ol等) +------------------------------------------------------------ */ +/* RESET */ + +/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/* + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for `hidden` attribute not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Sets default font family to sans-serif. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Removes default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Addresses `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, + * Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; +} + +/* + * Addresses styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/* + * Addresses styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + + +/* + * Corrects font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * Sets consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/* + * Addresses inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * Removes border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/* + * Corrects overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Corrects font family not being inherited in all browsers. + * 2. Corrects font size not being inherited in all browsers. + * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/* + * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to `content-box` in IE 8/9. + * 2. Removes excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE 8/9. + * 2. Improves readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* 这条分割线以上为normalize.css的样式 +==================================================================================================== */ + +/* 清除浮动 */ +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +.clearfix,.wrap{*zoom:1}/* for IE6 IE7 */ +/* 空标签清除法 */ +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;} + +a{ text-decoration:none} +a:hover{ text-decoration: underline} + + +/* + + + + +*/ \ No newline at end of file diff --git a/assets/css/reset-x.css b/assets/css/reset-x.css new file mode 100644 index 000000000000..7c47eca40a0e --- /dev/null +++ b/assets/css/reset-x.css @@ -0,0 +1,234 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + Css Reset v0.9 + Last Updated: 2011-05-13 + Author: cloudYan + Contact: qqGroup:187260298 - http://www.FAQbaike.com +------------------------------------------------------------ */ +/* =更新日志 + * 2012-10-11 新计划noreset,精良保持浏览器默认的属性或统一默认属性值而非直接去掉默认的属性(如:ul,ol等) + * 2012-05-11 html5新增语义化的标签(除figure外)不必重置样式,默认就没有样式-陈林 + + * 2012-04-04 新项目参考了alipay,yahoo,html5Doctor等结合模块化开发进行研究,html5的Doctype声明,不必写type="text/css" 但是必须要有 rel="stylesheet" + * 2011-09-24 解决了IE下超链接使用绝对定位后失效的问题(使用background:url(about:blank)解决是最佳方案) + * 2011-09-19 原项目代号Ocode取义Original code,参考http://tcreator.info/labs/projects/2011/css-reset.html + + * 研究规划 + * 第一步通用reset.css + * 第二步全站公共样式—common.css + 包括全站统一样式定义;如:a,a:hover等 + 基础的模块组合样式;如:.f14,.mt10,.tc等 + * 第三步css模块—c_common.css + 包括模块公共样式提取 + 公共模块样式 + 模块个性化样式(类似新模块,但多处使用的) + * 第四步网站架构css差异化如何书写及管理css + 单页面/项目css(个性化css)规划 +------------------------------------------------------------ */ +/* 升级原则——渐进增强(Progressive Enhancement) + +渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲,渐进增强是指在确保页面在禁用JavaScript后能正常运作后,再对页面添加各种特效(JavaScript动画、Ajax异步等等)。我们同样可以运用"渐进增强"原则来使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web规范。 + +某些情况下,是无法让所有用户在任何浏览器下都完全一模一样,特别是那些使用IE6的用户。运用渐进增强策略,可以保证让那些用户至少能使用到你网站(或网络应用)的基本功能。 +------------------------------------------------------------ */ +/* RESET */ +/* 内外边距通常让各个浏览器样式的表现位置不同 */ +body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,figure,menu{margin:0;padding:0;} + + +/* 新计划中涉及的属性 +****************************************/ +ul,ol,li{} +/* 去掉列表前的标识, li 会继承 */ +/* +ol,ul{list-style-type:none} + +/* 结束 +****************************************/ + + +/* 语义化的标签的样式默认的margin,padding都为0,不用reset */ +article,aside,details,figcaption,footer,header,hgroup,menu,nav,section{} + +/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ +article,aside,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;} + +/* HTML5 媒体文件跟 img 保持一致 */ +audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} +command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline;} + +/* 去掉各Table cell 的边距并让其边重合 */ +table{border-collapse:collapse;border-spacing:0;} + +/* IE bug fixed: th 不继承 text-align*/ +th{text-align:inherit;} + +/* 去除默认边框 */ +fieldset,img{border:0;} + +/* ie6 7 8(q) bug 显示为行内表现 */ +iframe{display:block;} + +/* webkit内核浏览器会默认给:focus状态的元素加上outline的样式 没必要去除浏览器默认的outline属性 */ +:focus {outline:0;} + +/* 去掉 firefox 下此元素的边框 */ +abbr,acronym{border:0;font-variant:normal;} + +/* 一致的 del 样式 */ +del{text-decoration:line-through;} + +address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;} + + +/* 对齐是排版最重要的因素, 别让什么都居中 */ +caption,th {text-align:left;} + +/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ +h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;} +button,input,select,textarea{font-size:100%;} +q:before,q:after {content:'';} + +/* 统一上标和下标 */ +sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;} +sup{top:-0.5em;} +sub{bottom:-0.25em;} + +/* 让链接在 hover 状态下显示下划线 */ +a:hover {text-decoration:underline;} + +/* 默认不显示下划线,保持页面简洁 */ +ins,a {text-decoration:none;} + +/* 修复火狐下图片和文字之间的间隙,添加img{vertical-align:top;}、img{vertical-align:middle;}或img{display:block}属性即可解决,推荐前者 */ +img{vertical-align:top} + +/* 这条分割线以上的属性会提取到css reset.css中 +==================================================================================================== */ + +/* 全站级公用样式 */ +/* 清除浮动 */ +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +.clearfix,.wrap{*zoom:1}/* for IE6 IE7 */ +/* 空标签清除法 */ +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} + +/* 要注意表单元素并不继承父级 font 的问题 根据自身需求设置 这里可以注意下建议在使用表单元素的时候再定义 */ +body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;} +blockquote,pre{white-space:pre-wrap;word-wrap:break-word;} + +/* 使Chrome支持12px以下的字体 */ +.text-size{-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} +/* 两端对齐 */ +.text-justify{text-align:justify;text-justify:inter-ideograph;} +/* 半透明 */ +.opacity {opacity:.5;filter:alpha(opacity=50);} +/* 文本过长变成省略号,需要定义宽度 */ +.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} +/* css3属性 */ +.css3_shadow{transition:all 1s ease-out 0s;border-radius:5px;box-shadow:0 0px 4px rgba(206, 201, 170, 0.8);} +.css3_shadow:hover{box-shadow:0 0px 5px rgba(206, 201, 170, 1);} + +/* 定义全站级统一样式 */ +a{color:#06c}a:hover{color:#c06;}.view_more{color:#06c;padding:0 2px;} +.yahei{font-family: "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1"} + +/* 以下是模块化开发属性——模块化组合样式 +------------------------------------------------------------ */ +/* 设置内联, 减少浮动带来的bug */ +.fl,.fr{display:inline}.fl{float:left;}.fr{float:right} +/* 块状盒模型居中及内容居中 */ +bc{margin-left:auto;margin-right:auto;}.tc{text-align:center} + +/* 组合样式 */ +.f12{font-size:12px}.f14{font-size:14px}.f16{font-size:16px}.f18{font-size:18px}.f22{font-size:22px}.f24{font-size:24px} +.lh18{line-height:18px}.lh20{line-height:20px}.lh22{line-height:22px}.lh24{line-height:24px} + +.mt10{margin-top:10px}.mt20{margin-top:20px}.mb10{margin-bottom:10px}.mb20{margin-bottom:20px} +.pd10{padding:10px}.pt10{padding-top:10px}.pb10{padding-bottom:10px}.plr10{padding-left:10px;padding-right:10px} + +/* 这条分割线以上的属性会提取到全站级公用样式 common.css中 +==================================================================================================== */ + +/* 保留扩展样式(以下类名等暂作保留-为更改或设定一个统一的样式,消除过去的滥用以及熟悉新用法这段时间,除符合以下样式外,尽量不要用于其他样式设置) +------------------------------------------------------------ */ +/* 预加载图片路径*/ +#preloader { + background-image:url(); + background-image:url(); + background-image:url(); + width:0px; + height:0px; + display:inline; +} +/* 网页布局常用模块命名 */ +#header{} +#content{} +#footer{} +.main{} +.aside{} +/*幻灯宣传*/ +.promo{} + +/* 大图背景 */ +.bigimg{background:url(../images/img-loading.gif) no-repeat 50% 50%;} +/* 间隔空白,源自腾讯首页 具备良好的兼容性组合性 */ +/* IE6下 div最小高度不能为0的解决方法overflow(否则即使设置 font-size:0 时这个容器的高度最小也为 2px) */ +.hr_a,.hr_b{font-size:1px;line-height:1px;display:block;clear:both;overflow:hidden}.hr_a{height:10px}.hr_b{height:5px} + +.B,.fb{font-weight:bold}.fnb{font-weight:normal} +.tc{text-align:center}.tr{text-align:right}.dis{display:block}.undis{display:none} + +/* 横向排列 */ +.hor li{display:inline;float:left;}.hor li a{display:block;float:left} +/* 处理无背景的块状a标签在IE下失效的问题 */ +.disa a{display:block;width:100%;height:100%;background:url(about:blank);text-indent:-9999px;} + + +/* 这条分割线以上的属性作为保留样式,对其进行非以上属性的样式定义可能引起以后的模块公共样式提取的兼容性问题 +==================================================================================================== */ + +/* 扩展参考(以下全站统一定制的公用模块参考区域,可针对需求进行规划) +------------------------------------------------------------ */ +/* 隐藏, 通常用来与 JS 配合 */ +body .ui-hide {display:none;} + +/* 提示框 -错误red,弹出,提醒yellow,成功green,一般信息 */ +.error,.alert,.notice,.success,.info{border:2px solid #ddd;margin-bottom:1em;padding:0.8em;} +.error,.alert{background:#FBE3E4;border-color:#FBC2C4;color:#8A1F11;} +.notice{background:#FFF6BF;border-color:#FFD324;color:#514721;} +.success{background:#E6EFC2;border-color:#C6D880;color:#264409;} +.info{background:#D5EDF8;border-color: #92CAE4;color:#205791;} +.error a,.alert a{color:#8A1F11;}.notice a{color:#514721;}.success a{color:#264409;}.info a{color:#205791;} + +/*人人网的一个提示框*/ +.yellow-tip-box { + background: url("http://a.xnimg.cn/imgpro/icons/yes.png") no-repeat scroll 20px 8px #FFF9D7; + border: 1px solid #E2C822; + margin-bottom: 10px; + padding: 6px 10px 6px 45px; +} +.yellow-tip-box p { + color: #888888; + margin: 0 !important; +} + +/* = form属性设置 +------------------------------------------------------------ */ +input[type="text"], input[type="password"], input[type="url"], input[type="email"], input.text, input.title, textarea { +background-color:white;border: 1px solid #bbb;color:#black;} +input[type="text"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="email"]:focus, input.text:focus, input.title:focus, textarea:focus {border-color:#666;} +select {background-color:white;border-style:solid;border-width:1px;} +input[type="text"], input[type="password"], input[type="url"], input[type="email"], input.text, input.title, textarea, select { +margin:0.5em 0;} +input.text,input.title{padding:5px;width:300px;} + +/* + + + + +*/ diff --git a/assets/css/reset.css b/assets/css/reset.css new file mode 100644 index 000000000000..6b30541dca87 --- /dev/null +++ b/assets/css/reset.css @@ -0,0 +1,141 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + Css Reset v0.9 + Created: 2011-04-25 + Last Updated: 2011-05-13 + Author: cloudYan + Contact: qqGroup:187260298 +------------------------------------------------------------ */ +/* =更新日志 + * 2012-10-11 新计划noreset,精良保持浏览器默认的属性或统一默认属性值而非直接去掉默认的属性(如:ul,ol等) + * 2012-05-11 html5新增语义化的标签(除figure外)不必重置样式,默认就没有样式-陈林 + + * 2012-04-04 新项目参考了alipay,yahoo,html5Doctor等结合模块化开发进行研究,html5的Doctype声明,不必写type="text/css" 但是必须要有 rel="stylesheet" + * 2011-09-24 解决了IE下超链接使用绝对定位后失效的问题(使用background:url(about:blank)解决是最佳方案) + * 2011-09-19 原项目代号Ocode取义Original code,参考http://www.tcreator.info/labs/projects/2011/css-reset.html + + * 研究规划 + * 第一步通用reset.css + * 第二步全站公共样式—common.css + 包括全站统一样式定义;如:a,a:hover等 + 基础的模块组合样式;如:.f14,.mt10,.tc等 + * 第三步css模块—c_common.css + 包括模块公共样式提取 + 公共模块样式 + 模块个性化样式(类似新模块,但多处使用的) + * 第四步网站架构css差异化如何书写及管理css + 单页面/项目css(个性化css)规划 +------------------------------------------------------------ */ +/* 升级原则——渐进增强(Progressive Enhancement) + +渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲,渐进增强是指在确保页面在禁用JavaScript后能正常运作后,再对页面添加各种特效(JavaScript动画、Ajax异步等等)。我们同样可以运用"渐进增强"原则来使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web规范。 + +某些情况下,是无法让所有用户在任何浏览器下都完全一模一样,特别是那些使用IE6的用户。运用渐进增强策略,可以保证让那些用户至少能使用到你网站(或网络应用)的基本功能。 +------------------------------------------------------------ */ +/* RESET */ +/* 内外边距通常让各个浏览器样式的表现位置不同 */ +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,figure,menu{margin:0;padding:0;} + +ol,ul{list-style-type:none} +/* 新计划中涉及的属性 + + +/* 语义化的标签的样式默认的margin,padding都为0,不用reset */ +article,aside,details,figcaption,footer,header,hgroup,menu,nav,section{} + +/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ +article,aside,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;} + +/* HTML5 媒体文件跟 img 保持一致 */ +audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} +command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline;} + +/* 去掉各Table cell 的边距并让其边重合 */ +table{border-collapse:collapse;border-spacing:0;} + +/* IE bug fixed: th 不继承 text-align*/ +th{text-align:inherit;} + +/* 去除默认边框 */ +fieldset,img{border:0;} + +/* ie6 7 8(q) bug 显示为行内表现 */ +iframe{display:block;} + +/* webkit内核浏览器会默认给:focus状态的元素加上outline的样式 没必要去除浏览器默认的outline属性 */ +:focus {outline:0;} + +/* 去掉 firefox 下此元素的边框 */ +abbr,acronym{border:0;font-variant:normal;} + +/* 一致的 del 样式 */ +del{text-decoration:line-through;} + +address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;} + + +/* 对齐是排版最重要的因素, 别让什么都居中 */ +caption,th {text-align:left;} + +/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ +h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;} +button,input,select,textarea{font-size:100%;} +q:before,q:after {content:'';} + +/* 统一上标和下标 */ +sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;} +sup{top:-0.5em;} +sub{bottom:-0.25em;} + +/* 默认不显示下划线,保持页面简洁 */ +ins,a {text-decoration:none;} + +/* 让链接在 hover 状态下显示下划线 */ +a:hover {text-decoration:underline;} + +/* 修复火狐下图片和文字之间的间隙,添加img{vertical-align:top;}、img{vertical-align:middle;}或img{display:block}属性即可解决,推荐前者 */ +img{vertical-align:middle} + +/* 清除浮动 */ +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +.clearfix,.wrap{*zoom:1}/* for IE6 IE7 */ +/* 空标签清除法 */ +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;} +.wrap,.bc{margin-left:auto; margin-right:auto} +.wrap{ width:980px;} + +/* 这条分割线以上的属性会提取到css reset.css中 +==================================================================================================== */ + +/* 全站级公用样式 */ + +/* 要注意表单元素并不继承父级 font 的问题 根据自身需求设置 这里可以注意下建议在使用表单元素的时候再定义 */ +body,button,input,select,textarea{font:12px/1.5 Tahoma,Arial,\5b8b\4f53;} +blockquote,pre{white-space:pre-wrap;word-wrap:break-word;} + +/* 使Chrome支持12px以下的字体 */ +.text-size{-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} +/* 两端对齐 */ +.text-justify{text-align:justify;text-justify:inter-ideograph;} +/* 半透明 */ +.opacity {opacity:.5;filter:alpha(opacity=50);} +/* 文本过长变成省略号,需要定义宽度 */ +.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} +/* css3属性 */ +.css3_shadow{transition:all 1s ease-out 0s;border-radius:5px;box-shadow:0 0px 4px rgba(206, 201, 170, 0.8);} +.css3_shadow:hover{box-shadow:0 0px 5px rgba(206, 201, 170, 1);} + +/* 定义全站级统一样式 */ +a{color:#06c}a:hover{color:#c06;}.view_more{color:#06c;padding:0 2px;} +.yahei{font-family: "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1"} + + +/* + + + + +*/ diff --git a/assets/css/ui-common.css b/assets/css/ui-common.css new file mode 100644 index 000000000000..f0773b99b806 --- /dev/null +++ b/assets/css/ui-common.css @@ -0,0 +1,39 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + Css common v0.9 + Last Updated: 2012-07-25 + Author: Cloudyan + Contact: 1395093509@qq.com +------------------------------------------------------------ */ +/* RESET */ +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,select,textarea,p,blockquote,th,td,hr,button,figure,menu{margin:0;padding:0;}article,aside,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline}table{border-collapse:collapse;border-spacing:0}th{text-align:inherit}fieldset,img{border:0}iframe{display:block}:focus{outline:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style-type:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bold}button,input,select,textarea{font-size:100%}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}ins,a{text-decoration:none}a:hover{text-decoration:underline}img{vertical-align:top} +/* common.css */ +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix,.wrap{zoom:1}.clr{clear:both}.clear{clear:both;font-size:0;overflow:hidden;visibility:hidden}.fl,.fr{display:inline}.fl{float:left;}.fr{float:right}bc{margin-left:auto;margin-right:auto;}.tc{text-align:center}.f12{font-size:12px}.f14{font-size:14px}.f16{font-size:16px}.f18{font-size:18px}.f22{font-size:22px}.f24{font-size:24px}.f30{font-size:30px}.lh18{line-height:18px}.lh20{line-height:20px}.lh22{line-height:22px}.lh24{line-height:24px}.lh28{line-height:28px}.lh30{line-height:30px}.mt10{margin-top:10px}.mt20{margin-top:20px}.mb10{margin-bottom:10px}.mb20{margin-bottom:20px}.ml10{margin-left:10px}.mr10{margin-right:10px}.pd10{padding:10px}.pt10{padding-top:10px}.pb10{padding-bottom:10px}.plr10{padding-left:10px;padding-right:10px}blockquote,pre{white-space:pre-wrap;word-wrap:break-word;}.text-size{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}.text-justify{text-align:justify;text-justify:inter-ideograph;}.opacity{opacity:.5;filter:alpha(opacity=50);}.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.css3_shadow{transition:all 1s ease-out 0s;border-radius:5px;box-shadow:0 0px 4px rgba(206,201,170,0.8)}.css3_shadow:hover{box-shadow:0 0px 5px rgba(206,201,170,1)}.yahei{font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","黑体"} +.hr_a,.hr_b,.hr_c{font-size:1px;line-height:1px;display:block;clear:both;overflow:hidden}.hr_a{height:10px}.hr_b{height:5px}.hr_c{height:20px} +.no_bg{background:none !important}.no_bd{border:none !important}.p_rel{position:relative}.p_abs{position:absolute} +.B,.fb{font-weight:bold}.fnb{font-weight:normal}.tc{text-align:center}.tr{text-align:right}.dis{display:block}.undis{display:none}.disb{display:inline-block;zoom:1;*display:inline}.inline{display:inline} +.hor li{display:inline;float:left;zoom:1}.hor li a{display:block;float:left} +.disa a,.g_btn a{display:block;width:100%;height:100%;background:url(about:blank);text-indent:-9999px;} +/*全站统一样式dfn表示价格*/ +dfn,i{font-style:normal;} +del,dfn,td.price{ font-family:Tahoma, Geneva, sans-serif; font-family:Arial} +dfn,td.price{color:#f60;} +del{color:#888} +del,dfn,dfn i{display:inline-block;*display:inline;*zoom:1;} +del i,dfn i{font-style:normal;font-weight:500} +ol.num{ padding:5px 10px 10px 30px;} +ol.num li{ list-style:decimal outside; text-indent:0px; line-height:20px; margin:5px 0} +/* 定制样式 */ +.wrap{width:980px;margin-left:auto;margin-right:auto} +button,input,select,textarea{font:12px/1 Tahoma,Arial,\5b8b\4f53;} +/* 驴妈妈UI设计 */ +.link-more{ display:inline-block;*display:inline;*zoom:1; margin-left:3px;} +.link-more i{color:#08c;}.view_more{ cursor: pointer;} +/* 字体颜色控制 */ +.lv-c1{color:#f60} +.lv-ca{color:#333} +.lv-cb{color:#555} +.lv-cc{color:#888} +.lv-cw{color:red} + +body{font:12px/22px \5b8b\4f53,Tahoma,Arial; color:#333; background:#fff; position:relative} diff --git a/assets/css/ui-components.css b/assets/css/ui-components.css new file mode 100644 index 000000000000..c9acb236ef5f --- /dev/null +++ b/assets/css/ui-components.css @@ -0,0 +1,379 @@ + +/* ------------------------------------------------------------ + ui-components v0.9 + Create: 2012-09-14 + Last Updated: 2012-09-29 + Author: Cloudyan + Contact: qqGroup:187260298 1395093509@qq.com + Description: 包含最常用且基本的组件(不要轻易修改此样式表中的样式,详询Author) +------------------------------------------------------------ */ + + +/* 四种常用css注释 + * 比较复杂的组件-变化组合较多,需要详细说明 + * 一般组件比较简单,只需简单说明 + * 简单组件但代码比较多,需要清晰划分css区块 + * 简单注释,只需功能性描述 + */ + + +/** + * @name : alert + * @explain : 操作提示 + * @type : 基类 .alert + * @dependent : 无 + * @author : Cloudyan + * @version : 1.0 + * @html : + +
    + +
    +
    提示标题
    +
    提示描述
    +
    + 按钮 + 链接 +
    +
    +
    + */ + +/** + * @name: UI CSS Framework 1.0 + * @author: Oricode UI + * @description: UI 组件描述 + */ + +/* Misc visuals-其他视觉效果 +----------------------------------*/ + +/* Corner radius-圆角 */ + + +/* 常用css注释举例结束 + ************************** + ********* end ********** + ************************** + */ + +/* (页面html说明举例)搜索页面主体内容 + * 边栏盒模型aside-box 单独定义盒子请附加具体的盒子名称,样式在自定义class名下定义 + * 如有边框添加class="lv-bd" + * 尽量保持结构设计上的统一,保持页面中的注释风格,示例如下: + * 注释开始 + * 注释结束 + */ + +/** + * @name: UI CSS Framework 1.0 + * @author: Oricode Group + * @description: UI 组件描述 + */ + +/** + * @name : mini-tips ===tips alert msg- + * @explain : 操作提示 + * @type : 基类 .tips .alert + * @expand : 扩展 -info -success -error -warning -help -stop -wait === message danger + * @dependent : Oricode + * @author : Cloudyan + * @version : 1.0 + * @html : + + + + + +
    + + 安全提醒:自行编辑,非系统消息 +
    + +
    + +

    Binggo!操作状态提醒!

    +

    您现在可以去畅游网络了。

    +
    + +
    + + +
    +
    提示标题
    +
    提示描述
    +
    + 按钮 + 链接 +
    +
    +
    + + */ +.mtips,.tips-ico,span.tips,.alert-ico{display:inline-block;*display:inline;*zoom:1;} +.tips-ico,.alert-ico{ background:url(/labs/lvmama/img/ico-combo.png) -1000px -1000px no-repeat; } + +/* tips */ +.tips .tips-ico{ width:14px; height:14px; float:left; margin-right:5px; background-position:0 -34px} +.tips{ margin:0; background:#f9f9f9;border:1px solid #d4d4d4;padding:8px 10px; line-height:14px;} +.tips-info .tips-ico{ background-position:0 -34px} +.tips-warning .tips-ico{ background-position:-14px -34px} +.tips-error .tips-ico{background-position:-28px -34px} +.tips-success .tips-ico{ background-position:-42px -34px} +.tips-help .tips-ico{ background-position:-56px -34px} +.tips-stop .tips-ico{ background-position:-70px -34px} +.tips-wait .tips-ico{ background-position:-84px -34px} + +.tips-info{background:#e5f5ff;border:1px solid #c9d5e2} +.tips-warning{background:#ffffe0;border:1px solid #ff8801} +.tips-error{background:#fff2f2;border:1px solid #f44} +.tips-success{background:#f1ffe2;border:1px solid #7dc25e} +.tips-help{background:#e5f5ff;border:1px solid #c9d5e2} +.tips-stop{background:#fceee8;border:1px solid #f6c8b5} +.tips-wait{background:#e5f5ff;border:1px solid #c9d5e2} + +.tips-arrowup{display:inline-block;height:10px;left:40px;margin-left:-8px;position:absolute;text-indent:-9999em;width:16px;z-index:1;top:-9px;_top:-8px} +.tips-arrowup-message{background-position:-194px -39px} +.tips-arrowup-warning{background-position:-211px -39px} + +/* mini-tips */ +.mtips{padding:9px 10px; line-height:14px; border:none; background:none} +.mtips .tips-ico{ width:14px; height:14px;} + +/* alert */ +.alert .alert-ico{ width:32px; height:32px; float:left; margin:0 0 0 -45px; background-position:0 -34px} +.alert{ background:#f9f9f9;border:1px solid #d4d4d4; padding:20px 30px 20px 65px;} +.alert .alert-title{ font-size:14px; font-weight:bold;} +.alert .alert-title,.alert .alert-line,.alert p{ margin:0} +.alert-info .alert-ico{ background-position:0 0} +.alert-warning .alert-ico{ background-position:-32px 0} +.alert-error .alert-ico{background-position:-64px 0} +.alert-success .alert-ico{ background-position:-96px 0} +.alert-help .alert-ico{ background-position:-128px 0} +.alert-stop .alert-ico{ background-position:-160px 0} +.alert-wait .alert-ico{ background-position:-192px 0} + +.alert-info{background:#e5f5ff;border:1px solid #c9d5e2} +.alert-warning{background:#ffffe0;border:1px solid #ff8801} +.alert-error{background:#fff2f2;border:1px solid #f44} +.alert-success{background:#f1ffe2;border:1px solid #7dc25e} +.alert-help{background:#e5f5ff;border:1px solid #c9d5e2} +.alert-stop{background:#fceee8;border:1px solid #f6c8b5} +.alert-wait{background:#e5f5ff;border:1px solid #c9d5e2} + +.alert-title{ font-size:14px; font-weight:bold} +.alert-line{ font-size:12px; line-height:22px;} + +button.close {padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;} +.alert .close{position:relative; width:24px; height:24px;top:-18px;right:-28px;line-height:22px;} + + +/** + * @name : Autocomplete Plugin + * @explain : 自动完成插件 + * @type : 基类 .auto >> auto-big auto-list + * @dependent : 无 + * @author : Cloudyan + * @version : 1.0 + * @html : + + */ +.auto{font:12px/22px \5b8b\4f53,Tahoma,Arial; width:277px; overflow:hidden;border:1px solid #dbdbdb;background: #fff; +box-shadow:2px 2px 2px 0 rgba(102,102,102,0.2);} +.auto a{color:#333; text-decoration:none} +.auto a:hover{ color:#e08; text-decoration:underline} +.auto-line{color:#888; font-size:12px;font-weight:normal; margin:0;} +.auto-title{color:#999; font-size:12px; font-weight: normal; border-bottom:1px dotted #dbdbdb} +.auto-box{ padding:5px 10px;} +.auto-mini .auto-box{ padding:0;} +.auto-mini a{ padding:0 10px;} +.a2row,.a3row,.a4row,.a5row{ overflow:hidden;*zoom:1; margin-right:-2px; padding-top:2px; margin-bottom:10px;} +.a2row li,.a3row li,.a4row li,.a5row li{ float:left; display:inline;overflow:hidden;} +.a2row li{ width:49.5%}.a3row li{ width:33.25%}.a4row li{ width:24.9%}.a5row li{ width:19.9%} +.auto a{ display:block; white-space:nowrap;overflow:hidden; text-align:left;} +.a2row a,.a3row a{margin-right:10px;text-overflow:ellipsis;} +.auto-mini a{text-overflow:ellipsis;color:#333;} +.auto-mini a:hover{ background:#ff9cc0;color:#fff; text-decoration:none} + +.auto-big{ width:355px;} +.auto-middle{width:277px;} +.auto-small{ width:235px;} +.auto-mini{ width:137px;} + +/* 活动促销icon + * icon101 节日-红色(按顺序排列) 元旦 清明 五一 端午 中秋 国庆 微旅游日 + * icon201 促销-橙色 多人多惠 礼盒 促销 热卖 新品 + * icon301 项目-多彩 超级自由行 开心驴行 + * icon-sp1 促销-大ICON 信用卡促销 多人多惠 早订优惠 招行专享 + * icon-01 标识-景点 + */ +.icon-01, +.icon101,.icon102,.icon103,.icon104,.icon105,.icon106,.icon07, +.icon201,.icon202,.icon203,.icon204,.icon205, +.icon301,.icon302, +.icon-sp1,.icon-sp2,.icon-sp3,.icon-sp4,.icon-sp5,.icon-sp6 +{ background: url(http://pic.lvmama.com/img/new_v/ob_search/combo.gif) no-repeat; display: inline-block;*display: inline;*zoom:1; vertical-align:top;*vertical-align:middle} +.icon-01{ height:16px; width:16px;margin-top:2px;*margin-top:0;} +.icon-01{ background-position: 0 -96px;} +.icon101,.icon102,.icon103,.icon104,.icon105,.icon106,.icon07, +.icon201,.icon202,.icon203,.icon204,.icon205 +{height: 16px;width: 33px; margin-top:2px;*margin-top:0; margin-left:10px;} +/* icon101 节日-红色(按顺序排列) 101元旦 102清明 103五一 104端午 105中秋 106国庆 107微旅游日 */ +.icon101{ background-position: -122px 0} +.icon102{ background-position: -155px -16px} +.icon103{ background-position: -122px -16px} +.icon104{ background-position: -155px -16px} +.icon105{ background-position: -122px -32px} +.icon106{ background-position: -155px -32px} +.icon107{ background-position: -122px -48px;width: 56px;} +/* icon201 促销-橙色 201多人多惠 202礼盒 203促销 204热卖 205新品 */ +.icon201{ background-position: -122px -80px;width: 56px;} +.icon202{ background-position: -179px -80px;width: 12px;} +.icon203{ background-position: -122px -96px;} +.icon204{ background-position: -155px -96px;} +.icon205{ background-position: -122px -112px;} +/* icon301 项目-玫红 301超级自由行 302开心驴行 */ +.icon301,.icon302 +{height: 17px;width: 76px; margin-left:10px;} +.icon301{ background-position: -190px 0; width: 88px;} +.icon302{ background-position: -190px -17px; width: 76px;} +/* icon301 促销-大ICON -sp1信用卡促销 -sp2多人多惠 -sp3早订优惠 -sp4招行专享 */ +.icon-sp1,.icon-sp2,.icon-sp3,.icon-sp4,.icon-sp5,.icon-sp6 +{ width: 90px; height: 34px; margin-bottom:10px;} +.icon-sp1{ background-position: -32px 0} +.icon-sp2{ background-position: -32px -34px} +.icon-sp3{ background-position: -32px -68px} +.icon-sp4{ background-position: -32px -102px} + +/* pages页码小组件 + * 样式默认玫红色(可缺省rosestyle) + * 可组合样式orangestyle橙色 + * @html +
    + 1 + 2 + 3 + ... + 下一页 +
    + */ +.pages{margin:10px 0 0;text-align:right;} +.pages a,.pages span{display:inline-block;zoom:1;*display:inline;margin-left:5px;padding:3px 9px; line-height:18px;} +.pages a{border:1px solid #ddd;color:#333;background:#fff;} +.pages .PageSel,.rosestyle .PageSel{font-weight:bold;border:1px solid #df1a7a;color:#fff;background:#df1a7a;} +.pages a:hover,.rosestyle a:hover{ border-color:#df1a7a;color:#df1a7a; text-decoration:none} +.orangestyle .PageSel{font-weight:bold;border:1px solid #f80;color:#fff;background:#f80;} +.orangestyle a:hover{ border-color:#f80;color:#f80; text-decoration:none} + +/* 星星组件 + * span.big_star 大星星-方形玫红星-无灰色背景(底灰色星星) + * span.re_star starbg 点评星星(灰色背景) + * span.b_star 大星星-玫红星-透明背景(底灰色星星) + * span.sm_star 小星星-玫红小星星 + * span.k_star 小星星-橙色空心 + * span.t_star 小星星-橙色实心(底空心星) + * @html + + */ +span.big_star,span.big_star i,span.b_star,span.b_star i,span.sm_star,span.sm_star i,span.t_star,span.t_star i,span.k_star i,.re-star,.starbg,.starbg i +{ background:url(http://pic.lvmama.com/img/new_v/channel/ico_s_result.gif) no-repeat;display:inline-block;*display:inline;*zoom:1;overflow:hidden;} +span.t_star,span.k_star{display:inline-block;overflow:hidden; height:10px;} +span.t_star,span.k_star{width:62px;} +span.t_star,span.t_star i,span.k_star i{ height:10px; background-position:-50px -100px;} +span.t_star i{background-position:-50px -111px;} +span.t_star i,span.k_star i{ float:left;} +span.sm_star,span.sm_star i{width:68px; height:12px; background-position:-180px -100px;} +span.sm_star i{background-position:-180px -111px; float:left;} +span.big_star,span.big_star i{ width:69px; height:13px; background-position:-24px 0;} +span.big_star i{background-position:-24px -16px; float:left;} +span.b_star,span.b_star i{ width:78px; height:12px; background-position:-27px -124px;} +span.b_star i{background-position:-27px -138px; float:left;} +.re-star,.starbg,.starbg i{ background-position:-250px -100px;width:80px; height:20px;} +.re-star{ padding:0 7px; overflow:hidden; vertical-align:middle} +.starbg{ background-position:-257px -100px;} +.starbg i{float:left; background-position:-257px -120px;} +/* 小星星扩展 */ +span.star1{ width:12px} +span.star2{ width:24px} +span.star3{ width:37px} +span.star4{ width:49px} +span.star5{ width:62px} +small.star{font-weight: normal; font-size:12px; line-height:11px; -webkit-text-size-adjust: none;} +small.star i{ width:100%;} +small.star span.t_star{ margin-right:5px;} + +/* 翻页小组件 */ +.pageoper{color:#555} +.page-arrow,i.arrow{ background:url(http://pic.lvmama.com/img/new_v/ob_search/combo.gif) 1000px 1000px no-repeat; display:inline-block; *display:inline;*zoom:1;} +.page-arrow { width:16px; height:16px; overflow:hidden; position:absolute; top:2px; _top:1px;} +.page-arrow-left{background-position:0 -80px; left:0px;} +.page-arrow-right{background-position:-16px -80px; right:0px;} +.page-prev,.page-next{ display:inline-block;*display:inline;*zoom:1; border:1px solid #dfdfdf; height:20px;line-height:20px; background:#fff; color:#555; position:relative} +.page-prev{ padding:0 4px 0 15px;} +.page-next{ padding:0 15px 0 4px;} +a.page-prev:hover,a.page-next:hover{color:#555; text-decoration:none; border-color:#FFB8DB;} + +/* view-more arrow 展开/收起-箭头 */ +.view-more,.hide-more{ display:inline-block;*display:inline;*zoom:1; line-height:22px; cursor:pointer} +i.arrow{ background-position:0 -112px;width:16px; height:16px; margin:2px 0 0 3px; vertical-align:top; *vertical-align:baseline} +.view-more .arrow{ background-position:0 -112px; } +.hide-more .arrow{background-position:-16px -112px; } + +/** + * @name : tooltip + * @explain : 提示 + * @type : 基类 + * @dependent : 无 + * @author : Cloudyan + * @version : 1.0 + * @html : + +
    +
    +
    +
    +
    +
    标题
    +

    内容

    +
    +
    +
    + */ + +.tooltip {position: absolute;z-index: 1030;display: block; padding:5px 0; font-size: 11px;/*opacity: 0;filter: alpha(opacity=0);*/visibility: visible;} +/*.tooltip.in {opacity: 0.8;filter: alpha(opacity=80);}*/ +.tooltip.top {margin-top: -3px;} +.tooltip.right {margin-left: 3px;} +.tooltip.bottom {margin-top: 3px;} +.tooltip.left {margin-left: -3px;} +.tooltip-outer {max-width: 260px;width:260px; position:relative; overflow:hidden; padding:3px; z-index:10; +/* border-bottom-color:rgba(129,129,129,1); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px;*/ + +} +.tooltip-shadow{ + position:absolute; width:100%; height:100%; _width:265px; _height:200px; top:0; left:0;z-index:50; + background:#000; + opacity:0.1; + filter: alpha(opacity=10); +} +.tooltip-inner{ position:relative; z-index:101; left:0; top:0; padding:5px 8px; background:#fff;text-decoration:none; border:1px solid #c6c6c6; color:#333;zoom:1;/*opacity:1;filter: alpha(opacity=100);*/} +.tooltip-title{color:#333; font-size:12px;} +.tooltip-content{color:#555; line-height:18px; font-size:12px;} +.tooltip-content p{ margin:0;} +.tooltip-content span{color:#ff9714} +.tooltip-arrow {position: absolute; z-index:100;width: 0;height: 0; overflow:hidden;border-color: transparent;border-style: solid;opacity:0.1;filter: alpha(opacity=10);} +.top .tooltip-arrow {bottom: 0;left: 50%;margin-left: -5px;border-top-color:#000;border-width: 5px 5px 0;} +.right .tooltip-arrow {top: 50%;left: 0;margin-top: -5px;border-right-color:#000;border-width: 5px 5px 5px 0;} +.left .tooltip-arrow {top: 50%;right: 0;margin-top: -5px;border-left-color:#000;border-width: 5px 0 5px 5px;} +.bottom .tooltip-arrow {top: 0;left: 50%;margin-left: -5px;border-bottom-color:#000;border-width: 0 5px 5px;} +asdasd{} +.bottom-left .tooltip-arrow,.bottom-right .tooltip-arrow{border-bottom-color:#000;border-width: 0 5px 5px;} +.bottom-left .tooltip-arrow {top: 0;left:25px;} +.bottom-right .tooltip-arrow {top: 0;left:100%; margin-left:-30px;} +.top-left .tooltip-arrow,.top-right .tooltip-arrow{border-top-color:#000;border-width: 5px 5px 0;} +.top-left .tooltip-arrow {bottom: 0;left:25px;} +.top-right .tooltip-arrow {bottom: 0;left:100%; margin-left:-30px;} + diff --git a/assets/css/x-responsive.css b/assets/css/x-responsive.css new file mode 100644 index 000000000000..1ff603a75178 --- /dev/null +++ b/assets/css/x-responsive.css @@ -0,0 +1,47 @@ +/*! + * Bootstrap Responsive v2.2.1 + * + * Copyright 2012 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ + +.clearfix { + *zoom: 1; +} + +.clearfix:before, +.clearfix:after { + display: table; + line-height: 0; + content: ""; +} + +.clearfix:after { + clear: both; +} + +.wrap{margin-left:auto; margin-right:auto; clear:both} +@media (min-width: 768px) and (max-width: 979px) { + +} + +@media (max-width: 979px) { +} + +@media (min-width: 980px) and (max-width: 1199px) { + .wrap{width:980px;} +} + +@media (min-width: 1200px) { + +} + +@media (max-width: 767px) { +} + +@media (max-width: 480px) { + +} \ No newline at end of file diff --git a/assets/js/DD_belatedPNG-min.js b/assets/js/DD_belatedPNG-min.js new file mode 100644 index 000000000000..6062fb3c1c4c --- /dev/null +++ b/assets/js/DD_belatedPNG-min.js @@ -0,0 +1,13 @@ +/** +* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML . +* Author: Drew Diller +* Email: drew.diller@gmail.com +* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/ +* Version: 0.0.8a +* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license +* +* Example usage: +* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector +* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement +**/ +var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}},createVmlStyleSheet:function(){var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");b.addRule(this.ns+"\\:shape","position:absolute;");b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute("media","print");document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns+"\\:*","{display: none !important;}");a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){var b,c,a;b=event.srcElement;if(!b.vmlInitiated){return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)}if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if(b.currentStyle.filter.search("lpha")!=-1){var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;bn.H){i.B=n.H}d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}else{d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f]=0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else{e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]++}return d[f]},fixPng:function(c){c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){return}c.isImg=false;if(c.nodeName=="IMG"){if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{return}}else{if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill:{}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)}}c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet(); \ No newline at end of file diff --git a/assets/js/jquery-1.7.2.min.js b/assets/js/jquery-1.7.2.min.js new file mode 100644 index 000000000000..16ad06c5acaa --- /dev/null +++ b/assets/js/jquery-1.7.2.min.js @@ -0,0 +1,4 @@ +/*! jQuery v1.7.2 jquery.com | jquery.org/license */ +(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cu(a){if(!cj[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){ck||(ck=c.createElement("iframe"),ck.frameBorder=ck.width=ck.height=0),b.appendChild(ck);if(!cl||!ck.createElement)cl=(ck.contentWindow||ck.contentDocument).document,cl.write((f.support.boxModel?"":"")+""),cl.close();d=cl.createElement(a),cl.body.appendChild(d),e=f.css(d,"display"),b.removeChild(ck)}cj[a]=e}return cj[a]}function ct(a,b){var c={};f.each(cp.concat.apply([],cp.slice(0,b)),function(){c[this]=a});return c}function cs(){cq=b}function cr(){setTimeout(cs,0);return cq=f.now()}function ci(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ch(){try{return new a.XMLHttpRequest}catch(b){}}function cb(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g0){if(c!=="border")for(;e=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?+d:j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.2",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a!=null&&a==a.window},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){if(typeof c!="string"||!c)return null;var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c
    a",d=p.getElementsByTagName("*"),e=p.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=p.getElementsByTagName("input")[0],b={leadingWhitespace:p.firstChild.nodeType===3,tbody:!p.getElementsByTagName("tbody").length,htmlSerialize:!!p.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:p.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0,pixelMargin:!0},f.boxModel=b.boxModel=c.compatMode==="CSS1Compat",i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete p.test}catch(r){b.deleteExpando=!1}!p.addEventListener&&p.attachEvent&&p.fireEvent&&(p.attachEvent("onclick",function(){b.noCloneEvent=!1}),p.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),i.setAttribute("name","t"),p.appendChild(i),j=c.createDocumentFragment(),j.appendChild(p.lastChild),b.checkClone=j.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,j.removeChild(i),j.appendChild(p);if(p.attachEvent)for(n in{submit:1,change:1,focusin:1})m="on"+n,o=m in p,o||(p.setAttribute(m,"return;"),o=typeof p[m]=="function"),b[n+"Bubbles"]=o;j.removeChild(p),j=g=h=p=i=null,f(function(){var d,e,g,h,i,j,l,m,n,q,r,s,t,u=c.getElementsByTagName("body")[0];!u||(m=1,t="padding:0;margin:0;border:",r="position:absolute;top:0;left:0;width:1px;height:1px;",s=t+"0;visibility:hidden;",n="style='"+r+t+"5px solid #000;",q="
    "+""+"
    ",d=c.createElement("div"),d.style.cssText=s+"width:0;height:0;position:static;top:0;margin-top:"+m+"px",u.insertBefore(d,u.firstChild),p=c.createElement("div"),d.appendChild(p),p.innerHTML="
    t
    ",k=p.getElementsByTagName("td"),o=k[0].offsetHeight===0,k[0].style.display="",k[1].style.display="none",b.reliableHiddenOffsets=o&&k[0].offsetHeight===0,a.getComputedStyle&&(p.innerHTML="",l=c.createElement("div"),l.style.width="0",l.style.marginRight="0",p.style.width="2px",p.appendChild(l),b.reliableMarginRight=(parseInt((a.getComputedStyle(l,null)||{marginRight:0}).marginRight,10)||0)===0),typeof p.style.zoom!="undefined"&&(p.innerHTML="",p.style.width=p.style.padding="1px",p.style.border=0,p.style.overflow="hidden",p.style.display="inline",p.style.zoom=1,b.inlineBlockNeedsLayout=p.offsetWidth===3,p.style.display="block",p.style.overflow="visible",p.innerHTML="
    ",b.shrinkWrapBlocks=p.offsetWidth!==3),p.style.cssText=r+s,p.innerHTML=q,e=p.firstChild,g=e.firstChild,i=e.nextSibling.firstChild.firstChild,j={doesNotAddBorder:g.offsetTop!==5,doesAddBorderForTableAndCells:i.offsetTop===5},g.style.position="fixed",g.style.top="20px",j.fixedPosition=g.offsetTop===20||g.offsetTop===15,g.style.position=g.style.top="",e.style.overflow="hidden",e.style.position="relative",j.subtractsBorderForOverflowNotVisible=g.offsetTop===-5,j.doesNotIncludeMarginInBodyOffset=u.offsetTop!==m,a.getComputedStyle&&(p.style.marginTop="1%",b.pixelMargin=(a.getComputedStyle(p,null)||{marginTop:0}).marginTop!=="1%"),typeof d.style.zoom!="undefined"&&(d.style.zoom=1),u.removeChild(d),l=p=d=null,f.extend(b,j))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e1,null,!1)},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){var d=2;typeof a!="string"&&(c=a,a="fx",d--);if(arguments.length1)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,f.prop,a,b,arguments.length>1)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.type]||f.valHooks[this.nodeName.toLowerCase()];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.type]||f.valHooks[g.nodeName.toLowerCase()];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h,i=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;i=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/(?:^|\s)hover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function( +a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler,g=p.selector),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;le&&j.push({elem:this,matches:d.slice(e)});for(k=0;k0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return bc[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));o.match.globalPOS=p;var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="

    ";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="
    ";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h0)for(h=g;h=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/]","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*",""],legend:[1,"
    ","
    "],thead:[1,"","
    "],tr:[2,"","
    "],td:[3,"","
    "],col:[2,"","
    "],area:[1,"",""],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div
    ","
    "]),f.fn.extend({text:function(a){return f.access(this,function(a){return a===b?f.text(this):this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a))},null,a,arguments.length)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f +.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){return f.access(this,function(a){var c=this[0]||{},d=0,e=this.length;if(a===b)return c.nodeType===1?c.innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1>");try{for(;d1&&l0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||f.isXMLDoc(a)||!bc.test("<"+a.nodeName+">")?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g,h,i,j=[];b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);for(var k=0,l;(l=a[k])!=null;k++){typeof l=="number"&&(l+="");if(!l)continue;if(typeof l=="string")if(!_.test(l))l=b.createTextNode(l);else{l=l.replace(Y,"<$1>");var m=(Z.exec(l)||["",""])[1].toLowerCase(),n=bg[m]||bg._default,o=n[0],p=b.createElement("div"),q=bh.childNodes,r;b===c?bh.appendChild(p):U(b).appendChild(p),p.innerHTML=n[1]+l+n[2];while(o--)p=p.lastChild;if(!f.support.tbody){var s=$.test(l),t=m==="table"&&!s?p.firstChild&&p.firstChild.childNodes:n[1]===""&&!s?p.childNodes:[];for(i=t.length-1;i>=0;--i)f.nodeName(t[i],"tbody")&&!t[i].childNodes.length&&t[i].parentNode.removeChild(t[i])}!f.support.leadingWhitespace&&X.test(l)&&p.insertBefore(b.createTextNode(X.exec(l)[0]),p.firstChild),l=p.childNodes,p&&(p.parentNode.removeChild(p),q.length>0&&(r=q[q.length-1],r&&r.parentNode&&r.parentNode.removeChild(r)))}var u;if(!f.support.appendChecked)if(l[0]&&typeof (u=l.length)=="number")for(i=0;i1)},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=by(a,"opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bu.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(by)return by(a,c)},swap:function(a,b,c){var d={},e,f;for(f in b)d[f]=a.style[f],a.style[f]=b[f];e=c.call(a);for(f in b)a.style[f]=d[f];return e}}),f.curCSS=f.css,c.defaultView&&c.defaultView.getComputedStyle&&(bz=function(a,b){var c,d,e,g,h=a.style;b=b.replace(br,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b))),!f.support.pixelMargin&&e&&bv.test(b)&&bt.test(c)&&(g=h.width,h.width=c,c=e.width,h.width=g);return c}),c.documentElement.currentStyle&&(bA=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f==null&&g&&(e=g[b])&&(f=e),bt.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),by=bz||bA,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){if(c)return a.offsetWidth!==0?bB(a,b,d):f.swap(a,bw,function(){return bB(a,b,d)})},set:function(a,b){return bs.test(b)?b+"px":b}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return bq.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bp,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bp.test(g)?g.replace(bp,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){return f.swap(a,{display:"inline-block"},function(){return b?by(a,"margin-right"):a.style.marginRight})}})}),f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)}),f.each({margin:"",padding:"",border:"Width"},function(a,b){f.cssHooks[a+b]={expand:function(c){var d,e=typeof c=="string"?c.split(" "):[c],f={};for(d=0;d<4;d++)f[a+bx[d]+b]=e[d]||e[d-2]||e[0];return f}}});var bC=/%20/g,bD=/\[\]$/,bE=/\r?\n/g,bF=/#.*$/,bG=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bH=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bI=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bJ=/^(?:GET|HEAD)$/,bK=/^\/\//,bL=/\?/,bM=/)<[^<]*)*<\/script>/gi,bN=/^(?:select|textarea)/i,bO=/\s+/,bP=/([?&])_=[^&]*/,bQ=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bR=f.fn.load,bS={},bT={},bU,bV,bW=["*/"]+["*"];try{bU=e.href}catch(bX){bU=c.createElement("a"),bU.href="",bU=bU.href}bV=bQ.exec(bU.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bR)return bR.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("
    ").append(c.replace(bM,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bN.test(this.nodeName)||bH.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bE,"\r\n")}}):{name:b.name,value:c.replace(bE,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b$(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b$(a,b);return a},ajaxSettings:{url:bU,isLocal:bI.test(bV[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded; charset=UTF-8",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bW},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bY(bS),ajaxTransport:bY(bT),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?ca(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cb(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bG.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bF,"").replace(bK,bV[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bO),d.crossDomain==null&&(r=bQ.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bV[1]&&r[2]==bV[2]&&(r[3]||(r[1]==="http:"?80:443))==(bV[3]||(bV[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),bZ(bS,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bJ.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bL.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bP,"$1_="+x);d.url=y+(y===d.url?(bL.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bW+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=bZ(bT,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)b_(g,a[g],c,e);return d.join("&").replace(bC,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cc=f.now(),cd=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cc++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=typeof b.data=="string"&&/^application\/x\-www\-form\-urlencoded/.test(b.contentType);if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(cd.test(b.url)||e&&cd.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(cd,l),b.url===j&&(e&&(k=k.replace(cd,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var ce=a.ActiveXObject?function(){for(var a in cg)cg[a](0,1)}:!1,cf=0,cg;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ch()||ci()}:ch,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,ce&&delete cg[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n);try{m.text=h.responseText}catch(a){}try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cf,ce&&(cg||(cg={},f(a).unload(ce)),cg[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var cj={},ck,cl,cm=/^(?:toggle|show|hide)$/,cn=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,co,cp=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cq;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(ct("show",3),a,b,c);for(var g=0,h=this.length;g=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,c){var d=/Y/.test(c);f.fn[a]=function(e){return f.access(this,function(a,e,g){var h=cy(a);if(g===b)return h?c in h?h[c]:f.support.boxModel&&h.document.documentElement[e]||h.document.body[e]:a[e];h?h.scrollTo(d?f(h).scrollLeft():g,d?g:f(h).scrollTop()):a[e]=g},a,e,arguments.length,null)}}),f.each({Height:"height",Width:"width"},function(a,c){var d="client"+a,e="scroll"+a,g="offset"+a;f.fn["inner"+a]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,c,"padding")):this[c]():null},f.fn["outer"+a]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,c,a?"margin":"border")):this[c]():null},f.fn[c]=function(a){return f.access(this,function(a,c,h){var i,j,k,l;if(f.isWindow(a)){i=a.document,j=i.documentElement[d];return f.support.boxModel&&j||i.body&&i.body[d]||j}if(a.nodeType===9){i=a.documentElement;if(i[d]>=i[e])return i[d];return Math.max(a.body[e],i[e],a.body[g],i[g])}if(h===b){k=f.css(a,c),l=parseFloat(k);return f.isNumeric(l)?l:k}f(a).css(c,h)},c,a,arguments.length,null)}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window); \ No newline at end of file diff --git a/assets/js/jquery-1.8.3.min.js b/assets/js/jquery-1.8.3.min.js new file mode 100644 index 000000000000..38837795279c --- /dev/null +++ b/assets/js/jquery-1.8.3.min.js @@ -0,0 +1,2 @@ +/*! jQuery v1.8.3 jquery.com | jquery.org/license */ +(function(e,t){function _(e){var t=M[e]={};return v.each(e.split(y),function(e,n){t[n]=!0}),t}function H(e,n,r){if(r===t&&e.nodeType===1){var i="data-"+n.replace(P,"-$1").toLowerCase();r=e.getAttribute(i);if(typeof r=="string"){try{r=r==="true"?!0:r==="false"?!1:r==="null"?null:+r+""===r?+r:D.test(r)?v.parseJSON(r):r}catch(s){}v.data(e,n,r)}else r=t}return r}function B(e){var t;for(t in e){if(t==="data"&&v.isEmptyObject(e[t]))continue;if(t!=="toJSON")return!1}return!0}function et(){return!1}function tt(){return!0}function ut(e){return!e||!e.parentNode||e.parentNode.nodeType===11}function at(e,t){do e=e[t];while(e&&e.nodeType!==1);return e}function ft(e,t,n){t=t||0;if(v.isFunction(t))return v.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return v.grep(e,function(e,r){return e===t===n});if(typeof t=="string"){var r=v.grep(e,function(e){return e.nodeType===1});if(it.test(t))return v.filter(t,r,!n);t=v.filter(t,r)}return v.grep(e,function(e,r){return v.inArray(e,t)>=0===n})}function lt(e){var t=ct.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}function Lt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function At(e,t){if(t.nodeType!==1||!v.hasData(e))return;var n,r,i,s=v._data(e),o=v._data(t,s),u=s.events;if(u){delete o.handle,o.events={};for(n in u)for(r=0,i=u[n].length;r").appendTo(i.body),n=t.css("display");t.remove();if(n==="none"||n===""){Pt=i.body.appendChild(Pt||v.extend(i.createElement("iframe"),{frameBorder:0,width:0,height:0}));if(!Ht||!Pt.createElement)Ht=(Pt.contentWindow||Pt.contentDocument).document,Ht.write(""),Ht.close();t=Ht.body.appendChild(Ht.createElement(e)),n=Dt(t,"display"),i.body.removeChild(Pt)}return Wt[e]=n,n}function fn(e,t,n,r){var i;if(v.isArray(t))v.each(t,function(t,i){n||sn.test(e)?r(e,i):fn(e+"["+(typeof i=="object"?t:"")+"]",i,n,r)});else if(!n&&v.type(t)==="object")for(i in t)fn(e+"["+i+"]",t[i],n,r);else r(e,t)}function Cn(e){return function(t,n){typeof t!="string"&&(n=t,t="*");var r,i,s,o=t.toLowerCase().split(y),u=0,a=o.length;if(v.isFunction(n))for(;u)[^>]*$|#([\w\-]*)$)/,E=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,S=/^[\],:{}\s]*$/,x=/(?:^|:|,)(?:\s*\[)+/g,T=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,N=/"[^"\\\r\n]*"|true|false|null|-?(?:\d\d*\.|)\d+(?:[eE][\-+]?\d+|)/g,C=/^-ms-/,k=/-([\da-z])/gi,L=function(e,t){return(t+"").toUpperCase()},A=function(){i.addEventListener?(i.removeEventListener("DOMContentLoaded",A,!1),v.ready()):i.readyState==="complete"&&(i.detachEvent("onreadystatechange",A),v.ready())},O={};v.fn=v.prototype={constructor:v,init:function(e,n,r){var s,o,u,a;if(!e)return this;if(e.nodeType)return this.context=this[0]=e,this.length=1,this;if(typeof e=="string"){e.charAt(0)==="<"&&e.charAt(e.length-1)===">"&&e.length>=3?s=[null,e,null]:s=w.exec(e);if(s&&(s[1]||!n)){if(s[1])return n=n instanceof v?n[0]:n,a=n&&n.nodeType?n.ownerDocument||n:i,e=v.parseHTML(s[1],a,!0),E.test(s[1])&&v.isPlainObject(n)&&this.attr.call(e,n,!0),v.merge(this,e);o=i.getElementById(s[2]);if(o&&o.parentNode){if(o.id!==s[2])return r.find(e);this.length=1,this[0]=o}return this.context=i,this.selector=e,this}return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e)}return v.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),v.makeArray(e,this))},selector:"",jquery:"1.8.3",length:0,size:function(){return this.length},toArray:function(){return l.call(this)},get:function(e){return e==null?this.toArray():e<0?this[this.length+e]:this[e]},pushStack:function(e,t,n){var r=v.merge(this.constructor(),e);return r.prevObject=this,r.context=this.context,t==="find"?r.selector=this.selector+(this.selector?" ":"")+n:t&&(r.selector=this.selector+"."+t+"("+n+")"),r},each:function(e,t){return v.each(this,e,t)},ready:function(e){return v.ready.promise().done(e),this},eq:function(e){return e=+e,e===-1?this.slice(e):this.slice(e,e+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(l.apply(this,arguments),"slice",l.call(arguments).join(","))},map:function(e){return this.pushStack(v.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:f,sort:[].sort,splice:[].splice},v.fn.init.prototype=v.fn,v.extend=v.fn.extend=function(){var e,n,r,i,s,o,u=arguments[0]||{},a=1,f=arguments.length,l=!1;typeof u=="boolean"&&(l=u,u=arguments[1]||{},a=2),typeof u!="object"&&!v.isFunction(u)&&(u={}),f===a&&(u=this,--a);for(;a0)return;r.resolveWith(i,[v]),v.fn.trigger&&v(i).trigger("ready").off("ready")},isFunction:function(e){return v.type(e)==="function"},isArray:Array.isArray||function(e){return v.type(e)==="array"},isWindow:function(e){return e!=null&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return e==null?String(e):O[h.call(e)]||"object"},isPlainObject:function(e){if(!e||v.type(e)!=="object"||e.nodeType||v.isWindow(e))return!1;try{if(e.constructor&&!p.call(e,"constructor")&&!p.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(n){return!1}var r;for(r in e);return r===t||p.call(e,r)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw new Error(e)},parseHTML:function(e,t,n){var r;return!e||typeof e!="string"?null:(typeof t=="boolean"&&(n=t,t=0),t=t||i,(r=E.exec(e))?[t.createElement(r[1])]:(r=v.buildFragment([e],t,n?null:[]),v.merge([],(r.cacheable?v.clone(r.fragment):r.fragment).childNodes)))},parseJSON:function(t){if(!t||typeof t!="string")return null;t=v.trim(t);if(e.JSON&&e.JSON.parse)return e.JSON.parse(t);if(S.test(t.replace(T,"@").replace(N,"]").replace(x,"")))return(new Function("return "+t))();v.error("Invalid JSON: "+t)},parseXML:function(n){var r,i;if(!n||typeof n!="string")return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(s){r=t}return(!r||!r.documentElement||r.getElementsByTagName("parsererror").length)&&v.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&g.test(t)&&(e.execScript||function(t){e.eval.call(e,t)})(t)},camelCase:function(e){return e.replace(C,"ms-").replace(k,L)},nodeName:function(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()},each:function(e,n,r){var i,s=0,o=e.length,u=o===t||v.isFunction(e);if(r){if(u){for(i in e)if(n.apply(e[i],r)===!1)break}else for(;s0&&e[0]&&e[a-1]||a===0||v.isArray(e));if(f)for(;u-1)a.splice(n,1),i&&(n<=o&&o--,n<=u&&u--)}),this},has:function(e){return v.inArray(e,a)>-1},empty:function(){return a=[],this},disable:function(){return a=f=n=t,this},disabled:function(){return!a},lock:function(){return f=t,n||c.disable(),this},locked:function(){return!f},fireWith:function(e,t){return t=t||[],t=[e,t.slice?t.slice():t],a&&(!r||f)&&(i?f.push(t):l(t)),this},fire:function(){return c.fireWith(this,arguments),this},fired:function(){return!!r}};return c},v.extend({Deferred:function(e){var t=[["resolve","done",v.Callbacks("once memory"),"resolved"],["reject","fail",v.Callbacks("once memory"),"rejected"],["notify","progress",v.Callbacks("memory")]],n="pending",r={state:function(){return n},always:function(){return i.done(arguments).fail(arguments),this},then:function(){var e=arguments;return v.Deferred(function(n){v.each(t,function(t,r){var s=r[0],o=e[t];i[r[1]](v.isFunction(o)?function(){var e=o.apply(this,arguments);e&&v.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[s+"With"](this===i?n:this,[e])}:n[s])}),e=null}).promise()},promise:function(e){return e!=null?v.extend(e,r):r}},i={};return r.pipe=r.then,v.each(t,function(e,s){var o=s[2],u=s[3];r[s[1]]=o.add,u&&o.add(function(){n=u},t[e^1][2].disable,t[2][2].lock),i[s[0]]=o.fire,i[s[0]+"With"]=o.fireWith}),r.promise(i),e&&e.call(i,i),i},when:function(e){var t=0,n=l.call(arguments),r=n.length,i=r!==1||e&&v.isFunction(e.promise)?r:0,s=i===1?e:v.Deferred(),o=function(e,t,n){return function(r){t[e]=this,n[e]=arguments.length>1?l.call(arguments):r,n===u?s.notifyWith(t,n):--i||s.resolveWith(t,n)}},u,a,f;if(r>1){u=new Array(r),a=new Array(r),f=new Array(r);for(;t
    a",n=p.getElementsByTagName("*"),r=p.getElementsByTagName("a")[0];if(!n||!r||!n.length)return{};s=i.createElement("select"),o=s.appendChild(i.createElement("option")),u=p.getElementsByTagName("input")[0],r.style.cssText="top:1px;float:left;opacity:.5",t={leadingWhitespace:p.firstChild.nodeType===3,tbody:!p.getElementsByTagName("tbody").length,htmlSerialize:!!p.getElementsByTagName("link").length,style:/top/.test(r.getAttribute("style")),hrefNormalized:r.getAttribute("href")==="/a",opacity:/^0.5/.test(r.style.opacity),cssFloat:!!r.style.cssFloat,checkOn:u.value==="on",optSelected:o.selected,getSetAttribute:p.className!=="t",enctype:!!i.createElement("form").enctype,html5Clone:i.createElement("nav").cloneNode(!0).outerHTML!=="<:nav>",boxModel:i.compatMode==="CSS1Compat",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0,boxSizingReliable:!0,pixelPosition:!1},u.checked=!0,t.noCloneChecked=u.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!o.disabled;try{delete p.test}catch(d){t.deleteExpando=!1}!p.addEventListener&&p.attachEvent&&p.fireEvent&&(p.attachEvent("onclick",h=function(){t.noCloneEvent=!1}),p.cloneNode(!0).fireEvent("onclick"),p.detachEvent("onclick",h)),u=i.createElement("input"),u.value="t",u.setAttribute("type","radio"),t.radioValue=u.value==="t",u.setAttribute("checked","checked"),u.setAttribute("name","t"),p.appendChild(u),a=i.createDocumentFragment(),a.appendChild(p.lastChild),t.checkClone=a.cloneNode(!0).cloneNode(!0).lastChild.checked,t.appendChecked=u.checked,a.removeChild(u),a.appendChild(p);if(p.attachEvent)for(l in{submit:!0,change:!0,focusin:!0})f="on"+l,c=f in p,c||(p.setAttribute(f,"return;"),c=typeof p[f]=="function"),t[l+"Bubbles"]=c;return v(function(){var n,r,s,o,u="padding:0;margin:0;border:0;display:block;overflow:hidden;",a=i.getElementsByTagName("body")[0];if(!a)return;n=i.createElement("div"),n.style.cssText="visibility:hidden;border:0;width:0;height:0;position:static;top:0;margin-top:1px",a.insertBefore(n,a.firstChild),r=i.createElement("div"),n.appendChild(r),r.innerHTML="
    t
    ",s=r.getElementsByTagName("td"),s[0].style.cssText="padding:0;margin:0;border:0;display:none",c=s[0].offsetHeight===0,s[0].style.display="",s[1].style.display="none",t.reliableHiddenOffsets=c&&s[0].offsetHeight===0,r.innerHTML="",r.style.cssText="box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;",t.boxSizing=r.offsetWidth===4,t.doesNotIncludeMarginInBodyOffset=a.offsetTop!==1,e.getComputedStyle&&(t.pixelPosition=(e.getComputedStyle(r,null)||{}).top!=="1%",t.boxSizingReliable=(e.getComputedStyle(r,null)||{width:"4px"}).width==="4px",o=i.createElement("div"),o.style.cssText=r.style.cssText=u,o.style.marginRight=o.style.width="0",r.style.width="1px",r.appendChild(o),t.reliableMarginRight=!parseFloat((e.getComputedStyle(o,null)||{}).marginRight)),typeof r.style.zoom!="undefined"&&(r.innerHTML="",r.style.cssText=u+"width:1px;padding:1px;display:inline;zoom:1",t.inlineBlockNeedsLayout=r.offsetWidth===3,r.style.display="block",r.style.overflow="visible",r.innerHTML="
    ",r.firstChild.style.width="5px",t.shrinkWrapBlocks=r.offsetWidth!==3,n.style.zoom=1),a.removeChild(n),n=r=s=o=null}),a.removeChild(p),n=r=s=o=u=a=p=null,t}();var D=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,P=/([A-Z])/g;v.extend({cache:{},deletedIds:[],uuid:0,expando:"jQuery"+(v.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(e){return e=e.nodeType?v.cache[e[v.expando]]:e[v.expando],!!e&&!B(e)},data:function(e,n,r,i){if(!v.acceptData(e))return;var s,o,u=v.expando,a=typeof n=="string",f=e.nodeType,l=f?v.cache:e,c=f?e[u]:e[u]&&u;if((!c||!l[c]||!i&&!l[c].data)&&a&&r===t)return;c||(f?e[u]=c=v.deletedIds.pop()||v.guid++:c=u),l[c]||(l[c]={},f||(l[c].toJSON=v.noop));if(typeof n=="object"||typeof n=="function")i?l[c]=v.extend(l[c],n):l[c].data=v.extend(l[c].data,n);return s=l[c],i||(s.data||(s.data={}),s=s.data),r!==t&&(s[v.camelCase(n)]=r),a?(o=s[n],o==null&&(o=s[v.camelCase(n)])):o=s,o},removeData:function(e,t,n){if(!v.acceptData(e))return;var r,i,s,o=e.nodeType,u=o?v.cache:e,a=o?e[v.expando]:v.expando;if(!u[a])return;if(t){r=n?u[a]:u[a].data;if(r){v.isArray(t)||(t in r?t=[t]:(t=v.camelCase(t),t in r?t=[t]:t=t.split(" ")));for(i=0,s=t.length;i1,null,!1))},removeData:function(e){return this.each(function(){v.removeData(this,e)})}}),v.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=v._data(e,t),n&&(!r||v.isArray(n)?r=v._data(e,t,v.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=v.queue(e,t),r=n.length,i=n.shift(),s=v._queueHooks(e,t),o=function(){v.dequeue(e,t)};i==="inprogress"&&(i=n.shift(),r--),i&&(t==="fx"&&n.unshift("inprogress"),delete s.stop,i.call(e,o,s)),!r&&s&&s.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return v._data(e,n)||v._data(e,n,{empty:v.Callbacks("once memory").add(function(){v.removeData(e,t+"queue",!0),v.removeData(e,n,!0)})})}}),v.fn.extend({queue:function(e,n){var r=2;return typeof e!="string"&&(n=e,e="fx",r--),arguments.length1)},removeAttr:function(e){return this.each(function(){v.removeAttr(this,e)})},prop:function(e,t){return v.access(this,v.prop,e,t,arguments.length>1)},removeProp:function(e){return e=v.propFix[e]||e,this.each(function(){try{this[e]=t,delete this[e]}catch(n){}})},addClass:function(e){var t,n,r,i,s,o,u;if(v.isFunction(e))return this.each(function(t){v(this).addClass(e.call(this,t,this.className))});if(e&&typeof e=="string"){t=e.split(y);for(n=0,r=this.length;n=0)r=r.replace(" "+n[s]+" "," ");i.className=e?v.trim(r):""}}}return this},toggleClass:function(e,t){var n=typeof e,r=typeof t=="boolean";return v.isFunction(e)?this.each(function(n){v(this).toggleClass(e.call(this,n,this.className,t),t)}):this.each(function(){if(n==="string"){var i,s=0,o=v(this),u=t,a=e.split(y);while(i=a[s++])u=r?u:!o.hasClass(i),o[u?"addClass":"removeClass"](i)}else if(n==="undefined"||n==="boolean")this.className&&v._data(this,"__className__",this.className),this.className=this.className||e===!1?"":v._data(this,"__className__")||""})},hasClass:function(e){var t=" "+e+" ",n=0,r=this.length;for(;n=0)return!0;return!1},val:function(e){var n,r,i,s=this[0];if(!arguments.length){if(s)return n=v.valHooks[s.type]||v.valHooks[s.nodeName.toLowerCase()],n&&"get"in n&&(r=n.get(s,"value"))!==t?r:(r=s.value,typeof r=="string"?r.replace(R,""):r==null?"":r);return}return i=v.isFunction(e),this.each(function(r){var s,o=v(this);if(this.nodeType!==1)return;i?s=e.call(this,r,o.val()):s=e,s==null?s="":typeof s=="number"?s+="":v.isArray(s)&&(s=v.map(s,function(e){return e==null?"":e+""})),n=v.valHooks[this.type]||v.valHooks[this.nodeName.toLowerCase()];if(!n||!("set"in n)||n.set(this,s,"value")===t)this.value=s})}}),v.extend({valHooks:{option:{get:function(e){var t=e.attributes.value;return!t||t.specified?e.value:e.text}},select:{get:function(e){var t,n,r=e.options,i=e.selectedIndex,s=e.type==="select-one"||i<0,o=s?null:[],u=s?i+1:r.length,a=i<0?u:s?i:0;for(;a=0}),n.length||(e.selectedIndex=-1),n}}},attrFn:{},attr:function(e,n,r,i){var s,o,u,a=e.nodeType;if(!e||a===3||a===8||a===2)return;if(i&&v.isFunction(v.fn[n]))return v(e)[n](r);if(typeof e.getAttribute=="undefined")return v.prop(e,n,r);u=a!==1||!v.isXMLDoc(e),u&&(n=n.toLowerCase(),o=v.attrHooks[n]||(X.test(n)?F:j));if(r!==t){if(r===null){v.removeAttr(e,n);return}return o&&"set"in o&&u&&(s=o.set(e,r,n))!==t?s:(e.setAttribute(n,r+""),r)}return o&&"get"in o&&u&&(s=o.get(e,n))!==null?s:(s=e.getAttribute(n),s===null?t:s)},removeAttr:function(e,t){var n,r,i,s,o=0;if(t&&e.nodeType===1){r=t.split(y);for(;o=0}})});var $=/^(?:textarea|input|select)$/i,J=/^([^\.]*|)(?:\.(.+)|)$/,K=/(?:^|\s)hover(\.\S+|)\b/,Q=/^key/,G=/^(?:mouse|contextmenu)|click/,Y=/^(?:focusinfocus|focusoutblur)$/,Z=function(e){return v.event.special.hover?e:e.replace(K,"mouseenter$1 mouseleave$1")};v.event={add:function(e,n,r,i,s){var o,u,a,f,l,c,h,p,d,m,g;if(e.nodeType===3||e.nodeType===8||!n||!r||!(o=v._data(e)))return;r.handler&&(d=r,r=d.handler,s=d.selector),r.guid||(r.guid=v.guid++),a=o.events,a||(o.events=a={}),u=o.handle,u||(o.handle=u=function(e){return typeof v=="undefined"||!!e&&v.event.triggered===e.type?t:v.event.dispatch.apply(u.elem,arguments)},u.elem=e),n=v.trim(Z(n)).split(" ");for(f=0;f=0&&(y=y.slice(0,-1),a=!0),y.indexOf(".")>=0&&(b=y.split("."),y=b.shift(),b.sort());if((!s||v.event.customEvent[y])&&!v.event.global[y])return;n=typeof n=="object"?n[v.expando]?n:new v.Event(y,n):new v.Event(y),n.type=y,n.isTrigger=!0,n.exclusive=a,n.namespace=b.join("."),n.namespace_re=n.namespace?new RegExp("(^|\\.)"+b.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,h=y.indexOf(":")<0?"on"+y:"";if(!s){u=v.cache;for(f in u)u[f].events&&u[f].events[y]&&v.event.trigger(n,r,u[f].handle.elem,!0);return}n.result=t,n.target||(n.target=s),r=r!=null?v.makeArray(r):[],r.unshift(n),p=v.event.special[y]||{};if(p.trigger&&p.trigger.apply(s,r)===!1)return;m=[[s,p.bindType||y]];if(!o&&!p.noBubble&&!v.isWindow(s)){g=p.delegateType||y,l=Y.test(g+y)?s:s.parentNode;for(c=s;l;l=l.parentNode)m.push([l,g]),c=l;c===(s.ownerDocument||i)&&m.push([c.defaultView||c.parentWindow||e,g])}for(f=0;f=0:v.find(h,this,null,[s]).length),u[h]&&f.push(c);f.length&&w.push({elem:s,matches:f})}d.length>m&&w.push({elem:this,matches:d.slice(m)});for(r=0;r0?this.on(t,null,e,n):this.trigger(t)},Q.test(t)&&(v.event.fixHooks[t]=v.event.keyHooks),G.test(t)&&(v.event.fixHooks[t]=v.event.mouseHooks)}),function(e,t){function nt(e,t,n,r){n=n||[],t=t||g;var i,s,a,f,l=t.nodeType;if(!e||typeof e!="string")return n;if(l!==1&&l!==9)return[];a=o(t);if(!a&&!r)if(i=R.exec(e))if(f=i[1]){if(l===9){s=t.getElementById(f);if(!s||!s.parentNode)return n;if(s.id===f)return n.push(s),n}else if(t.ownerDocument&&(s=t.ownerDocument.getElementById(f))&&u(t,s)&&s.id===f)return n.push(s),n}else{if(i[2])return S.apply(n,x.call(t.getElementsByTagName(e),0)),n;if((f=i[3])&&Z&&t.getElementsByClassName)return S.apply(n,x.call(t.getElementsByClassName(f),0)),n}return vt(e.replace(j,"$1"),t,n,r,a)}function rt(e){return function(t){var n=t.nodeName.toLowerCase();return n==="input"&&t.type===e}}function it(e){return function(t){var n=t.nodeName.toLowerCase();return(n==="input"||n==="button")&&t.type===e}}function st(e){return N(function(t){return t=+t,N(function(n,r){var i,s=e([],n.length,t),o=s.length;while(o--)n[i=s[o]]&&(n[i]=!(r[i]=n[i]))})})}function ot(e,t,n){if(e===t)return n;var r=e.nextSibling;while(r){if(r===t)return-1;r=r.nextSibling}return 1}function ut(e,t){var n,r,s,o,u,a,f,l=L[d][e+" "];if(l)return t?0:l.slice(0);u=e,a=[],f=i.preFilter;while(u){if(!n||(r=F.exec(u)))r&&(u=u.slice(r[0].length)||u),a.push(s=[]);n=!1;if(r=I.exec(u))s.push(n=new m(r.shift())),u=u.slice(n.length),n.type=r[0].replace(j," ");for(o in i.filter)(r=J[o].exec(u))&&(!f[o]||(r=f[o](r)))&&(s.push(n=new m(r.shift())),u=u.slice(n.length),n.type=o,n.matches=r);if(!n)break}return t?u.length:u?nt.error(e):L(e,a).slice(0)}function at(e,t,r){var i=t.dir,s=r&&t.dir==="parentNode",o=w++;return t.first?function(t,n,r){while(t=t[i])if(s||t.nodeType===1)return e(t,n,r)}:function(t,r,u){if(!u){var a,f=b+" "+o+" ",l=f+n;while(t=t[i])if(s||t.nodeType===1){if((a=t[d])===l)return t.sizset;if(typeof a=="string"&&a.indexOf(f)===0){if(t.sizset)return t}else{t[d]=l;if(e(t,r,u))return t.sizset=!0,t;t.sizset=!1}}}else while(t=t[i])if(s||t.nodeType===1)if(e(t,r,u))return t}}function ft(e){return e.length>1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function lt(e,t,n,r,i){var s,o=[],u=0,a=e.length,f=t!=null;for(;u-1&&(s[f]=!(o[f]=c))}}else g=lt(g===o?g.splice(d,g.length):g),i?i(null,o,g,a):S.apply(o,g)})}function ht(e){var t,n,r,s=e.length,o=i.relative[e[0].type],u=o||i.relative[" "],a=o?1:0,f=at(function(e){return e===t},u,!0),l=at(function(e){return T.call(t,e)>-1},u,!0),h=[function(e,n,r){return!o&&(r||n!==c)||((t=n).nodeType?f(e,n,r):l(e,n,r))}];for(;a1&&ft(h),a>1&&e.slice(0,a-1).join("").replace(j,"$1"),n,a0,s=e.length>0,o=function(u,a,f,l,h){var p,d,v,m=[],y=0,w="0",x=u&&[],T=h!=null,N=c,C=u||s&&i.find.TAG("*",h&&a.parentNode||a),k=b+=N==null?1:Math.E;T&&(c=a!==g&&a,n=o.el);for(;(p=C[w])!=null;w++){if(s&&p){for(d=0;v=e[d];d++)if(v(p,a,f)){l.push(p);break}T&&(b=k,n=++o.el)}r&&((p=!v&&p)&&y--,u&&x.push(p))}y+=w;if(r&&w!==y){for(d=0;v=t[d];d++)v(x,m,a,f);if(u){if(y>0)while(w--)!x[w]&&!m[w]&&(m[w]=E.call(l));m=lt(m)}S.apply(l,m),T&&!u&&m.length>0&&y+t.length>1&&nt.uniqueSort(l)}return T&&(b=k,c=N),x};return o.el=0,r?N(o):o}function dt(e,t,n){var r=0,i=t.length;for(;r2&&(f=u[0]).type==="ID"&&t.nodeType===9&&!s&&i.relative[u[1].type]){t=i.find.ID(f.matches[0].replace($,""),t,s)[0];if(!t)return n;e=e.slice(u.shift().length)}for(o=J.POS.test(e)?-1:u.length-1;o>=0;o--){f=u[o];if(i.relative[l=f.type])break;if(c=i.find[l])if(r=c(f.matches[0].replace($,""),z.test(u[0].type)&&t.parentNode||t,s)){u.splice(o,1),e=r.length&&u.join("");if(!e)return S.apply(n,x.call(r,0)),n;break}}}return a(e,h)(r,t,s,n,z.test(e)),n}function mt(){}var n,r,i,s,o,u,a,f,l,c,h=!0,p="undefined",d=("sizcache"+Math.random()).replace(".",""),m=String,g=e.document,y=g.documentElement,b=0,w=0,E=[].pop,S=[].push,x=[].slice,T=[].indexOf||function(e){var t=0,n=this.length;for(;ti.cacheLength&&delete e[t.shift()],e[n+" "]=r},e)},k=C(),L=C(),A=C(),O="[\\x20\\t\\r\\n\\f]",M="(?:\\\\.|[-\\w]|[^\\x00-\\xa0])+",_=M.replace("w","w#"),D="([*^$|!~]?=)",P="\\["+O+"*("+M+")"+O+"*(?:"+D+O+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+_+")|)|)"+O+"*\\]",H=":("+M+")(?:\\((?:(['\"])((?:\\\\.|[^\\\\])*?)\\2|([^()[\\]]*|(?:(?:"+P+")|[^:]|\\\\.)*|.*))\\)|)",B=":(even|odd|eq|gt|lt|nth|first|last)(?:\\("+O+"*((?:-\\d)?\\d*)"+O+"*\\)|)(?=[^-]|$)",j=new RegExp("^"+O+"+|((?:^|[^\\\\])(?:\\\\.)*)"+O+"+$","g"),F=new RegExp("^"+O+"*,"+O+"*"),I=new RegExp("^"+O+"*([\\x20\\t\\r\\n\\f>+~])"+O+"*"),q=new RegExp(H),R=/^(?:#([\w\-]+)|(\w+)|\.([\w\-]+))$/,U=/^:not/,z=/[\x20\t\r\n\f]*[+~]/,W=/:not\($/,X=/h\d/i,V=/input|select|textarea|button/i,$=/\\(?!\\)/g,J={ID:new RegExp("^#("+M+")"),CLASS:new RegExp("^\\.("+M+")"),NAME:new RegExp("^\\[name=['\"]?("+M+")['\"]?\\]"),TAG:new RegExp("^("+M.replace("w","w*")+")"),ATTR:new RegExp("^"+P),PSEUDO:new RegExp("^"+H),POS:new RegExp(B,"i"),CHILD:new RegExp("^:(only|nth|first|last)-child(?:\\("+O+"*(even|odd|(([+-]|)(\\d*)n|)"+O+"*(?:([+-]|)"+O+"*(\\d+)|))"+O+"*\\)|)","i"),needsContext:new RegExp("^"+O+"*[>+~]|"+B,"i")},K=function(e){var t=g.createElement("div");try{return e(t)}catch(n){return!1}finally{t=null}},Q=K(function(e){return e.appendChild(g.createComment("")),!e.getElementsByTagName("*").length}),G=K(function(e){return e.innerHTML="",e.firstChild&&typeof e.firstChild.getAttribute!==p&&e.firstChild.getAttribute("href")==="#"}),Y=K(function(e){e.innerHTML="";var t=typeof e.lastChild.getAttribute("multiple");return t!=="boolean"&&t!=="string"}),Z=K(function(e){return e.innerHTML="",!e.getElementsByClassName||!e.getElementsByClassName("e").length?!1:(e.lastChild.className="e",e.getElementsByClassName("e").length===2)}),et=K(function(e){e.id=d+0,e.innerHTML="
    ",y.insertBefore(e,y.firstChild);var t=g.getElementsByName&&g.getElementsByName(d).length===2+g.getElementsByName(d+0).length;return r=!g.getElementById(d),y.removeChild(e),t});try{x.call(y.childNodes,0)[0].nodeType}catch(tt){x=function(e){var t,n=[];for(;t=this[e];e++)n.push(t);return n}}nt.matches=function(e,t){return nt(e,null,null,t)},nt.matchesSelector=function(e,t){return nt(t,null,null,[e]).length>0},s=nt.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(i===1||i===9||i===11){if(typeof e.textContent=="string")return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=s(e)}else if(i===3||i===4)return e.nodeValue}else for(;t=e[r];r++)n+=s(t);return n},o=nt.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return t?t.nodeName!=="HTML":!1},u=nt.contains=y.contains?function(e,t){var n=e.nodeType===9?e.documentElement:e,r=t&&t.parentNode;return e===r||!!(r&&r.nodeType===1&&n.contains&&n.contains(r))}:y.compareDocumentPosition?function(e,t){return t&&!!(e.compareDocumentPosition(t)&16)}:function(e,t){while(t=t.parentNode)if(t===e)return!0;return!1},nt.attr=function(e,t){var n,r=o(e);return r||(t=t.toLowerCase()),(n=i.attrHandle[t])?n(e):r||Y?e.getAttribute(t):(n=e.getAttributeNode(t),n?typeof e[t]=="boolean"?e[t]?t:null:n.specified?n.value:null:null)},i=nt.selectors={cacheLength:50,createPseudo:N,match:J,attrHandle:G?{}:{href:function(e){return e.getAttribute("href",2)},type:function(e){return e.getAttribute("type")}},find:{ID:r?function(e,t,n){if(typeof t.getElementById!==p&&!n){var r=t.getElementById(e);return r&&r.parentNode?[r]:[]}}:function(e,n,r){if(typeof n.getElementById!==p&&!r){var i=n.getElementById(e);return i?i.id===e||typeof i.getAttributeNode!==p&&i.getAttributeNode("id").value===e?[i]:t:[]}},TAG:Q?function(e,t){if(typeof t.getElementsByTagName!==p)return t.getElementsByTagName(e)}:function(e,t){var n=t.getElementsByTagName(e);if(e==="*"){var r,i=[],s=0;for(;r=n[s];s++)r.nodeType===1&&i.push(r);return i}return n},NAME:et&&function(e,t){if(typeof t.getElementsByName!==p)return t.getElementsByName(name)},CLASS:Z&&function(e,t,n){if(typeof t.getElementsByClassName!==p&&!n)return t.getElementsByClassName(e)}},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace($,""),e[3]=(e[4]||e[5]||"").replace($,""),e[2]==="~="&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),e[1]==="nth"?(e[2]||nt.error(e[0]),e[3]=+(e[3]?e[4]+(e[5]||1):2*(e[2]==="even"||e[2]==="odd")),e[4]=+(e[6]+e[7]||e[2]==="odd")):e[2]&&nt.error(e[0]),e},PSEUDO:function(e){var t,n;if(J.CHILD.test(e[0]))return null;if(e[3])e[2]=e[3];else if(t=e[4])q.test(t)&&(n=ut(t,!0))&&(n=t.indexOf(")",t.length-n)-t.length)&&(t=t.slice(0,n),e[0]=e[0].slice(0,n)),e[2]=t;return e.slice(0,3)}},filter:{ID:r?function(e){return e=e.replace($,""),function(t){return t.getAttribute("id")===e}}:function(e){return e=e.replace($,""),function(t){var n=typeof t.getAttributeNode!==p&&t.getAttributeNode("id");return n&&n.value===e}},TAG:function(e){return e==="*"?function(){return!0}:(e=e.replace($,"").toLowerCase(),function(t){return t.nodeName&&t.nodeName.toLowerCase()===e})},CLASS:function(e){var t=k[d][e+" "];return t||(t=new RegExp("(^|"+O+")"+e+"("+O+"|$)"))&&k(e,function(e){return t.test(e.className||typeof e.getAttribute!==p&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r,i){var s=nt.attr(r,e);return s==null?t==="!=":t?(s+="",t==="="?s===n:t==="!="?s!==n:t==="^="?n&&s.indexOf(n)===0:t==="*="?n&&s.indexOf(n)>-1:t==="$="?n&&s.substr(s.length-n.length)===n:t==="~="?(" "+s+" ").indexOf(n)>-1:t==="|="?s===n||s.substr(0,n.length+1)===n+"-":!1):!0}},CHILD:function(e,t,n,r){return e==="nth"?function(e){var t,i,s=e.parentNode;if(n===1&&r===0)return!0;if(s){i=0;for(t=s.firstChild;t;t=t.nextSibling)if(t.nodeType===1){i++;if(e===t)break}}return i-=r,i===n||i%n===0&&i/n>=0}:function(t){var n=t;switch(e){case"only":case"first":while(n=n.previousSibling)if(n.nodeType===1)return!1;if(e==="first")return!0;n=t;case"last":while(n=n.nextSibling)if(n.nodeType===1)return!1;return!0}}},PSEUDO:function(e,t){var n,r=i.pseudos[e]||i.setFilters[e.toLowerCase()]||nt.error("unsupported pseudo: "+e);return r[d]?r(t):r.length>1?(n=[e,e,"",t],i.setFilters.hasOwnProperty(e.toLowerCase())?N(function(e,n){var i,s=r(e,t),o=s.length;while(o--)i=T.call(e,s[o]),e[i]=!(n[i]=s[o])}):function(e){return r(e,0,n)}):r}},pseudos:{not:N(function(e){var t=[],n=[],r=a(e.replace(j,"$1"));return r[d]?N(function(e,t,n,i){var s,o=r(e,null,i,[]),u=e.length;while(u--)if(s=o[u])e[u]=!(t[u]=s)}):function(e,i,s){return t[0]=e,r(t,null,s,n),!n.pop()}}),has:N(function(e){return function(t){return nt(e,t).length>0}}),contains:N(function(e){return function(t){return(t.textContent||t.innerText||s(t)).indexOf(e)>-1}}),enabled:function(e){return e.disabled===!1},disabled:function(e){return e.disabled===!0},checked:function(e){var t=e.nodeName.toLowerCase();return t==="input"&&!!e.checked||t==="option"&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,e.selected===!0},parent:function(e){return!i.pseudos.empty(e)},empty:function(e){var t;e=e.firstChild;while(e){if(e.nodeName>"@"||(t=e.nodeType)===3||t===4)return!1;e=e.nextSibling}return!0},header:function(e){return X.test(e.nodeName)},text:function(e){var t,n;return e.nodeName.toLowerCase()==="input"&&(t=e.type)==="text"&&((n=e.getAttribute("type"))==null||n.toLowerCase()===t)},radio:rt("radio"),checkbox:rt("checkbox"),file:rt("file"),password:rt("password"),image:rt("image"),submit:it("submit"),reset:it("reset"),button:function(e){var t=e.nodeName.toLowerCase();return t==="input"&&e.type==="button"||t==="button"},input:function(e){return V.test(e.nodeName)},focus:function(e){var t=e.ownerDocument;return e===t.activeElement&&(!t.hasFocus||t.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},active:function(e){return e===e.ownerDocument.activeElement},first:st(function(){return[0]}),last:st(function(e,t){return[t-1]}),eq:st(function(e,t,n){return[n<0?n+t:n]}),even:st(function(e,t){for(var n=0;n=0;)e.push(r);return e}),gt:st(function(e,t,n){for(var r=n<0?n+t:n;++r",e.querySelectorAll("[selected]").length||i.push("\\["+O+"*(?:checked|disabled|ismap|multiple|readonly|selected|value)"),e.querySelectorAll(":checked").length||i.push(":checked")}),K(function(e){e.innerHTML="

    ",e.querySelectorAll("[test^='']").length&&i.push("[*^$]="+O+"*(?:\"\"|'')"),e.innerHTML="",e.querySelectorAll(":enabled").length||i.push(":enabled",":disabled")}),i=new RegExp(i.join("|")),vt=function(e,r,s,o,u){if(!o&&!u&&!i.test(e)){var a,f,l=!0,c=d,h=r,p=r.nodeType===9&&e;if(r.nodeType===1&&r.nodeName.toLowerCase()!=="object"){a=ut(e),(l=r.getAttribute("id"))?c=l.replace(n,"\\$&"):r.setAttribute("id",c),c="[id='"+c+"'] ",f=a.length;while(f--)a[f]=c+a[f].join("");h=z.test(e)&&r.parentNode||r,p=a.join(",")}if(p)try{return S.apply(s,x.call(h.querySelectorAll(p),0)),s}catch(v){}finally{l||r.removeAttribute("id")}}return t(e,r,s,o,u)},u&&(K(function(t){e=u.call(t,"div");try{u.call(t,"[test!='']:sizzle"),s.push("!=",H)}catch(n){}}),s=new RegExp(s.join("|")),nt.matchesSelector=function(t,n){n=n.replace(r,"='$1']");if(!o(t)&&!s.test(n)&&!i.test(n))try{var a=u.call(t,n);if(a||e||t.document&&t.document.nodeType!==11)return a}catch(f){}return nt(n,null,null,[t]).length>0})}(),i.pseudos.nth=i.pseudos.eq,i.filters=mt.prototype=i.pseudos,i.setFilters=new mt,nt.attr=v.attr,v.find=nt,v.expr=nt.selectors,v.expr[":"]=v.expr.pseudos,v.unique=nt.uniqueSort,v.text=nt.getText,v.isXMLDoc=nt.isXML,v.contains=nt.contains}(e);var nt=/Until$/,rt=/^(?:parents|prev(?:Until|All))/,it=/^.[^:#\[\.,]*$/,st=v.expr.match.needsContext,ot={children:!0,contents:!0,next:!0,prev:!0};v.fn.extend({find:function(e){var t,n,r,i,s,o,u=this;if(typeof e!="string")return v(e).filter(function(){for(t=0,n=u.length;t0)for(i=r;i=0:v.filter(e,this).length>0:this.filter(e).length>0)},closest:function(e,t){var n,r=0,i=this.length,s=[],o=st.test(e)||typeof e!="string"?v(e,t||this.context):0;for(;r-1:v.find.matchesSelector(n,e)){s.push(n);break}n=n.parentNode}}return s=s.length>1?v.unique(s):s,this.pushStack(s,"closest",e)},index:function(e){return e?typeof e=="string"?v.inArray(this[0],v(e)):v.inArray(e.jquery?e[0]:e,this):this[0]&&this[0].parentNode?this.prevAll().length:-1},add:function(e,t){var n=typeof e=="string"?v(e,t):v.makeArray(e&&e.nodeType?[e]:e),r=v.merge(this.get(),n);return this.pushStack(ut(n[0])||ut(r[0])?r:v.unique(r))},addBack:function(e){return this.add(e==null?this.prevObject:this.prevObject.filter(e))}}),v.fn.andSelf=v.fn.addBack,v.each({parent:function(e){var t=e.parentNode;return t&&t.nodeType!==11?t:null},parents:function(e){return v.dir(e,"parentNode")},parentsUntil:function(e,t,n){return v.dir(e,"parentNode",n)},next:function(e){return at(e,"nextSibling")},prev:function(e){return at(e,"previousSibling")},nextAll:function(e){return v.dir(e,"nextSibling")},prevAll:function(e){return v.dir(e,"previousSibling")},nextUntil:function(e,t,n){return v.dir(e,"nextSibling",n)},prevUntil:function(e,t,n){return v.dir(e,"previousSibling",n)},siblings:function(e){return v.sibling((e.parentNode||{}).firstChild,e)},children:function(e){return v.sibling(e.firstChild)},contents:function(e){return v.nodeName(e,"iframe")?e.contentDocument||e.contentWindow.document:v.merge([],e.childNodes)}},function(e,t){v.fn[e]=function(n,r){var i=v.map(this,t,n);return nt.test(e)||(r=n),r&&typeof r=="string"&&(i=v.filter(r,i)),i=this.length>1&&!ot[e]?v.unique(i):i,this.length>1&&rt.test(e)&&(i=i.reverse()),this.pushStack(i,e,l.call(arguments).join(","))}}),v.extend({filter:function(e,t,n){return n&&(e=":not("+e+")"),t.length===1?v.find.matchesSelector(t[0],e)?[t[0]]:[]:v.find.matches(e,t)},dir:function(e,n,r){var i=[],s=e[n];while(s&&s.nodeType!==9&&(r===t||s.nodeType!==1||!v(s).is(r)))s.nodeType===1&&i.push(s),s=s[n];return i},sibling:function(e,t){var n=[];for(;e;e=e.nextSibling)e.nodeType===1&&e!==t&&n.push(e);return n}});var ct="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",ht=/ jQuery\d+="(?:null|\d+)"/g,pt=/^\s+/,dt=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,vt=/<([\w:]+)/,mt=/]","i"),Et=/^(?:checkbox|radio)$/,St=/checked\s*(?:[^=]|=\s*.checked.)/i,xt=/\/(java|ecma)script/i,Tt=/^\s*\s*$/g,Nt={option:[1,""],legend:[1,"
    ","
    "],thead:[1,"","
    "],tr:[2,"","
    "],td:[3,"","
    "],col:[2,"","
    "],area:[1,"",""],_default:[0,"",""]},Ct=lt(i),kt=Ct.appendChild(i.createElement("div"));Nt.optgroup=Nt.option,Nt.tbody=Nt.tfoot=Nt.colgroup=Nt.caption=Nt.thead,Nt.th=Nt.td,v.support.htmlSerialize||(Nt._default=[1,"X
    ","
    "]),v.fn.extend({text:function(e){return v.access(this,function(e){return e===t?v.text(this):this.empty().append((this[0]&&this[0].ownerDocument||i).createTextNode(e))},null,e,arguments.length)},wrapAll:function(e){if(v.isFunction(e))return this.each(function(t){v(this).wrapAll(e.call(this,t))});if(this[0]){var t=v(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstChild&&e.firstChild.nodeType===1)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return v.isFunction(e)?this.each(function(t){v(this).wrapInner(e.call(this,t))}):this.each(function(){var t=v(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=v.isFunction(e);return this.each(function(n){v(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){v.nodeName(this,"body")||v(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(e){(this.nodeType===1||this.nodeType===11)&&this.appendChild(e)})},prepend:function(){return this.domManip(arguments,!0,function(e){(this.nodeType===1||this.nodeType===11)&&this.insertBefore(e,this.firstChild)})},before:function(){if(!ut(this[0]))return this.domManip(arguments,!1,function(e){this.parentNode.insertBefore(e,this)});if(arguments.length){var e=v.clean(arguments);return this.pushStack(v.merge(e,this),"before",this.selector)}},after:function(){if(!ut(this[0]))return this.domManip(arguments,!1,function(e){this.parentNode.insertBefore(e,this.nextSibling)});if(arguments.length){var e=v.clean(arguments);return this.pushStack(v.merge(this,e),"after",this.selector)}},remove:function(e,t){var n,r=0;for(;(n=this[r])!=null;r++)if(!e||v.filter(e,[n]).length)!t&&n.nodeType===1&&(v.cleanData(n.getElementsByTagName("*")),v.cleanData([n])),n.parentNode&&n.parentNode.removeChild(n);return this},empty:function(){var e,t=0;for(;(e=this[t])!=null;t++){e.nodeType===1&&v.cleanData(e.getElementsByTagName("*"));while(e.firstChild)e.removeChild(e.firstChild)}return this},clone:function(e,t){return e=e==null?!1:e,t=t==null?e:t,this.map(function(){return v.clone(this,e,t)})},html:function(e){return v.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return n.nodeType===1?n.innerHTML.replace(ht,""):t;if(typeof e=="string"&&!yt.test(e)&&(v.support.htmlSerialize||!wt.test(e))&&(v.support.leadingWhitespace||!pt.test(e))&&!Nt[(vt.exec(e)||["",""])[1].toLowerCase()]){e=e.replace(dt,"<$1>");try{for(;r1&&typeof f=="string"&&St.test(f))return this.each(function(){v(this).domManip(e,n,r)});if(v.isFunction(f))return this.each(function(i){var s=v(this);e[0]=f.call(this,i,n?s.html():t),s.domManip(e,n,r)});if(this[0]){i=v.buildFragment(e,this,l),o=i.fragment,s=o.firstChild,o.childNodes.length===1&&(o=s);if(s){n=n&&v.nodeName(s,"tr");for(u=i.cacheable||c-1;a0?this.clone(!0):this).get(),v(o[i])[t](r),s=s.concat(r);return this.pushStack(s,e,o.selector)}}),v.extend({clone:function(e,t,n){var r,i,s,o;v.support.html5Clone||v.isXMLDoc(e)||!wt.test("<"+e.nodeName+">")?o=e.cloneNode(!0):(kt.innerHTML=e.outerHTML,kt.removeChild(o=kt.firstChild));if((!v.support.noCloneEvent||!v.support.noCloneChecked)&&(e.nodeType===1||e.nodeType===11)&&!v.isXMLDoc(e)){Ot(e,o),r=Mt(e),i=Mt(o);for(s=0;r[s];++s)i[s]&&Ot(r[s],i[s])}if(t){At(e,o);if(n){r=Mt(e),i=Mt(o);for(s=0;r[s];++s)At(r[s],i[s])}}return r=i=null,o},clean:function(e,t,n,r){var s,o,u,a,f,l,c,h,p,d,m,g,y=t===i&&Ct,b=[];if(!t||typeof t.createDocumentFragment=="undefined")t=i;for(s=0;(u=e[s])!=null;s++){typeof u=="number"&&(u+="");if(!u)continue;if(typeof u=="string")if(!gt.test(u))u=t.createTextNode(u);else{y=y||lt(t),c=t.createElement("div"),y.appendChild(c),u=u.replace(dt,"<$1>"),a=(vt.exec(u)||["",""])[1].toLowerCase(),f=Nt[a]||Nt._default,l=f[0],c.innerHTML=f[1]+u+f[2];while(l--)c=c.lastChild;if(!v.support.tbody){h=mt.test(u),p=a==="table"&&!h?c.firstChild&&c.firstChild.childNodes:f[1]===""&&!h?c.childNodes:[];for(o=p.length-1;o>=0;--o)v.nodeName(p[o],"tbody")&&!p[o].childNodes.length&&p[o].parentNode.removeChild(p[o])}!v.support.leadingWhitespace&&pt.test(u)&&c.insertBefore(t.createTextNode(pt.exec(u)[0]),c.firstChild),u=c.childNodes,c.parentNode.removeChild(c)}u.nodeType?b.push(u):v.merge(b,u)}c&&(u=c=y=null);if(!v.support.appendChecked)for(s=0;(u=b[s])!=null;s++)v.nodeName(u,"input")?_t(u):typeof u.getElementsByTagName!="undefined"&&v.grep(u.getElementsByTagName("input"),_t);if(n){m=function(e){if(!e.type||xt.test(e.type))return r?r.push(e.parentNode?e.parentNode.removeChild(e):e):n.appendChild(e)};for(s=0;(u=b[s])!=null;s++)if(!v.nodeName(u,"script")||!m(u))n.appendChild(u),typeof u.getElementsByTagName!="undefined"&&(g=v.grep(v.merge([],u.getElementsByTagName("script")),m),b.splice.apply(b,[s+1,0].concat(g)),s+=g.length)}return b},cleanData:function(e,t){var n,r,i,s,o=0,u=v.expando,a=v.cache,f=v.support.deleteExpando,l=v.event.special;for(;(i=e[o])!=null;o++)if(t||v.acceptData(i)){r=i[u],n=r&&a[r];if(n){if(n.events)for(s in n.events)l[s]?v.event.remove(i,s):v.removeEvent(i,s,n.handle);a[r]&&(delete a[r],f?delete i[u]:i.removeAttribute?i.removeAttribute(u):i[u]=null,v.deletedIds.push(r))}}}}),function(){var e,t;v.uaMatch=function(e){e=e.toLowerCase();var t=/(chrome)[ \/]([\w.]+)/.exec(e)||/(webkit)[ \/]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||e.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[];return{browser:t[1]||"",version:t[2]||"0"}},e=v.uaMatch(o.userAgent),t={},e.browser&&(t[e.browser]=!0,t.version=e.version),t.chrome?t.webkit=!0:t.webkit&&(t.safari=!0),v.browser=t,v.sub=function(){function e(t,n){return new e.fn.init(t,n)}v.extend(!0,e,this),e.superclass=this,e.fn=e.prototype=this(),e.fn.constructor=e,e.sub=this.sub,e.fn.init=function(r,i){return i&&i instanceof v&&!(i instanceof e)&&(i=e(i)),v.fn.init.call(this,r,i,t)},e.fn.init.prototype=e.fn;var t=e(i);return e}}();var Dt,Pt,Ht,Bt=/alpha\([^)]*\)/i,jt=/opacity=([^)]*)/,Ft=/^(top|right|bottom|left)$/,It=/^(none|table(?!-c[ea]).+)/,qt=/^margin/,Rt=new RegExp("^("+m+")(.*)$","i"),Ut=new RegExp("^("+m+")(?!px)[a-z%]+$","i"),zt=new RegExp("^([-+])=("+m+")","i"),Wt={BODY:"block"},Xt={position:"absolute",visibility:"hidden",display:"block"},Vt={letterSpacing:0,fontWeight:400},$t=["Top","Right","Bottom","Left"],Jt=["Webkit","O","Moz","ms"],Kt=v.fn.toggle;v.fn.extend({css:function(e,n){return v.access(this,function(e,n,r){return r!==t?v.style(e,n,r):v.css(e,n)},e,n,arguments.length>1)},show:function(){return Yt(this,!0)},hide:function(){return Yt(this)},toggle:function(e,t){var n=typeof e=="boolean";return v.isFunction(e)&&v.isFunction(t)?Kt.apply(this,arguments):this.each(function(){(n?e:Gt(this))?v(this).show():v(this).hide()})}}),v.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Dt(e,"opacity");return n===""?"1":n}}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":v.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(!e||e.nodeType===3||e.nodeType===8||!e.style)return;var s,o,u,a=v.camelCase(n),f=e.style;n=v.cssProps[a]||(v.cssProps[a]=Qt(f,a)),u=v.cssHooks[n]||v.cssHooks[a];if(r===t)return u&&"get"in u&&(s=u.get(e,!1,i))!==t?s:f[n];o=typeof r,o==="string"&&(s=zt.exec(r))&&(r=(s[1]+1)*s[2]+parseFloat(v.css(e,n)),o="number");if(r==null||o==="number"&&isNaN(r))return;o==="number"&&!v.cssNumber[a]&&(r+="px");if(!u||!("set"in u)||(r=u.set(e,r,i))!==t)try{f[n]=r}catch(l){}},css:function(e,n,r,i){var s,o,u,a=v.camelCase(n);return n=v.cssProps[a]||(v.cssProps[a]=Qt(e.style,a)),u=v.cssHooks[n]||v.cssHooks[a],u&&"get"in u&&(s=u.get(e,!0,i)),s===t&&(s=Dt(e,n)),s==="normal"&&n in Vt&&(s=Vt[n]),r||i!==t?(o=parseFloat(s),r||v.isNumeric(o)?o||0:s):s},swap:function(e,t,n){var r,i,s={};for(i in t)s[i]=e.style[i],e.style[i]=t[i];r=n.call(e);for(i in t)e.style[i]=s[i];return r}}),e.getComputedStyle?Dt=function(t,n){var r,i,s,o,u=e.getComputedStyle(t,null),a=t.style;return u&&(r=u.getPropertyValue(n)||u[n],r===""&&!v.contains(t.ownerDocument,t)&&(r=v.style(t,n)),Ut.test(r)&&qt.test(n)&&(i=a.width,s=a.minWidth,o=a.maxWidth,a.minWidth=a.maxWidth=a.width=r,r=u.width,a.width=i,a.minWidth=s,a.maxWidth=o)),r}:i.documentElement.currentStyle&&(Dt=function(e,t){var n,r,i=e.currentStyle&&e.currentStyle[t],s=e.style;return i==null&&s&&s[t]&&(i=s[t]),Ut.test(i)&&!Ft.test(t)&&(n=s.left,r=e.runtimeStyle&&e.runtimeStyle.left,r&&(e.runtimeStyle.left=e.currentStyle.left),s.left=t==="fontSize"?"1em":i,i=s.pixelLeft+"px",s.left=n,r&&(e.runtimeStyle.left=r)),i===""?"auto":i}),v.each(["height","width"],function(e,t){v.cssHooks[t]={get:function(e,n,r){if(n)return e.offsetWidth===0&&It.test(Dt(e,"display"))?v.swap(e,Xt,function(){return tn(e,t,r)}):tn(e,t,r)},set:function(e,n,r){return Zt(e,n,r?en(e,t,r,v.support.boxSizing&&v.css(e,"boxSizing")==="border-box"):0)}}}),v.support.opacity||(v.cssHooks.opacity={get:function(e,t){return jt.test((t&&e.currentStyle?e.currentStyle.filter:e.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":t?"1":""},set:function(e,t){var n=e.style,r=e.currentStyle,i=v.isNumeric(t)?"alpha(opacity="+t*100+")":"",s=r&&r.filter||n.filter||"";n.zoom=1;if(t>=1&&v.trim(s.replace(Bt,""))===""&&n.removeAttribute){n.removeAttribute("filter");if(r&&!r.filter)return}n.filter=Bt.test(s)?s.replace(Bt,i):s+" "+i}}),v(function(){v.support.reliableMarginRight||(v.cssHooks.marginRight={get:function(e,t){return v.swap(e,{display:"inline-block"},function(){if(t)return Dt(e,"marginRight")})}}),!v.support.pixelPosition&&v.fn.position&&v.each(["top","left"],function(e,t){v.cssHooks[t]={get:function(e,n){if(n){var r=Dt(e,t);return Ut.test(r)?v(e).position()[t]+"px":r}}}})}),v.expr&&v.expr.filters&&(v.expr.filters.hidden=function(e){return e.offsetWidth===0&&e.offsetHeight===0||!v.support.reliableHiddenOffsets&&(e.style&&e.style.display||Dt(e,"display"))==="none"},v.expr.filters.visible=function(e){return!v.expr.filters.hidden(e)}),v.each({margin:"",padding:"",border:"Width"},function(e,t){v.cssHooks[e+t]={expand:function(n){var r,i=typeof n=="string"?n.split(" "):[n],s={};for(r=0;r<4;r++)s[e+$t[r]+t]=i[r]||i[r-2]||i[0];return s}},qt.test(e)||(v.cssHooks[e+t].set=Zt)});var rn=/%20/g,sn=/\[\]$/,on=/\r?\n/g,un=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,an=/^(?:select|textarea)/i;v.fn.extend({serialize:function(){return v.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?v.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||an.test(this.nodeName)||un.test(this.type))}).map(function(e,t){var n=v(this).val();return n==null?null:v.isArray(n)?v.map(n,function(e,n){return{name:t.name,value:e.replace(on,"\r\n")}}):{name:t.name,value:n.replace(on,"\r\n")}}).get()}}),v.param=function(e,n){var r,i=[],s=function(e,t){t=v.isFunction(t)?t():t==null?"":t,i[i.length]=encodeURIComponent(e)+"="+encodeURIComponent(t)};n===t&&(n=v.ajaxSettings&&v.ajaxSettings.traditional);if(v.isArray(e)||e.jquery&&!v.isPlainObject(e))v.each(e,function(){s(this.name,this.value)});else for(r in e)fn(r,e[r],n,s);return i.join("&").replace(rn,"+")};var ln,cn,hn=/#.*$/,pn=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,dn=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,vn=/^(?:GET|HEAD)$/,mn=/^\/\//,gn=/\?/,yn=/)<[^<]*)*<\/script>/gi,bn=/([?&])_=[^&]*/,wn=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,En=v.fn.load,Sn={},xn={},Tn=["*/"]+["*"];try{cn=s.href}catch(Nn){cn=i.createElement("a"),cn.href="",cn=cn.href}ln=wn.exec(cn.toLowerCase())||[],v.fn.load=function(e,n,r){if(typeof e!="string"&&En)return En.apply(this,arguments);if(!this.length)return this;var i,s,o,u=this,a=e.indexOf(" ");return a>=0&&(i=e.slice(a,e.length),e=e.slice(0,a)),v.isFunction(n)?(r=n,n=t):n&&typeof n=="object"&&(s="POST"),v.ajax({url:e,type:s,dataType:"html",data:n,complete:function(e,t){r&&u.each(r,o||[e.responseText,t,e])}}).done(function(e){o=arguments,u.html(i?v("
    ").append(e.replace(yn,"")).find(i):e)}),this},v.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(e,t){v.fn[t]=function(e){return this.on(t,e)}}),v.each(["get","post"],function(e,n){v[n]=function(e,r,i,s){return v.isFunction(r)&&(s=s||i,i=r,r=t),v.ajax({type:n,url:e,data:r,success:i,dataType:s})}}),v.extend({getScript:function(e,n){return v.get(e,t,n,"script")},getJSON:function(e,t,n){return v.get(e,t,n,"json")},ajaxSetup:function(e,t){return t?Ln(e,v.ajaxSettings):(t=e,e=v.ajaxSettings),Ln(e,t),e},ajaxSettings:{url:cn,isLocal:dn.test(ln[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded; charset=UTF-8",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":Tn},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":e.String,"text html":!0,"text json":v.parseJSON,"text xml":v.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:Cn(Sn),ajaxTransport:Cn(xn),ajax:function(e,n){function T(e,n,s,a){var l,y,b,w,S,T=n;if(E===2)return;E=2,u&&clearTimeout(u),o=t,i=a||"",x.readyState=e>0?4:0,s&&(w=An(c,x,s));if(e>=200&&e<300||e===304)c.ifModified&&(S=x.getResponseHeader("Last-Modified"),S&&(v.lastModified[r]=S),S=x.getResponseHeader("Etag"),S&&(v.etag[r]=S)),e===304?(T="notmodified",l=!0):(l=On(c,w),T=l.state,y=l.data,b=l.error,l=!b);else{b=T;if(!T||e)T="error",e<0&&(e=0)}x.status=e,x.statusText=(n||T)+"",l?d.resolveWith(h,[y,T,x]):d.rejectWith(h,[x,T,b]),x.statusCode(g),g=t,f&&p.trigger("ajax"+(l?"Success":"Error"),[x,c,l?y:b]),m.fireWith(h,[x,T]),f&&(p.trigger("ajaxComplete",[x,c]),--v.active||v.event.trigger("ajaxStop"))}typeof e=="object"&&(n=e,e=t),n=n||{};var r,i,s,o,u,a,f,l,c=v.ajaxSetup({},n),h=c.context||c,p=h!==c&&(h.nodeType||h instanceof v)?v(h):v.event,d=v.Deferred(),m=v.Callbacks("once memory"),g=c.statusCode||{},b={},w={},E=0,S="canceled",x={readyState:0,setRequestHeader:function(e,t){if(!E){var n=e.toLowerCase();e=w[n]=w[n]||e,b[e]=t}return this},getAllResponseHeaders:function(){return E===2?i:null},getResponseHeader:function(e){var n;if(E===2){if(!s){s={};while(n=pn.exec(i))s[n[1].toLowerCase()]=n[2]}n=s[e.toLowerCase()]}return n===t?null:n},overrideMimeType:function(e){return E||(c.mimeType=e),this},abort:function(e){return e=e||S,o&&o.abort(e),T(0,e),this}};d.promise(x),x.success=x.done,x.error=x.fail,x.complete=m.add,x.statusCode=function(e){if(e){var t;if(E<2)for(t in e)g[t]=[g[t],e[t]];else t=e[x.status],x.always(t)}return this},c.url=((e||c.url)+"").replace(hn,"").replace(mn,ln[1]+"//"),c.dataTypes=v.trim(c.dataType||"*").toLowerCase().split(y),c.crossDomain==null&&(a=wn.exec(c.url.toLowerCase()),c.crossDomain=!(!a||a[1]===ln[1]&&a[2]===ln[2]&&(a[3]||(a[1]==="http:"?80:443))==(ln[3]||(ln[1]==="http:"?80:443)))),c.data&&c.processData&&typeof c.data!="string"&&(c.data=v.param(c.data,c.traditional)),kn(Sn,c,n,x);if(E===2)return x;f=c.global,c.type=c.type.toUpperCase(),c.hasContent=!vn.test(c.type),f&&v.active++===0&&v.event.trigger("ajaxStart");if(!c.hasContent){c.data&&(c.url+=(gn.test(c.url)?"&":"?")+c.data,delete c.data),r=c.url;if(c.cache===!1){var N=v.now(),C=c.url.replace(bn,"$1_="+N);c.url=C+(C===c.url?(gn.test(c.url)?"&":"?")+"_="+N:"")}}(c.data&&c.hasContent&&c.contentType!==!1||n.contentType)&&x.setRequestHeader("Content-Type",c.contentType),c.ifModified&&(r=r||c.url,v.lastModified[r]&&x.setRequestHeader("If-Modified-Since",v.lastModified[r]),v.etag[r]&&x.setRequestHeader("If-None-Match",v.etag[r])),x.setRequestHeader("Accept",c.dataTypes[0]&&c.accepts[c.dataTypes[0]]?c.accepts[c.dataTypes[0]]+(c.dataTypes[0]!=="*"?", "+Tn+"; q=0.01":""):c.accepts["*"]);for(l in c.headers)x.setRequestHeader(l,c.headers[l]);if(!c.beforeSend||c.beforeSend.call(h,x,c)!==!1&&E!==2){S="abort";for(l in{success:1,error:1,complete:1})x[l](c[l]);o=kn(xn,c,n,x);if(!o)T(-1,"No Transport");else{x.readyState=1,f&&p.trigger("ajaxSend",[x,c]),c.async&&c.timeout>0&&(u=setTimeout(function(){x.abort("timeout")},c.timeout));try{E=1,o.send(b,T)}catch(k){if(!(E<2))throw k;T(-1,k)}}return x}return x.abort()},active:0,lastModified:{},etag:{}});var Mn=[],_n=/\?/,Dn=/(=)\?(?=&|$)|\?\?/,Pn=v.now();v.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Mn.pop()||v.expando+"_"+Pn++;return this[e]=!0,e}}),v.ajaxPrefilter("json jsonp",function(n,r,i){var s,o,u,a=n.data,f=n.url,l=n.jsonp!==!1,c=l&&Dn.test(f),h=l&&!c&&typeof a=="string"&&!(n.contentType||"").indexOf("application/x-www-form-urlencoded")&&Dn.test(a);if(n.dataTypes[0]==="jsonp"||c||h)return s=n.jsonpCallback=v.isFunction(n.jsonpCallback)?n.jsonpCallback():n.jsonpCallback,o=e[s],c?n.url=f.replace(Dn,"$1"+s):h?n.data=a.replace(Dn,"$1"+s):l&&(n.url+=(_n.test(f)?"&":"?")+n.jsonp+"="+s),n.converters["script json"]=function(){return u||v.error(s+" was not called"),u[0]},n.dataTypes[0]="json",e[s]=function(){u=arguments},i.always(function(){e[s]=o,n[s]&&(n.jsonpCallback=r.jsonpCallback,Mn.push(s)),u&&v.isFunction(o)&&o(u[0]),u=o=t}),"script"}),v.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(e){return v.globalEval(e),e}}}),v.ajaxPrefilter("script",function(e){e.cache===t&&(e.cache=!1),e.crossDomain&&(e.type="GET",e.global=!1)}),v.ajaxTransport("script",function(e){if(e.crossDomain){var n,r=i.head||i.getElementsByTagName("head")[0]||i.documentElement;return{send:function(s,o){n=i.createElement("script"),n.async="async",e.scriptCharset&&(n.charset=e.scriptCharset),n.src=e.url,n.onload=n.onreadystatechange=function(e,i){if(i||!n.readyState||/loaded|complete/.test(n.readyState))n.onload=n.onreadystatechange=null,r&&n.parentNode&&r.removeChild(n),n=t,i||o(200,"success")},r.insertBefore(n,r.firstChild)},abort:function(){n&&n.onload(0,1)}}}});var Hn,Bn=e.ActiveXObject?function(){for(var e in Hn)Hn[e](0,1)}:!1,jn=0;v.ajaxSettings.xhr=e.ActiveXObject?function(){return!this.isLocal&&Fn()||In()}:Fn,function(e){v.extend(v.support,{ajax:!!e,cors:!!e&&"withCredentials"in e})}(v.ajaxSettings.xhr()),v.support.ajax&&v.ajaxTransport(function(n){if(!n.crossDomain||v.support.cors){var r;return{send:function(i,s){var o,u,a=n.xhr();n.username?a.open(n.type,n.url,n.async,n.username,n.password):a.open(n.type,n.url,n.async);if(n.xhrFields)for(u in n.xhrFields)a[u]=n.xhrFields[u];n.mimeType&&a.overrideMimeType&&a.overrideMimeType(n.mimeType),!n.crossDomain&&!i["X-Requested-With"]&&(i["X-Requested-With"]="XMLHttpRequest");try{for(u in i)a.setRequestHeader(u,i[u])}catch(f){}a.send(n.hasContent&&n.data||null),r=function(e,i){var u,f,l,c,h;try{if(r&&(i||a.readyState===4)){r=t,o&&(a.onreadystatechange=v.noop,Bn&&delete Hn[o]);if(i)a.readyState!==4&&a.abort();else{u=a.status,l=a.getAllResponseHeaders(),c={},h=a.responseXML,h&&h.documentElement&&(c.xml=h);try{c.text=a.responseText}catch(p){}try{f=a.statusText}catch(p){f=""}!u&&n.isLocal&&!n.crossDomain?u=c.text?200:404:u===1223&&(u=204)}}}catch(d){i||s(-1,d)}c&&s(u,f,c,l)},n.async?a.readyState===4?setTimeout(r,0):(o=++jn,Bn&&(Hn||(Hn={},v(e).unload(Bn)),Hn[o]=r),a.onreadystatechange=r):r()},abort:function(){r&&r(0,1)}}}});var qn,Rn,Un=/^(?:toggle|show|hide)$/,zn=new RegExp("^(?:([-+])=|)("+m+")([a-z%]*)$","i"),Wn=/queueHooks$/,Xn=[Gn],Vn={"*":[function(e,t){var n,r,i=this.createTween(e,t),s=zn.exec(t),o=i.cur(),u=+o||0,a=1,f=20;if(s){n=+s[2],r=s[3]||(v.cssNumber[e]?"":"px");if(r!=="px"&&u){u=v.css(i.elem,e,!0)||n||1;do a=a||".5",u/=a,v.style(i.elem,e,u+r);while(a!==(a=i.cur()/o)&&a!==1&&--f)}i.unit=r,i.start=u,i.end=s[1]?u+(s[1]+1)*n:n}return i}]};v.Animation=v.extend(Kn,{tweener:function(e,t){v.isFunction(e)?(t=e,e=["*"]):e=e.split(" ");var n,r=0,i=e.length;for(;r-1,f={},l={},c,h;a?(l=i.position(),c=l.top,h=l.left):(c=parseFloat(o)||0,h=parseFloat(u)||0),v.isFunction(t)&&(t=t.call(e,n,s)),t.top!=null&&(f.top=t.top-s.top+c),t.left!=null&&(f.left=t.left-s.left+h),"using"in t?t.using.call(e,f):i.css(f)}},v.fn.extend({position:function(){if(!this[0])return;var e=this[0],t=this.offsetParent(),n=this.offset(),r=er.test(t[0].nodeName)?{top:0,left:0}:t.offset();return n.top-=parseFloat(v.css(e,"marginTop"))||0,n.left-=parseFloat(v.css(e,"marginLeft"))||0,r.top+=parseFloat(v.css(t[0],"borderTopWidth"))||0,r.left+=parseFloat(v.css(t[0],"borderLeftWidth"))||0,{top:n.top-r.top,left:n.left-r.left}},offsetParent:function(){return this.map(function(){var e=this.offsetParent||i.body;while(e&&!er.test(e.nodeName)&&v.css(e,"position")==="static")e=e.offsetParent;return e||i.body})}}),v.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,n){var r=/Y/.test(n);v.fn[e]=function(i){return v.access(this,function(e,i,s){var o=tr(e);if(s===t)return o?n in o?o[n]:o.document.documentElement[i]:e[i];o?o.scrollTo(r?v(o).scrollLeft():s,r?s:v(o).scrollTop()):e[i]=s},e,i,arguments.length,null)}}),v.each({Height:"height",Width:"width"},function(e,n){v.each({padding:"inner"+e,content:n,"":"outer"+e},function(r,i){v.fn[i]=function(i,s){var o=arguments.length&&(r||typeof i!="boolean"),u=r||(i===!0||s===!0?"margin":"border");return v.access(this,function(n,r,i){var s;return v.isWindow(n)?n.document.documentElement["client"+e]:n.nodeType===9?(s=n.documentElement,Math.max(n.body["scroll"+e],s["scroll"+e],n.body["offset"+e],s["offset"+e],s["client"+e])):i===t?v.css(n,r,i,u):v.style(n,r,i,u)},n,o?i:t,o,null)}})}),e.jQuery=e.$=v,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return v})})(window); \ No newline at end of file diff --git a/assets/js/jquery.min.js b/assets/js/jquery.min.js new file mode 100644 index 000000000000..bc3fbc81b261 --- /dev/null +++ b/assets/js/jquery.min.js @@ -0,0 +1,2 @@ +/*! jQuery v1.8.2 jquery.com | jquery.org/license */ +(function(a,b){function G(a){var b=F[a]={};return p.each(a.split(s),function(a,c){b[c]=!0}),b}function J(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(I,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:+d+""===d?+d:H.test(d)?p.parseJSON(d):d}catch(f){}p.data(a,c,d)}else d=b}return d}function K(a){var b;for(b in a){if(b==="data"&&p.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function ba(){return!1}function bb(){return!0}function bh(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function bi(a,b){do a=a[b];while(a&&a.nodeType!==1);return a}function bj(a,b,c){b=b||0;if(p.isFunction(b))return p.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return p.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=p.grep(a,function(a){return a.nodeType===1});if(be.test(b))return p.filter(b,d,!c);b=p.filter(b,d)}return p.grep(a,function(a,d){return p.inArray(a,b)>=0===c})}function bk(a){var b=bl.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function bC(a,b){return a.getElementsByTagName(b)[0]||a.appendChild(a.ownerDocument.createElement(b))}function bD(a,b){if(b.nodeType!==1||!p.hasData(a))return;var c,d,e,f=p._data(a),g=p._data(b,f),h=f.events;if(h){delete g.handle,g.events={};for(c in h)for(d=0,e=h[c].length;d").appendTo(e.body),c=b.css("display");b.remove();if(c==="none"||c===""){bI=e.body.appendChild(bI||p.extend(e.createElement("iframe"),{frameBorder:0,width:0,height:0}));if(!bJ||!bI.createElement)bJ=(bI.contentWindow||bI.contentDocument).document,bJ.write(""),bJ.close();b=bJ.body.appendChild(bJ.createElement(a)),c=bH(b,"display"),e.body.removeChild(bI)}return bS[a]=c,c}function ci(a,b,c,d){var e;if(p.isArray(b))p.each(b,function(b,e){c||ce.test(a)?d(a,e):ci(a+"["+(typeof e=="object"?b:"")+"]",e,c,d)});else if(!c&&p.type(b)==="object")for(e in b)ci(a+"["+e+"]",b[e],c,d);else d(a,b)}function cz(a){return function(b,c){typeof b!="string"&&(c=b,b="*");var d,e,f,g=b.toLowerCase().split(s),h=0,i=g.length;if(p.isFunction(c))for(;h)[^>]*$|#([\w\-]*)$)/,v=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,w=/^[\],:{}\s]*$/,x=/(?:^|:|,)(?:\s*\[)+/g,y=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,z=/"[^"\\\r\n]*"|true|false|null|-?(?:\d\d*\.|)\d+(?:[eE][\-+]?\d+|)/g,A=/^-ms-/,B=/-([\da-z])/gi,C=function(a,b){return(b+"").toUpperCase()},D=function(){e.addEventListener?(e.removeEventListener("DOMContentLoaded",D,!1),p.ready()):e.readyState==="complete"&&(e.detachEvent("onreadystatechange",D),p.ready())},E={};p.fn=p.prototype={constructor:p,init:function(a,c,d){var f,g,h,i;if(!a)return this;if(a.nodeType)return this.context=this[0]=a,this.length=1,this;if(typeof a=="string"){a.charAt(0)==="<"&&a.charAt(a.length-1)===">"&&a.length>=3?f=[null,a,null]:f=u.exec(a);if(f&&(f[1]||!c)){if(f[1])return c=c instanceof p?c[0]:c,i=c&&c.nodeType?c.ownerDocument||c:e,a=p.parseHTML(f[1],i,!0),v.test(f[1])&&p.isPlainObject(c)&&this.attr.call(a,c,!0),p.merge(this,a);g=e.getElementById(f[2]);if(g&&g.parentNode){if(g.id!==f[2])return d.find(a);this.length=1,this[0]=g}return this.context=e,this.selector=a,this}return!c||c.jquery?(c||d).find(a):this.constructor(c).find(a)}return p.isFunction(a)?d.ready(a):(a.selector!==b&&(this.selector=a.selector,this.context=a.context),p.makeArray(a,this))},selector:"",jquery:"1.8.2",length:0,size:function(){return this.length},toArray:function(){return k.call(this)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=p.merge(this.constructor(),a);return d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")"),d},each:function(a,b){return p.each(this,a,b)},ready:function(a){return p.ready.promise().done(a),this},eq:function(a){return a=+a,a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(k.apply(this,arguments),"slice",k.call(arguments).join(","))},map:function(a){return this.pushStack(p.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:j,sort:[].sort,splice:[].splice},p.fn.init.prototype=p.fn,p.extend=p.fn.extend=function(){var a,c,d,e,f,g,h=arguments[0]||{},i=1,j=arguments.length,k=!1;typeof h=="boolean"&&(k=h,h=arguments[1]||{},i=2),typeof h!="object"&&!p.isFunction(h)&&(h={}),j===i&&(h=this,--i);for(;i0)return;d.resolveWith(e,[p]),p.fn.trigger&&p(e).trigger("ready").off("ready")},isFunction:function(a){return p.type(a)==="function"},isArray:Array.isArray||function(a){return p.type(a)==="array"},isWindow:function(a){return a!=null&&a==a.window},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):E[m.call(a)]||"object"},isPlainObject:function(a){if(!a||p.type(a)!=="object"||a.nodeType||p.isWindow(a))return!1;try{if(a.constructor&&!n.call(a,"constructor")&&!n.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||n.call(a,d)},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},error:function(a){throw new Error(a)},parseHTML:function(a,b,c){var d;return!a||typeof a!="string"?null:(typeof b=="boolean"&&(c=b,b=0),b=b||e,(d=v.exec(a))?[b.createElement(d[1])]:(d=p.buildFragment([a],b,c?null:[]),p.merge([],(d.cacheable?p.clone(d.fragment):d.fragment).childNodes)))},parseJSON:function(b){if(!b||typeof b!="string")return null;b=p.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(w.test(b.replace(y,"@").replace(z,"]").replace(x,"")))return(new Function("return "+b))();p.error("Invalid JSON: "+b)},parseXML:function(c){var d,e;if(!c||typeof c!="string")return null;try{a.DOMParser?(e=new DOMParser,d=e.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(f){d=b}return(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&p.error("Invalid XML: "+c),d},noop:function(){},globalEval:function(b){b&&r.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(A,"ms-").replace(B,C)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toLowerCase()===b.toLowerCase()},each:function(a,c,d){var e,f=0,g=a.length,h=g===b||p.isFunction(a);if(d){if(h){for(e in a)if(c.apply(a[e],d)===!1)break}else for(;f0&&a[0]&&a[i-1]||i===0||p.isArray(a));if(j)for(;h-1)i.splice(c,1),e&&(c<=g&&g--,c<=h&&h--)}),this},has:function(a){return p.inArray(a,i)>-1},empty:function(){return i=[],this},disable:function(){return i=j=c=b,this},disabled:function(){return!i},lock:function(){return j=b,c||l.disable(),this},locked:function(){return!j},fireWith:function(a,b){return b=b||[],b=[a,b.slice?b.slice():b],i&&(!d||j)&&(e?j.push(b):k(b)),this},fire:function(){return l.fireWith(this,arguments),this},fired:function(){return!!d}};return l},p.extend({Deferred:function(a){var b=[["resolve","done",p.Callbacks("once memory"),"resolved"],["reject","fail",p.Callbacks("once memory"),"rejected"],["notify","progress",p.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return p.Deferred(function(c){p.each(b,function(b,d){var f=d[0],g=a[b];e[d[1]](p.isFunction(g)?function(){var a=g.apply(this,arguments);a&&p.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f+"With"](this===e?c:this,[a])}:c[f])}),a=null}).promise()},promise:function(a){return a!=null?p.extend(a,d):d}},e={};return d.pipe=d.then,p.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[a^1][2].disable,b[2][2].lock),e[f[0]]=g.fire,e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=k.call(arguments),d=c.length,e=d!==1||a&&p.isFunction(a.promise)?d:0,f=e===1?a:p.Deferred(),g=function(a,b,c){return function(d){b[a]=this,c[a]=arguments.length>1?k.call(arguments):d,c===h?f.notifyWith(b,c):--e||f.resolveWith(b,c)}},h,i,j;if(d>1){h=new Array(d),i=new Array(d),j=new Array(d);for(;b
    a",c=n.getElementsByTagName("*"),d=n.getElementsByTagName("a")[0],d.style.cssText="top:1px;float:left;opacity:.5";if(!c||!c.length)return{};f=e.createElement("select"),g=f.appendChild(e.createElement("option")),h=n.getElementsByTagName("input")[0],b={leadingWhitespace:n.firstChild.nodeType===3,tbody:!n.getElementsByTagName("tbody").length,htmlSerialize:!!n.getElementsByTagName("link").length,style:/top/.test(d.getAttribute("style")),hrefNormalized:d.getAttribute("href")==="/a",opacity:/^0.5/.test(d.style.opacity),cssFloat:!!d.style.cssFloat,checkOn:h.value==="on",optSelected:g.selected,getSetAttribute:n.className!=="t",enctype:!!e.createElement("form").enctype,html5Clone:e.createElement("nav").cloneNode(!0).outerHTML!=="<:nav>",boxModel:e.compatMode==="CSS1Compat",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0,boxSizingReliable:!0,pixelPosition:!1},h.checked=!0,b.noCloneChecked=h.cloneNode(!0).checked,f.disabled=!0,b.optDisabled=!g.disabled;try{delete n.test}catch(o){b.deleteExpando=!1}!n.addEventListener&&n.attachEvent&&n.fireEvent&&(n.attachEvent("onclick",m=function(){b.noCloneEvent=!1}),n.cloneNode(!0).fireEvent("onclick"),n.detachEvent("onclick",m)),h=e.createElement("input"),h.value="t",h.setAttribute("type","radio"),b.radioValue=h.value==="t",h.setAttribute("checked","checked"),h.setAttribute("name","t"),n.appendChild(h),i=e.createDocumentFragment(),i.appendChild(n.lastChild),b.checkClone=i.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=h.checked,i.removeChild(h),i.appendChild(n);if(n.attachEvent)for(k in{submit:!0,change:!0,focusin:!0})j="on"+k,l=j in n,l||(n.setAttribute(j,"return;"),l=typeof n[j]=="function"),b[k+"Bubbles"]=l;return p(function(){var c,d,f,g,h="padding:0;margin:0;border:0;display:block;overflow:hidden;",i=e.getElementsByTagName("body")[0];if(!i)return;c=e.createElement("div"),c.style.cssText="visibility:hidden;border:0;width:0;height:0;position:static;top:0;margin-top:1px",i.insertBefore(c,i.firstChild),d=e.createElement("div"),c.appendChild(d),d.innerHTML="
    t
    ",f=d.getElementsByTagName("td"),f[0].style.cssText="padding:0;margin:0;border:0;display:none",l=f[0].offsetHeight===0,f[0].style.display="",f[1].style.display="none",b.reliableHiddenOffsets=l&&f[0].offsetHeight===0,d.innerHTML="",d.style.cssText="box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;",b.boxSizing=d.offsetWidth===4,b.doesNotIncludeMarginInBodyOffset=i.offsetTop!==1,a.getComputedStyle&&(b.pixelPosition=(a.getComputedStyle(d,null)||{}).top!=="1%",b.boxSizingReliable=(a.getComputedStyle(d,null)||{width:"4px"}).width==="4px",g=e.createElement("div"),g.style.cssText=d.style.cssText=h,g.style.marginRight=g.style.width="0",d.style.width="1px",d.appendChild(g),b.reliableMarginRight=!parseFloat((a.getComputedStyle(g,null)||{}).marginRight)),typeof d.style.zoom!="undefined"&&(d.innerHTML="",d.style.cssText=h+"width:1px;padding:1px;display:inline;zoom:1",b.inlineBlockNeedsLayout=d.offsetWidth===3,d.style.display="block",d.style.overflow="visible",d.innerHTML="
    ",d.firstChild.style.width="5px",b.shrinkWrapBlocks=d.offsetWidth!==3,c.style.zoom=1),i.removeChild(c),c=d=f=g=null}),i.removeChild(n),c=d=f=g=h=i=n=null,b}();var H=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,I=/([A-Z])/g;p.extend({cache:{},deletedIds:[],uuid:0,expando:"jQuery"+(p.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){return a=a.nodeType?p.cache[a[p.expando]]:a[p.expando],!!a&&!K(a)},data:function(a,c,d,e){if(!p.acceptData(a))return;var f,g,h=p.expando,i=typeof c=="string",j=a.nodeType,k=j?p.cache:a,l=j?a[h]:a[h]&&h;if((!l||!k[l]||!e&&!k[l].data)&&i&&d===b)return;l||(j?a[h]=l=p.deletedIds.pop()||p.guid++:l=h),k[l]||(k[l]={},j||(k[l].toJSON=p.noop));if(typeof c=="object"||typeof c=="function")e?k[l]=p.extend(k[l],c):k[l].data=p.extend(k[l].data,c);return f=k[l],e||(f.data||(f.data={}),f=f.data),d!==b&&(f[p.camelCase(c)]=d),i?(g=f[c],g==null&&(g=f[p.camelCase(c)])):g=f,g},removeData:function(a,b,c){if(!p.acceptData(a))return;var d,e,f,g=a.nodeType,h=g?p.cache:a,i=g?a[p.expando]:p.expando;if(!h[i])return;if(b){d=c?h[i]:h[i].data;if(d){p.isArray(b)||(b in d?b=[b]:(b=p.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,f=b.length;e1,null,!1))},removeData:function(a){return this.each(function(){p.removeData(this,a)})}}),p.extend({queue:function(a,b,c){var d;if(a)return b=(b||"fx")+"queue",d=p._data(a,b),c&&(!d||p.isArray(c)?d=p._data(a,b,p.makeArray(c)):d.push(c)),d||[]},dequeue:function(a,b){b=b||"fx";var c=p.queue(a,b),d=c.length,e=c.shift(),f=p._queueHooks(a,b),g=function(){p.dequeue(a,b)};e==="inprogress"&&(e=c.shift(),d--),e&&(b==="fx"&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return p._data(a,c)||p._data(a,c,{empty:p.Callbacks("once memory").add(function(){p.removeData(a,b+"queue",!0),p.removeData(a,c,!0)})})}}),p.fn.extend({queue:function(a,c){var d=2;return typeof a!="string"&&(c=a,a="fx",d--),arguments.length1)},removeAttr:function(a){return this.each(function(){p.removeAttr(this,a)})},prop:function(a,b){return p.access(this,p.prop,a,b,arguments.length>1)},removeProp:function(a){return a=p.propFix[a]||a,this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,f,g,h;if(p.isFunction(a))return this.each(function(b){p(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(s);for(c=0,d=this.length;c=0)d=d.replace(" "+c[f]+" "," ");e.className=a?p.trim(d):""}}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";return p.isFunction(a)?this.each(function(c){p(this).toggleClass(a.call(this,c,this.className,b),b)}):this.each(function(){if(c==="string"){var e,f=0,g=p(this),h=b,i=a.split(s);while(e=i[f++])h=d?h:!g.hasClass(e),g[h?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&p._data(this,"__className__",this.className),this.className=this.className||a===!1?"":p._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c=0)return!0;return!1},val:function(a){var c,d,e,f=this[0];if(!arguments.length){if(f)return c=p.valHooks[f.type]||p.valHooks[f.nodeName.toLowerCase()],c&&"get"in c&&(d=c.get(f,"value"))!==b?d:(d=f.value,typeof d=="string"?d.replace(P,""):d==null?"":d);return}return e=p.isFunction(a),this.each(function(d){var f,g=p(this);if(this.nodeType!==1)return;e?f=a.call(this,d,g.val()):f=a,f==null?f="":typeof f=="number"?f+="":p.isArray(f)&&(f=p.map(f,function(a){return a==null?"":a+""})),c=p.valHooks[this.type]||p.valHooks[this.nodeName.toLowerCase()];if(!c||!("set"in c)||c.set(this,f,"value")===b)this.value=f})}}),p.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,f=a.selectedIndex,g=[],h=a.options,i=a.type==="select-one";if(f<0)return null;c=i?f:0,d=i?f+1:h.length;for(;c=0}),c.length||(a.selectedIndex=-1),c}}},attrFn:{},attr:function(a,c,d,e){var f,g,h,i=a.nodeType;if(!a||i===3||i===8||i===2)return;if(e&&p.isFunction(p.fn[c]))return p(a)[c](d);if(typeof a.getAttribute=="undefined")return p.prop(a,c,d);h=i!==1||!p.isXMLDoc(a),h&&(c=c.toLowerCase(),g=p.attrHooks[c]||(T.test(c)?M:L));if(d!==b){if(d===null){p.removeAttr(a,c);return}return g&&"set"in g&&h&&(f=g.set(a,d,c))!==b?f:(a.setAttribute(c,d+""),d)}return g&&"get"in g&&h&&(f=g.get(a,c))!==null?f:(f=a.getAttribute(c),f===null?b:f)},removeAttr:function(a,b){var c,d,e,f,g=0;if(b&&a.nodeType===1){d=b.split(s);for(;g=0}})});var V=/^(?:textarea|input|select)$/i,W=/^([^\.]*|)(?:\.(.+)|)$/,X=/(?:^|\s)hover(\.\S+|)\b/,Y=/^key/,Z=/^(?:mouse|contextmenu)|click/,$=/^(?:focusinfocus|focusoutblur)$/,_=function(a){return p.event.special.hover?a:a.replace(X,"mouseenter$1 mouseleave$1")};p.event={add:function(a,c,d,e,f){var g,h,i,j,k,l,m,n,o,q,r;if(a.nodeType===3||a.nodeType===8||!c||!d||!(g=p._data(a)))return;d.handler&&(o=d,d=o.handler,f=o.selector),d.guid||(d.guid=p.guid++),i=g.events,i||(g.events=i={}),h=g.handle,h||(g.handle=h=function(a){return typeof p!="undefined"&&(!a||p.event.triggered!==a.type)?p.event.dispatch.apply(h.elem,arguments):b},h.elem=a),c=p.trim(_(c)).split(" ");for(j=0;j=0&&(s=s.slice(0,-1),i=!0),s.indexOf(".")>=0&&(t=s.split("."),s=t.shift(),t.sort());if((!f||p.event.customEvent[s])&&!p.event.global[s])return;c=typeof c=="object"?c[p.expando]?c:new p.Event(s,c):new p.Event(s),c.type=s,c.isTrigger=!0,c.exclusive=i,c.namespace=t.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+t.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,m=s.indexOf(":")<0?"on"+s:"";if(!f){h=p.cache;for(j in h)h[j].events&&h[j].events[s]&&p.event.trigger(c,d,h[j].handle.elem,!0);return}c.result=b,c.target||(c.target=f),d=d!=null?p.makeArray(d):[],d.unshift(c),n=p.event.special[s]||{};if(n.trigger&&n.trigger.apply(f,d)===!1)return;q=[[f,n.bindType||s]];if(!g&&!n.noBubble&&!p.isWindow(f)){r=n.delegateType||s,k=$.test(r+s)?f:f.parentNode;for(l=f;k;k=k.parentNode)q.push([k,r]),l=k;l===(f.ownerDocument||e)&&q.push([l.defaultView||l.parentWindow||a,r])}for(j=0;j=0:p.find(m,this,null,[f]).length),h[m]&&j.push(l);j.length&&u.push({elem:f,matches:j})}o.length>q&&u.push({elem:this,matches:o.slice(q)});for(d=0;d0?this.on(b,null,a,c):this.trigger(b)},Y.test(b)&&(p.event.fixHooks[b]=p.event.keyHooks),Z.test(b)&&(p.event.fixHooks[b]=p.event.mouseHooks)}),function(a,b){function bc(a,b,c,d){c=c||[],b=b||r;var e,f,i,j,k=b.nodeType;if(!a||typeof a!="string")return c;if(k!==1&&k!==9)return[];i=g(b);if(!i&&!d)if(e=P.exec(a))if(j=e[1]){if(k===9){f=b.getElementById(j);if(!f||!f.parentNode)return c;if(f.id===j)return c.push(f),c}else if(b.ownerDocument&&(f=b.ownerDocument.getElementById(j))&&h(b,f)&&f.id===j)return c.push(f),c}else{if(e[2])return w.apply(c,x.call(b.getElementsByTagName(a),0)),c;if((j=e[3])&&_&&b.getElementsByClassName)return w.apply(c,x.call(b.getElementsByClassName(j),0)),c}return bp(a.replace(L,"$1"),b,c,d,i)}function bd(a){return function(b){var c=b.nodeName.toLowerCase();return c==="input"&&b.type===a}}function be(a){return function(b){var c=b.nodeName.toLowerCase();return(c==="input"||c==="button")&&b.type===a}}function bf(a){return z(function(b){return b=+b,z(function(c,d){var e,f=a([],c.length,b),g=f.length;while(g--)c[e=f[g]]&&(c[e]=!(d[e]=c[e]))})})}function bg(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}function bh(a,b){var c,d,f,g,h,i,j,k=C[o][a];if(k)return b?0:k.slice(0);h=a,i=[],j=e.preFilter;while(h){if(!c||(d=M.exec(h)))d&&(h=h.slice(d[0].length)),i.push(f=[]);c=!1;if(d=N.exec(h))f.push(c=new q(d.shift())),h=h.slice(c.length),c.type=d[0].replace(L," ");for(g in e.filter)(d=W[g].exec(h))&&(!j[g]||(d=j[g](d,r,!0)))&&(f.push(c=new q(d.shift())),h=h.slice(c.length),c.type=g,c.matches=d);if(!c)break}return b?h.length:h?bc.error(a):C(a,i).slice(0)}function bi(a,b,d){var e=b.dir,f=d&&b.dir==="parentNode",g=u++;return b.first?function(b,c,d){while(b=b[e])if(f||b.nodeType===1)return a(b,c,d)}:function(b,d,h){if(!h){var i,j=t+" "+g+" ",k=j+c;while(b=b[e])if(f||b.nodeType===1){if((i=b[o])===k)return b.sizset;if(typeof i=="string"&&i.indexOf(j)===0){if(b.sizset)return b}else{b[o]=k;if(a(b,d,h))return b.sizset=!0,b;b.sizset=!1}}}else while(b=b[e])if(f||b.nodeType===1)if(a(b,d,h))return b}}function bj(a){return a.length>1?function(b,c,d){var e=a.length;while(e--)if(!a[e](b,c,d))return!1;return!0}:a[0]}function bk(a,b,c,d,e){var f,g=[],h=0,i=a.length,j=b!=null;for(;h-1},h,!0),m=[function(a,c,d){return!g&&(d||c!==l)||((b=c).nodeType?j(a,c,d):k(a,c,d))}];for(;i1&&bj(m),i>1&&a.slice(0,i-1).join("").replace(L,"$1"),c,i0,f=a.length>0,g=function(h,i,j,k,m){var n,o,p,q=[],s=0,u="0",x=h&&[],y=m!=null,z=l,A=h||f&&e.find.TAG("*",m&&i.parentNode||i),B=t+=z==null?1:Math.E;y&&(l=i!==r&&i,c=g.el);for(;(n=A[u])!=null;u++){if(f&&n){for(o=0;p=a[o];o++)if(p(n,i,j)){k.push(n);break}y&&(t=B,c=++g.el)}d&&((n=!p&&n)&&s--,h&&x.push(n))}s+=u;if(d&&u!==s){for(o=0;p=b[o];o++)p(x,q,i,j);if(h){if(s>0)while(u--)!x[u]&&!q[u]&&(q[u]=v.call(k));q=bk(q)}w.apply(k,q),y&&!h&&q.length>0&&s+b.length>1&&bc.uniqueSort(k)}return y&&(t=B,l=z),x};return g.el=0,d?z(g):g}function bo(a,b,c,d){var e=0,f=b.length;for(;e2&&(j=h[0]).type==="ID"&&b.nodeType===9&&!f&&e.relative[h[1].type]){b=e.find.ID(j.matches[0].replace(V,""),b,f)[0];if(!b)return c;a=a.slice(h.shift().length)}for(g=W.POS.test(a)?-1:h.length-1;g>=0;g--){j=h[g];if(e.relative[k=j.type])break;if(l=e.find[k])if(d=l(j.matches[0].replace(V,""),R.test(h[0].type)&&b.parentNode||b,f)){h.splice(g,1),a=d.length&&h.join("");if(!a)return w.apply(c,x.call(d,0)),c;break}}}return i(a,m)(d,b,f,c,R.test(a)),c}function bq(){}var c,d,e,f,g,h,i,j,k,l,m=!0,n="undefined",o=("sizcache"+Math.random()).replace(".",""),q=String,r=a.document,s=r.documentElement,t=0,u=0,v=[].pop,w=[].push,x=[].slice,y=[].indexOf||function(a){var b=0,c=this.length;for(;be.cacheLength&&delete a[b.shift()],a[c]=d},a)},B=A(),C=A(),D=A(),E="[\\x20\\t\\r\\n\\f]",F="(?:\\\\.|[-\\w]|[^\\x00-\\xa0])+",G=F.replace("w","w#"),H="([*^$|!~]?=)",I="\\["+E+"*("+F+")"+E+"*(?:"+H+E+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+G+")|)|)"+E+"*\\]",J=":("+F+")(?:\\((?:(['\"])((?:\\\\.|[^\\\\])*?)\\2|([^()[\\]]*|(?:(?:"+I+")|[^:]|\\\\.)*|.*))\\)|)",K=":(even|odd|eq|gt|lt|nth|first|last)(?:\\("+E+"*((?:-\\d)?\\d*)"+E+"*\\)|)(?=[^-]|$)",L=new RegExp("^"+E+"+|((?:^|[^\\\\])(?:\\\\.)*)"+E+"+$","g"),M=new RegExp("^"+E+"*,"+E+"*"),N=new RegExp("^"+E+"*([\\x20\\t\\r\\n\\f>+~])"+E+"*"),O=new RegExp(J),P=/^(?:#([\w\-]+)|(\w+)|\.([\w\-]+))$/,Q=/^:not/,R=/[\x20\t\r\n\f]*[+~]/,S=/:not\($/,T=/h\d/i,U=/input|select|textarea|button/i,V=/\\(?!\\)/g,W={ID:new RegExp("^#("+F+")"),CLASS:new RegExp("^\\.("+F+")"),NAME:new RegExp("^\\[name=['\"]?("+F+")['\"]?\\]"),TAG:new RegExp("^("+F.replace("w","w*")+")"),ATTR:new RegExp("^"+I),PSEUDO:new RegExp("^"+J),POS:new RegExp(K,"i"),CHILD:new RegExp("^:(only|nth|first|last)-child(?:\\("+E+"*(even|odd|(([+-]|)(\\d*)n|)"+E+"*(?:([+-]|)"+E+"*(\\d+)|))"+E+"*\\)|)","i"),needsContext:new RegExp("^"+E+"*[>+~]|"+K,"i")},X=function(a){var b=r.createElement("div");try{return a(b)}catch(c){return!1}finally{b=null}},Y=X(function(a){return a.appendChild(r.createComment("")),!a.getElementsByTagName("*").length}),Z=X(function(a){return a.innerHTML="",a.firstChild&&typeof a.firstChild.getAttribute!==n&&a.firstChild.getAttribute("href")==="#"}),$=X(function(a){a.innerHTML="";var b=typeof a.lastChild.getAttribute("multiple");return b!=="boolean"&&b!=="string"}),_=X(function(a){return a.innerHTML="",!a.getElementsByClassName||!a.getElementsByClassName("e").length?!1:(a.lastChild.className="e",a.getElementsByClassName("e").length===2)}),ba=X(function(a){a.id=o+0,a.innerHTML="
    ",s.insertBefore(a,s.firstChild);var b=r.getElementsByName&&r.getElementsByName(o).length===2+r.getElementsByName(o+0).length;return d=!r.getElementById(o),s.removeChild(a),b});try{x.call(s.childNodes,0)[0].nodeType}catch(bb){x=function(a){var b,c=[];for(;b=this[a];a++)c.push(b);return c}}bc.matches=function(a,b){return bc(a,null,null,b)},bc.matchesSelector=function(a,b){return bc(b,null,null,[a]).length>0},f=bc.getText=function(a){var b,c="",d=0,e=a.nodeType;if(e){if(e===1||e===9||e===11){if(typeof a.textContent=="string")return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=f(a)}else if(e===3||e===4)return a.nodeValue}else for(;b=a[d];d++)c+=f(b);return c},g=bc.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?b.nodeName!=="HTML":!1},h=bc.contains=s.contains?function(a,b){var c=a.nodeType===9?a.documentElement:a,d=b&&b.parentNode;return a===d||!!(d&&d.nodeType===1&&c.contains&&c.contains(d))}:s.compareDocumentPosition?function(a,b){return b&&!!(a.compareDocumentPosition(b)&16)}:function(a,b){while(b=b.parentNode)if(b===a)return!0;return!1},bc.attr=function(a,b){var c,d=g(a);return d||(b=b.toLowerCase()),(c=e.attrHandle[b])?c(a):d||$?a.getAttribute(b):(c=a.getAttributeNode(b),c?typeof a[b]=="boolean"?a[b]?b:null:c.specified?c.value:null:null)},e=bc.selectors={cacheLength:50,createPseudo:z,match:W,attrHandle:Z?{}:{href:function(a){return a.getAttribute("href",2)},type:function(a){return a.getAttribute("type")}},find:{ID:d?function(a,b,c){if(typeof b.getElementById!==n&&!c){var d=b.getElementById(a);return d&&d.parentNode?[d]:[]}}:function(a,c,d){if(typeof c.getElementById!==n&&!d){var e=c.getElementById(a);return e?e.id===a||typeof e.getAttributeNode!==n&&e.getAttributeNode("id").value===a?[e]:b:[]}},TAG:Y?function(a,b){if(typeof b.getElementsByTagName!==n)return b.getElementsByTagName(a)}:function(a,b){var c=b.getElementsByTagName(a);if(a==="*"){var d,e=[],f=0;for(;d=c[f];f++)d.nodeType===1&&e.push(d);return e}return c},NAME:ba&&function(a,b){if(typeof b.getElementsByName!==n)return b.getElementsByName(name)},CLASS:_&&function(a,b,c){if(typeof b.getElementsByClassName!==n&&!c)return b.getElementsByClassName(a)}},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(V,""),a[3]=(a[4]||a[5]||"").replace(V,""),a[2]==="~="&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),a[1]==="nth"?(a[2]||bc.error(a[0]),a[3]=+(a[3]?a[4]+(a[5]||1):2*(a[2]==="even"||a[2]==="odd")),a[4]=+(a[6]+a[7]||a[2]==="odd")):a[2]&&bc.error(a[0]),a},PSEUDO:function(a){var b,c;if(W.CHILD.test(a[0]))return null;if(a[3])a[2]=a[3];else if(b=a[4])O.test(b)&&(c=bh(b,!0))&&(c=b.indexOf(")",b.length-c)-b.length)&&(b=b.slice(0,c),a[0]=a[0].slice(0,c)),a[2]=b;return a.slice(0,3)}},filter:{ID:d?function(a){return a=a.replace(V,""),function(b){return b.getAttribute("id")===a}}:function(a){return a=a.replace(V,""),function(b){var c=typeof b.getAttributeNode!==n&&b.getAttributeNode("id");return c&&c.value===a}},TAG:function(a){return a==="*"?function(){return!0}:(a=a.replace(V,"").toLowerCase(),function(b){return b.nodeName&&b.nodeName.toLowerCase()===a})},CLASS:function(a){var b=B[o][a];return b||(b=B(a,new RegExp("(^|"+E+")"+a+"("+E+"|$)"))),function(a){return b.test(a.className||typeof a.getAttribute!==n&&a.getAttribute("class")||"")}},ATTR:function(a,b,c){return function(d,e){var f=bc.attr(d,a);return f==null?b==="!=":b?(f+="",b==="="?f===c:b==="!="?f!==c:b==="^="?c&&f.indexOf(c)===0:b==="*="?c&&f.indexOf(c)>-1:b==="$="?c&&f.substr(f.length-c.length)===c:b==="~="?(" "+f+" ").indexOf(c)>-1:b==="|="?f===c||f.substr(0,c.length+1)===c+"-":!1):!0}},CHILD:function(a,b,c,d){return a==="nth"?function(a){var b,e,f=a.parentNode;if(c===1&&d===0)return!0;if(f){e=0;for(b=f.firstChild;b;b=b.nextSibling)if(b.nodeType===1){e++;if(a===b)break}}return e-=d,e===c||e%c===0&&e/c>=0}:function(b){var c=b;switch(a){case"only":case"first":while(c=c.previousSibling)if(c.nodeType===1)return!1;if(a==="first")return!0;c=b;case"last":while(c=c.nextSibling)if(c.nodeType===1)return!1;return!0}}},PSEUDO:function(a,b){var c,d=e.pseudos[a]||e.setFilters[a.toLowerCase()]||bc.error("unsupported pseudo: "+a);return d[o]?d(b):d.length>1?(c=[a,a,"",b],e.setFilters.hasOwnProperty(a.toLowerCase())?z(function(a,c){var e,f=d(a,b),g=f.length;while(g--)e=y.call(a,f[g]),a[e]=!(c[e]=f[g])}):function(a){return d(a,0,c)}):d}},pseudos:{not:z(function(a){var b=[],c=[],d=i(a.replace(L,"$1"));return d[o]?z(function(a,b,c,e){var f,g=d(a,null,e,[]),h=a.length;while(h--)if(f=g[h])a[h]=!(b[h]=f)}):function(a,e,f){return b[0]=a,d(b,null,f,c),!c.pop()}}),has:z(function(a){return function(b){return bc(a,b).length>0}}),contains:z(function(a){return function(b){return(b.textContent||b.innerText||f(b)).indexOf(a)>-1}}),enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&!!a.checked||b==="option"&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},parent:function(a){return!e.pseudos.empty(a)},empty:function(a){var b;a=a.firstChild;while(a){if(a.nodeName>"@"||(b=a.nodeType)===3||b===4)return!1;a=a.nextSibling}return!0},header:function(a){return T.test(a.nodeName)},text:function(a){var b,c;return a.nodeName.toLowerCase()==="input"&&(b=a.type)==="text"&&((c=a.getAttribute("type"))==null||c.toLowerCase()===b)},radio:bd("radio"),checkbox:bd("checkbox"),file:bd("file"),password:bd("password"),image:bd("image"),submit:be("submit"),reset:be("reset"),button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&a.type==="button"||b==="button"},input:function(a){return U.test(a.nodeName)},focus:function(a){var b=a.ownerDocument;return a===b.activeElement&&(!b.hasFocus||b.hasFocus())&&(!!a.type||!!a.href)},active:function(a){return a===a.ownerDocument.activeElement},first:bf(function(a,b,c){return[0]}),last:bf(function(a,b,c){return[b-1]}),eq:bf(function(a,b,c){return[c<0?c+b:c]}),even:bf(function(a,b,c){for(var d=0;d=0;)a.push(d);return a}),gt:bf(function(a,b,c){for(var d=c<0?c+b:c;++d",a.querySelectorAll("[selected]").length||e.push("\\["+E+"*(?:checked|disabled|ismap|multiple|readonly|selected|value)"),a.querySelectorAll(":checked").length||e.push(":checked")}),X(function(a){a.innerHTML="

    ",a.querySelectorAll("[test^='']").length&&e.push("[*^$]="+E+"*(?:\"\"|'')"),a.innerHTML="",a.querySelectorAll(":enabled").length||e.push(":enabled",":disabled")}),e=new RegExp(e.join("|")),bp=function(a,d,f,g,h){if(!g&&!h&&(!e||!e.test(a))){var i,j,k=!0,l=o,m=d,n=d.nodeType===9&&a;if(d.nodeType===1&&d.nodeName.toLowerCase()!=="object"){i=bh(a),(k=d.getAttribute("id"))?l=k.replace(c,"\\$&"):d.setAttribute("id",l),l="[id='"+l+"'] ",j=i.length;while(j--)i[j]=l+i[j].join("");m=R.test(a)&&d.parentNode||d,n=i.join(",")}if(n)try{return w.apply(f,x.call(m.querySelectorAll(n),0)),f}catch(p){}finally{k||d.removeAttribute("id")}}return b(a,d,f,g,h)},h&&(X(function(b){a=h.call(b,"div");try{h.call(b,"[test!='']:sizzle"),f.push("!=",J)}catch(c){}}),f=new RegExp(f.join("|")),bc.matchesSelector=function(b,c){c=c.replace(d,"='$1']");if(!g(b)&&!f.test(c)&&(!e||!e.test(c)))try{var i=h.call(b,c);if(i||a||b.document&&b.document.nodeType!==11)return i}catch(j){}return bc(c,null,null,[b]).length>0})}(),e.pseudos.nth=e.pseudos.eq,e.filters=bq.prototype=e.pseudos,e.setFilters=new bq,bc.attr=p.attr,p.find=bc,p.expr=bc.selectors,p.expr[":"]=p.expr.pseudos,p.unique=bc.uniqueSort,p.text=bc.getText,p.isXMLDoc=bc.isXML,p.contains=bc.contains}(a);var bc=/Until$/,bd=/^(?:parents|prev(?:Until|All))/,be=/^.[^:#\[\.,]*$/,bf=p.expr.match.needsContext,bg={children:!0,contents:!0,next:!0,prev:!0};p.fn.extend({find:function(a){var b,c,d,e,f,g,h=this;if(typeof a!="string")return p(a).filter(function(){for(b=0,c=h.length;b0)for(e=d;e=0:p.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c,d=0,e=this.length,f=[],g=bf.test(a)||typeof a!="string"?p(a,b||this.context):0;for(;d-1:p.find.matchesSelector(c,a)){f.push(c);break}c=c.parentNode}}return f=f.length>1?p.unique(f):f,this.pushStack(f,"closest",a)},index:function(a){return a?typeof a=="string"?p.inArray(this[0],p(a)):p.inArray(a.jquery?a[0]:a,this):this[0]&&this[0].parentNode?this.prevAll().length:-1},add:function(a,b){var c=typeof a=="string"?p(a,b):p.makeArray(a&&a.nodeType?[a]:a),d=p.merge(this.get(),c);return this.pushStack(bh(c[0])||bh(d[0])?d:p.unique(d))},addBack:function(a){return this.add(a==null?this.prevObject:this.prevObject.filter(a))}}),p.fn.andSelf=p.fn.addBack,p.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return p.dir(a,"parentNode")},parentsUntil:function(a,b,c){return p.dir(a,"parentNode",c)},next:function(a){return bi(a,"nextSibling")},prev:function(a){return bi(a,"previousSibling")},nextAll:function(a){return p.dir(a,"nextSibling")},prevAll:function(a){return p.dir(a,"previousSibling")},nextUntil:function(a,b,c){return p.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return p.dir(a,"previousSibling",c)},siblings:function(a){return p.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return p.sibling(a.firstChild)},contents:function(a){return p.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:p.merge([],a.childNodes)}},function(a,b){p.fn[a]=function(c,d){var e=p.map(this,b,c);return bc.test(a)||(d=c),d&&typeof d=="string"&&(e=p.filter(d,e)),e=this.length>1&&!bg[a]?p.unique(e):e,this.length>1&&bd.test(a)&&(e=e.reverse()),this.pushStack(e,a,k.call(arguments).join(","))}}),p.extend({filter:function(a,b,c){return c&&(a=":not("+a+")"),b.length===1?p.find.matchesSelector(b[0],a)?[b[0]]:[]:p.find.matches(a,b)},dir:function(a,c,d){var e=[],f=a[c];while(f&&f.nodeType!==9&&(d===b||f.nodeType!==1||!p(f).is(d)))f.nodeType===1&&e.push(f),f=f[c];return e},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var bl="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",bm=/ jQuery\d+="(?:null|\d+)"/g,bn=/^\s+/,bo=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,bp=/<([\w:]+)/,bq=/]","i"),bv=/^(?:checkbox|radio)$/,bw=/checked\s*(?:[^=]|=\s*.checked.)/i,bx=/\/(java|ecma)script/i,by=/^\s*\s*$/g,bz={option:[1,""],legend:[1,"
    ","
    "],thead:[1,"","
    "],tr:[2,"","
    "],td:[3,"","
    "],col:[2,"","
    "],area:[1,"",""],_default:[0,"",""]},bA=bk(e),bB=bA.appendChild(e.createElement("div"));bz.optgroup=bz.option,bz.tbody=bz.tfoot=bz.colgroup=bz.caption=bz.thead,bz.th=bz.td,p.support.htmlSerialize||(bz._default=[1,"X
    ","
    "]),p.fn.extend({text:function(a){return p.access(this,function(a){return a===b?p.text(this):this.empty().append((this[0]&&this[0].ownerDocument||e).createTextNode(a))},null,a,arguments.length)},wrapAll:function(a){if(p.isFunction(a))return this.each(function(b){p(this).wrapAll(a.call(this,b))});if(this[0]){var b=p(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){return p.isFunction(a)?this.each(function(b){p(this).wrapInner(a.call(this,b))}):this.each(function(){var b=p(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=p.isFunction(a);return this.each(function(c){p(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){p.nodeName(this,"body")||p(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){(this.nodeType===1||this.nodeType===11)&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){(this.nodeType===1||this.nodeType===11)&&this.insertBefore(a,this.firstChild)})},before:function(){if(!bh(this[0]))return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=p.clean(arguments);return this.pushStack(p.merge(a,this),"before",this.selector)}},after:function(){if(!bh(this[0]))return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=p.clean(arguments);return this.pushStack(p.merge(this,a),"after",this.selector)}},remove:function(a,b){var c,d=0;for(;(c=this[d])!=null;d++)if(!a||p.filter(a,[c]).length)!b&&c.nodeType===1&&(p.cleanData(c.getElementsByTagName("*")),p.cleanData([c])),c.parentNode&&c.parentNode.removeChild(c);return this},empty:function(){var a,b=0;for(;(a=this[b])!=null;b++){a.nodeType===1&&p.cleanData(a.getElementsByTagName("*"));while(a.firstChild)a.removeChild(a.firstChild)}return this},clone:function(a,b){return a=a==null?!1:a,b=b==null?a:b,this.map(function(){return p.clone(this,a,b)})},html:function(a){return p.access(this,function(a){var c=this[0]||{},d=0,e=this.length;if(a===b)return c.nodeType===1?c.innerHTML.replace(bm,""):b;if(typeof a=="string"&&!bs.test(a)&&(p.support.htmlSerialize||!bu.test(a))&&(p.support.leadingWhitespace||!bn.test(a))&&!bz[(bp.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(bo,"<$1>");try{for(;d1&&typeof j=="string"&&bw.test(j))return this.each(function(){p(this).domManip(a,c,d)});if(p.isFunction(j))return this.each(function(e){var f=p(this);a[0]=j.call(this,e,c?f.html():b),f.domManip(a,c,d)});if(this[0]){e=p.buildFragment(a,this,k),g=e.fragment,f=g.firstChild,g.childNodes.length===1&&(g=f);if(f){c=c&&p.nodeName(f,"tr");for(h=e.cacheable||l-1;i0?this.clone(!0):this).get(),p(g[e])[b](d),f=f.concat(d);return this.pushStack(f,a,g.selector)}}),p.extend({clone:function(a,b,c){var d,e,f,g;p.support.html5Clone||p.isXMLDoc(a)||!bu.test("<"+a.nodeName+">")?g=a.cloneNode(!0):(bB.innerHTML=a.outerHTML,bB.removeChild(g=bB.firstChild));if((!p.support.noCloneEvent||!p.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!p.isXMLDoc(a)){bE(a,g),d=bF(a),e=bF(g);for(f=0;d[f];++f)e[f]&&bE(d[f],e[f])}if(b){bD(a,g);if(c){d=bF(a),e=bF(g);for(f=0;d[f];++f)bD(d[f],e[f])}}return d=e=null,g},clean:function(a,b,c,d){var f,g,h,i,j,k,l,m,n,o,q,r,s=b===e&&bA,t=[];if(!b||typeof b.createDocumentFragment=="undefined")b=e;for(f=0;(h=a[f])!=null;f++){typeof h=="number"&&(h+="");if(!h)continue;if(typeof h=="string")if(!br.test(h))h=b.createTextNode(h);else{s=s||bk(b),l=b.createElement("div"),s.appendChild(l),h=h.replace(bo,"<$1>"),i=(bp.exec(h)||["",""])[1].toLowerCase(),j=bz[i]||bz._default,k=j[0],l.innerHTML=j[1]+h+j[2];while(k--)l=l.lastChild;if(!p.support.tbody){m=bq.test(h),n=i==="table"&&!m?l.firstChild&&l.firstChild.childNodes:j[1]===""&&!m?l.childNodes:[];for(g=n.length-1;g>=0;--g)p.nodeName(n[g],"tbody")&&!n[g].childNodes.length&&n[g].parentNode.removeChild(n[g])}!p.support.leadingWhitespace&&bn.test(h)&&l.insertBefore(b.createTextNode(bn.exec(h)[0]),l.firstChild),h=l.childNodes,l.parentNode.removeChild(l)}h.nodeType?t.push(h):p.merge(t,h)}l&&(h=l=s=null);if(!p.support.appendChecked)for(f=0;(h=t[f])!=null;f++)p.nodeName(h,"input")?bG(h):typeof h.getElementsByTagName!="undefined"&&p.grep(h.getElementsByTagName("input"),bG);if(c){q=function(a){if(!a.type||bx.test(a.type))return d?d.push(a.parentNode?a.parentNode.removeChild(a):a):c.appendChild(a)};for(f=0;(h=t[f])!=null;f++)if(!p.nodeName(h,"script")||!q(h))c.appendChild(h),typeof h.getElementsByTagName!="undefined"&&(r=p.grep(p.merge([],h.getElementsByTagName("script")),q),t.splice.apply(t,[f+1,0].concat(r)),f+=r.length)}return t},cleanData:function(a,b){var c,d,e,f,g=0,h=p.expando,i=p.cache,j=p.support.deleteExpando,k=p.event.special;for(;(e=a[g])!=null;g++)if(b||p.acceptData(e)){d=e[h],c=d&&i[d];if(c){if(c.events)for(f in c.events)k[f]?p.event.remove(e,f):p.removeEvent(e,f,c.handle);i[d]&&(delete i[d],j?delete e[h]:e.removeAttribute?e.removeAttribute(h):e[h]=null,p.deletedIds.push(d))}}}}),function(){var a,b;p.uaMatch=function(a){a=a.toLowerCase();var b=/(chrome)[ \/]([\w.]+)/.exec(a)||/(webkit)[ \/]([\w.]+)/.exec(a)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(a)||/(msie) ([\w.]+)/.exec(a)||a.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},a=p.uaMatch(g.userAgent),b={},a.browser&&(b[a.browser]=!0,b.version=a.version),b.chrome?b.webkit=!0:b.webkit&&(b.safari=!0),p.browser=b,p.sub=function(){function a(b,c){return new a.fn.init(b,c)}p.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function c(c,d){return d&&d instanceof p&&!(d instanceof a)&&(d=a(d)),p.fn.init.call(this,c,d,b)},a.fn.init.prototype=a.fn;var b=a(e);return a}}();var bH,bI,bJ,bK=/alpha\([^)]*\)/i,bL=/opacity=([^)]*)/,bM=/^(top|right|bottom|left)$/,bN=/^(none|table(?!-c[ea]).+)/,bO=/^margin/,bP=new RegExp("^("+q+")(.*)$","i"),bQ=new RegExp("^("+q+")(?!px)[a-z%]+$","i"),bR=new RegExp("^([-+])=("+q+")","i"),bS={},bT={position:"absolute",visibility:"hidden",display:"block"},bU={letterSpacing:0,fontWeight:400},bV=["Top","Right","Bottom","Left"],bW=["Webkit","O","Moz","ms"],bX=p.fn.toggle;p.fn.extend({css:function(a,c){return p.access(this,function(a,c,d){return d!==b?p.style(a,c,d):p.css(a,c)},a,c,arguments.length>1)},show:function(){return b$(this,!0)},hide:function(){return b$(this)},toggle:function(a,b){var c=typeof a=="boolean";return p.isFunction(a)&&p.isFunction(b)?bX.apply(this,arguments):this.each(function(){(c?a:bZ(this))?p(this).show():p(this).hide()})}}),p.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bH(a,"opacity");return c===""?"1":c}}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":p.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!a||a.nodeType===3||a.nodeType===8||!a.style)return;var f,g,h,i=p.camelCase(c),j=a.style;c=p.cssProps[i]||(p.cssProps[i]=bY(j,i)),h=p.cssHooks[c]||p.cssHooks[i];if(d===b)return h&&"get"in h&&(f=h.get(a,!1,e))!==b?f:j[c];g=typeof d,g==="string"&&(f=bR.exec(d))&&(d=(f[1]+1)*f[2]+parseFloat(p.css(a,c)),g="number");if(d==null||g==="number"&&isNaN(d))return;g==="number"&&!p.cssNumber[i]&&(d+="px");if(!h||!("set"in h)||(d=h.set(a,d,e))!==b)try{j[c]=d}catch(k){}},css:function(a,c,d,e){var f,g,h,i=p.camelCase(c);return c=p.cssProps[i]||(p.cssProps[i]=bY(a.style,i)),h=p.cssHooks[c]||p.cssHooks[i],h&&"get"in h&&(f=h.get(a,!0,e)),f===b&&(f=bH(a,c)),f==="normal"&&c in bU&&(f=bU[c]),d||e!==b?(g=parseFloat(f),d||p.isNumeric(g)?g||0:f):f},swap:function(a,b,c){var d,e,f={};for(e in b)f[e]=a.style[e],a.style[e]=b[e];d=c.call(a);for(e in b)a.style[e]=f[e];return d}}),a.getComputedStyle?bH=function(b,c){var d,e,f,g,h=a.getComputedStyle(b,null),i=b.style;return h&&(d=h[c],d===""&&!p.contains(b.ownerDocument,b)&&(d=p.style(b,c)),bQ.test(d)&&bO.test(c)&&(e=i.width,f=i.minWidth,g=i.maxWidth,i.minWidth=i.maxWidth=i.width=d,d=h.width,i.width=e,i.minWidth=f,i.maxWidth=g)),d}:e.documentElement.currentStyle&&(bH=function(a,b){var c,d,e=a.currentStyle&&a.currentStyle[b],f=a.style;return e==null&&f&&f[b]&&(e=f[b]),bQ.test(e)&&!bM.test(b)&&(c=f.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),f.left=b==="fontSize"?"1em":e,e=f.pixelLeft+"px",f.left=c,d&&(a.runtimeStyle.left=d)),e===""?"auto":e}),p.each(["height","width"],function(a,b){p.cssHooks[b]={get:function(a,c,d){if(c)return a.offsetWidth===0&&bN.test(bH(a,"display"))?p.swap(a,bT,function(){return cb(a,b,d)}):cb(a,b,d)},set:function(a,c,d){return b_(a,c,d?ca(a,b,d,p.support.boxSizing&&p.css(a,"boxSizing")==="border-box"):0)}}}),p.support.opacity||(p.cssHooks.opacity={get:function(a,b){return bL.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=p.isNumeric(b)?"alpha(opacity="+b*100+")":"",f=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&p.trim(f.replace(bK,""))===""&&c.removeAttribute){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bK.test(f)?f.replace(bK,e):f+" "+e}}),p(function(){p.support.reliableMarginRight||(p.cssHooks.marginRight={get:function(a,b){return p.swap(a,{display:"inline-block"},function(){if(b)return bH(a,"marginRight")})}}),!p.support.pixelPosition&&p.fn.position&&p.each(["top","left"],function(a,b){p.cssHooks[b]={get:function(a,c){if(c){var d=bH(a,b);return bQ.test(d)?p(a).position()[b]+"px":d}}}})}),p.expr&&p.expr.filters&&(p.expr.filters.hidden=function(a){return a.offsetWidth===0&&a.offsetHeight===0||!p.support.reliableHiddenOffsets&&(a.style&&a.style.display||bH(a,"display"))==="none"},p.expr.filters.visible=function(a){return!p.expr.filters.hidden(a)}),p.each({margin:"",padding:"",border:"Width"},function(a,b){p.cssHooks[a+b]={expand:function(c){var d,e=typeof c=="string"?c.split(" "):[c],f={};for(d=0;d<4;d++)f[a+bV[d]+b]=e[d]||e[d-2]||e[0];return f}},bO.test(a)||(p.cssHooks[a+b].set=b_)});var cd=/%20/g,ce=/\[\]$/,cf=/\r?\n/g,cg=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,ch=/^(?:select|textarea)/i;p.fn.extend({serialize:function(){return p.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?p.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||ch.test(this.nodeName)||cg.test(this.type))}).map(function(a,b){var c=p(this).val();return c==null?null:p.isArray(c)?p.map(c,function(a,c){return{name:b.name,value:a.replace(cf,"\r\n")}}):{name:b.name,value:c.replace(cf,"\r\n")}}).get()}}),p.param=function(a,c){var d,e=[],f=function(a,b){b=p.isFunction(b)?b():b==null?"":b,e[e.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=p.ajaxSettings&&p.ajaxSettings.traditional);if(p.isArray(a)||a.jquery&&!p.isPlainObject(a))p.each(a,function(){f(this.name,this.value)});else for(d in a)ci(d,a[d],c,f);return e.join("&").replace(cd,"+")};var cj,ck,cl=/#.*$/,cm=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,cn=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,co=/^(?:GET|HEAD)$/,cp=/^\/\//,cq=/\?/,cr=/)<[^<]*)*<\/script>/gi,cs=/([?&])_=[^&]*/,ct=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,cu=p.fn.load,cv={},cw={},cx=["*/"]+["*"];try{ck=f.href}catch(cy){ck=e.createElement("a"),ck.href="",ck=ck.href}cj=ct.exec(ck.toLowerCase())||[],p.fn.load=function(a,c,d){if(typeof a!="string"&&cu)return cu.apply(this,arguments);if(!this.length)return this;var e,f,g,h=this,i=a.indexOf(" ");return i>=0&&(e=a.slice(i,a.length),a=a.slice(0,i)),p.isFunction(c)?(d=c,c=b):c&&typeof c=="object"&&(f="POST"),p.ajax({url:a,type:f,dataType:"html",data:c,complete:function(a,b){d&&h.each(d,g||[a.responseText,b,a])}}).done(function(a){g=arguments,h.html(e?p("
    ").append(a.replace(cr,"")).find(e):a)}),this},p.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){p.fn[b]=function(a){return this.on(b,a)}}),p.each(["get","post"],function(a,c){p[c]=function(a,d,e,f){return p.isFunction(d)&&(f=f||e,e=d,d=b),p.ajax({type:c,url:a,data:d,success:e,dataType:f})}}),p.extend({getScript:function(a,c){return p.get(a,b,c,"script")},getJSON:function(a,b,c){return p.get(a,b,c,"json")},ajaxSetup:function(a,b){return b?cB(a,p.ajaxSettings):(b=a,a=p.ajaxSettings),cB(a,b),a},ajaxSettings:{url:ck,isLocal:cn.test(cj[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded; charset=UTF-8",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":cx},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":p.parseJSON,"text xml":p.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:cz(cv),ajaxTransport:cz(cw),ajax:function(a,c){function y(a,c,f,i){var k,s,t,u,w,y=c;if(v===2)return;v=2,h&&clearTimeout(h),g=b,e=i||"",x.readyState=a>0?4:0,f&&(u=cC(l,x,f));if(a>=200&&a<300||a===304)l.ifModified&&(w=x.getResponseHeader("Last-Modified"),w&&(p.lastModified[d]=w),w=x.getResponseHeader("Etag"),w&&(p.etag[d]=w)),a===304?(y="notmodified",k=!0):(k=cD(l,u),y=k.state,s=k.data,t=k.error,k=!t);else{t=y;if(!y||a)y="error",a<0&&(a=0)}x.status=a,x.statusText=(c||y)+"",k?o.resolveWith(m,[s,y,x]):o.rejectWith(m,[x,y,t]),x.statusCode(r),r=b,j&&n.trigger("ajax"+(k?"Success":"Error"),[x,l,k?s:t]),q.fireWith(m,[x,y]),j&&(n.trigger("ajaxComplete",[x,l]),--p.active||p.event.trigger("ajaxStop"))}typeof a=="object"&&(c=a,a=b),c=c||{};var d,e,f,g,h,i,j,k,l=p.ajaxSetup({},c),m=l.context||l,n=m!==l&&(m.nodeType||m instanceof p)?p(m):p.event,o=p.Deferred(),q=p.Callbacks("once memory"),r=l.statusCode||{},t={},u={},v=0,w="canceled",x={readyState:0,setRequestHeader:function(a,b){if(!v){var c=a.toLowerCase();a=u[c]=u[c]||a,t[a]=b}return this},getAllResponseHeaders:function(){return v===2?e:null},getResponseHeader:function(a){var c;if(v===2){if(!f){f={};while(c=cm.exec(e))f[c[1].toLowerCase()]=c[2]}c=f[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){return v||(l.mimeType=a),this},abort:function(a){return a=a||w,g&&g.abort(a),y(0,a),this}};o.promise(x),x.success=x.done,x.error=x.fail,x.complete=q.add,x.statusCode=function(a){if(a){var b;if(v<2)for(b in a)r[b]=[r[b],a[b]];else b=a[x.status],x.always(b)}return this},l.url=((a||l.url)+"").replace(cl,"").replace(cp,cj[1]+"//"),l.dataTypes=p.trim(l.dataType||"*").toLowerCase().split(s),l.crossDomain==null&&(i=ct.exec(l.url.toLowerCase())||!1,l.crossDomain=i&&i.join(":")+(i[3]?"":i[1]==="http:"?80:443)!==cj.join(":")+(cj[3]?"":cj[1]==="http:"?80:443)),l.data&&l.processData&&typeof l.data!="string"&&(l.data=p.param(l.data,l.traditional)),cA(cv,l,c,x);if(v===2)return x;j=l.global,l.type=l.type.toUpperCase(),l.hasContent=!co.test(l.type),j&&p.active++===0&&p.event.trigger("ajaxStart");if(!l.hasContent){l.data&&(l.url+=(cq.test(l.url)?"&":"?")+l.data,delete l.data),d=l.url;if(l.cache===!1){var z=p.now(),A=l.url.replace(cs,"$1_="+z);l.url=A+(A===l.url?(cq.test(l.url)?"&":"?")+"_="+z:"")}}(l.data&&l.hasContent&&l.contentType!==!1||c.contentType)&&x.setRequestHeader("Content-Type",l.contentType),l.ifModified&&(d=d||l.url,p.lastModified[d]&&x.setRequestHeader("If-Modified-Since",p.lastModified[d]),p.etag[d]&&x.setRequestHeader("If-None-Match",p.etag[d])),x.setRequestHeader("Accept",l.dataTypes[0]&&l.accepts[l.dataTypes[0]]?l.accepts[l.dataTypes[0]]+(l.dataTypes[0]!=="*"?", "+cx+"; q=0.01":""):l.accepts["*"]);for(k in l.headers)x.setRequestHeader(k,l.headers[k]);if(!l.beforeSend||l.beforeSend.call(m,x,l)!==!1&&v!==2){w="abort";for(k in{success:1,error:1,complete:1})x[k](l[k]);g=cA(cw,l,c,x);if(!g)y(-1,"No Transport");else{x.readyState=1,j&&n.trigger("ajaxSend",[x,l]),l.async&&l.timeout>0&&(h=setTimeout(function(){x.abort("timeout")},l.timeout));try{v=1,g.send(t,y)}catch(B){if(v<2)y(-1,B);else throw B}}return x}return x.abort()},active:0,lastModified:{},etag:{}});var cE=[],cF=/\?/,cG=/(=)\?(?=&|$)|\?\?/,cH=p.now();p.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=cE.pop()||p.expando+"_"+cH++;return this[a]=!0,a}}),p.ajaxPrefilter("json jsonp",function(c,d,e){var f,g,h,i=c.data,j=c.url,k=c.jsonp!==!1,l=k&&cG.test(j),m=k&&!l&&typeof i=="string"&&!(c.contentType||"").indexOf("application/x-www-form-urlencoded")&&cG.test(i);if(c.dataTypes[0]==="jsonp"||l||m)return f=c.jsonpCallback=p.isFunction(c.jsonpCallback)?c.jsonpCallback():c.jsonpCallback,g=a[f],l?c.url=j.replace(cG,"$1"+f):m?c.data=i.replace(cG,"$1"+f):k&&(c.url+=(cF.test(j)?"&":"?")+c.jsonp+"="+f),c.converters["script json"]=function(){return h||p.error(f+" was not called"),h[0]},c.dataTypes[0]="json",a[f]=function(){h=arguments},e.always(function(){a[f]=g,c[f]&&(c.jsonpCallback=d.jsonpCallback,cE.push(f)),h&&p.isFunction(g)&&g(h[0]),h=g=b}),"script"}),p.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){return p.globalEval(a),a}}}),p.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),p.ajaxTransport("script",function(a){if(a.crossDomain){var c,d=e.head||e.getElementsByTagName("head")[0]||e.documentElement;return{send:function(f,g){c=e.createElement("script"),c.async="async",a.scriptCharset&&(c.charset=a.scriptCharset),c.src=a.url,c.onload=c.onreadystatechange=function(a,e){if(e||!c.readyState||/loaded|complete/.test(c.readyState))c.onload=c.onreadystatechange=null,d&&c.parentNode&&d.removeChild(c),c=b,e||g(200,"success")},d.insertBefore(c,d.firstChild)},abort:function(){c&&c.onload(0,1)}}}});var cI,cJ=a.ActiveXObject?function(){for(var a in cI)cI[a](0,1)}:!1,cK=0;p.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&cL()||cM()}:cL,function(a){p.extend(p.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(p.ajaxSettings.xhr()),p.support.ajax&&p.ajaxTransport(function(c){if(!c.crossDomain||p.support.cors){var d;return{send:function(e,f){var g,h,i=c.xhr();c.username?i.open(c.type,c.url,c.async,c.username,c.password):i.open(c.type,c.url,c.async);if(c.xhrFields)for(h in c.xhrFields)i[h]=c.xhrFields[h];c.mimeType&&i.overrideMimeType&&i.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(h in e)i.setRequestHeader(h,e[h])}catch(j){}i.send(c.hasContent&&c.data||null),d=function(a,e){var h,j,k,l,m;try{if(d&&(e||i.readyState===4)){d=b,g&&(i.onreadystatechange=p.noop,cJ&&delete cI[g]);if(e)i.readyState!==4&&i.abort();else{h=i.status,k=i.getAllResponseHeaders(),l={},m=i.responseXML,m&&m.documentElement&&(l.xml=m);try{l.text=i.responseText}catch(a){}try{j=i.statusText}catch(n){j=""}!h&&c.isLocal&&!c.crossDomain?h=l.text?200:404:h===1223&&(h=204)}}}catch(o){e||f(-1,o)}l&&f(h,j,l,k)},c.async?i.readyState===4?setTimeout(d,0):(g=++cK,cJ&&(cI||(cI={},p(a).unload(cJ)),cI[g]=d),i.onreadystatechange=d):d()},abort:function(){d&&d(0,1)}}}});var cN,cO,cP=/^(?:toggle|show|hide)$/,cQ=new RegExp("^(?:([-+])=|)("+q+")([a-z%]*)$","i"),cR=/queueHooks$/,cS=[cY],cT={"*":[function(a,b){var c,d,e=this.createTween(a,b),f=cQ.exec(b),g=e.cur(),h=+g||0,i=1,j=20;if(f){c=+f[2],d=f[3]||(p.cssNumber[a]?"":"px");if(d!=="px"&&h){h=p.css(e.elem,a,!0)||c||1;do i=i||".5",h=h/i,p.style(e.elem,a,h+d);while(i!==(i=e.cur()/g)&&i!==1&&--j)}e.unit=d,e.start=h,e.end=f[1]?h+(f[1]+1)*c:c}return e}]};p.Animation=p.extend(cW,{tweener:function(a,b){p.isFunction(a)?(b=a,a=["*"]):a=a.split(" ");var c,d=0,e=a.length;for(;d-1,j={},k={},l,m;i?(k=e.position(),l=k.top,m=k.left):(l=parseFloat(g)||0,m=parseFloat(h)||0),p.isFunction(b)&&(b=b.call(a,c,f)),b.top!=null&&(j.top=b.top-f.top+l),b.left!=null&&(j.left=b.left-f.left+m),"using"in b?b.using.call(a,j):e.css(j)}},p.fn.extend({position:function(){if(!this[0])return;var a=this[0],b=this.offsetParent(),c=this.offset(),d=c_.test(b[0].nodeName)?{top:0,left:0}:b.offset();return c.top-=parseFloat(p.css(a,"marginTop"))||0,c.left-=parseFloat(p.css(a,"marginLeft"))||0,d.top+=parseFloat(p.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(p.css(b[0],"borderLeftWidth"))||0,{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||e.body;while(a&&!c_.test(a.nodeName)&&p.css(a,"position")==="static")a=a.offsetParent;return a||e.body})}}),p.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,c){var d=/Y/.test(c);p.fn[a]=function(e){return p.access(this,function(a,e,f){var g=da(a);if(f===b)return g?c in g?g[c]:g.document.documentElement[e]:a[e];g?g.scrollTo(d?p(g).scrollLeft():f,d?f:p(g).scrollTop()):a[e]=f},a,e,arguments.length,null)}}),p.each({Height:"height",Width:"width"},function(a,c){p.each({padding:"inner"+a,content:c,"":"outer"+a},function(d,e){p.fn[e]=function(e,f){var g=arguments.length&&(d||typeof e!="boolean"),h=d||(e===!0||f===!0?"margin":"border");return p.access(this,function(c,d,e){var f;return p.isWindow(c)?c.document.documentElement["client"+a]:c.nodeType===9?(f=c.documentElement,Math.max(c.body["scroll"+a],f["scroll"+a],c.body["offset"+a],f["offset"+a],f["client"+a])):e===b?p.css(c,d,e,h):p.style(c,d,e,h)},c,g?e:b,g,null)}})}),a.jQuery=a.$=p,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return p})})(window); \ No newline at end of file diff --git a/assets/js/jquery.mousewheel.js b/assets/js/jquery.mousewheel.js new file mode 100644 index 000000000000..38b60951b201 --- /dev/null +++ b/assets/js/jquery.mousewheel.js @@ -0,0 +1,84 @@ +/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net) + * Licensed under the MIT License (LICENSE.txt). + * + * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. + * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. + * Thanks to: Seamus Leahy for adding deltaX and deltaY + * + * Version: 3.0.6 + * + * Requires: 1.2.2+ + */ + +(function($) { + +var types = ['DOMMouseScroll', 'mousewheel']; + +if ($.event.fixHooks) { + for ( var i=types.length; i; ) { + $.event.fixHooks[ types[--i] ] = $.event.mouseHooks; + } +} + +$.event.special.mousewheel = { + setup: function() { + if ( this.addEventListener ) { + for ( var i=types.length; i; ) { + this.addEventListener( types[--i], handler, false ); + } + } else { + this.onmousewheel = handler; + } + }, + + teardown: function() { + if ( this.removeEventListener ) { + for ( var i=types.length; i; ) { + this.removeEventListener( types[--i], handler, false ); + } + } else { + this.onmousewheel = null; + } + } +}; + +$.fn.extend({ + mousewheel: function(fn) { + return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel"); + }, + + unmousewheel: function(fn) { + return this.unbind("mousewheel", fn); + } +}); + + +function handler(event) { + var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0; + event = $.event.fix(orgEvent); + event.type = "mousewheel"; + + // Old school scrollwheel delta + if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; } + if ( orgEvent.detail ) { delta = -orgEvent.detail/3; } + + // New school multidimensional scroll (touchpads) deltas + deltaY = delta; + + // Gecko + if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) { + deltaY = 0; + deltaX = -1*delta; + } + + // Webkit + if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; } + if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; } + + // Add event and delta to the front of the arguments + args.unshift(event, delta, deltaX, deltaY); + + return ($.event.dispatch || $.event.handle).apply(this, args); +} + +})(jQuery); diff --git a/assets/js/less.min.js b/assets/js/less.min.js new file mode 100644 index 000000000000..9b0fa6bae3bb --- /dev/null +++ b/assets/js/less.min.js @@ -0,0 +1,9 @@ +// +// LESS - Leaner CSS v1.3.3 +// http://lesscss.org +// +// Copyright (c) 2009-2013, Alexis Sellier +// Licensed under the Apache 2.0 License. +// +(function(e,t){function n(t){return e.less[t.split("/")[1]]}function f(){r.env==="development"?(r.optimization=0,r.watchTimer=setInterval(function(){r.watchMode&&g(function(e,t,n,r,i){t&&S(t.toCSS(),r,i.lastModified)})},r.poll)):r.optimization=3}function m(){var e=document.getElementsByTagName("style");for(var t=0;t0&&(s.splice(o-1,2),o-=2)}return i.hostPart=r[1],i.directories=s,i.path=r[1]+s.join("/"),i.fileUrl=i.path+(r[4]||""),i.url=i.fileUrl+(r[5]||""),i}function w(t,n,i,s){var o=t.contents||{},u=t.files||{},a=b(t.href,e.location.href),f=a.url,c=l&&l.getItem(f),h=l&&l.getItem(f+":timestamp"),p={css:c,timestamp:h},d;r.relativeUrls?r.rootpath?t.entryPath?d=b(r.rootpath+y(a.path,t.entryPath)).path:d=r.rootpath:d=a.path:r.rootpath?d=r.rootpath:t.entryPath?d=t.entryPath:d=a.path,x(f,t.type,function(e,l){v+=e.replace(/@import .+?;/ig,"");if(!i&&p&&l&&(new Date(l)).valueOf()===(new Date(p.timestamp)).valueOf())S(p.css,t),n(null,null,e,t,{local:!0,remaining:s},f);else try{o[f]=e,(new r.Parser({optimization:r.optimization,paths:[a.path],entryPath:t.entryPath||a.path,mime:t.type,filename:f,rootpath:d,relativeUrls:t.relativeUrls,contents:o,files:u,dumpLineNumbers:r.dumpLineNumbers})).parse(e,function(r,i){if(r)return k(r,f);try{n(r,i,e,t,{local:!1,lastModified:l,remaining:s},f),N(document.getElementById("less-error-message:"+E(f)))}catch(r){k(r,f)}})}catch(c){k(c,f)}},function(e,t){throw new Error("Couldn't load "+t+" ("+e+")")})}function E(e){return e.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\.[a-zA-Z]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function S(e,t,n){var r,i=t.href||"",s="less:"+(t.title||E(i));if((r=document.getElementById(s))===null){r=document.createElement("style"),r.type="text/css",t.media&&(r.media=t.media),r.id=s;var o=t&&t.nextSibling||null;(o||document.getElementsByTagName("head")[0]).parentNode.insertBefore(r,o)}if(r.styleSheet)try{r.styleSheet.cssText=e}catch(u){throw new Error("Couldn't reassign styleSheet.cssText.")}else(function(e){r.childNodes.length>0?r.firstChild.nodeValue!==e.nodeValue&&r.replaceChild(e,r.firstChild):r.appendChild(e)})(document.createTextNode(e));if(n&&l){C("saving "+i+" to cache.");try{l.setItem(i,e),l.setItem(i+":timestamp",n)}catch(u){C("failed to save")}}}function x(e,t,n,i){function a(t,n,r){t.status>=200&&t.status<300?n(t.responseText,t.getResponseHeader("Last-Modified")):typeof r=="function"&&r(t.status,e)}var s=T(),u=o?r.fileAsync:r.async;typeof s.overrideMimeType=="function"&&s.overrideMimeType("text/css"),s.open("GET",e,u),s.setRequestHeader("Accept",t||"text/x-less, text/css; q=0.9, */*; q=0.5"),s.send(null),o&&!r.fileAsync?s.status===0||s.status>=200&&s.status<300?n(s.responseText):i(s.status,e):u?s.onreadystatechange=function(){s.readyState==4&&a(s,n,i)}:a(s,n,i)}function T(){if(e.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(t){return C("browser doesn't support AJAX."),null}}function N(e){return e&&e.parentNode.removeChild(e)}function C(e){r.env=="development"&&typeof console!="undefined"&&console.log("less: "+e)}function k(e,t){var n="less-error-message:"+E(t),i='
  • {content}
  • ',s=document.createElement("div"),o,u,a=[],f=e.filename||t,l=f.match(/([^\/]+(\?.*)?)$/)[1];s.id=n,s.className="less-error-message",u="

    "+(e.message||"There is an error in your .less file")+"

    "+'

    in '+l+" ";var c=function(e,t,n){e.extract[t]&&a.push(i.replace(/\{line\}/,parseInt(e.line)+(t-1)).replace(/\{class\}/,n).replace(/\{content\}/,e.extract[t]))};e.stack?u+="
    "+e.stack.split("\n").slice(1).join("
    "):e.extract&&(c(e,0,""),c(e,1,"line"),c(e,2,""),u+="on line "+e.line+", column "+(e.column+1)+":

    "+"
      "+a.join("")+"
    "),s.innerHTML=u,S([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #dd6666;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.line {","color: #ff0000;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),s.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),r.env=="development"&&(o=setInterval(function(){document.body&&(document.getElementById(n)?document.body.replaceChild(s,document.getElementById(n)):document.body.insertBefore(s,document.body.firstChild),clearInterval(o))},10))}Array.isArray||(Array.isArray=function(e){return Object.prototype.toString.call(e)==="[object Array]"||e instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(e,t){var n=this.length>>>0;for(var r=0;r>>0,n=new Array(t),r=arguments[1];for(var i=0;i>>0,n=0;if(t===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var r=arguments[1];else do{if(n in this){r=this[n++];break}if(++n>=t)throw new TypeError}while(!0);for(;n=t)return-1;n<0&&(n+=t);for(;nh&&(c[u]=c[u].slice(o-h),h=o)}function w(e){var t=e.charCodeAt(0);return t===32||t===10||t===9}function E(e){var t,n,r,i,a;if(e instanceof Function)return e.call(p.parsers);if(typeof e=="string")t=s.charAt(o)===e?e:null,r=1,b();else{b();if(!(t=e.exec(c[u])))return null;r=t[0].length}if(t)return S(r),typeof t=="string"?t:t.length===1?t[0]:t}function S(e){var t=o,n=u,r=o+c[u].length,i=o+=e;while(o=0&&t.charAt(n)!=="\n";n--)r++;return{line:typeof e=="number"?(t.slice(0,e).match(/\n/g)||"").length:null,column:r}}function L(e){return r.mode==="browser"||r.mode==="rhino"?e.filename:n("path").resolve(e.filename)}function A(e,t,n){return{lineNumber:k(e,t).line+1,fileName:L(n)}}function O(e,t){var n=C(e,t),r=k(e.index,n),i=r.line,s=r.column,o=n.split("\n");this.type=e.type||"Syntax",this.message=e.message,this.filename=e.filename||t.filename,this.index=e.index,this.line=typeof i=="number"?i+1:null,this.callLine=e.call&&k(e.call,n).line+1,this.callExtract=o[k(e.call,n).line],this.stack=e.stack,this.column=s,this.extract=[o[i-1],o[i],o[i+1]]}var s,o,u,a,f,l,c,h,p,d=this,t=t||{};t.contents||(t.contents={}),t.rootpath=t.rootpath||"",t.files||(t.files={});var v=function(){},m=this.imports={paths:t.paths||[],queue:[],files:t.files,contents:t.contents,mime:t.mime,error:null,push:function(e,n){var i=this;this.queue.push(e),r.Parser.importer(e,this.paths,function(t,r,s){i.queue.splice(i.queue.indexOf(e),1);var o=s in i.files;i.files[s]=r,t&&!i.error&&(i.error=t),n(t,r,o),i.queue.length===0&&v(i.error)},t)}};return this.env=t=t||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null,p={imports:m,parse:function(e,a){var f,d,m,g,y,b,w=[],S,x=null;o=u=h=l=0,s=e.replace(/\r\n/g,"\n"),s=s.replace(/^\uFEFF/,""),c=function(e){var n=0,r=/(?:@\{[\w-]+\}|[^"'`\{\}\/\(\)\\])+/g,i=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,o=/"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'|`((?:[^`]|\\.)*)`/g,u=0,a,f=e[0],l;for(var c=0,h,p;c0?"missing closing `}`":"missing opening `{`",filename:t.filename},t)),e.map(function(e){return e.join("")})}([[]]);if(x)return a(x,t);try{f=new i.Ruleset([],E(this.parsers.primary)),f.root=!0}catch(T){return a(new O(T,t))}f.toCSS=function(e){var s,o,u;return function(s,o){var u=[],a;s=s||{},typeof o=="object"&&!Array.isArray(o)&&(o=Object.keys(o).map(function(e){var t=o[e];return t instanceof i.Value||(t instanceof i.Expression||(t=new i.Expression([t])),t=new i.Value([t])),new i.Rule("@"+e,t,!1,0)}),u=[new i.Ruleset(null,o)]);try{var f=e.call(this,{frames:u}).toCSS([],{compress:s.compress||!1,dumpLineNumbers:t.dumpLineNumbers})}catch(l){throw new O(l,t)}if(a=p.imports.error)throw a instanceof O?a:new O(a,t);return s.yuicompress&&r.mode==="node"?n("ycssmin").cssmin(f):s.compress?f.replace(/(\s)+/g,"$1"):f}}(f.eval);if(o=0&&s.charAt(N)!=="\n";N--)C++;x={type:"Parse",message:"Syntax Error on line "+y,index:o,filename:t.filename,line:y,column:C,extract:[b[y-2],b[y-1],b[y]]}}this.imports.queue.length>0?v=function(e){e=x||e,e?a(e):a(null,f)}:a(x,f)},parsers:{primary:function(){var e,t=[];while((e=E(this.mixin.definition)||E(this.rule)||E(this.ruleset)||E(this.mixin.call)||E(this.comment)||E(this.directive))||E(/^[\s\n]+/)||E(/^;+/))e&&t.push(e);return t},comment:function(){var e;if(s.charAt(o)!=="/")return;if(s.charAt(o+1)==="/")return new i.Comment(E(/^\/\/.*/),!0);if(e=E(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new i.Comment(e)},entities:{quoted:function(){var e,t=o,n;s.charAt(t)==="~"&&(t++,n=!0);if(s.charAt(t)!=='"'&&s.charAt(t)!=="'")return;n&&E("~");if(e=E(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new i.Quoted(e[0],e[1]||e[2],n)},keyword:function(){var e;if(e=E(/^[_A-Za-z-][_A-Za-z0-9-]*/))return i.colors.hasOwnProperty(e)?new i.Color(i.colors[e].slice(1)):new i.Keyword(e)},call:function(){var e,n,r,s,a=o;if(!(e=/^([\w-]+|%|progid:[\w\.]+)\(/.exec(c[u])))return;e=e[1],n=e.toLowerCase();if(n==="url")return null;o+=e.length;if(n==="alpha"){s=E(this.alpha);if(typeof s!="undefined")return s}E("("),r=E(this.entities.arguments);if(!E(")"))return;if(e)return new i.Call(e,r,a,t.filename)},arguments:function(){var e=[],t;while(t=E(this.entities.assignment)||E(this.expression)){e.push(t);if(!E(","))break}return e},literal:function(){return E(this.entities.ratio)||E(this.entities.dimension)||E(this.entities.color)||E(this.entities.quoted)||E(this.entities.unicodeDescriptor)},assignment:function(){var e,t;if((e=E(/^\w+(?=\s?=)/i))&&E("=")&&(t=E(this.entity)))return new i.Assignment(e,t)},url:function(){var e;if(s.charAt(o)!=="u"||!E(/^url\(/))return;return e=E(this.entities.quoted)||E(this.entities.variable)||E(/^(?:(?:\\[\(\)'"])|[^\(\)'"])+/)||"",x(")"),new i.URL(e.value!=null||e instanceof i.Variable?e:new i.Anonymous(e),t.rootpath)},variable:function(){var e,n=o;if(s.charAt(o)==="@"&&(e=E(/^@@?[\w-]+/)))return new i.Variable(e,n,t.filename)},variableCurly:function(){var e,n,r=o;if(s.charAt(o)==="@"&&(n=E(/^@\{([\w-]+)\}/)))return new i.Variable("@"+n[1],r,t.filename)},color:function(){var e;if(s.charAt(o)==="#"&&(e=E(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/)))return new i.Color(e[1])},dimension:function(){var e,t=s.charCodeAt(o);if(t>57||t<43||t===47||t==44)return;if(e=E(/^([+-]?\d*\.?\d+)(px|%|em|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn|dpi|dpcm|dppx|rem|vw|vh|vmin|vm|ch)?/))return new i.Dimension(e[1],e[2])},ratio:function(){var e,t=s.charCodeAt(o);if(t>57||t<48)return;if(e=E(/^(\d+\/\d+)/))return new i.Ratio(e[1])},unicodeDescriptor:function(){var e;if(e=E(/^U\+[0-9a-fA-F?]+(\-[0-9a-fA-F?]+)?/))return new i.UnicodeDescriptor(e[0])},javascript:function(){var e,t=o,n;s.charAt(t)==="~"&&(t++,n=!0);if(s.charAt(t)!=="`")return;n&&E("~");if(e=E(/^`([^`]*)`/))return new i.JavaScript(e[1],o,n)}},variable:function(){var e;if(s.charAt(o)==="@"&&(e=E(/^(@[\w-]+)\s*:/)))return e[1]},shorthand:function(){var e,t;if(!N(/^[@\w.%-]+\/[@\w.-]+/))return;g();if((e=E(this.entity))&&E("/")&&(t=E(this.entity)))return new i.Shorthand(e,t);y()},mixin:{call:function(){var e=[],n,r,u=[],a=[],f,l,c,h,p,d,v,m=o,b=s.charAt(o),w,S,C=!1;if(b!=="."&&b!=="#")return;g();while(n=E(/^[#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/))e.push(new i.Element(r,n,o)),r=E(">");if(E("(")){p=[];while(c=E(this.expression)){h=null,S=c;if(c.value.length==1){var k=c.value[0];k instanceof i.Variable&&E(":")&&(p.length>0&&(d&&T("Cannot mix ; and , as delimiter types"),v=!0),S=x(this.expression),h=w=k.name)}p.push(S),a.push({name:h,value:S});if(E(","))continue;if(E(";")||d)v&&T("Cannot mix ; and , as delimiter types"),d=!0,p.length>1&&(S=new i.Value(p)),u.push({name:w,value:S}),w=null,p=[],v=!1}x(")")}f=d?u:a,E(this.important)&&(C=!0);if(e.length>0&&(E(";")||N("}")))return new i.mixin.Call(e,f,m,t.filename,C);y()},definition:function(){var e,t=[],n,r,u,a,f,c=!1;if(s.charAt(o)!=="."&&s.charAt(o)!=="#"||N(/^[^{]*\}/))return;g();if(n=E(/^([#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+)\s*\(/)){e=n[1];do{E(this.comment);if(s.charAt(o)==="."&&E(/^\.{3}/)){c=!0,t.push({variadic:!0});break}if(!(u=E(this.entities.variable)||E(this.entities.literal)||E(this.entities.keyword)))break;if(u instanceof i.Variable)if(E(":"))a=x(this.expression,"expected expression"),t.push({name:u.name,value:a});else{if(E(/^\.{3}/)){t.push({name:u.name,variadic:!0}),c=!0;break}t.push({name:u.name})}else t.push({value:u})}while(E(",")||E(";"));E(")")||(l=o,y()),E(this.comment),E(/^when/)&&(f=x(this.conditions,"expected condition")),r=E(this.block);if(r)return new i.mixin.Definition(e,t,r,f,c);y()}}},entity:function(){return E(this.entities.literal)||E(this.entities.variable)||E(this.entities.url)||E(this.entities.call)||E(this.entities.keyword)||E(this.entities.javascript)||E(this.comment)},end:function(){return E(";")||N("}")},alpha:function(){var e;if(!E(/^\(opacity=/i))return;if(e=E(/^\d+/)||E(this.entities.variable))return x(")"),new i.Alpha(e)},element:function(){var e,t,n,r;n=E(this.combinator),e=E(/^(?:\d+\.\d+|\d+)%/)||E(/^(?:[.#]?|:*)(?:[\w-]|[^\x00-\x9f]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)||E("*")||E("&")||E(this.attribute)||E(/^\([^()@]+\)/)||E(/^[\.#](?=@)/)||E(this.entities.variableCurly),e||E("(")&&(r=E(this.entities.variableCurly)||E(this.entities.variable)||E(this.selector))&&E(")")&&(e=new i.Paren(r));if(e)return new i.Element(n,e,o)},combinator:function(){var e,t=s.charAt(o);if(t===">"||t==="+"||t==="~"||t==="|"){o++;while(s.charAt(o).match(/\s/))o++;return new i.Combinator(t)}return s.charAt(o-1).match(/\s/)?new i.Combinator(" "):new i.Combinator(null)},selector:function(){var e,t,n=[],r,u;if(E("("))return e=E(this.entity),E(")")?new i.Selector([new i.Element("",e,o)]):null;while(t=E(this.element)){r=s.charAt(o),n.push(t);if(r==="{"||r==="}"||r===";"||r===","||r===")")break}if(n.length>0)return new i.Selector(n)},attribute:function(){var e="",t,n,r;if(!E("["))return;if(t=E(/^(?:[_A-Za-z0-9-]|\\.)+/)||E(this.entities.quoted))(r=E(/^[|~*$^]?=/))&&(n=E(this.entities.quoted)||E(/^[\w-]+/))?e=[t,r,n.toCSS?n.toCSS():n].join(""):e=t;if(!E("]"))return;if(e)return"["+e+"]"},block:function(){var e;if(E("{")&&(e=E(this.primary))&&E("}"))return e},ruleset:function(){var e=[],n,r,u,a;g(),t.dumpLineNumbers&&(a=A(o,s,t));while(n=E(this.selector)){e.push(n),E(this.comment);if(!E(","))break;E(this.comment)}if(e.length>0&&(r=E(this.block))){var f=new i.Ruleset(e,r,t.strictImports);return t.dumpLineNumbers&&(f.debugInfo=a),f}l=o,y()},rule:function(){var e,t,n=s.charAt(o),r,a;g();if(n==="."||n==="#"||n==="&")return;if(e=E(this.variable)||E(this.property)){e.charAt(0)!="@"&&(a=/^([^@+\/'"*`(;{}-]*);/.exec(c[u]))?(o+=a[0].length-1,t=new i.Anonymous(a[1])):e==="font"?t=E(this.font):t=E(this.value),r=E(this.important);if(t&&E(this.end))return new i.Rule(e,t,r,f);l=o,y()}},"import":function(){var e,n,r=o;g();var s=E(/^@import(?:-(once))?\s+/);if(s&&(e=E(this.entities.quoted)||E(this.entities.url))){n=E(this.mediaFeatures);if(E(";"))return new i.Import(e,m,n,s[1]==="once",r,t.rootpath)}y()},mediaFeature:function(){var e,t,n=[];do if(e=E(this.entities.keyword))n.push(e);else if(E("(")){t=E(this.property),e=E(this.entity);if(!E(")"))return null;if(t&&e)n.push(new i.Paren(new i.Rule(t,e,null,o,!0)));else{if(!e)return null;n.push(new i.Paren(e))}}while(e);if(n.length>0)return new i.Expression(n)},mediaFeatures:function(){var e,t=[];do if(e=E(this.mediaFeature)){t.push(e);if(!E(","))break}else if(e=E(this.entities.variable)){t.push(e);if(!E(","))break}while(e);return t.length>0?t:null},media:function(){var e,n,r,u;t.dumpLineNumbers&&(u=A(o,s,t));if(E(/^@media/)){e=E(this.mediaFeatures);if(n=E(this.block))return r=new i.Media(n,e),t.dumpLineNumbers&&(r.debugInfo=u),r}},directive:function(){var e,n,r,u,a,f,l,c,h,p;if(s.charAt(o)!=="@")return;if(n=E(this["import"])||E(this.media))return n;g(),e=E(/^@[a-z-]+/);if(!e)return;l=e,e.charAt(1)=="-"&&e.indexOf("-",2)>0&&(l="@"+e.slice(e.indexOf("-",2)+1));switch(l){case"@font-face":c=!0;break;case"@viewport":case"@top-left":case"@top-left-corner":case"@top-center":case"@top-right":case"@top-right-corner":case"@bottom-left":case"@bottom-left-corner":case"@bottom-center":case"@bottom-right":case"@bottom-right-corner":case"@left-top":case"@left-middle":case"@left-bottom":case"@right-top":case"@right-middle":case"@right-bottom":c=!0;break;case"@page":case"@document":case"@supports":case"@keyframes":c=!0,h=!0;break;case"@namespace":p=!0}h&&(e+=" "+(E(/^[^{]+/)||"").trim());if(c){if(r=E(this.block))return new i.Directive(e,r)}else if((n=p?E(this.expression):E(this.entity))&&E(";")){var d=new i.Directive(e,n);return t.dumpLineNumbers&&(d.debugInfo=A(o,s,t)),d}y()},font:function(){var e=[],t=[],n,r,s,o;while(o=E(this.shorthand)||E(this.entity))t.push(o);e.push(new i.Expression(t));if(E(","))while(o=E(this.expression)){e.push(o);if(!E(","))break}return new i.Value(e)},value:function(){var e,t=[],n;while(e=E(this.expression)){t.push(e);if(!E(","))break}if(t.length>0)return new i.Value(t)},important:function(){if(s.charAt(o)==="!")return E(/^! *important/)},sub:function(){var e;if(E("(")&&(e=E(this.expression))&&E(")"))return e},multiplication:function(){var e,t,n,r;if(e=E(this.operand)){while(!N(/^\/[*\/]/)&&(n=E("/")||E("*"))&&(t=E(this.operand)))r=new i.Operation(n,[r||e,t]);return r||e}},addition:function(){var e,t,n,r;if(e=E(this.multiplication)){while((n=E(/^[-+]\s+/)||!w(s.charAt(o-1))&&(E("+")||E("-")))&&(t=E(this.multiplication)))r=new i.Operation(n,[r||e,t]);return r||e}},conditions:function(){var e,t,n=o,r;if(e=E(this.condition)){while(E(",")&&(t=E(this.condition)))r=new i.Condition("or",r||e,t,n);return r||e}},condition:function(){var e,t,n,r,s=o,u=!1;E(/^not/)&&(u=!0),x("(");if(e=E(this.addition)||E(this.entities.keyword)||E(this.entities.quoted))return(r=E(/^(?:>=|=<|[<=>])/))?(t=E(this.addition)||E(this.entities.keyword)||E(this.entities.quoted))?n=new i.Condition(r,e,t,s,u):T("expected expression"):n=new i.Condition("=",e,new i.Keyword("true"),s,u),x(")"),E(/^and/)?new i.Condition("and",n,E(this.condition)):n},operand:function(){var e,t=s.charAt(o+1);s.charAt(o)==="-"&&(t==="@"||t==="(")&&(e=E("-"));var n=E(this.sub)||E(this.entities.dimension)||E(this.entities.color)||E(this.entities.variable)||E(this.entities.call);return e?new i.Operation("*",[new i.Dimension(-1),n]):n},expression:function(){var e,t,n=[],r;while(e=E(this.addition)||E(this.entity))n.push(e);if(n.length>0)return new i.Expression(n)},property:function(){var e;if(e=E(/^(\*?-?[_a-z0-9-]+)\s*:/))return e[1]}}}};if(r.mode==="browser"||r.mode==="rhino")r.Parser.importer=function(e,t,n,r){!/^([a-z-]+:)?\//.test(e)&&t.length>0&&(e=t[0]+e),w({href:e,title:e,type:r.mime,contents:r.contents,files:r.files,rootpath:r.rootpath,entryPath:r.entryPath,relativeUrls:r.relativeUrls},function(e,i,s,o,u,a){e&&typeof r.errback=="function"?r.errback.call(null,a,t,n,r):n.call(null,e,i,a)},!0)};(function(e){function t(t){return e.functions.hsla(t.h,t.s,t.l,t.a)}function n(t,n){return t instanceof e.Dimension&&t.unit=="%"?parseFloat(t.value*n/100):r(t)}function r(t){if(t instanceof e.Dimension)return parseFloat(t.unit=="%"?t.value/100:t.value);if(typeof t=="number")return t;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function i(e){return Math.min(1,Math.max(0,e))}e.functions={rgb:function(e,t,n){return this.rgba(e,t,n,1)},rgba:function(t,i,s,o){var u=[t,i,s].map(function(e){return n(e,256)});return o=r(o),new e.Color(u,o)},hsl:function(e,t,n){return this.hsla(e,t,n,1)},hsla:function(e,t,n,i){function u(e){return e=e<0?e+1:e>1?e-1:e,e*6<1?o+(s-o)*e*6:e*2<1?s:e*3<2?o+(s-o)*(2/3-e)*6:o}e=r(e)%360/360,t=r(t),n=r(n),i=r(i);var s=n<=.5?n*(t+1):n+t-n*t,o=n*2-s;return this.rgba(u(e+1/3)*255,u(e)*255,u(e-1/3)*255,i)},hsv:function(e,t,n){return this.hsva(e,t,n,1)},hsva:function(e,t,n,i){e=r(e)%360/360*360,t=r(t),n=r(n),i=r(i);var s,o;s=Math.floor(e/60%6),o=e/60-s;var u=[n,n*(1-t),n*(1-o*t),n*(1-(1-o)*t)],a=[[0,3,1],[2,0,1],[1,0,3],[1,2,0],[3,1,0],[0,1,2]];return this.rgba(u[a[s][0]]*255,u[a[s][1]]*255,u[a[s][2]]*255,i)},hue:function(t){return new e.Dimension(Math.round(t.toHSL().h))},saturation:function(t){return new e.Dimension(Math.round(t.toHSL().s*100),"%")},lightness:function(t){return new e.Dimension(Math.round(t.toHSL().l*100),"%")},red:function(t){return new e.Dimension(t.rgb[0])},green:function(t){return new e.Dimension(t.rgb[1])},blue:function(t){return new e.Dimension(t.rgb[2])},alpha:function(t){return new e.Dimension(t.toHSL().a)},luma:function(t){return new e.Dimension(Math.round((.2126*(t.rgb[0]/255)+.7152*(t.rgb[1]/255)+.0722*(t.rgb[2]/255))*t.alpha*100),"%")},saturate:function(e,n){var r=e.toHSL();return r.s+=n.value/100,r.s=i(r.s),t(r)},desaturate:function(e,n){var r=e.toHSL();return r.s-=n.value/100,r.s=i(r.s),t(r)},lighten:function(e,n){var r=e.toHSL();return r.l+=n.value/100,r.l=i(r.l),t(r)},darken:function(e,n){var r=e.toHSL();return r.l-=n.value/100,r.l=i(r.l),t(r)},fadein:function(e,n){var r=e.toHSL();return r.a+=n.value/100,r.a=i(r.a),t(r)},fadeout:function(e,n){var r=e.toHSL();return r.a-=n.value/100,r.a=i(r.a),t(r)},fade:function(e,n){var r=e.toHSL();return r.a=n.value/100,r.a=i(r.a),t(r)},spin:function(e,n){var r=e.toHSL(),i=(r.h+n.value)%360;return r.h=i<0?360+i:i,t(r)},mix:function(t,n,r){r||(r=new e.Dimension(50));var i=r.value/100,s=i*2-1,o=t.toHSL().a-n.toHSL().a,u=((s*o==-1?s:(s+o)/(1+s*o))+1)/2,a=1-u,f=[t.rgb[0]*u+n.rgb[0]*a,t.rgb[1]*u+n.rgb[1]*a,t.rgb[2]*u+n.rgb[2]*a],l=t.alpha*i+n.alpha*(1-i);return new e.Color(f,l)},greyscale:function(t){return this.desaturate(t,new e.Dimension(100))},contrast:function(e,t,n,r){return e.rgb?(typeof n=="undefined"&&(n=this.rgba(255,255,255,1)),typeof t=="undefined"&&(t=this.rgba(0,0,0,1)),typeof r=="undefined"?r=.43:r=r.value,(.2126*(e.rgb[0]/255)+.7152*(e.rgb[1]/255)+.0722*(e.rgb[2]/255))*e.alpha255?255:e<0?0:e).toString(16),e.length===1?"0"+e:e}).join("")},operate:function(t,n){var r=[];n instanceof e.Color||(n=n.toColor());for(var i=0;i<3;i++)r[i]=e.operate(t,this.rgb[i],n.rgb[i]);return new e.Color(r,this.alpha+n.alpha)},toHSL:function(){var e=this.rgb[0]/255,t=this.rgb[1]/255,n=this.rgb[2]/255,r=this.alpha,i=Math.max(e,t,n),s=Math.min(e,t,n),o,u,a=(i+s)/2,f=i-s;if(i===s)o=u=0;else{u=a>.5?f/(2-i-s):f/(i+s);switch(i){case e:o=(t-n)/f+(t255?255:e<0?0:e).toString(16),e.length===1?"0"+e:e}).join("")},compare:function(e){return e.rgb?e.rgb[0]===this.rgb[0]&&e.rgb[1]===this.rgb[1]&&e.rgb[2]===this.rgb[2]&&e.alpha===this.alpha?0:-1:-1}}}(n("../tree")),function(e){e.Comment=function(e,t){this.value=e,this.silent=!!t},e.Comment.prototype={toCSS:function(e){return e.compress?"":this.value},eval:function(){return this}}}(n("../tree")),function(e){e.Condition=function(e,t,n,r,i){this.op=e.trim(),this.lvalue=t,this.rvalue=n,this.index=r,this.negate=i},e.Condition.prototype.eval=function(e){var t=this.lvalue.eval(e),n=this.rvalue.eval(e),r=this.index,i,i=function(e){switch(e){case"and":return t&&n;case"or":return t||n;default:if(t.compare)i=t.compare(n);else{if(!n.compare)throw{type:"Type",message:"Unable to perform comparison",index:r};i=n.compare(t)}switch(i){case-1:return e==="<"||e==="=<";case 0:return e==="="||e===">="||e==="=<";case 1:return e===">"||e===">="}}}(this.op);return this.negate?!i:i}}(n("../tree")),function(e){e.Dimension=function(e,t){this.value=parseFloat(e),this.unit=t||null},e.Dimension.prototype={eval:function(){return this},toColor:function(){return new e.Color([this.value,this.value,this.value])},toCSS:function(){var e=this.value+this.unit;return e},operate:function(t,n){return new e.Dimension(e.operate(t,this.value,n.value),this.unit||n.unit)},compare:function(t){return t instanceof e.Dimension?t.value>this.value?-1:t.value":e.compress?">":" > ","|":e.compress?"|":" | "}[this.value]}}(n("../tree")),function(e){e.Expression=function(e){this.value=e},e.Expression.prototype={eval:function(t){return this.value.length>1?new e.Expression(this.value.map(function(e){return e.eval(t)})):this.value.length===1?this.value[0].eval(t):this},toCSS:function(e){return this.value.map(function(t){return t.toCSS?t.toCSS(e):""}).join(" ")}}}(n("../tree")),function(e){e.Import=function(t,n,r,i,s,o){var u=this;this.once=i,this.index=s,this._path=t,this.features=r&&new e.Value(r),this.rootpath=o,t instanceof e.Quoted?this.path=/(\.[a-z]*$)|([\?;].*)$/.test(t.value)?t.value:t.value+".less":this.path=t.value.value||t.value,this.css=/css([\?;].*)?$/.test(this.path),this.css||n.push(this.path,function(t,n,r){t&&(t.index=s),r&&u.once&&(u.skip=r),u.root=n||new e.Ruleset([],[])})},e.Import.prototype={toCSS:function(e){var t=this.features?" "+this.features.toCSS(e):"";return this.css?(typeof this._path.value=="string"&&!/^(?:[a-z-]+:|\/)/.test(this._path.value)&&(this._path.value=this.rootpath+this._path.value),"@import "+this._path.toCSS()+t+";\n"):""},eval:function(t){var n,r=this.features&&this.features.eval(t);return this.skip?[]:this.css?this:(n=new e.Ruleset([],this.root.rules.slice(0)),n.evalImports(t),this.features?new e.Media(n.rules,this.features.value):n.rules)}}}(n("../tree")),function(e){e.JavaScript=function(e,t,n){this.escaped=n,this.expression=e,this.index=t},e.JavaScript.prototype={eval:function(t){var n,r=this,i={},s=this.expression.replace(/@\{([\w-]+)\}/g,function(n,i){return e.jsify((new e.Variable("@"+i,r.index)).eval(t))});try{s=new Function("return ("+s+")")}catch(o){throw{message:"JavaScript evaluation error: `"+s+"`",index:this.index}}for(var u in t.frames[0].variables())i[u.slice(1)]={value:t.frames[0].variables()[u].value,toJS:function(){return this.value.eval(t).toCSS()}};try{n=s.call(i)}catch(o){throw{message:"JavaScript evaluation error: '"+o.name+": "+o.message+"'",index:this.index}}return typeof n=="string"?new e.Quoted('"'+n+'"',n,this.escaped,this.index):Array.isArray(n)?new e.Anonymous(n.join(", ")):new e.Anonymous(n)}}}(n("../tree")),function(e){e.Keyword=function(e){this.value=e},e.Keyword.prototype={eval:function(){return this},toCSS:function(){return this.value},compare:function(t){return t instanceof e.Keyword?t.value===this.value?0:1:-1}},e.True=new e.Keyword("true"),e.False=new e.Keyword("false")}(n("../tree")),function(e){e.Media=function(t,n){var r=this.emptySelectors();this.features=new e.Value(n),this.ruleset=new e.Ruleset(r,t),this.ruleset.allowImports=!0},e.Media.prototype={toCSS:function(e,t){var n=this.features.toCSS(t);return this.ruleset.root=e.length===0||e[0].multiMedia,"@media "+n+(t.compress?"{":" {\n ")+this.ruleset.toCSS(e,t).trim().replace(/\n/g,"\n ")+(t.compress?"}":"\n}\n")},eval:function(t){t.mediaBlocks||(t.mediaBlocks=[],t.mediaPath=[]);var n=new e.Media([],[]);return this.debugInfo&&(this.ruleset.debugInfo=this.debugInfo,n.debugInfo=this.debugInfo),n.features=this.features.eval(t),t.mediaPath.push(n),t.mediaBlocks.push(n),t.frames.unshift(this.ruleset),n.ruleset=this.ruleset.eval(t),t.frames.shift(),t.mediaPath.pop(),t.mediaPath.length===0?n.evalTop(t):n.evalNested(t)},variable:function(t){return e.Ruleset.prototype.variable.call(this.ruleset,t)},find:function(){return e.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return e.Ruleset.prototype.rulesets.apply(this.ruleset)},emptySelectors:function(){var t=new e.Element("","&",0);return[new e.Selector([t])]},evalTop:function(t){var n=this;if(t.mediaBlocks.length>1){var r=this.emptySelectors();n=new e.Ruleset(r,t.mediaBlocks),n.multiMedia=!0}return delete t.mediaBlocks,delete t.mediaPath,n},evalNested:function(t){var n,r,i=t.mediaPath.concat([this]);for(n=0;n0;n--)t.splice(n,0,new e.Anonymous("and"));return new e.Expression(t)})),new e.Ruleset([],[])},permute:function(e){if(e.length===0)return[];if(e.length===1)return e[0];var t=[],n=this.permute(e.slice(1));for(var r=0;r0){c=!0;for(a=0;athis.params.length)return!1;if(this.required>0&&n>this.params.length)return!1}r=Math.min(n,this.arity);for(var s=0;si.selectors[o].elements.length?Array.prototype.push.apply(r,i.find(new e.Selector(t.elements.slice(1)),n)):r.push(i);break}}),this._lookups[o]=r)},toCSS:function(t,n){var r=[],i=[],s=[],o=[],u=[],a,f,l;this.root||this.joinSelectors(u,t,this.selectors);for(var c=0;c0){f=e.debugInfo(n,this),a=u.map(function(e){return e.map(function(e){return e.toCSS(n)}).join("").trim()}).join(n.compress?",":",\n");for(var c=i.length-1;c>=0;c--)s.indexOf(i[c])===-1&&s.unshift(i[c]);i=s,r.push(f+a+(n.compress?"{":" {\n ")+i.join(n.compress?"":"\n ")+(n.compress?"}":"\n}\n"))}return r.push(o),r.join("")+(n.compress?"\n":"")},joinSelectors:function(e,t,n){for(var r=0;r0)for(i=0;i0&&this.mergeElementsOnToSelectors(g,a);for(s=0;s0&&(l[0].elements=l[0].elements.slice(0),l[0].elements.push(new e.Element(f.combinator,"",0))),y.push(l);else for(o=0;o0?(h=l.slice(0),m=h.pop(),d=new e.Selector(m.elements.slice(0)),v=!1):d=new e.Selector([]),c.length>1&&(p=p.concat(c.slice(1))),c.length>0&&(v=!1,d.elements.push(new e.Element(f.combinator,c[0].elements[0].value,0)),d.elements=d.elements.concat(c[0].elements.slice(1))),v||h.push(d),h=h.concat(p),y.push(h)}a=y,g=[]}}g.length>0&&this.mergeElementsOnToSelectors(g,a);for(i=0;i0?i[i.length-1]=new e.Selector(i[i.length-1].elements.concat(t)):i.push(new e.Selector(t))}}}(n("../tree")),function(e){e.Selector=function(e){this.elements=e},e.Selector.prototype.match=function(e){var t=this.elements,n=t.length,r,i,s,o;r=e.elements.slice(e.elements.length&&e.elements[0].value==="&"?1:0),i=r.length,s=Math.min(n,i);if(i===0||n1?"["+e.value.map(function(e){return e.toCSS(!1)}).join(", ")+"]":e.toCSS(!1)}}(n("./tree"));var o=/^(file|chrome(-extension)?|resource|qrc|app):/.test(location.protocol);r.env=r.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||o?"development":"production"),r.async=r.async||!1,r.fileAsync=r.fileAsync||!1,r.poll=r.poll||(o?1e3:1500);if(r.functions)for(var u in r.functions)r.tree.functions[u]=r.functions[u];var a=/!dumpLineNumbers:(comments|mediaquery|all)/.exec(location.hash);a&&(r.dumpLineNumbers=a[1]),r.watch=function(){return r.watchMode||(r.env="development",f()),this.watchMode=!0},r.unwatch=function(){return clearInterval(r.watchTimer),this.watchMode=!1},/!watch/.test(location.hash)&&r.watch();var l=null;if(r.env!="development")try{l=typeof e.localStorage=="undefined"?null:e.localStorage}catch(c){}var h=document.getElementsByTagName("link"),p=/^text\/(x-)?less$/;r.sheets=[];for(var d=0;d li > a{ + padding: 10px 9px; + } +} + + +/*! + * Default + */ +@media (min-width: 768px) and (max-width: 979px) { + .hidden-desktop { + display: inherit !important; + } + .visible-desktop { + display: none !important ; + } + .visible-tablet { + display: inherit !important; + } + .hidden-tablet { + display: none !important; + } +} + +@media (max-width: 767px) { + .hidden-desktop { + display: inherit !important; + } + .visible-desktop { + display: none !important; + } + .visible-phone { + display: inherit !important; + } + .hidden-phone { + display: none !important; + } +} + +.visible-print { + display: none !important; +} + +@media print { + .visible-print { + display: inherit !important; + } + .hidden-print { + display: none !important; + } +} + +@media (min-width: 1200px) { + .row { + margin-left: -30px; + *zoom: 1; + } + .row:before, + .row:after { + display: table; + line-height: 0; + content: ""; + } + .row:after { + clear: both; + } + [class*="span"] { + float: left; + min-height: 1px; + margin-left: 30px; + } + .container, + .navbar-static-top .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { + width: 1170px; + } + .span12 { + width: 1170px; + } + .span11 { + width: 1070px; + } + .span10 { + width: 970px; + } + .span9 { + width: 870px; + } + .span8 { + width: 770px; + } + .span7 { + width: 670px; + } + .span6 { + width: 570px; + } + .span5 { + width: 470px; + } + .span4 { + width: 370px; + } + .span3 { + width: 270px; + } + .span2 { + width: 170px; + } + .span1 { + width: 70px; + } + .offset12 { + margin-left: 1230px; + } + .offset11 { + margin-left: 1130px; + } + .offset10 { + margin-left: 1030px; + } + .offset9 { + margin-left: 930px; + } + .offset8 { + margin-left: 830px; + } + .offset7 { + margin-left: 730px; + } + .offset6 { + margin-left: 630px; + } + .offset5 { + margin-left: 530px; + } + .offset4 { + margin-left: 430px; + } + .offset3 { + margin-left: 330px; + } + .offset2 { + margin-left: 230px; + } + .offset1 { + margin-left: 130px; + } + .row-fluid { + width: 100%; + *zoom: 1; + } + .row-fluid:before, + .row-fluid:after { + display: table; + line-height: 0; + content: ""; + } + .row-fluid:after { + clear: both; + } + .row-fluid [class*="span"] { + display: block; + float: left; + width: 100%; + min-height: 30px; + margin-left: 2.564102564102564%; + *margin-left: 2.5109110747408616%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .row-fluid [class*="span"]:first-child { + margin-left: 0; + } + .row-fluid .controls-row [class*="span"] + [class*="span"] { + margin-left: 2.564102564102564%; + } + .row-fluid .span12 { + width: 100%; + *width: 99.94680851063829%; + } + .row-fluid .span11 { + width: 91.45299145299145%; + *width: 91.39979996362975%; + } + .row-fluid .span10 { + width: 82.90598290598291%; + *width: 82.8527914166212%; + } + .row-fluid .span9 { + width: 74.35897435897436%; + *width: 74.30578286961266%; + } + .row-fluid .span8 { + width: 65.81196581196582%; + *width: 65.75877432260411%; + } + .row-fluid .span7 { + width: 57.26495726495726%; + *width: 57.21176577559556%; + } + .row-fluid .span6 { + width: 48.717948717948715%; + *width: 48.664757228587014%; + } + .row-fluid .span5 { + width: 40.17094017094017%; + *width: 40.11774868157847%; + } + .row-fluid .span4 { + width: 31.623931623931625%; + *width: 31.570740134569924%; + } + .row-fluid .span3 { + width: 23.076923076923077%; + *width: 23.023731587561375%; + } + .row-fluid .span2 { + width: 14.52991452991453%; + *width: 14.476723040552828%; + } + .row-fluid .span1 { + width: 5.982905982905983%; + *width: 5.929714493544281%; + } + .row-fluid .offset12 { + margin-left: 105.12820512820512%; + *margin-left: 105.02182214948171%; + } + .row-fluid .offset12:first-child { + margin-left: 102.56410256410257%; + *margin-left: 102.45771958537915%; + } + .row-fluid .offset11 { + margin-left: 96.58119658119658%; + *margin-left: 96.47481360247316%; + } + .row-fluid .offset11:first-child { + margin-left: 94.01709401709402%; + *margin-left: 93.91071103837061%; + } + .row-fluid .offset10 { + margin-left: 88.03418803418803%; + *margin-left: 87.92780505546462%; + } + .row-fluid .offset10:first-child { + margin-left: 85.47008547008548%; + *margin-left: 85.36370249136206%; + } + .row-fluid .offset9 { + margin-left: 79.48717948717949%; + *margin-left: 79.38079650845607%; + } + .row-fluid .offset9:first-child { + margin-left: 76.92307692307693%; + *margin-left: 76.81669394435352%; + } + .row-fluid .offset8 { + margin-left: 70.94017094017094%; + *margin-left: 70.83378796144753%; + } + .row-fluid .offset8:first-child { + margin-left: 68.37606837606839%; + *margin-left: 68.26968539734497%; + } + .row-fluid .offset7 { + margin-left: 62.393162393162385%; + *margin-left: 62.28677941443899%; + } + .row-fluid .offset7:first-child { + margin-left: 59.82905982905982%; + *margin-left: 59.72267685033642%; + } + .row-fluid .offset6 { + margin-left: 53.84615384615384%; + *margin-left: 53.739770867430444%; + } + .row-fluid .offset6:first-child { + margin-left: 51.28205128205128%; + *margin-left: 51.175668303327875%; + } + .row-fluid .offset5 { + margin-left: 45.299145299145295%; + *margin-left: 45.1927623204219%; + } + .row-fluid .offset5:first-child { + margin-left: 42.73504273504273%; + *margin-left: 42.62865975631933%; + } + .row-fluid .offset4 { + margin-left: 36.75213675213675%; + *margin-left: 36.645753773413354%; + } + .row-fluid .offset4:first-child { + margin-left: 34.18803418803419%; + *margin-left: 34.081651209310785%; + } + .row-fluid .offset3 { + margin-left: 28.205128205128204%; + *margin-left: 28.0987452264048%; + } + .row-fluid .offset3:first-child { + margin-left: 25.641025641025642%; + *margin-left: 25.53464266230224%; + } + .row-fluid .offset2 { + margin-left: 19.65811965811966%; + *margin-left: 19.551736679396257%; + } + .row-fluid .offset2:first-child { + margin-left: 17.094017094017094%; + *margin-left: 16.98763411529369%; + } + .row-fluid .offset1 { + margin-left: 11.11111111111111%; + *margin-left: 11.004728132387708%; + } + .row-fluid .offset1:first-child { + margin-left: 8.547008547008547%; + *margin-left: 8.440625568285142%; + } + input, + textarea, + .uneditable-input { + margin-left: 0; + } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 30px; + } + input.span12, + textarea.span12, + .uneditable-input.span12 { + width: 1156px; + } + input.span11, + textarea.span11, + .uneditable-input.span11 { + width: 1056px; + } + input.span10, + textarea.span10, + .uneditable-input.span10 { + width: 956px; + } + input.span9, + textarea.span9, + .uneditable-input.span9 { + width: 856px; + } + input.span8, + textarea.span8, + .uneditable-input.span8 { + width: 756px; + } + input.span7, + textarea.span7, + .uneditable-input.span7 { + width: 656px; + } + input.span6, + textarea.span6, + .uneditable-input.span6 { + width: 556px; + } + input.span5, + textarea.span5, + .uneditable-input.span5 { + width: 456px; + } + input.span4, + textarea.span4, + .uneditable-input.span4 { + width: 356px; + } + input.span3, + textarea.span3, + .uneditable-input.span3 { + width: 256px; + } + input.span2, + textarea.span2, + .uneditable-input.span2 { + width: 156px; + } + input.span1, + textarea.span1, + .uneditable-input.span1 { + width: 56px; + } + .thumbnails { + margin-left: -30px; + } + .thumbnails > li { + margin-left: 30px; + } + .row-fluid .thumbnails { + margin-left: 0; + } +} + +@media (min-width: 768px) and (max-width: 979px) { + .row { + margin-left: -20px; + *zoom: 1; + } + .row:before, + .row:after { + display: table; + line-height: 0; + content: ""; + } + .row:after { + clear: both; + } + [class*="span"] { + float: left; + min-height: 1px; + margin-left: 20px; + } + .container, + .navbar-static-top .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { + width: 724px; + } + .span12 { + width: 724px; + } + .span11 { + width: 662px; + } + .span10 { + width: 600px; + } + .span9 { + width: 538px; + } + .span8 { + width: 476px; + } + .span7 { + width: 414px; + } + .span6 { + width: 352px; + } + .span5 { + width: 290px; + } + .span4 { + width: 228px; + } + .span3 { + width: 166px; + } + .span2 { + width: 104px; + } + .span1 { + width: 42px; + } + .offset12 { + margin-left: 764px; + } + .offset11 { + margin-left: 702px; + } + .offset10 { + margin-left: 640px; + } + .offset9 { + margin-left: 578px; + } + .offset8 { + margin-left: 516px; + } + .offset7 { + margin-left: 454px; + } + .offset6 { + margin-left: 392px; + } + .offset5 { + margin-left: 330px; + } + .offset4 { + margin-left: 268px; + } + .offset3 { + margin-left: 206px; + } + .offset2 { + margin-left: 144px; + } + .offset1 { + margin-left: 82px; + } + .row-fluid { + width: 100%; + *zoom: 1; + } + .row-fluid:before, + .row-fluid:after { + display: table; + line-height: 0; + content: ""; + } + .row-fluid:after { + clear: both; + } + .row-fluid [class*="span"] { + display: block; + float: left; + width: 100%; + min-height: 30px; + margin-left: 2.7624309392265194%; + *margin-left: 2.709239449864817%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .row-fluid [class*="span"]:first-child { + margin-left: 0; + } + .row-fluid .controls-row [class*="span"] + [class*="span"] { + margin-left: 2.7624309392265194%; + } + .row-fluid .span12 { + width: 100%; + *width: 99.94680851063829%; + } + .row-fluid .span11 { + width: 91.43646408839778%; + *width: 91.38327259903608%; + } + .row-fluid .span10 { + width: 82.87292817679558%; + *width: 82.81973668743387%; + } + .row-fluid .span9 { + width: 74.30939226519337%; + *width: 74.25620077583166%; + } + .row-fluid .span8 { + width: 65.74585635359117%; + *width: 65.69266486422946%; + } + .row-fluid .span7 { + width: 57.18232044198895%; + *width: 57.12912895262725%; + } + .row-fluid .span6 { + width: 48.61878453038674%; + *width: 48.56559304102504%; + } + .row-fluid .span5 { + width: 40.05524861878453%; + *width: 40.00205712942283%; + } + .row-fluid .span4 { + width: 31.491712707182323%; + *width: 31.43852121782062%; + } + .row-fluid .span3 { + width: 22.92817679558011%; + *width: 22.87498530621841%; + } + .row-fluid .span2 { + width: 14.3646408839779%; + *width: 14.311449394616199%; + } + .row-fluid .span1 { + width: 5.801104972375691%; + *width: 5.747913483013988%; + } + .row-fluid .offset12 { + margin-left: 105.52486187845304%; + *margin-left: 105.41847889972962%; + } + .row-fluid .offset12:first-child { + margin-left: 102.76243093922652%; + *margin-left: 102.6560479605031%; + } + .row-fluid .offset11 { + margin-left: 96.96132596685082%; + *margin-left: 96.8549429881274%; + } + .row-fluid .offset11:first-child { + margin-left: 94.1988950276243%; + *margin-left: 94.09251204890089%; + } + .row-fluid .offset10 { + margin-left: 88.39779005524862%; + *margin-left: 88.2914070765252%; + } + .row-fluid .offset10:first-child { + margin-left: 85.6353591160221%; + *margin-left: 85.52897613729868%; + } + .row-fluid .offset9 { + margin-left: 79.8342541436464%; + *margin-left: 79.72787116492299%; + } + .row-fluid .offset9:first-child { + margin-left: 77.07182320441989%; + *margin-left: 76.96544022569647%; + } + .row-fluid .offset8 { + margin-left: 71.2707182320442%; + *margin-left: 71.16433525332079%; + } + .row-fluid .offset8:first-child { + margin-left: 68.50828729281768%; + *margin-left: 68.40190431409427%; + } + .row-fluid .offset7 { + margin-left: 62.70718232044199%; + *margin-left: 62.600799341718584%; + } + .row-fluid .offset7:first-child { + margin-left: 59.94475138121547%; + *margin-left: 59.838368402492065%; + } + .row-fluid .offset6 { + margin-left: 54.14364640883978%; + *margin-left: 54.037263430116376%; + } + .row-fluid .offset6:first-child { + margin-left: 51.38121546961326%; + *margin-left: 51.27483249088986%; + } + .row-fluid .offset5 { + margin-left: 45.58011049723757%; + *margin-left: 45.47372751851417%; + } + .row-fluid .offset5:first-child { + margin-left: 42.81767955801105%; + *margin-left: 42.71129657928765%; + } + .row-fluid .offset4 { + margin-left: 37.01657458563536%; + *margin-left: 36.91019160691196%; + } + .row-fluid .offset4:first-child { + margin-left: 34.25414364640884%; + *margin-left: 34.14776066768544%; + } + .row-fluid .offset3 { + margin-left: 28.45303867403315%; + *margin-left: 28.346655695309746%; + } + .row-fluid .offset3:first-child { + margin-left: 25.69060773480663%; + *margin-left: 25.584224756083227%; + } + .row-fluid .offset2 { + margin-left: 19.88950276243094%; + *margin-left: 19.783119783707537%; + } + .row-fluid .offset2:first-child { + margin-left: 17.12707182320442%; + *margin-left: 17.02068884448102%; + } + .row-fluid .offset1 { + margin-left: 11.32596685082873%; + *margin-left: 11.219583872105325%; + } + .row-fluid .offset1:first-child { + margin-left: 8.56353591160221%; + *margin-left: 8.457152932878806%; + } + input, + textarea, + .uneditable-input { + margin-left: 0; + } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 20px; + } + input.span12, + textarea.span12, + .uneditable-input.span12 { + width: 710px; + } + input.span11, + textarea.span11, + .uneditable-input.span11 { + width: 648px; + } + input.span10, + textarea.span10, + .uneditable-input.span10 { + width: 586px; + } + input.span9, + textarea.span9, + .uneditable-input.span9 { + width: 524px; + } + input.span8, + textarea.span8, + .uneditable-input.span8 { + width: 462px; + } + input.span7, + textarea.span7, + .uneditable-input.span7 { + width: 400px; + } + input.span6, + textarea.span6, + .uneditable-input.span6 { + width: 338px; + } + input.span5, + textarea.span5, + .uneditable-input.span5 { + width: 276px; + } + input.span4, + textarea.span4, + .uneditable-input.span4 { + width: 214px; + } + input.span3, + textarea.span3, + .uneditable-input.span3 { + width: 152px; + } + input.span2, + textarea.span2, + .uneditable-input.span2 { + width: 90px; + } + input.span1, + textarea.span1, + .uneditable-input.span1 { + width: 28px; + } +} + +@media (max-width: 767px) { + body { + padding-right: 20px; + padding-left: 20px; + } + .navbar-fixed-top, + .navbar-fixed-bottom, + .navbar-static-top { + margin-right: -20px; + margin-left: -20px; + } + .container-fluid { + padding: 0; + } + .dl-horizontal dt { + float: none; + width: auto; + clear: none; + text-align: left; + } + .dl-horizontal dd { + margin-left: 0; + } + .container { + width: auto; + } + .row-fluid { + width: 100%; + } + .row, + .thumbnails { + margin-left: 0; + } + .thumbnails > li { + float: none; + margin-left: 0; + } + [class*="span"], + .uneditable-input[class*="span"], + .row-fluid [class*="span"] { + display: block; + float: none; + width: 100%; + margin-left: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .span12, + .row-fluid .span12 { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .row-fluid [class*="offset"]:first-child { + margin-left: 0; + } + .input-large, + .input-xlarge, + .input-xxlarge, + input[class*="span"], + select[class*="span"], + textarea[class*="span"], + .uneditable-input { + display: block; + width: 100%; + min-height: 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .input-prepend input, + .input-append input, + .input-prepend input[class*="span"], + .input-append input[class*="span"] { + display: inline-block; + width: auto; + } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 0; + } + .modal { + position: fixed; + top: 20px; + right: 20px; + left: 20px; + width: auto; + margin: 0; + } + .modal.fade { + top: -100px; + } + .modal.fade.in { + top: 20px; + } +} + +@media (max-width: 480px) { + .nav-collapse { + -webkit-transform: translate3d(0, 0, 0); + } + .page-header h1 small { + display: block; + line-height: 20px; + } + input[type="checkbox"], + input[type="radio"] { + border: 1px solid #ccc; + } + .form-horizontal .control-label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + .form-horizontal .controls { + margin-left: 0; + } + .form-horizontal .control-list { + padding-top: 0; + } + .form-horizontal .form-actions { + padding-right: 10px; + padding-left: 10px; + } + .media .pull-left, + .media .pull-right { + display: block; + float: none; + margin-bottom: 10px; + } + .media-object { + margin-right: 0; + margin-left: 0; + } + .modal { + top: 10px; + right: 10px; + left: 10px; + } + .modal-header .close { + padding: 10px; + margin: -10px; + } + .carousel-caption { + position: static; + } +} + +@media (max-width: 979px) { + body { + padding-top: 0; + } + .navbar-fixed-top, + .navbar-fixed-bottom { + position: static; + } + .navbar-fixed-top { + margin-bottom: 20px; + } + .navbar-fixed-bottom { + margin-top: 20px; + } + .navbar-fixed-top .navbar-inner, + .navbar-fixed-bottom .navbar-inner { + padding: 5px; + } + .navbar .container { + width: auto; + padding: 0; + } + .navbar .brand { + padding-right: 10px; + padding-left: 10px; + margin: 0 0 0 -5px; + } + .nav-collapse { + clear: both; + } + .nav-collapse .nav { + float: none; + margin: 0 0 10px; + } + .nav-collapse .nav > li { + float: none; + } + .nav-collapse .nav > li > a { + margin-bottom: 2px; + } + .nav-collapse .nav > .divider-vertical { + display: none; + } + .nav-collapse .nav .nav-header { + color: #777777; + text-shadow: none; + } + .nav-collapse .nav > li > a, + .nav-collapse .dropdown-menu a { + padding: 9px 15px; + font-weight: bold; + color: #777777; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + } + .nav-collapse .btn { + padding: 4px 10px 4px; + font-weight: normal; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + } + .nav-collapse .dropdown-menu li + li a { + margin-bottom: 2px; + } + .nav-collapse .nav > li > a:hover, + .nav-collapse .nav > li > a:focus, + .nav-collapse .dropdown-menu a:hover, + .nav-collapse .dropdown-menu a:focus { + background-color: #f2f2f2; + } + .navbar-inverse .nav-collapse .nav > li > a, + .navbar-inverse .nav-collapse .dropdown-menu a { + color: #999999; + } + .navbar-inverse .nav-collapse .nav > li > a:hover, + .navbar-inverse .nav-collapse .nav > li > a:focus, + .navbar-inverse .nav-collapse .dropdown-menu a:hover, + .navbar-inverse .nav-collapse .dropdown-menu a:focus { + background-color: #111111; + } + .nav-collapse.in .btn-group { + padding: 0; + margin-top: 5px; + } + .nav-collapse .dropdown-menu { + position: static; + top: auto; + left: auto; + display: none; + float: none; + max-width: none; + padding: 0; + margin: 0 15px; + background-color: transparent; + border: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } + .nav-collapse .open > .dropdown-menu { + display: block; + } + .nav-collapse .dropdown-menu:before, + .nav-collapse .dropdown-menu:after { + display: none; + } + .nav-collapse .dropdown-menu .divider { + display: none; + } + .nav-collapse .nav > li > .dropdown-menu:before, + .nav-collapse .nav > li > .dropdown-menu:after { + display: none; + } + .nav-collapse .navbar-form, + .nav-collapse .navbar-search { + float: none; + padding: 10px 15px; + margin: 10px 0; + border-top: 1px solid #f2f2f2; + border-bottom: 1px solid #f2f2f2; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + } + .navbar-inverse .nav-collapse .navbar-form, + .navbar-inverse .nav-collapse .navbar-search { + border-top-color: #111111; + border-bottom-color: #111111; + } + .navbar .nav-collapse .nav.pull-right { + float: none; + margin-left: 0; + } + .nav-collapse, + .nav-collapse.collapse { + height: 0; + overflow: hidden; + } + .navbar .btn-navbar { + display: block; + } + .navbar-static .navbar-inner { + padding-right: 10px; + padding-left: 10px; + } +} + +@media (min-width: 980px) { + .nav-collapse.collapse { + height: auto !important; + overflow: visible !important; + } +} diff --git a/cnDocs/assets/css/bootstrap.css b/cnDocs/assets/css/bootstrap.css new file mode 100644 index 000000000000..bb38f1db6ed1 --- /dev/null +++ b/cnDocs/assets/css/bootstrap.css @@ -0,0 +1,6166 @@ +/*! + * Bootstrap v2.3.0 + * + * Copyright 2012 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ + +.clearfix { + *zoom: 1; +} + +.clearfix:before, +.clearfix:after { + display: table; + line-height: 0; + content: ""; +} + +.clearfix:after { + clear: both; +} + +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.input-block-level { + display: block; + width: 100%; + min-height: 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { + display: block; +} + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +audio:not([controls]) { + display: none; +} + +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +a:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +a:hover, +a:active { + outline: 0; +} + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + /* Responsive images (ensure images don't scale beyond their parents) */ + + max-width: 100%; + /* Part 1: Set a maxium relative to the parent */ + + width: auto\9; + /* IE7-8 need help adjusting responsive images */ + + height: auto; + /* Part 2: Scale the height according to the width, otherwise you get stretching */ + + vertical-align: middle; + border: 0; + -ms-interpolation-mode: bicubic; +} + +#map_canvas img, +.google-maps img { + max-width: none; +} + +button, +input, +select, +textarea { + margin: 0; + font-size: 100%; + vertical-align: middle; +} + +button, +input { + *overflow: visible; + line-height: normal; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + padding: 0; + border: 0; +} + +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} + +label, +select, +button, +input[type="button"], +input[type="reset"], +input[type="submit"], +input[type="radio"], +input[type="checkbox"] { + cursor: pointer; +} + +input[type="search"] { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + -webkit-appearance: textfield; +} + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +textarea { + overflow: auto; + vertical-align: top; +} + +@media print { + * { + color: #000 !important; + text-shadow: none !important; + background: transparent !important; + box-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + img { + max-width: 100% !important; + } + @page { + margin: 0.5cm; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } +} + +body { + margin: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 20px; + color: #333333; + background-color: #ffffff; +} + +a { + color: #0088cc; + text-decoration: none; +} + +a:hover, +a:focus { + color: #005580; + text-decoration: underline; +} + +.img-rounded { + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.img-polaroid { + padding: 4px; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.img-circle { + -webkit-border-radius: 500px; + -moz-border-radius: 500px; + border-radius: 500px; +} + +.row { + margin-left: -20px; + *zoom: 1; +} + +.row:before, +.row:after { + display: table; + line-height: 0; + content: ""; +} + +.row:after { + clear: both; +} + +[class*="span"] { + float: left; + min-height: 1px; + margin-left: 20px; +} + +.container, +.navbar-static-top .container, +.navbar-fixed-top .container, +.navbar-fixed-bottom .container { + width: 940px; +} + +.span12 { + width: 940px; +} + +.span11 { + width: 860px; +} + +.span10 { + width: 780px; +} + +.span9 { + width: 700px; +} + +.span8 { + width: 620px; +} + +.span7 { + width: 540px; +} + +.span6 { + width: 460px; +} + +.span5 { + width: 380px; +} + +.span4 { + width: 300px; +} + +.span3 { + width: 220px; +} + +.span2 { + width: 140px; +} + +.span1 { + width: 60px; +} + +.offset12 { + margin-left: 980px; +} + +.offset11 { + margin-left: 900px; +} + +.offset10 { + margin-left: 820px; +} + +.offset9 { + margin-left: 740px; +} + +.offset8 { + margin-left: 660px; +} + +.offset7 { + margin-left: 580px; +} + +.offset6 { + margin-left: 500px; +} + +.offset5 { + margin-left: 420px; +} + +.offset4 { + margin-left: 340px; +} + +.offset3 { + margin-left: 260px; +} + +.offset2 { + margin-left: 180px; +} + +.offset1 { + margin-left: 100px; +} + +.row-fluid { + width: 100%; + *zoom: 1; +} + +.row-fluid:before, +.row-fluid:after { + display: table; + line-height: 0; + content: ""; +} + +.row-fluid:after { + clear: both; +} + +.row-fluid [class*="span"] { + display: block; + float: left; + width: 100%; + min-height: 30px; + margin-left: 2.127659574468085%; + *margin-left: 2.074468085106383%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.row-fluid [class*="span"]:first-child { + margin-left: 0; +} + +.row-fluid .controls-row [class*="span"] + [class*="span"] { + margin-left: 2.127659574468085%; +} + +.row-fluid .span12 { + width: 100%; + *width: 99.94680851063829%; +} + +.row-fluid .span11 { + width: 91.48936170212765%; + *width: 91.43617021276594%; +} + +.row-fluid .span10 { + width: 82.97872340425532%; + *width: 82.92553191489361%; +} + +.row-fluid .span9 { + width: 74.46808510638297%; + *width: 74.41489361702126%; +} + +.row-fluid .span8 { + width: 65.95744680851064%; + *width: 65.90425531914893%; +} + +.row-fluid .span7 { + width: 57.44680851063829%; + *width: 57.39361702127659%; +} + +.row-fluid .span6 { + width: 48.93617021276595%; + *width: 48.88297872340425%; +} + +.row-fluid .span5 { + width: 40.42553191489362%; + *width: 40.37234042553192%; +} + +.row-fluid .span4 { + width: 31.914893617021278%; + *width: 31.861702127659576%; +} + +.row-fluid .span3 { + width: 23.404255319148934%; + *width: 23.351063829787233%; +} + +.row-fluid .span2 { + width: 14.893617021276595%; + *width: 14.840425531914894%; +} + +.row-fluid .span1 { + width: 6.382978723404255%; + *width: 6.329787234042553%; +} + +.row-fluid .offset12 { + margin-left: 104.25531914893617%; + *margin-left: 104.14893617021275%; +} + +.row-fluid .offset12:first-child { + margin-left: 102.12765957446808%; + *margin-left: 102.02127659574467%; +} + +.row-fluid .offset11 { + margin-left: 95.74468085106382%; + *margin-left: 95.6382978723404%; +} + +.row-fluid .offset11:first-child { + margin-left: 93.61702127659574%; + *margin-left: 93.51063829787232%; +} + +.row-fluid .offset10 { + margin-left: 87.23404255319149%; + *margin-left: 87.12765957446807%; +} + +.row-fluid .offset10:first-child { + margin-left: 85.1063829787234%; + *margin-left: 84.99999999999999%; +} + +.row-fluid .offset9 { + margin-left: 78.72340425531914%; + *margin-left: 78.61702127659572%; +} + +.row-fluid .offset9:first-child { + margin-left: 76.59574468085106%; + *margin-left: 76.48936170212764%; +} + +.row-fluid .offset8 { + margin-left: 70.2127659574468%; + *margin-left: 70.10638297872339%; +} + +.row-fluid .offset8:first-child { + margin-left: 68.08510638297872%; + *margin-left: 67.9787234042553%; +} + +.row-fluid .offset7 { + margin-left: 61.70212765957446%; + *margin-left: 61.59574468085106%; +} + +.row-fluid .offset7:first-child { + margin-left: 59.574468085106375%; + *margin-left: 59.46808510638297%; +} + +.row-fluid .offset6 { + margin-left: 53.191489361702125%; + *margin-left: 53.085106382978715%; +} + +.row-fluid .offset6:first-child { + margin-left: 51.063829787234035%; + *margin-left: 50.95744680851063%; +} + +.row-fluid .offset5 { + margin-left: 44.68085106382979%; + *margin-left: 44.57446808510638%; +} + +.row-fluid .offset5:first-child { + margin-left: 42.5531914893617%; + *margin-left: 42.4468085106383%; +} + +.row-fluid .offset4 { + margin-left: 36.170212765957444%; + *margin-left: 36.06382978723405%; +} + +.row-fluid .offset4:first-child { + margin-left: 34.04255319148936%; + *margin-left: 33.93617021276596%; +} + +.row-fluid .offset3 { + margin-left: 27.659574468085104%; + *margin-left: 27.5531914893617%; +} + +.row-fluid .offset3:first-child { + margin-left: 25.53191489361702%; + *margin-left: 25.425531914893618%; +} + +.row-fluid .offset2 { + margin-left: 19.148936170212764%; + *margin-left: 19.04255319148936%; +} + +.row-fluid .offset2:first-child { + margin-left: 17.02127659574468%; + *margin-left: 16.914893617021278%; +} + +.row-fluid .offset1 { + margin-left: 10.638297872340425%; + *margin-left: 10.53191489361702%; +} + +.row-fluid .offset1:first-child { + margin-left: 8.51063829787234%; + *margin-left: 8.404255319148938%; +} + +[class*="span"].hide, +.row-fluid [class*="span"].hide { + display: none; +} + +[class*="span"].pull-right, +.row-fluid [class*="span"].pull-right { + float: right; +} + +.container { + margin-right: auto; + margin-left: auto; + *zoom: 1; +} + +.container:before, +.container:after { + display: table; + line-height: 0; + content: ""; +} + +.container:after { + clear: both; +} + +.container-fluid { + padding-right: 20px; + padding-left: 20px; + *zoom: 1; +} + +.container-fluid:before, +.container-fluid:after { + display: table; + line-height: 0; + content: ""; +} + +.container-fluid:after { + clear: both; +} + +p { + margin: 0 0 10px; +} + +.lead { + margin-bottom: 20px; + font-size: 21px; + font-weight: 200; + line-height: 30px; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +em { + font-style: italic; +} + +cite { + font-style: normal; +} + +.muted { + color: #999999; +} + +a.muted:hover, +a.muted:focus { + color: #808080; +} + +.text-warning { + color: #c09853; +} + +a.text-warning:hover, +a.text-warning:focus { + color: #a47e3c; +} + +.text-error { + color: #b94a48; +} + +a.text-error:hover, +a.text-error:focus { + color: #953b39; +} + +.text-info { + color: #3a87ad; +} + +a.text-info:hover, +a.text-info:focus { + color: #2d6987; +} + +.text-success { + color: #468847; +} + +a.text-success:hover, +a.text-success:focus { + color: #356635; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-center { + text-align: center; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 10px 0; + font-family: inherit; + font-weight: bold; + line-height: 20px; + color: inherit; + text-rendering: optimizelegibility; +} + +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + font-weight: normal; + line-height: 1; + color: #999999; +} + +h1, +h2, +h3 { + line-height: 40px; +} + +h1 { + font-size: 38.5px; +} + +h2 { + font-size: 31.5px; +} + +h3 { + font-size: 24.5px; +} + +h4 { + font-size: 17.5px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 11.9px; +} + +h1 small { + font-size: 24.5px; +} + +h2 small { + font-size: 17.5px; +} + +h3 small { + font-size: 14px; +} + +h4 small { + font-size: 14px; +} + +.page-header { + padding-bottom: 9px; + margin: 20px 0 30px; + border-bottom: 1px solid #eeeeee; +} + +ul, +ol { + padding: 0; + margin: 0 0 10px 25px; +} + +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; +} + +li { + line-height: 20px; +} + +ul.unstyled, +ol.unstyled { + margin-left: 0; + list-style: none; +} + +ul.inline, +ol.inline { + margin-left: 0; + list-style: none; +} + +ul.inline > li, +ol.inline > li { + display: inline-block; + *display: inline; + padding-right: 5px; + padding-left: 5px; + *zoom: 1; +} + +dl { + margin-bottom: 20px; +} + +dt, +dd { + line-height: 20px; +} + +dt { + font-weight: bold; +} + +dd { + margin-left: 10px; +} + +.dl-horizontal { + *zoom: 1; +} + +.dl-horizontal:before, +.dl-horizontal:after { + display: table; + line-height: 0; + content: ""; +} + +.dl-horizontal:after { + clear: both; +} + +.dl-horizontal dt { + float: left; + width: 160px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; +} + +.dl-horizontal dd { + margin-left: 180px; +} + +hr { + margin: 20px 0; + border: 0; + border-top: 1px solid #eeeeee; + border-bottom: 1px solid #ffffff; +} + +abbr[title], +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted #999999; +} + +abbr.initialism { + font-size: 90%; + text-transform: uppercase; +} + +blockquote { + padding: 0 0 0 15px; + margin: 0 0 20px; + border-left: 5px solid #eeeeee; +} + +blockquote p { + margin-bottom: 0; + font-size: 17.5px; + font-weight: 300; + line-height: 1.25; +} + +blockquote small { + display: block; + line-height: 20px; + color: #999999; +} + +blockquote small:before { + content: '\2014 \00A0'; +} + +blockquote.pull-right { + float: right; + padding-right: 15px; + padding-left: 0; + border-right: 5px solid #eeeeee; + border-left: 0; +} + +blockquote.pull-right p, +blockquote.pull-right small { + text-align: right; +} + +blockquote.pull-right small:before { + content: ''; +} + +blockquote.pull-right small:after { + content: '\00A0 \2014'; +} + +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +address { + display: block; + margin-bottom: 20px; + font-style: normal; + line-height: 20px; +} + +code, +pre { + padding: 0 3px 2px; + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; + font-size: 12px; + color: #333333; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +code { + padding: 2px 4px; + color: #d14; + white-space: nowrap; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} + +pre { + display: block; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + line-height: 20px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +pre.prettyprint { + margin-bottom: 20px; +} + +pre code { + padding: 0; + color: inherit; + white-space: pre; + white-space: pre-wrap; + background-color: transparent; + border: 0; +} + +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} + +form { + margin: 0 0 20px; +} + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 20px; + font-size: 21px; + line-height: 40px; + color: #333333; + border: 0; + border-bottom: 1px solid #e5e5e5; +} + +legend small { + font-size: 15px; + color: #999999; +} + +label, +input, +button, +select, +textarea { + font-size: 14px; + font-weight: normal; + line-height: 20px; +} + +input, +button, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +label { + display: block; + margin-bottom: 5px; +} + +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + display: inline-block; + height: 20px; + padding: 4px 6px; + margin-bottom: 10px; + font-size: 14px; + line-height: 20px; + color: #555555; + vertical-align: middle; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +input, +textarea, +.uneditable-input { + width: 206px; +} + +textarea { + height: auto; +} + +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: #ffffff; + border: 1px solid #cccccc; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -o-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; +} + +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.uneditable-input:focus { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} + +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; + *margin-top: 0; + line-height: normal; +} + +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; +} + +select, +input[type="file"] { + height: 30px; + /* In IE7, the height of the select element cannot be changed by height, only font-size */ + + *margin-top: 4px; + /* For IE7, add top margin to align select with labels */ + + line-height: 30px; +} + +select { + width: 220px; + background-color: #ffffff; + border: 1px solid #cccccc; +} + +select[multiple], +select[size] { + height: auto; +} + +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +.uneditable-input, +.uneditable-textarea { + color: #999999; + cursor: not-allowed; + background-color: #fcfcfc; + border-color: #cccccc; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); +} + +.uneditable-input { + overflow: hidden; + white-space: nowrap; +} + +.uneditable-textarea { + width: auto; + height: auto; +} + +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #999999; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #999999; +} + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #999999; +} + +.radio, +.checkbox { + min-height: 20px; + padding-left: 20px; +} + +.radio input[type="radio"], +.checkbox input[type="checkbox"] { + float: left; + margin-left: -20px; +} + +.controls > .radio:first-child, +.controls > .checkbox:first-child { + padding-top: 5px; +} + +.radio.inline, +.checkbox.inline { + display: inline-block; + padding-top: 5px; + margin-bottom: 0; + vertical-align: middle; +} + +.radio.inline + .radio.inline, +.checkbox.inline + .checkbox.inline { + margin-left: 10px; +} + +.input-mini { + width: 60px; +} + +.input-small { + width: 90px; +} + +.input-medium { + width: 150px; +} + +.input-large { + width: 210px; +} + +.input-xlarge { + width: 270px; +} + +.input-xxlarge { + width: 530px; +} + +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"] { + float: none; + margin-left: 0; +} + +.input-append input[class*="span"], +.input-append .uneditable-input[class*="span"], +.input-prepend input[class*="span"], +.input-prepend .uneditable-input[class*="span"], +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"], +.row-fluid .input-prepend [class*="span"], +.row-fluid .input-append [class*="span"] { + display: inline-block; +} + +input, +textarea, +.uneditable-input { + margin-left: 0; +} + +.controls-row [class*="span"] + [class*="span"] { + margin-left: 20px; +} + +input.span12, +textarea.span12, +.uneditable-input.span12 { + width: 926px; +} + +input.span11, +textarea.span11, +.uneditable-input.span11 { + width: 846px; +} + +input.span10, +textarea.span10, +.uneditable-input.span10 { + width: 766px; +} + +input.span9, +textarea.span9, +.uneditable-input.span9 { + width: 686px; +} + +input.span8, +textarea.span8, +.uneditable-input.span8 { + width: 606px; +} + +input.span7, +textarea.span7, +.uneditable-input.span7 { + width: 526px; +} + +input.span6, +textarea.span6, +.uneditable-input.span6 { + width: 446px; +} + +input.span5, +textarea.span5, +.uneditable-input.span5 { + width: 366px; +} + +input.span4, +textarea.span4, +.uneditable-input.span4 { + width: 286px; +} + +input.span3, +textarea.span3, +.uneditable-input.span3 { + width: 206px; +} + +input.span2, +textarea.span2, +.uneditable-input.span2 { + width: 126px; +} + +input.span1, +textarea.span1, +.uneditable-input.span1 { + width: 46px; +} + +.controls-row { + *zoom: 1; +} + +.controls-row:before, +.controls-row:after { + display: table; + line-height: 0; + content: ""; +} + +.controls-row:after { + clear: both; +} + +.controls-row [class*="span"], +.row-fluid .controls-row [class*="span"] { + float: left; +} + +.controls-row .checkbox[class*="span"], +.controls-row .radio[class*="span"] { + padding-top: 5px; +} + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + cursor: not-allowed; + background-color: #eeeeee; +} + +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; +} + +.control-group.warning .control-label, +.control-group.warning .help-block, +.control-group.warning .help-inline { + color: #c09853; +} + +.control-group.warning .checkbox, +.control-group.warning .radio, +.control-group.warning input, +.control-group.warning select, +.control-group.warning textarea { + color: #c09853; +} + +.control-group.warning input, +.control-group.warning select, +.control-group.warning textarea { + border-color: #c09853; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.warning input:focus, +.control-group.warning select:focus, +.control-group.warning textarea:focus { + border-color: #a47e3c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; +} + +.control-group.warning .input-prepend .add-on, +.control-group.warning .input-append .add-on { + color: #c09853; + background-color: #fcf8e3; + border-color: #c09853; +} + +.control-group.error .control-label, +.control-group.error .help-block, +.control-group.error .help-inline { + color: #b94a48; +} + +.control-group.error .checkbox, +.control-group.error .radio, +.control-group.error input, +.control-group.error select, +.control-group.error textarea { + color: #b94a48; +} + +.control-group.error input, +.control-group.error select, +.control-group.error textarea { + border-color: #b94a48; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.error input:focus, +.control-group.error select:focus, +.control-group.error textarea:focus { + border-color: #953b39; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; +} + +.control-group.error .input-prepend .add-on, +.control-group.error .input-append .add-on { + color: #b94a48; + background-color: #f2dede; + border-color: #b94a48; +} + +.control-group.success .control-label, +.control-group.success .help-block, +.control-group.success .help-inline { + color: #468847; +} + +.control-group.success .checkbox, +.control-group.success .radio, +.control-group.success input, +.control-group.success select, +.control-group.success textarea { + color: #468847; +} + +.control-group.success input, +.control-group.success select, +.control-group.success textarea { + border-color: #468847; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.success input:focus, +.control-group.success select:focus, +.control-group.success textarea:focus { + border-color: #356635; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; +} + +.control-group.success .input-prepend .add-on, +.control-group.success .input-append .add-on { + color: #468847; + background-color: #dff0d8; + border-color: #468847; +} + +.control-group.info .control-label, +.control-group.info .help-block, +.control-group.info .help-inline { + color: #3a87ad; +} + +.control-group.info .checkbox, +.control-group.info .radio, +.control-group.info input, +.control-group.info select, +.control-group.info textarea { + color: #3a87ad; +} + +.control-group.info input, +.control-group.info select, +.control-group.info textarea { + border-color: #3a87ad; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.info input:focus, +.control-group.info select:focus, +.control-group.info textarea:focus { + border-color: #2d6987; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; +} + +.control-group.info .input-prepend .add-on, +.control-group.info .input-append .add-on { + color: #3a87ad; + background-color: #d9edf7; + border-color: #3a87ad; +} + +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { + color: #b94a48; + border-color: #ee5f5b; +} + +input:focus:invalid:focus, +textarea:focus:invalid:focus, +select:focus:invalid:focus { + border-color: #e9322d; + -webkit-box-shadow: 0 0 6px #f8b9b7; + -moz-box-shadow: 0 0 6px #f8b9b7; + box-shadow: 0 0 6px #f8b9b7; +} + +.form-actions { + padding: 19px 20px 20px; + margin-top: 20px; + margin-bottom: 20px; + background-color: #f5f5f5; + border-top: 1px solid #e5e5e5; + *zoom: 1; +} + +.form-actions:before, +.form-actions:after { + display: table; + line-height: 0; + content: ""; +} + +.form-actions:after { + clear: both; +} + +.help-block, +.help-inline { + color: #595959; +} + +.help-block { + display: block; + margin-bottom: 10px; +} + +.help-inline { + display: inline-block; + *display: inline; + padding-left: 5px; + vertical-align: middle; + *zoom: 1; +} + +.input-append, +.input-prepend { + display: inline-block; + margin-bottom: 10px; + font-size: 0; + white-space: nowrap; + vertical-align: middle; +} + +.input-append input, +.input-prepend input, +.input-append select, +.input-prepend select, +.input-append .uneditable-input, +.input-prepend .uneditable-input, +.input-append .dropdown-menu, +.input-prepend .dropdown-menu, +.input-append .popover, +.input-prepend .popover { + font-size: 14px; +} + +.input-append input, +.input-prepend input, +.input-append select, +.input-prepend select, +.input-append .uneditable-input, +.input-prepend .uneditable-input { + position: relative; + margin-bottom: 0; + *margin-left: 0; + vertical-align: top; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-append input:focus, +.input-prepend input:focus, +.input-append select:focus, +.input-prepend select:focus, +.input-append .uneditable-input:focus, +.input-prepend .uneditable-input:focus { + z-index: 2; +} + +.input-append .add-on, +.input-prepend .add-on { + display: inline-block; + width: auto; + height: 20px; + min-width: 16px; + padding: 4px 5px; + font-size: 14px; + font-weight: normal; + line-height: 20px; + text-align: center; + text-shadow: 0 1px 0 #ffffff; + background-color: #eeeeee; + border: 1px solid #ccc; +} + +.input-append .add-on, +.input-prepend .add-on, +.input-append .btn, +.input-prepend .btn, +.input-append .btn-group > .dropdown-toggle, +.input-prepend .btn-group > .dropdown-toggle { + vertical-align: top; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.input-append .active, +.input-prepend .active { + background-color: #a9dba9; + border-color: #46a546; +} + +.input-prepend .add-on, +.input-prepend .btn { + margin-right: -1px; +} + +.input-prepend .add-on:first-child, +.input-prepend .btn:first-child { + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.input-append input, +.input-append select, +.input-append .uneditable-input { + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.input-append input + .btn-group .btn:last-child, +.input-append select + .btn-group .btn:last-child, +.input-append .uneditable-input + .btn-group .btn:last-child { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-append .add-on, +.input-append .btn, +.input-append .btn-group { + margin-left: -1px; +} + +.input-append .add-on:last-child, +.input-append .btn:last-child, +.input-append .btn-group:last-child > .dropdown-toggle { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-prepend.input-append input, +.input-prepend.input-append select, +.input-prepend.input-append .uneditable-input { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.input-prepend.input-append input + .btn-group .btn, +.input-prepend.input-append select + .btn-group .btn, +.input-prepend.input-append .uneditable-input + .btn-group .btn { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-prepend.input-append .add-on:first-child, +.input-prepend.input-append .btn:first-child { + margin-right: -1px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.input-prepend.input-append .add-on:last-child, +.input-prepend.input-append .btn:last-child { + margin-left: -1px; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.input-prepend.input-append .btn-group:first-child { + margin-left: 0; +} + +input.search-query { + padding-right: 14px; + padding-right: 4px \9; + padding-left: 14px; + padding-left: 4px \9; + /* IE7-8 doesn't have border-radius, so don't indent the padding */ + + margin-bottom: 0; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} + +/* Allow for input prepend/append in search forms */ + +.form-search .input-append .search-query, +.form-search .input-prepend .search-query { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.form-search .input-append .search-query { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + +.form-search .input-append .btn { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .search-query { + -webkit-border-radius: 0 14px 14px 0; + -moz-border-radius: 0 14px 14px 0; + border-radius: 0 14px 14px 0; +} + +.form-search .input-prepend .btn { + -webkit-border-radius: 14px 0 0 14px; + -moz-border-radius: 14px 0 0 14px; + border-radius: 14px 0 0 14px; +} + +.form-search input, +.form-inline input, +.form-horizontal input, +.form-search textarea, +.form-inline textarea, +.form-horizontal textarea, +.form-search select, +.form-inline select, +.form-horizontal select, +.form-search .help-inline, +.form-inline .help-inline, +.form-horizontal .help-inline, +.form-search .uneditable-input, +.form-inline .uneditable-input, +.form-horizontal .uneditable-input, +.form-search .input-prepend, +.form-inline .input-prepend, +.form-horizontal .input-prepend, +.form-search .input-append, +.form-inline .input-append, +.form-horizontal .input-append { + display: inline-block; + *display: inline; + margin-bottom: 0; + vertical-align: middle; + *zoom: 1; +} + +.form-search .hide, +.form-inline .hide, +.form-horizontal .hide { + display: none; +} + +.form-search label, +.form-inline label, +.form-search .btn-group, +.form-inline .btn-group { + display: inline-block; +} + +.form-search .input-append, +.form-inline .input-append, +.form-search .input-prepend, +.form-inline .input-prepend { + margin-bottom: 0; +} + +.form-search .radio, +.form-search .checkbox, +.form-inline .radio, +.form-inline .checkbox { + padding-left: 0; + margin-bottom: 0; + vertical-align: middle; +} + +.form-search .radio input[type="radio"], +.form-search .checkbox input[type="checkbox"], +.form-inline .radio input[type="radio"], +.form-inline .checkbox input[type="checkbox"] { + float: left; + margin-right: 3px; + margin-left: 0; +} + +.control-group { + margin-bottom: 10px; +} + +legend + .control-group { + margin-top: 20px; + -webkit-margin-top-collapse: separate; +} + +.form-horizontal .control-group { + margin-bottom: 20px; + *zoom: 1; +} + +.form-horizontal .control-group:before, +.form-horizontal .control-group:after { + display: table; + line-height: 0; + content: ""; +} + +.form-horizontal .control-group:after { + clear: both; +} + +.form-horizontal .control-label { + float: left; + width: 160px; + padding-top: 5px; + text-align: right; +} + +.form-horizontal .controls { + *display: inline-block; + *padding-left: 20px; + margin-left: 180px; + *margin-left: 0; +} + +.form-horizontal .controls:first-child { + *padding-left: 180px; +} + +.form-horizontal .help-block { + margin-bottom: 0; +} + +.form-horizontal input + .help-block, +.form-horizontal select + .help-block, +.form-horizontal textarea + .help-block, +.form-horizontal .uneditable-input + .help-block, +.form-horizontal .input-prepend + .help-block, +.form-horizontal .input-append + .help-block { + margin-top: 10px; +} + +.form-horizontal .form-actions { + padding-left: 180px; +} + +table { + max-width: 100%; + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; +} + +.table { + width: 100%; + margin-bottom: 20px; +} + +.table th, +.table td { + padding: 8px; + line-height: 20px; + text-align: left; + vertical-align: top; + border-top: 1px solid #dddddd; +} + +.table th { + font-weight: bold; +} + +.table thead th { + vertical-align: bottom; +} + +.table caption + thead tr:first-child th, +.table caption + thead tr:first-child td, +.table colgroup + thead tr:first-child th, +.table colgroup + thead tr:first-child td, +.table thead:first-child tr:first-child th, +.table thead:first-child tr:first-child td { + border-top: 0; +} + +.table tbody + tbody { + border-top: 2px solid #dddddd; +} + +.table .table { + background-color: #ffffff; +} + +.table-condensed th, +.table-condensed td { + padding: 4px 5px; +} + +.table-bordered { + border: 1px solid #dddddd; + border-collapse: separate; + *border-collapse: collapse; + border-left: 0; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.table-bordered th, +.table-bordered td { + border-left: 1px solid #dddddd; +} + +.table-bordered caption + thead tr:first-child th, +.table-bordered caption + tbody tr:first-child th, +.table-bordered caption + tbody tr:first-child td, +.table-bordered colgroup + thead tr:first-child th, +.table-bordered colgroup + tbody tr:first-child th, +.table-bordered colgroup + tbody tr:first-child td, +.table-bordered thead:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child td { + border-top: 0; +} + +.table-bordered thead:first-child tr:first-child > th:first-child, +.table-bordered tbody:first-child tr:first-child > td:first-child, +.table-bordered tbody:first-child tr:first-child > th:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; +} + +.table-bordered thead:first-child tr:first-child > th:last-child, +.table-bordered tbody:first-child tr:first-child > td:last-child, +.table-bordered tbody:first-child tr:first-child > th:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; +} + +.table-bordered thead:last-child tr:last-child > th:first-child, +.table-bordered tbody:last-child tr:last-child > td:first-child, +.table-bordered tbody:last-child tr:last-child > th:first-child, +.table-bordered tfoot:last-child tr:last-child > td:first-child, +.table-bordered tfoot:last-child tr:last-child > th:first-child { + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; +} + +.table-bordered thead:last-child tr:last-child > th:last-child, +.table-bordered tbody:last-child tr:last-child > td:last-child, +.table-bordered tbody:last-child tr:last-child > th:last-child, +.table-bordered tfoot:last-child tr:last-child > td:last-child, +.table-bordered tfoot:last-child tr:last-child > th:last-child { + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; +} + +.table-bordered tfoot + tbody:last-child tr:last-child td:first-child { + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; +} + +.table-bordered tfoot + tbody:last-child tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; +} + +.table-bordered caption + thead tr:first-child th:first-child, +.table-bordered caption + tbody tr:first-child td:first-child, +.table-bordered colgroup + thead tr:first-child th:first-child, +.table-bordered colgroup + tbody tr:first-child td:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; +} + +.table-bordered caption + thead tr:first-child th:last-child, +.table-bordered caption + tbody tr:first-child td:last-child, +.table-bordered colgroup + thead tr:first-child th:last-child, +.table-bordered colgroup + tbody tr:first-child td:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; +} + +.table-striped tbody > tr:nth-child(odd) > td, +.table-striped tbody > tr:nth-child(odd) > th { + background-color: #f9f9f9; +} + +.table-hover tbody tr:hover > td, +.table-hover tbody tr:hover > th { + background-color: #f5f5f5; +} + +table td[class*="span"], +table th[class*="span"], +.row-fluid table td[class*="span"], +.row-fluid table th[class*="span"] { + display: table-cell; + float: none; + margin-left: 0; +} + +.table td.span1, +.table th.span1 { + float: none; + width: 44px; + margin-left: 0; +} + +.table td.span2, +.table th.span2 { + float: none; + width: 124px; + margin-left: 0; +} + +.table td.span3, +.table th.span3 { + float: none; + width: 204px; + margin-left: 0; +} + +.table td.span4, +.table th.span4 { + float: none; + width: 284px; + margin-left: 0; +} + +.table td.span5, +.table th.span5 { + float: none; + width: 364px; + margin-left: 0; +} + +.table td.span6, +.table th.span6 { + float: none; + width: 444px; + margin-left: 0; +} + +.table td.span7, +.table th.span7 { + float: none; + width: 524px; + margin-left: 0; +} + +.table td.span8, +.table th.span8 { + float: none; + width: 604px; + margin-left: 0; +} + +.table td.span9, +.table th.span9 { + float: none; + width: 684px; + margin-left: 0; +} + +.table td.span10, +.table th.span10 { + float: none; + width: 764px; + margin-left: 0; +} + +.table td.span11, +.table th.span11 { + float: none; + width: 844px; + margin-left: 0; +} + +.table td.span12, +.table th.span12 { + float: none; + width: 924px; + margin-left: 0; +} + +.table tbody tr.success > td { + background-color: #dff0d8; +} + +.table tbody tr.error > td { + background-color: #f2dede; +} + +.table tbody tr.warning > td { + background-color: #fcf8e3; +} + +.table tbody tr.info > td { + background-color: #d9edf7; +} + +.table-hover tbody tr.success:hover > td { + background-color: #d0e9c6; +} + +.table-hover tbody tr.error:hover > td { + background-color: #ebcccc; +} + +.table-hover tbody tr.warning:hover > td { + background-color: #faf2cc; +} + +.table-hover tbody tr.info:hover > td { + background-color: #c4e3f3; +} + +[class^="icon-"], +[class*=" icon-"] { + display: inline-block; + width: 14px; + height: 14px; + margin-top: 1px; + *margin-right: .3em; + line-height: 14px; + vertical-align: text-top; + background-image: url("../img/glyphicons-halflings.png"); + background-position: 14px 14px; + background-repeat: no-repeat; +} + +/* White icons with optional class, or on hover/focus/active states of certain elements */ + +.icon-white, +.nav-pills > .active > a > [class^="icon-"], +.nav-pills > .active > a > [class*=" icon-"], +.nav-list > .active > a > [class^="icon-"], +.nav-list > .active > a > [class*=" icon-"], +.navbar-inverse .nav > .active > a > [class^="icon-"], +.navbar-inverse .nav > .active > a > [class*=" icon-"], +.dropdown-menu > li > a:hover > [class^="icon-"], +.dropdown-menu > li > a:focus > [class^="icon-"], +.dropdown-menu > li > a:hover > [class*=" icon-"], +.dropdown-menu > li > a:focus > [class*=" icon-"], +.dropdown-menu > .active > a > [class^="icon-"], +.dropdown-menu > .active > a > [class*=" icon-"], +.dropdown-submenu:hover > a > [class^="icon-"], +.dropdown-submenu:focus > a > [class^="icon-"], +.dropdown-submenu:hover > a > [class*=" icon-"], +.dropdown-submenu:focus > a > [class*=" icon-"] { + background-image: url("../img/glyphicons-halflings-white.png"); +} + +.icon-glass { + background-position: 0 0; +} + +.icon-music { + background-position: -24px 0; +} + +.icon-search { + background-position: -48px 0; +} + +.icon-envelope { + background-position: -72px 0; +} + +.icon-heart { + background-position: -96px 0; +} + +.icon-star { + background-position: -120px 0; +} + +.icon-star-empty { + background-position: -144px 0; +} + +.icon-user { + background-position: -168px 0; +} + +.icon-film { + background-position: -192px 0; +} + +.icon-th-large { + background-position: -216px 0; +} + +.icon-th { + background-position: -240px 0; +} + +.icon-th-list { + background-position: -264px 0; +} + +.icon-ok { + background-position: -288px 0; +} + +.icon-remove { + background-position: -312px 0; +} + +.icon-zoom-in { + background-position: -336px 0; +} + +.icon-zoom-out { + background-position: -360px 0; +} + +.icon-off { + background-position: -384px 0; +} + +.icon-signal { + background-position: -408px 0; +} + +.icon-cog { + background-position: -432px 0; +} + +.icon-trash { + background-position: -456px 0; +} + +.icon-home { + background-position: 0 -24px; +} + +.icon-file { + background-position: -24px -24px; +} + +.icon-time { + background-position: -48px -24px; +} + +.icon-road { + background-position: -72px -24px; +} + +.icon-download-alt { + background-position: -96px -24px; +} + +.icon-download { + background-position: -120px -24px; +} + +.icon-upload { + background-position: -144px -24px; +} + +.icon-inbox { + background-position: -168px -24px; +} + +.icon-play-circle { + background-position: -192px -24px; +} + +.icon-repeat { + background-position: -216px -24px; +} + +.icon-refresh { + background-position: -240px -24px; +} + +.icon-list-alt { + background-position: -264px -24px; +} + +.icon-lock { + background-position: -287px -24px; +} + +.icon-flag { + background-position: -312px -24px; +} + +.icon-headphones { + background-position: -336px -24px; +} + +.icon-volume-off { + background-position: -360px -24px; +} + +.icon-volume-down { + background-position: -384px -24px; +} + +.icon-volume-up { + background-position: -408px -24px; +} + +.icon-qrcode { + background-position: -432px -24px; +} + +.icon-barcode { + background-position: -456px -24px; +} + +.icon-tag { + background-position: 0 -48px; +} + +.icon-tags { + background-position: -25px -48px; +} + +.icon-book { + background-position: -48px -48px; +} + +.icon-bookmark { + background-position: -72px -48px; +} + +.icon-print { + background-position: -96px -48px; +} + +.icon-camera { + background-position: -120px -48px; +} + +.icon-font { + background-position: -144px -48px; +} + +.icon-bold { + background-position: -167px -48px; +} + +.icon-italic { + background-position: -192px -48px; +} + +.icon-text-height { + background-position: -216px -48px; +} + +.icon-text-width { + background-position: -240px -48px; +} + +.icon-align-left { + background-position: -264px -48px; +} + +.icon-align-center { + background-position: -288px -48px; +} + +.icon-align-right { + background-position: -312px -48px; +} + +.icon-align-justify { + background-position: -336px -48px; +} + +.icon-list { + background-position: -360px -48px; +} + +.icon-indent-left { + background-position: -384px -48px; +} + +.icon-indent-right { + background-position: -408px -48px; +} + +.icon-facetime-video { + background-position: -432px -48px; +} + +.icon-picture { + background-position: -456px -48px; +} + +.icon-pencil { + background-position: 0 -72px; +} + +.icon-map-marker { + background-position: -24px -72px; +} + +.icon-adjust { + background-position: -48px -72px; +} + +.icon-tint { + background-position: -72px -72px; +} + +.icon-edit { + background-position: -96px -72px; +} + +.icon-share { + background-position: -120px -72px; +} + +.icon-check { + background-position: -144px -72px; +} + +.icon-move { + background-position: -168px -72px; +} + +.icon-step-backward { + background-position: -192px -72px; +} + +.icon-fast-backward { + background-position: -216px -72px; +} + +.icon-backward { + background-position: -240px -72px; +} + +.icon-play { + background-position: -264px -72px; +} + +.icon-pause { + background-position: -288px -72px; +} + +.icon-stop { + background-position: -312px -72px; +} + +.icon-forward { + background-position: -336px -72px; +} + +.icon-fast-forward { + background-position: -360px -72px; +} + +.icon-step-forward { + background-position: -384px -72px; +} + +.icon-eject { + background-position: -408px -72px; +} + +.icon-chevron-left { + background-position: -432px -72px; +} + +.icon-chevron-right { + background-position: -456px -72px; +} + +.icon-plus-sign { + background-position: 0 -96px; +} + +.icon-minus-sign { + background-position: -24px -96px; +} + +.icon-remove-sign { + background-position: -48px -96px; +} + +.icon-ok-sign { + background-position: -72px -96px; +} + +.icon-question-sign { + background-position: -96px -96px; +} + +.icon-info-sign { + background-position: -120px -96px; +} + +.icon-screenshot { + background-position: -144px -96px; +} + +.icon-remove-circle { + background-position: -168px -96px; +} + +.icon-ok-circle { + background-position: -192px -96px; +} + +.icon-ban-circle { + background-position: -216px -96px; +} + +.icon-arrow-left { + background-position: -240px -96px; +} + +.icon-arrow-right { + background-position: -264px -96px; +} + +.icon-arrow-up { + background-position: -289px -96px; +} + +.icon-arrow-down { + background-position: -312px -96px; +} + +.icon-share-alt { + background-position: -336px -96px; +} + +.icon-resize-full { + background-position: -360px -96px; +} + +.icon-resize-small { + background-position: -384px -96px; +} + +.icon-plus { + background-position: -408px -96px; +} + +.icon-minus { + background-position: -433px -96px; +} + +.icon-asterisk { + background-position: -456px -96px; +} + +.icon-exclamation-sign { + background-position: 0 -120px; +} + +.icon-gift { + background-position: -24px -120px; +} + +.icon-leaf { + background-position: -48px -120px; +} + +.icon-fire { + background-position: -72px -120px; +} + +.icon-eye-open { + background-position: -96px -120px; +} + +.icon-eye-close { + background-position: -120px -120px; +} + +.icon-warning-sign { + background-position: -144px -120px; +} + +.icon-plane { + background-position: -168px -120px; +} + +.icon-calendar { + background-position: -192px -120px; +} + +.icon-random { + width: 16px; + background-position: -216px -120px; +} + +.icon-comment { + background-position: -240px -120px; +} + +.icon-magnet { + background-position: -264px -120px; +} + +.icon-chevron-up { + background-position: -288px -120px; +} + +.icon-chevron-down { + background-position: -313px -119px; +} + +.icon-retweet { + background-position: -336px -120px; +} + +.icon-shopping-cart { + background-position: -360px -120px; +} + +.icon-folder-close { + width: 16px; + background-position: -384px -120px; +} + +.icon-folder-open { + width: 16px; + background-position: -408px -120px; +} + +.icon-resize-vertical { + background-position: -432px -119px; +} + +.icon-resize-horizontal { + background-position: -456px -118px; +} + +.icon-hdd { + background-position: 0 -144px; +} + +.icon-bullhorn { + background-position: -24px -144px; +} + +.icon-bell { + background-position: -48px -144px; +} + +.icon-certificate { + background-position: -72px -144px; +} + +.icon-thumbs-up { + background-position: -96px -144px; +} + +.icon-thumbs-down { + background-position: -120px -144px; +} + +.icon-hand-right { + background-position: -144px -144px; +} + +.icon-hand-left { + background-position: -168px -144px; +} + +.icon-hand-up { + background-position: -192px -144px; +} + +.icon-hand-down { + background-position: -216px -144px; +} + +.icon-circle-arrow-right { + background-position: -240px -144px; +} + +.icon-circle-arrow-left { + background-position: -264px -144px; +} + +.icon-circle-arrow-up { + background-position: -288px -144px; +} + +.icon-circle-arrow-down { + background-position: -312px -144px; +} + +.icon-globe { + background-position: -336px -144px; +} + +.icon-wrench { + background-position: -360px -144px; +} + +.icon-tasks { + background-position: -384px -144px; +} + +.icon-filter { + background-position: -408px -144px; +} + +.icon-briefcase { + background-position: -432px -144px; +} + +.icon-fullscreen { + background-position: -456px -144px; +} + +.dropup, +.dropdown { + position: relative; +} + +.dropdown-toggle { + *margin-bottom: -3px; +} + +.dropdown-toggle:active, +.open .dropdown-toggle { + outline: 0; +} + +.caret { + display: inline-block; + width: 0; + height: 0; + vertical-align: top; + border-top: 4px solid #000000; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + content: ""; +} + +.dropdown .caret { + margin-top: 8px; + margin-left: 2px; +} + +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + background-color: #ffffff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + *border-right-width: 2px; + *border-bottom-width: 2px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.dropdown-menu.pull-right { + right: 0; + left: auto; +} + +.dropdown-menu .divider { + *width: 100%; + height: 1px; + margin: 9px 1px; + *margin: -5px 0 5px; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid #ffffff; +} + +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 20px; + color: #333333; + white-space: nowrap; +} + +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus, +.dropdown-submenu:hover > a, +.dropdown-submenu:focus > a { + color: #ffffff; + text-decoration: none; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); +} + +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: #ffffff; + text-decoration: none; + background-color: #0081c2; + background-image: -moz-linear-gradient(top, #0088cc, #0077b3); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3)); + background-image: -webkit-linear-gradient(top, #0088cc, #0077b3); + background-image: -o-linear-gradient(top, #0088cc, #0077b3); + background-image: linear-gradient(to bottom, #0088cc, #0077b3); + background-repeat: repeat-x; + outline: 0; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0); +} + +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: #999999; +} + +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + cursor: default; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +.open { + *z-index: 1000; +} + +.open > .dropdown-menu { + display: block; +} + +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + border-top: 0; + border-bottom: 4px solid #000000; + content: ""; +} + +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; +} + +.dropdown-submenu { + position: relative; +} + +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} + +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} + +.dropup .dropdown-submenu > .dropdown-menu { + top: auto; + bottom: 0; + margin-top: 0; + margin-bottom: -2px; + -webkit-border-radius: 5px 5px 5px 0; + -moz-border-radius: 5px 5px 5px 0; + border-radius: 5px 5px 5px 0; +} + +.dropdown-submenu > a:after { + display: block; + float: right; + width: 0; + height: 0; + margin-top: 5px; + margin-right: -10px; + border-color: transparent; + border-left-color: #cccccc; + border-style: solid; + border-width: 5px 0 5px 5px; + content: " "; +} + +.dropdown-submenu:hover > a:after { + border-left-color: #ffffff; +} + +.dropdown-submenu.pull-left { + float: none; +} + +.dropdown-submenu.pull-left > .dropdown-menu { + left: -100%; + margin-left: 10px; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} + +.dropdown .dropdown-menu .nav-header { + padding-right: 20px; + padding-left: 20px; +} + +.typeahead { + z-index: 1051; + margin-top: 2px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #e3e3e3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} + +.well blockquote { + border-color: #ddd; + border-color: rgba(0, 0, 0, 0.15); +} + +.well-large { + padding: 24px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.well-small { + padding: 9px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.fade { + opacity: 0; + -webkit-transition: opacity 0.15s linear; + -moz-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} + +.fade.in { + opacity: 1; +} + +.collapse { + position: relative; + height: 0; + overflow: hidden; + -webkit-transition: height 0.35s ease; + -moz-transition: height 0.35s ease; + -o-transition: height 0.35s ease; + transition: height 0.35s ease; +} + +.collapse.in { + height: auto; +} + +.close { + float: right; + font-size: 20px; + font-weight: bold; + line-height: 20px; + color: #000000; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.2; + filter: alpha(opacity=20); +} + +.close:hover, +.close:focus { + color: #000000; + text-decoration: none; + cursor: pointer; + opacity: 0.4; + filter: alpha(opacity=40); +} + +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} + +.btn { + display: inline-block; + *display: inline; + padding: 4px 12px; + margin-bottom: 0; + *margin-left: .3em; + font-size: 14px; + line-height: 20px; + color: #333333; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + vertical-align: middle; + cursor: pointer; + background-color: #f5f5f5; + *background-color: #e6e6e6; + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); + background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); + background-repeat: repeat-x; + border: 1px solid #cccccc; + *border: 0; + border-color: #e6e6e6 #e6e6e6 #bfbfbf; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border-bottom-color: #b3b3b3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + *zoom: 1; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn:hover, +.btn:focus, +.btn:active, +.btn.active, +.btn.disabled, +.btn[disabled] { + color: #333333; + background-color: #e6e6e6; + *background-color: #d9d9d9; +} + +.btn:active, +.btn.active { + background-color: #cccccc \9; +} + +.btn:first-child { + *margin-left: 0; +} + +.btn:hover, +.btn:focus { + color: #333333; + text-decoration: none; + background-position: 0 -15px; + -webkit-transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + transition: background-position 0.1s linear; +} + +.btn:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +.btn.active, +.btn:active { + background-image: none; + outline: 0; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn.disabled, +.btn[disabled] { + cursor: default; + background-image: none; + opacity: 0.65; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +.btn-large { + padding: 11px 19px; + font-size: 17.5px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.btn-large [class^="icon-"], +.btn-large [class*=" icon-"] { + margin-top: 4px; +} + +.btn-small { + padding: 2px 10px; + font-size: 11.9px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.btn-small [class^="icon-"], +.btn-small [class*=" icon-"] { + margin-top: 0; +} + +.btn-mini [class^="icon-"], +.btn-mini [class*=" icon-"] { + margin-top: -1px; +} + +.btn-mini { + padding: 0 6px; + font-size: 10.5px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.btn-block { + display: block; + width: 100%; + padding-right: 0; + padding-left: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.btn-block + .btn-block { + margin-top: 5px; +} + +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; +} + +.btn-primary.active, +.btn-warning.active, +.btn-danger.active, +.btn-success.active, +.btn-info.active, +.btn-inverse.active { + color: rgba(255, 255, 255, 0.75); +} + +.btn-primary { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #006dcc; + *background-color: #0044cc; + background-image: -moz-linear-gradient(top, #0088cc, #0044cc); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); + background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); + background-image: -o-linear-gradient(top, #0088cc, #0044cc); + background-image: linear-gradient(to bottom, #0088cc, #0044cc); + background-repeat: repeat-x; + border-color: #0044cc #0044cc #002a80; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +.btn-primary:hover, +.btn-primary:focus, +.btn-primary:active, +.btn-primary.active, +.btn-primary.disabled, +.btn-primary[disabled] { + color: #ffffff; + background-color: #0044cc; + *background-color: #003bb3; +} + +.btn-primary:active, +.btn-primary.active { + background-color: #003399 \9; +} + +.btn-warning { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #faa732; + *background-color: #f89406; + background-image: -moz-linear-gradient(top, #fbb450, #f89406); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); + background-image: -webkit-linear-gradient(top, #fbb450, #f89406); + background-image: -o-linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); + background-repeat: repeat-x; + border-color: #f89406 #f89406 #ad6704; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +.btn-warning:hover, +.btn-warning:focus, +.btn-warning:active, +.btn-warning.active, +.btn-warning.disabled, +.btn-warning[disabled] { + color: #ffffff; + background-color: #f89406; + *background-color: #df8505; +} + +.btn-warning:active, +.btn-warning.active { + background-color: #c67605 \9; +} + +.btn-danger { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #da4f49; + *background-color: #bd362f; + background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); + background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); + background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); + background-image: linear-gradient(to bottom, #ee5f5b, #bd362f); + background-repeat: repeat-x; + border-color: #bd362f #bd362f #802420; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +.btn-danger:hover, +.btn-danger:focus, +.btn-danger:active, +.btn-danger.active, +.btn-danger.disabled, +.btn-danger[disabled] { + color: #ffffff; + background-color: #bd362f; + *background-color: #a9302a; +} + +.btn-danger:active, +.btn-danger.active { + background-color: #942a25 \9; +} + +.btn-success { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #5bb75b; + *background-color: #51a351; + background-image: -moz-linear-gradient(top, #62c462, #51a351); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); + background-image: -webkit-linear-gradient(top, #62c462, #51a351); + background-image: -o-linear-gradient(top, #62c462, #51a351); + background-image: linear-gradient(to bottom, #62c462, #51a351); + background-repeat: repeat-x; + border-color: #51a351 #51a351 #387038; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +.btn-success:hover, +.btn-success:focus, +.btn-success:active, +.btn-success.active, +.btn-success.disabled, +.btn-success[disabled] { + color: #ffffff; + background-color: #51a351; + *background-color: #499249; +} + +.btn-success:active, +.btn-success.active { + background-color: #408140 \9; +} + +.btn-info { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #49afcd; + *background-color: #2f96b4; + background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); + background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); + background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); + background-image: linear-gradient(to bottom, #5bc0de, #2f96b4); + background-repeat: repeat-x; + border-color: #2f96b4 #2f96b4 #1f6377; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +.btn-info:hover, +.btn-info:focus, +.btn-info:active, +.btn-info.active, +.btn-info.disabled, +.btn-info[disabled] { + color: #ffffff; + background-color: #2f96b4; + *background-color: #2a85a0; +} + +.btn-info:active, +.btn-info.active { + background-color: #24748c \9; +} + +.btn-inverse { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #363636; + *background-color: #222222; + background-image: -moz-linear-gradient(top, #444444, #222222); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); + background-image: -webkit-linear-gradient(top, #444444, #222222); + background-image: -o-linear-gradient(top, #444444, #222222); + background-image: linear-gradient(to bottom, #444444, #222222); + background-repeat: repeat-x; + border-color: #222222 #222222 #000000; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +.btn-inverse:hover, +.btn-inverse:focus, +.btn-inverse:active, +.btn-inverse.active, +.btn-inverse.disabled, +.btn-inverse[disabled] { + color: #ffffff; + background-color: #222222; + *background-color: #151515; +} + +.btn-inverse:active, +.btn-inverse.active { + background-color: #080808 \9; +} + +button.btn, +input[type="submit"].btn { + *padding-top: 3px; + *padding-bottom: 3px; +} + +button.btn::-moz-focus-inner, +input[type="submit"].btn::-moz-focus-inner { + padding: 0; + border: 0; +} + +button.btn.btn-large, +input[type="submit"].btn.btn-large { + *padding-top: 7px; + *padding-bottom: 7px; +} + +button.btn.btn-small, +input[type="submit"].btn.btn-small { + *padding-top: 3px; + *padding-bottom: 3px; +} + +button.btn.btn-mini, +input[type="submit"].btn.btn-mini { + *padding-top: 1px; + *padding-bottom: 1px; +} + +.btn-link, +.btn-link:active, +.btn-link[disabled] { + background-color: transparent; + background-image: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} + +.btn-link { + color: #0088cc; + cursor: pointer; + border-color: transparent; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.btn-link:hover, +.btn-link:focus { + color: #005580; + text-decoration: underline; + background-color: transparent; +} + +.btn-link[disabled]:hover, +.btn-link[disabled]:focus { + color: #333333; + text-decoration: none; +} + +.btn-group { + position: relative; + display: inline-block; + *display: inline; + *margin-left: .3em; + font-size: 0; + white-space: nowrap; + vertical-align: middle; + *zoom: 1; +} + +.btn-group:first-child { + *margin-left: 0; +} + +.btn-group + .btn-group { + margin-left: 5px; +} + +.btn-toolbar { + margin-top: 10px; + margin-bottom: 10px; + font-size: 0; +} + +.btn-toolbar > .btn + .btn, +.btn-toolbar > .btn-group + .btn, +.btn-toolbar > .btn + .btn-group { + margin-left: 5px; +} + +.btn-group > .btn { + position: relative; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.btn-group > .btn + .btn { + margin-left: -1px; +} + +.btn-group > .btn, +.btn-group > .dropdown-menu, +.btn-group > .popover { + font-size: 14px; +} + +.btn-group > .btn-mini { + font-size: 10.5px; +} + +.btn-group > .btn-small { + font-size: 11.9px; +} + +.btn-group > .btn-large { + font-size: 17.5px; +} + +.btn-group > .btn:first-child { + margin-left: 0; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + -moz-border-radius-topleft: 4px; +} + +.btn-group > .btn:last-child, +.btn-group > .dropdown-toggle { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-bottomright: 4px; +} + +.btn-group > .btn.large:first-child { + margin-left: 0; + -webkit-border-bottom-left-radius: 6px; + border-bottom-left-radius: 6px; + -webkit-border-top-left-radius: 6px; + border-top-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + -moz-border-radius-topleft: 6px; +} + +.btn-group > .btn.large:last-child, +.btn-group > .large.dropdown-toggle { + -webkit-border-top-right-radius: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + border-bottom-right-radius: 6px; + -moz-border-radius-topright: 6px; + -moz-border-radius-bottomright: 6px; +} + +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active { + z-index: 2; +} + +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + +.btn-group > .btn + .dropdown-toggle { + *padding-top: 5px; + padding-right: 8px; + *padding-bottom: 5px; + padding-left: 8px; + -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn-group > .btn-mini + .dropdown-toggle { + *padding-top: 2px; + padding-right: 5px; + *padding-bottom: 2px; + padding-left: 5px; +} + +.btn-group > .btn-small + .dropdown-toggle { + *padding-top: 5px; + *padding-bottom: 4px; +} + +.btn-group > .btn-large + .dropdown-toggle { + *padding-top: 7px; + padding-right: 12px; + *padding-bottom: 7px; + padding-left: 12px; +} + +.btn-group.open .dropdown-toggle { + background-image: none; + -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.btn-group.open .btn.dropdown-toggle { + background-color: #e6e6e6; +} + +.btn-group.open .btn-primary.dropdown-toggle { + background-color: #0044cc; +} + +.btn-group.open .btn-warning.dropdown-toggle { + background-color: #f89406; +} + +.btn-group.open .btn-danger.dropdown-toggle { + background-color: #bd362f; +} + +.btn-group.open .btn-success.dropdown-toggle { + background-color: #51a351; +} + +.btn-group.open .btn-info.dropdown-toggle { + background-color: #2f96b4; +} + +.btn-group.open .btn-inverse.dropdown-toggle { + background-color: #222222; +} + +.btn .caret { + margin-top: 8px; + margin-left: 0; +} + +.btn-large .caret { + margin-top: 6px; +} + +.btn-large .caret { + border-top-width: 5px; + border-right-width: 5px; + border-left-width: 5px; +} + +.btn-mini .caret, +.btn-small .caret { + margin-top: 8px; +} + +.dropup .btn-large .caret { + border-bottom-width: 5px; +} + +.btn-primary .caret, +.btn-warning .caret, +.btn-danger .caret, +.btn-info .caret, +.btn-success .caret, +.btn-inverse .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; +} + +.btn-group-vertical { + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; +} + +.btn-group-vertical > .btn { + display: block; + float: none; + max-width: 100%; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.btn-group-vertical > .btn + .btn { + margin-top: -1px; + margin-left: 0; +} + +.btn-group-vertical > .btn:first-child { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} + +.btn-group-vertical > .btn:last-child { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +.btn-group-vertical > .btn-large:first-child { + -webkit-border-radius: 6px 6px 0 0; + -moz-border-radius: 6px 6px 0 0; + border-radius: 6px 6px 0 0; +} + +.btn-group-vertical > .btn-large:last-child { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} + +.alert { + padding: 8px 35px 8px 14px; + margin-bottom: 20px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + background-color: #fcf8e3; + border: 1px solid #fbeed5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.alert, +.alert h4 { + color: #c09853; +} + +.alert h4 { + margin: 0; +} + +.alert .close { + position: relative; + top: -2px; + right: -21px; + line-height: 20px; +} + +.alert-success { + color: #468847; + background-color: #dff0d8; + border-color: #d6e9c6; +} + +.alert-success h4 { + color: #468847; +} + +.alert-danger, +.alert-error { + color: #b94a48; + background-color: #f2dede; + border-color: #eed3d7; +} + +.alert-danger h4, +.alert-error h4 { + color: #b94a48; +} + +.alert-info { + color: #3a87ad; + background-color: #d9edf7; + border-color: #bce8f1; +} + +.alert-info h4 { + color: #3a87ad; +} + +.alert-block { + padding-top: 14px; + padding-bottom: 14px; +} + +.alert-block > p, +.alert-block > ul { + margin-bottom: 0; +} + +.alert-block p + p { + margin-top: 5px; +} + +.nav { + margin-bottom: 20px; + margin-left: 0; + list-style: none; +} + +.nav > li > a { + display: block; +} + +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: #eeeeee; +} + +.nav > li > a > img { + max-width: none; +} + +.nav > .pull-right { + float: right; +} + +.nav-header { + display: block; + padding: 3px 15px; + font-size: 11px; + font-weight: bold; + line-height: 20px; + color: #999999; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + text-transform: uppercase; +} + +.nav li + .nav-header { + margin-top: 9px; +} + +.nav-list { + padding-right: 15px; + padding-left: 15px; + margin-bottom: 0; +} + +.nav-list > li > a, +.nav-list .nav-header { + margin-right: -15px; + margin-left: -15px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); +} + +.nav-list > li > a { + padding: 3px 15px; +} + +.nav-list > .active > a, +.nav-list > .active > a:hover, +.nav-list > .active > a:focus { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); + background-color: #0088cc; +} + +.nav-list [class^="icon-"], +.nav-list [class*=" icon-"] { + margin-right: 2px; +} + +.nav-list .divider { + *width: 100%; + height: 1px; + margin: 9px 1px; + *margin: -5px 0 5px; + overflow: hidden; + background-color: #e5e5e5; + border-bottom: 1px solid #ffffff; +} + +.nav-tabs, +.nav-pills { + *zoom: 1; +} + +.nav-tabs:before, +.nav-pills:before, +.nav-tabs:after, +.nav-pills:after { + display: table; + line-height: 0; + content: ""; +} + +.nav-tabs:after, +.nav-pills:after { + clear: both; +} + +.nav-tabs > li, +.nav-pills > li { + float: left; +} + +.nav-tabs > li > a, +.nav-pills > li > a { + padding-right: 12px; + padding-left: 12px; + margin-right: 2px; + line-height: 14px; +} + +.nav-tabs { + border-bottom: 1px solid #ddd; +} + +.nav-tabs > li { + margin-bottom: -1px; +} + +.nav-tabs > li > a { + padding-top: 8px; + padding-bottom: 8px; + line-height: 20px; + border: 1px solid transparent; + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} + +.nav-tabs > li > a:hover, +.nav-tabs > li > a:focus { + border-color: #eeeeee #eeeeee #dddddd; +} + +.nav-tabs > .active > a, +.nav-tabs > .active > a:hover, +.nav-tabs > .active > a:focus { + color: #555555; + cursor: default; + background-color: #ffffff; + border: 1px solid #ddd; + border-bottom-color: transparent; +} + +.nav-pills > li > a { + padding-top: 8px; + padding-bottom: 8px; + margin-top: 2px; + margin-bottom: 2px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; +} + +.nav-pills > .active > a, +.nav-pills > .active > a:hover, +.nav-pills > .active > a:focus { + color: #ffffff; + background-color: #0088cc; +} + +.nav-stacked > li { + float: none; +} + +.nav-stacked > li > a { + margin-right: 0; +} + +.nav-tabs.nav-stacked { + border-bottom: 0; +} + +.nav-tabs.nav-stacked > li > a { + border: 1px solid #ddd; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.nav-tabs.nav-stacked > li:first-child > a { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-topleft: 4px; +} + +.nav-tabs.nav-stacked > li:last-child > a { + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -moz-border-radius-bottomleft: 4px; +} + +.nav-tabs.nav-stacked > li > a:hover, +.nav-tabs.nav-stacked > li > a:focus { + z-index: 2; + border-color: #ddd; +} + +.nav-pills.nav-stacked > li > a { + margin-bottom: 3px; +} + +.nav-pills.nav-stacked > li:last-child > a { + margin-bottom: 1px; +} + +.nav-tabs .dropdown-menu { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} + +.nav-pills .dropdown-menu { + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.nav .dropdown-toggle .caret { + margin-top: 6px; + border-top-color: #0088cc; + border-bottom-color: #0088cc; +} + +.nav .dropdown-toggle:hover .caret, +.nav .dropdown-toggle:focus .caret { + border-top-color: #005580; + border-bottom-color: #005580; +} + +/* move down carets for tabs */ + +.nav-tabs .dropdown-toggle .caret { + margin-top: 8px; +} + +.nav .active .dropdown-toggle .caret { + border-top-color: #fff; + border-bottom-color: #fff; +} + +.nav-tabs .active .dropdown-toggle .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} + +.nav > .dropdown.active > a:hover, +.nav > .dropdown.active > a:focus { + cursor: pointer; +} + +.nav-tabs .open .dropdown-toggle, +.nav-pills .open .dropdown-toggle, +.nav > li.dropdown.open.active > a:hover, +.nav > li.dropdown.open.active > a:focus { + color: #ffffff; + background-color: #999999; + border-color: #999999; +} + +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open a:hover .caret, +.nav li.dropdown.open a:focus .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; + opacity: 1; + filter: alpha(opacity=100); +} + +.tabs-stacked .open > a:hover, +.tabs-stacked .open > a:focus { + border-color: #999999; +} + +.tabbable { + *zoom: 1; +} + +.tabbable:before, +.tabbable:after { + display: table; + line-height: 0; + content: ""; +} + +.tabbable:after { + clear: both; +} + +.tab-content { + overflow: auto; +} + +.tabs-below > .nav-tabs, +.tabs-right > .nav-tabs, +.tabs-left > .nav-tabs { + border-bottom: 0; +} + +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} + +.tab-content > .active, +.pill-content > .active { + display: block; +} + +.tabs-below > .nav-tabs { + border-top: 1px solid #ddd; +} + +.tabs-below > .nav-tabs > li { + margin-top: -1px; + margin-bottom: 0; +} + +.tabs-below > .nav-tabs > li > a { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +.tabs-below > .nav-tabs > li > a:hover, +.tabs-below > .nav-tabs > li > a:focus { + border-top-color: #ddd; + border-bottom-color: transparent; +} + +.tabs-below > .nav-tabs > .active > a, +.tabs-below > .nav-tabs > .active > a:hover, +.tabs-below > .nav-tabs > .active > a:focus { + border-color: transparent #ddd #ddd #ddd; +} + +.tabs-left > .nav-tabs > li, +.tabs-right > .nav-tabs > li { + float: none; +} + +.tabs-left > .nav-tabs > li > a, +.tabs-right > .nav-tabs > li > a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; +} + +.tabs-left > .nav-tabs { + float: left; + margin-right: 19px; + border-right: 1px solid #ddd; +} + +.tabs-left > .nav-tabs > li > a { + margin-right: -1px; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.tabs-left > .nav-tabs > li > a:hover, +.tabs-left > .nav-tabs > li > a:focus { + border-color: #eeeeee #dddddd #eeeeee #eeeeee; +} + +.tabs-left > .nav-tabs .active > a, +.tabs-left > .nav-tabs .active > a:hover, +.tabs-left > .nav-tabs .active > a:focus { + border-color: #ddd transparent #ddd #ddd; + *border-right-color: #ffffff; +} + +.tabs-right > .nav-tabs { + float: right; + margin-left: 19px; + border-left: 1px solid #ddd; +} + +.tabs-right > .nav-tabs > li > a { + margin-left: -1px; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.tabs-right > .nav-tabs > li > a:hover, +.tabs-right > .nav-tabs > li > a:focus { + border-color: #eeeeee #eeeeee #eeeeee #dddddd; +} + +.tabs-right > .nav-tabs .active > a, +.tabs-right > .nav-tabs .active > a:hover, +.tabs-right > .nav-tabs .active > a:focus { + border-color: #ddd #ddd #ddd transparent; + *border-left-color: #ffffff; +} + +.nav > .disabled > a { + color: #999999; +} + +.nav > .disabled > a:hover, +.nav > .disabled > a:focus { + text-decoration: none; + cursor: default; + background-color: transparent; +} + +.navbar { + *position: relative; + *z-index: 2; + margin-bottom: 20px; + overflow: visible; +} + +.navbar-inner { + min-height: 40px; + padding-right: 20px; + padding-left: 20px; + background-color: #fafafa; + background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)); + background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); + background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); + background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); + background-repeat: repeat-x; + border: 1px solid #d4d4d4; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0); + *zoom: 1; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); + -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); +} + +.navbar-inner:before, +.navbar-inner:after { + display: table; + line-height: 0; + content: ""; +} + +.navbar-inner:after { + clear: both; +} + +.navbar .container { + width: auto; +} + +.nav-collapse.collapse { + height: auto; + overflow: visible; +} + +.navbar .brand { + display: block; + float: left; + padding: 10px 20px 10px; + margin-left: -20px; + font-size: 20px; + font-weight: 200; + color: #777777; + text-shadow: 0 1px 0 #ffffff; +} + +.navbar .brand:hover, +.navbar .brand:focus { + text-decoration: none; +} + +.navbar-text { + margin-bottom: 0; + line-height: 40px; + color: #777777; +} + +.navbar-link { + color: #777777; +} + +.navbar-link:hover, +.navbar-link:focus { + color: #333333; +} + +.navbar .divider-vertical { + height: 40px; + margin: 0 9px; + border-right: 1px solid #ffffff; + border-left: 1px solid #f2f2f2; +} + +.navbar .btn, +.navbar .btn-group { + margin-top: 5px; +} + +.navbar .btn-group .btn, +.navbar .input-prepend .btn, +.navbar .input-append .btn, +.navbar .input-prepend .btn-group, +.navbar .input-append .btn-group { + margin-top: 0; +} + +.navbar-form { + margin-bottom: 0; + *zoom: 1; +} + +.navbar-form:before, +.navbar-form:after { + display: table; + line-height: 0; + content: ""; +} + +.navbar-form:after { + clear: both; +} + +.navbar-form input, +.navbar-form select, +.navbar-form .radio, +.navbar-form .checkbox { + margin-top: 5px; +} + +.navbar-form input, +.navbar-form select, +.navbar-form .btn { + display: inline-block; + margin-bottom: 0; +} + +.navbar-form input[type="image"], +.navbar-form input[type="checkbox"], +.navbar-form input[type="radio"] { + margin-top: 3px; +} + +.navbar-form .input-append, +.navbar-form .input-prepend { + margin-top: 5px; + white-space: nowrap; +} + +.navbar-form .input-append input, +.navbar-form .input-prepend input { + margin-top: 0; +} + +.navbar-search { + position: relative; + float: left; + margin-top: 5px; + margin-bottom: 0; +} + +.navbar-search .search-query { + padding: 4px 14px; + margin-bottom: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: 1; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} + +.navbar-static-top { + position: static; + margin-bottom: 0; +} + +.navbar-static-top .navbar-inner { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: 1030; + margin-bottom: 0; +} + +.navbar-fixed-top .navbar-inner, +.navbar-static-top .navbar-inner { + border-width: 0 0 1px; +} + +.navbar-fixed-bottom .navbar-inner { + border-width: 1px 0 0; +} + +.navbar-fixed-top .navbar-inner, +.navbar-fixed-bottom .navbar-inner { + padding-right: 0; + padding-left: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +.navbar-static-top .container, +.navbar-fixed-top .container, +.navbar-fixed-bottom .container { + width: 940px; +} + +.navbar-fixed-top { + top: 0; +} + +.navbar-fixed-top .navbar-inner, +.navbar-static-top .navbar-inner { + -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); +} + +.navbar-fixed-bottom { + bottom: 0; +} + +.navbar-fixed-bottom .navbar-inner { + -webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); +} + +.navbar .nav { + position: relative; + left: 0; + display: block; + float: left; + margin: 0 10px 0 0; +} + +.navbar .nav.pull-right { + float: right; + margin-right: 0; +} + +.navbar .nav > li { + float: left; +} + +.navbar .nav > li > a { + float: none; + padding: 10px 15px 10px; + color: #777777; + text-decoration: none; + text-shadow: 0 1px 0 #ffffff; +} + +.navbar .nav .dropdown-toggle .caret { + margin-top: 8px; +} + +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + color: #333333; + text-decoration: none; + background-color: transparent; +} + +.navbar .nav > .active > a, +.navbar .nav > .active > a:hover, +.navbar .nav > .active > a:focus { + color: #555555; + text-decoration: none; + background-color: #e5e5e5; + -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); +} + +.navbar .btn-navbar { + display: none; + float: right; + padding: 7px 10px; + margin-right: 5px; + margin-left: 5px; + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #ededed; + *background-color: #e5e5e5; + background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5)); + background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5); + background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5); + background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5); + background-repeat: repeat-x; + border-color: #e5e5e5 #e5e5e5 #bfbfbf; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); +} + +.navbar .btn-navbar:hover, +.navbar .btn-navbar:focus, +.navbar .btn-navbar:active, +.navbar .btn-navbar.active, +.navbar .btn-navbar.disabled, +.navbar .btn-navbar[disabled] { + color: #ffffff; + background-color: #e5e5e5; + *background-color: #d9d9d9; +} + +.navbar .btn-navbar:active, +.navbar .btn-navbar.active { + background-color: #cccccc \9; +} + +.navbar .btn-navbar .icon-bar { + display: block; + width: 18px; + height: 2px; + background-color: #f5f5f5; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); +} + +.btn-navbar .icon-bar + .icon-bar { + margin-top: 3px; +} + +.navbar .nav > li > .dropdown-menu:before { + position: absolute; + top: -7px; + left: 9px; + display: inline-block; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-left: 7px solid transparent; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} + +.navbar .nav > li > .dropdown-menu:after { + position: absolute; + top: -6px; + left: 10px; + display: inline-block; + border-right: 6px solid transparent; + border-bottom: 6px solid #ffffff; + border-left: 6px solid transparent; + content: ''; +} + +.navbar-fixed-bottom .nav > li > .dropdown-menu:before { + top: auto; + bottom: -7px; + border-top: 7px solid #ccc; + border-bottom: 0; + border-top-color: rgba(0, 0, 0, 0.2); +} + +.navbar-fixed-bottom .nav > li > .dropdown-menu:after { + top: auto; + bottom: -6px; + border-top: 6px solid #ffffff; + border-bottom: 0; +} + +.navbar .nav li.dropdown > a:hover .caret, +.navbar .nav li.dropdown > a:focus .caret { + border-top-color: #333333; + border-bottom-color: #333333; +} + +.navbar .nav li.dropdown.open > .dropdown-toggle, +.navbar .nav li.dropdown.active > .dropdown-toggle, +.navbar .nav li.dropdown.open.active > .dropdown-toggle { + color: #555555; + background-color: #e5e5e5; +} + +.navbar .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: #777777; + border-bottom-color: #777777; +} + +.navbar .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: #555555; + border-bottom-color: #555555; +} + +.navbar .pull-right > li > .dropdown-menu, +.navbar .nav > li > .dropdown-menu.pull-right { + right: 0; + left: auto; +} + +.navbar .pull-right > li > .dropdown-menu:before, +.navbar .nav > li > .dropdown-menu.pull-right:before { + right: 12px; + left: auto; +} + +.navbar .pull-right > li > .dropdown-menu:after, +.navbar .nav > li > .dropdown-menu.pull-right:after { + right: 13px; + left: auto; +} + +.navbar .pull-right > li > .dropdown-menu .dropdown-menu, +.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu { + right: 100%; + left: auto; + margin-right: -1px; + margin-left: 0; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; +} + +.navbar-inverse .navbar-inner { + background-color: #1b1b1b; + background-image: -moz-linear-gradient(top, #222222, #111111); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); + background-image: -webkit-linear-gradient(top, #222222, #111111); + background-image: -o-linear-gradient(top, #222222, #111111); + background-image: linear-gradient(to bottom, #222222, #111111); + background-repeat: repeat-x; + border-color: #252525; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); +} + +.navbar-inverse .brand, +.navbar-inverse .nav > li > a { + color: #999999; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); +} + +.navbar-inverse .brand:hover, +.navbar-inverse .nav > li > a:hover, +.navbar-inverse .brand:focus, +.navbar-inverse .nav > li > a:focus { + color: #ffffff; +} + +.navbar-inverse .brand { + color: #999999; +} + +.navbar-inverse .navbar-text { + color: #999999; +} + +.navbar-inverse .nav > li > a:focus, +.navbar-inverse .nav > li > a:hover { + color: #ffffff; + background-color: transparent; +} + +.navbar-inverse .nav .active > a, +.navbar-inverse .nav .active > a:hover, +.navbar-inverse .nav .active > a:focus { + color: #ffffff; + background-color: #111111; +} + +.navbar-inverse .navbar-link { + color: #999999; +} + +.navbar-inverse .navbar-link:hover, +.navbar-inverse .navbar-link:focus { + color: #ffffff; +} + +.navbar-inverse .divider-vertical { + border-right-color: #222222; + border-left-color: #111111; +} + +.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, +.navbar-inverse .nav li.dropdown.active > .dropdown-toggle, +.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle { + color: #ffffff; + background-color: #111111; +} + +.navbar-inverse .nav li.dropdown > a:hover .caret, +.navbar-inverse .nav li.dropdown > a:focus .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; +} + +.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: #999999; + border-bottom-color: #999999; +} + +.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: #ffffff; + border-bottom-color: #ffffff; +} + +.navbar-inverse .navbar-search .search-query { + color: #ffffff; + background-color: #515151; + border-color: #111111; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; +} + +.navbar-inverse .navbar-search .search-query:-moz-placeholder { + color: #cccccc; +} + +.navbar-inverse .navbar-search .search-query:-ms-input-placeholder { + color: #cccccc; +} + +.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder { + color: #cccccc; +} + +.navbar-inverse .navbar-search .search-query:focus, +.navbar-inverse .navbar-search .search-query.focused { + padding: 5px 15px; + color: #333333; + text-shadow: 0 1px 0 #ffffff; + background-color: #ffffff; + border: 0; + outline: 0; + -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); +} + +.navbar-inverse .btn-navbar { + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #0e0e0e; + *background-color: #040404; + background-image: -moz-linear-gradient(top, #151515, #040404); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); + background-image: -webkit-linear-gradient(top, #151515, #040404); + background-image: -o-linear-gradient(top, #151515, #040404); + background-image: linear-gradient(to bottom, #151515, #040404); + background-repeat: repeat-x; + border-color: #040404 #040404 #000000; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} + +.navbar-inverse .btn-navbar:hover, +.navbar-inverse .btn-navbar:focus, +.navbar-inverse .btn-navbar:active, +.navbar-inverse .btn-navbar.active, +.navbar-inverse .btn-navbar.disabled, +.navbar-inverse .btn-navbar[disabled] { + color: #ffffff; + background-color: #040404; + *background-color: #000000; +} + +.navbar-inverse .btn-navbar:active, +.navbar-inverse .btn-navbar.active { + background-color: #000000 \9; +} + +.breadcrumb { + padding: 8px 15px; + margin: 0 0 20px; + list-style: none; + background-color: #f5f5f5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.breadcrumb > li { + display: inline-block; + *display: inline; + text-shadow: 0 1px 0 #ffffff; + *zoom: 1; +} + +.breadcrumb > li > .divider { + padding: 0 5px; + color: #ccc; +} + +.breadcrumb > .active { + color: #999999; +} + +.pagination { + margin: 20px 0; +} + +.pagination ul { + display: inline-block; + *display: inline; + margin-bottom: 0; + margin-left: 0; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + *zoom: 1; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.pagination ul > li { + display: inline; +} + +.pagination ul > li > a, +.pagination ul > li > span { + float: left; + padding: 4px 12px; + line-height: 20px; + text-decoration: none; + background-color: #ffffff; + border: 1px solid #dddddd; + border-left-width: 0; +} + +.pagination ul > li > a:hover, +.pagination ul > li > a:focus, +.pagination ul > .active > a, +.pagination ul > .active > span { + background-color: #f5f5f5; +} + +.pagination ul > .active > a, +.pagination ul > .active > span { + color: #999999; + cursor: default; +} + +.pagination ul > .disabled > span, +.pagination ul > .disabled > a, +.pagination ul > .disabled > a:hover, +.pagination ul > .disabled > a:focus { + color: #999999; + cursor: default; + background-color: transparent; +} + +.pagination ul > li:first-child > a, +.pagination ul > li:first-child > span { + border-left-width: 1px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + -moz-border-radius-topleft: 4px; +} + +.pagination ul > li:last-child > a, +.pagination ul > li:last-child > span { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-bottomright: 4px; +} + +.pagination-centered { + text-align: center; +} + +.pagination-right { + text-align: right; +} + +.pagination-large ul > li > a, +.pagination-large ul > li > span { + padding: 11px 19px; + font-size: 17.5px; +} + +.pagination-large ul > li:first-child > a, +.pagination-large ul > li:first-child > span { + -webkit-border-bottom-left-radius: 6px; + border-bottom-left-radius: 6px; + -webkit-border-top-left-radius: 6px; + border-top-left-radius: 6px; + -moz-border-radius-bottomleft: 6px; + -moz-border-radius-topleft: 6px; +} + +.pagination-large ul > li:last-child > a, +.pagination-large ul > li:last-child > span { + -webkit-border-top-right-radius: 6px; + border-top-right-radius: 6px; + -webkit-border-bottom-right-radius: 6px; + border-bottom-right-radius: 6px; + -moz-border-radius-topright: 6px; + -moz-border-radius-bottomright: 6px; +} + +.pagination-mini ul > li:first-child > a, +.pagination-small ul > li:first-child > a, +.pagination-mini ul > li:first-child > span, +.pagination-small ul > li:first-child > span { + -webkit-border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px; + -webkit-border-top-left-radius: 3px; + border-top-left-radius: 3px; + -moz-border-radius-bottomleft: 3px; + -moz-border-radius-topleft: 3px; +} + +.pagination-mini ul > li:last-child > a, +.pagination-small ul > li:last-child > a, +.pagination-mini ul > li:last-child > span, +.pagination-small ul > li:last-child > span { + -webkit-border-top-right-radius: 3px; + border-top-right-radius: 3px; + -webkit-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; + -moz-border-radius-topright: 3px; + -moz-border-radius-bottomright: 3px; +} + +.pagination-small ul > li > a, +.pagination-small ul > li > span { + padding: 2px 10px; + font-size: 11.9px; +} + +.pagination-mini ul > li > a, +.pagination-mini ul > li > span { + padding: 0 6px; + font-size: 10.5px; +} + +.pager { + margin: 20px 0; + text-align: center; + list-style: none; + *zoom: 1; +} + +.pager:before, +.pager:after { + display: table; + line-height: 0; + content: ""; +} + +.pager:after { + clear: both; +} + +.pager li { + display: inline; +} + +.pager li > a, +.pager li > span { + display: inline-block; + padding: 5px 14px; + background-color: #fff; + border: 1px solid #ddd; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; +} + +.pager li > a:hover, +.pager li > a:focus { + text-decoration: none; + background-color: #f5f5f5; +} + +.pager .next > a, +.pager .next > span { + float: right; +} + +.pager .previous > a, +.pager .previous > span { + float: left; +} + +.pager .disabled > a, +.pager .disabled > a:hover, +.pager .disabled > a:focus, +.pager .disabled > span { + color: #999999; + cursor: default; + background-color: #fff; +} + +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #000000; +} + +.modal-backdrop.fade { + opacity: 0; +} + +.modal-backdrop, +.modal-backdrop.fade.in { + opacity: 0.8; + filter: alpha(opacity=80); +} + +.modal { + position: fixed; + top: 10%; + left: 50%; + z-index: 1050; + width: 560px; + margin-left: -280px; + background-color: #ffffff; + border: 1px solid #999; + border: 1px solid rgba(0, 0, 0, 0.3); + *border: 1px solid #999; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + outline: none; + -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); + -webkit-background-clip: padding-box; + -moz-background-clip: padding-box; + background-clip: padding-box; +} + +.modal.fade { + top: -25%; + -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; + -moz-transition: opacity 0.3s linear, top 0.3s ease-out; + -o-transition: opacity 0.3s linear, top 0.3s ease-out; + transition: opacity 0.3s linear, top 0.3s ease-out; +} + +.modal.fade.in { + top: 10%; +} + +.modal-header { + padding: 9px 15px; + border-bottom: 1px solid #eee; +} + +.modal-header .close { + margin-top: 2px; +} + +.modal-header h3 { + margin: 0; + line-height: 30px; +} + +.modal-body { + position: relative; + max-height: 400px; + padding: 15px; + overflow-y: auto; +} + +.modal-form { + margin-bottom: 0; +} + +.modal-footer { + padding: 14px 15px 15px; + margin-bottom: 0; + text-align: right; + background-color: #f5f5f5; + border-top: 1px solid #ddd; + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; + *zoom: 1; + -webkit-box-shadow: inset 0 1px 0 #ffffff; + -moz-box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #ffffff; +} + +.modal-footer:before, +.modal-footer:after { + display: table; + line-height: 0; + content: ""; +} + +.modal-footer:after { + clear: both; +} + +.modal-footer .btn + .btn { + margin-bottom: 0; + margin-left: 5px; +} + +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} + +.modal-footer .btn-block + .btn-block { + margin-left: 0; +} + +.tooltip { + position: absolute; + z-index: 1030; + display: block; + font-size: 11px; + line-height: 1.4; + opacity: 0; + filter: alpha(opacity=0); + visibility: visible; +} + +.tooltip.in { + opacity: 0.8; + filter: alpha(opacity=80); +} + +.tooltip.top { + padding: 5px 0; + margin-top: -3px; +} + +.tooltip.right { + padding: 0 5px; + margin-left: 3px; +} + +.tooltip.bottom { + padding: 5px 0; + margin-top: 3px; +} + +.tooltip.left { + padding: 0 5px; + margin-left: -3px; +} + +.tooltip-inner { + max-width: 200px; + padding: 8px; + color: #ffffff; + text-align: center; + text-decoration: none; + background-color: #000000; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-top-color: #000000; + border-width: 5px 5px 0; +} + +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-right-color: #000000; + border-width: 5px 5px 5px 0; +} + +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-left-color: #000000; + border-width: 5px 0 5px 5px; +} + +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-bottom-color: #000000; + border-width: 0 5px 5px; +} + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1010; + display: none; + max-width: 276px; + padding: 1px; + text-align: left; + white-space: normal; + background-color: #ffffff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.popover.top { + margin-top: -10px; +} + +.popover.right { + margin-left: 10px; +} + +.popover.bottom { + margin-top: 10px; +} + +.popover.left { + margin-left: -10px; +} + +.popover-title { + padding: 8px 14px; + margin: 0; + font-size: 14px; + font-weight: normal; + line-height: 18px; + background-color: #f7f7f7; + border-bottom: 1px solid #ebebeb; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; +} + +.popover-title:empty { + display: none; +} + +.popover-content { + padding: 9px 14px; +} + +.popover .arrow, +.popover .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.popover .arrow { + border-width: 11px; +} + +.popover .arrow:after { + border-width: 10px; + content: ""; +} + +.popover.top .arrow { + bottom: -11px; + left: 50%; + margin-left: -11px; + border-top-color: #999; + border-top-color: rgba(0, 0, 0, 0.25); + border-bottom-width: 0; +} + +.popover.top .arrow:after { + bottom: 1px; + margin-left: -10px; + border-top-color: #ffffff; + border-bottom-width: 0; +} + +.popover.right .arrow { + top: 50%; + left: -11px; + margin-top: -11px; + border-right-color: #999; + border-right-color: rgba(0, 0, 0, 0.25); + border-left-width: 0; +} + +.popover.right .arrow:after { + bottom: -10px; + left: 1px; + border-right-color: #ffffff; + border-left-width: 0; +} + +.popover.bottom .arrow { + top: -11px; + left: 50%; + margin-left: -11px; + border-bottom-color: #999; + border-bottom-color: rgba(0, 0, 0, 0.25); + border-top-width: 0; +} + +.popover.bottom .arrow:after { + top: 1px; + margin-left: -10px; + border-bottom-color: #ffffff; + border-top-width: 0; +} + +.popover.left .arrow { + top: 50%; + right: -11px; + margin-top: -11px; + border-left-color: #999; + border-left-color: rgba(0, 0, 0, 0.25); + border-right-width: 0; +} + +.popover.left .arrow:after { + right: 1px; + bottom: -10px; + border-left-color: #ffffff; + border-right-width: 0; +} + +.thumbnails { + margin-left: -20px; + list-style: none; + *zoom: 1; +} + +.thumbnails:before, +.thumbnails:after { + display: table; + line-height: 0; + content: ""; +} + +.thumbnails:after { + clear: both; +} + +.row-fluid .thumbnails { + margin-left: 0; +} + +.thumbnails > li { + float: left; + margin-bottom: 20px; + margin-left: 20px; +} + +.thumbnail { + display: block; + padding: 4px; + line-height: 20px; + border: 1px solid #ddd; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +a.thumbnail:hover, +a.thumbnail:focus { + border-color: #0088cc; + -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); + -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); + box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); +} + +.thumbnail > img { + display: block; + max-width: 100%; + margin-right: auto; + margin-left: auto; +} + +.thumbnail .caption { + padding: 9px; + color: #555555; +} + +.media, +.media-body { + overflow: hidden; + *overflow: visible; + zoom: 1; +} + +.media, +.media .media { + margin-top: 15px; +} + +.media:first-child { + margin-top: 0; +} + +.media-object { + display: block; +} + +.media-heading { + margin: 0 0 5px; +} + +.media > .pull-left { + margin-right: 10px; +} + +.media > .pull-right { + margin-left: 10px; +} + +.media-list { + margin-left: 0; + list-style: none; +} + +.label, +.badge { + display: inline-block; + padding: 2px 4px; + font-size: 11.844px; + font-weight: bold; + line-height: 14px; + color: #ffffff; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + white-space: nowrap; + vertical-align: baseline; + background-color: #999999; +} + +.label { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.badge { + padding-right: 9px; + padding-left: 9px; + -webkit-border-radius: 9px; + -moz-border-radius: 9px; + border-radius: 9px; +} + +.label:empty, +.badge:empty { + display: none; +} + +a.label:hover, +a.label:focus, +a.badge:hover, +a.badge:focus { + color: #ffffff; + text-decoration: none; + cursor: pointer; +} + +.label-important, +.badge-important { + background-color: #b94a48; +} + +.label-important[href], +.badge-important[href] { + background-color: #953b39; +} + +.label-warning, +.badge-warning { + background-color: #f89406; +} + +.label-warning[href], +.badge-warning[href] { + background-color: #c67605; +} + +.label-success, +.badge-success { + background-color: #468847; +} + +.label-success[href], +.badge-success[href] { + background-color: #356635; +} + +.label-info, +.badge-info { + background-color: #3a87ad; +} + +.label-info[href], +.badge-info[href] { + background-color: #2d6987; +} + +.label-inverse, +.badge-inverse { + background-color: #333333; +} + +.label-inverse[href], +.badge-inverse[href] { + background-color: #1a1a1a; +} + +.btn .label, +.btn .badge { + position: relative; + top: -1px; +} + +.btn-mini .label, +.btn-mini .badge { + top: 0; +} + +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} + +@-moz-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} + +@-ms-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} + +@-o-keyframes progress-bar-stripes { + from { + background-position: 0 0; + } + to { + background-position: 40px 0; + } +} + +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} + +.progress { + height: 20px; + margin-bottom: 20px; + overflow: hidden; + background-color: #f7f7f7; + background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); + background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); + background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9); + background-repeat: repeat-x; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0); + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} + +.progress .bar { + float: left; + width: 0; + height: 100%; + font-size: 12px; + color: #ffffff; + text-align: center; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: #0e90d2; + background-image: -moz-linear-gradient(top, #149bdf, #0480be); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); + background-image: -webkit-linear-gradient(top, #149bdf, #0480be); + background-image: -o-linear-gradient(top, #149bdf, #0480be); + background-image: linear-gradient(to bottom, #149bdf, #0480be); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0); + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: width 0.6s ease; + -moz-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} + +.progress .bar + .bar { + -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +.progress-striped .bar { + background-color: #149bdf; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + -webkit-background-size: 40px 40px; + -moz-background-size: 40px 40px; + -o-background-size: 40px 40px; + background-size: 40px 40px; +} + +.progress.active .bar { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -moz-animation: progress-bar-stripes 2s linear infinite; + -ms-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} + +.progress-danger .bar, +.progress .bar-danger { + background-color: #dd514c; + background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); + background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); + background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); + background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0); +} + +.progress-danger.progress-striped .bar, +.progress-striped .bar-danger { + background-color: #ee5f5b; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} + +.progress-success .bar, +.progress .bar-success { + background-color: #5eb95e; + background-image: -moz-linear-gradient(top, #62c462, #57a957); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); + background-image: -webkit-linear-gradient(top, #62c462, #57a957); + background-image: -o-linear-gradient(top, #62c462, #57a957); + background-image: linear-gradient(to bottom, #62c462, #57a957); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0); +} + +.progress-success.progress-striped .bar, +.progress-striped .bar-success { + background-color: #62c462; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} + +.progress-info .bar, +.progress .bar-info { + background-color: #4bb1cf; + background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); + background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); + background-image: -o-linear-gradient(top, #5bc0de, #339bb9); + background-image: linear-gradient(to bottom, #5bc0de, #339bb9); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0); +} + +.progress-info.progress-striped .bar, +.progress-striped .bar-info { + background-color: #5bc0de; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} + +.progress-warning .bar, +.progress .bar-warning { + background-color: #faa732; + background-image: -moz-linear-gradient(top, #fbb450, #f89406); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); + background-image: -webkit-linear-gradient(top, #fbb450, #f89406); + background-image: -o-linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); +} + +.progress-warning.progress-striped .bar, +.progress-striped .bar-warning { + background-color: #fbb450; + background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} + +.accordion { + margin-bottom: 20px; +} + +.accordion-group { + margin-bottom: 2px; + border: 1px solid #e5e5e5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.accordion-heading { + border-bottom: 0; +} + +.accordion-heading .accordion-toggle { + display: block; + padding: 8px 15px; +} + +.accordion-toggle { + cursor: pointer; +} + +.accordion-inner { + padding: 9px 15px; + border-top: 1px solid #e5e5e5; +} + +.carousel { + position: relative; + margin-bottom: 20px; + line-height: 1; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; +} + +.carousel-inner > .item { + position: relative; + display: none; + -webkit-transition: 0.6s ease-in-out left; + -moz-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; +} + +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + display: block; + line-height: 1; +} + +.carousel-inner > .active, +.carousel-inner > .next, +.carousel-inner > .prev { + display: block; +} + +.carousel-inner > .active { + left: 0; +} + +.carousel-inner > .next, +.carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; +} + +.carousel-inner > .next { + left: 100%; +} + +.carousel-inner > .prev { + left: -100%; +} + +.carousel-inner > .next.left, +.carousel-inner > .prev.right { + left: 0; +} + +.carousel-inner > .active.left { + left: -100%; +} + +.carousel-inner > .active.right { + left: 100%; +} + +.carousel-control { + position: absolute; + top: 40%; + left: 15px; + width: 40px; + height: 40px; + margin-top: -20px; + font-size: 60px; + font-weight: 100; + line-height: 30px; + color: #ffffff; + text-align: center; + background: #222222; + border: 3px solid #ffffff; + -webkit-border-radius: 23px; + -moz-border-radius: 23px; + border-radius: 23px; + opacity: 0.5; + filter: alpha(opacity=50); +} + +.carousel-control.right { + right: 15px; + left: auto; +} + +.carousel-control:hover, +.carousel-control:focus { + color: #ffffff; + text-decoration: none; + opacity: 0.9; + filter: alpha(opacity=90); +} + +.carousel-indicators { + position: absolute; + top: 15px; + right: 15px; + z-index: 5; + margin: 0; + list-style: none; +} + +.carousel-indicators li { + display: block; + float: left; + width: 10px; + height: 10px; + margin-left: 5px; + text-indent: -999px; + background-color: #ccc; + background-color: rgba(255, 255, 255, 0.25); + border-radius: 5px; +} + +.carousel-indicators .active { + background-color: #fff; +} + +.carousel-caption { + position: absolute; + right: 0; + bottom: 0; + left: 0; + padding: 15px; + background: #333333; + background: rgba(0, 0, 0, 0.75); +} + +.carousel-caption h4, +.carousel-caption p { + line-height: 20px; + color: #ffffff; +} + +.carousel-caption h4 { + margin: 0 0 5px; +} + +.carousel-caption p { + margin-bottom: 0; +} + +.hero-unit { + padding: 60px; + margin-bottom: 30px; + font-size: 18px; + font-weight: 200; + line-height: 30px; + color: inherit; + background-color: #eeeeee; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + +.hero-unit h1 { + margin-bottom: 0; + font-size: 60px; + line-height: 1; + letter-spacing: -1px; + color: inherit; +} + +.hero-unit li { + line-height: 30px; +} + +.pull-right { + float: right; +} + +.pull-left { + float: left; +} + +.hide { + display: none; +} + +.show { + display: block; +} + +.invisible { + visibility: hidden; +} + +.affix { + position: fixed; +} diff --git a/cnDocs/assets/css/common.css b/cnDocs/assets/css/common.css new file mode 100644 index 000000000000..c634625f28e5 --- /dev/null +++ b/cnDocs/assets/css/common.css @@ -0,0 +1,147 @@ +/* 全站级公用样式 */ +/* 清除浮动 */ +.clearfix:after,.wrap:after,.cwrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +.clearfix,.wrap,.cwrap{zoom:1}/* for IE6 IE7 */ +/* 空标签清除法 */ +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} + +/* 要注意表单元素并不继承父级 font 的问题 根据自身需求设置 这里可以注意下建议在使用表单元素的时候再定义 */ +body{font:12px/1.5 Tahoma, Arial,\5b8b\4f53;} +button,input,select,textarea{font:12px/1.5 Tahoma, Arial,\5b8b\4f53;} +blockquote,pre{word-wrap:break-word;/*white-space:pre-wrap;会引起空白行*/} +/* 如果将font-family中的第一个字体设置为Tahoma,则可以完美的实现(type="checkbox",type="radio")对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。 */ + +/* 使Chrome支持12px以下的字体 */ +.text-size{-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} +/* 两端对齐 */ +.text-justify{text-align:justify;text-justify:inter-ideograph;} +/* 半透明 */ +.opacity {opacity:.5;filter:alpha(opacity=50);} +/* 文本过长变成省略号,需要定义宽度 */ +.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} +/* css3属性 */ +.css3_shadow{transition:all 1s ease-out 0s;border-radius:5px;box-shadow:0 0px 4px rgba(206, 201, 170, 0.8);} +.css3_shadow:hover{box-shadow:0 0px 5px rgba(206, 201, 170, 1);} + +/* 定义全站级统一样式 */ +/*a:link{color:#05a}a:visited{color:#7a94ae}a:hover{color:#f00}.view_more{color:#06c;padding:0 2px;}*/ +.yahei{font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","黑体"} + +/* 以下是模块化开发属性——模块化组合样式 +------------------------------------------------------------ */ +/* 设置内联, 减少浮动带来的bug */ +.fl,.fr{display:inline}.fl{float:left;}.fr{float:right} +/* 块状盒模型居中及内容居中 */ +bc{margin-left:auto;margin-right:auto;}.tc{text-align:center} + +/* 组合样式 */ +.f12{font-size:12px}.f14{font-size:14px}.f16{font-size:16px}.f18{font-size:18px}.f22{font-size:22px}.f24{font-size:24px} +.lh18{line-height:18px}.lh20{line-height:20px}.lh22{line-height:22px}.lh24{line-height:24px} + +.mt10{margin-top:10px}.mt20{margin-top:20px}.mb10{margin-bottom:10px}.mb20{margin-bottom:20px} +.ml10{margin-left:10px}.mr10{margin-right:10px} +.pd10{padding:10px}.pt10{padding-top:10px}.pb10{padding-bottom:10px}.plr10{padding-left:10px;padding-right:10px} + +.wrap{width:980px; margin-left:auto; margin-right:auto} +.cwrap{padding:8px 8px 0;margin-left:auto;margin-right:auto; background:white;} + +/*关于定位*/ + +/* 这条分割线以上的属性会提取到全站级公用样式 common.css中 +==================================================================================================== */ + +/* + +*/ + +/* = 关于一下css调试设置的方法 + +* html {} for IE 6及以下版本 +*:first-child+html {} for IE 7 only +*:first-child+html {} for IE 7及以下版本 +* html {} html>body {} for IE 7以及标准浏览器 +html:first-child {} for Opera 9及以下版本 + +*:ie6-7 +_:ie6 +\0:ie8-9 +\9:ie6-9 +!important: ff、ie6-9 +------------------------------------------------------------ */ +/* =扩展属性 +:+ 仅IE支持 +:要使用的滤镜效果。多个滤镜之间用空格隔开。 + {filter:alpha(opacity=50);}设置透明度 (其它高级浏览器的实现参阅opacity) + div{filter:alpha(opacity=50);} /* for IE8 and earlier 实现50%的透明度,此2段代码的效果相同 + div{opacity:.5;} /* for IE9 and other browsers opacity IE6,7,8不支持,请使用filter属性 +关系选择符 |包含选择符(E F) + |子选择符(E>F)相邻选择符(E+F)兄弟选择符(E~F) 仅IE6不支持 + +属性选择符 -> E[att] 具有att属性的E元素... 仅IE6不支持 +/* 条件Hack + + if条件共包含6种选择方式:是否!、大于gt、大于或等于gte、小于lt、小于或等于lte、非指定版本 + (关于特殊字符<:< >:> ":" &:&) + + 目前的常用IE版本为6.0及以上 +/* 选择符级Hack *** 选择不同的浏览器及版本,尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎 + 通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为!!标准模式!!。以下下简单列举几个 + * html .test{color:#090;} /* For IE6 and earlier + * + html .test{color:#ff0;} /* For IE7 + .test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE + .test:nth-child(1){color:#0ff;} /* For IE9+ and not IE /* IE都能识别*,但FF不识别 +/*!important + IE6及以下浏览器有个比较显式的支持问题存在,!important并不覆盖掉在同一条样式的后面的规则,但是在两条样式中时是起作用的!!! +/* 属性Hack + 如想同一段文字在IE6,7,8显示为不同颜色,可这样写: +.test{ + color:#c30; /* For Firefox + [;color:#ddd;]; /* For webkit(Chrome and Safari) + color:#090\0; /* For Opera + color:#00f\9; /* For IE8+ + *color:#f00; /* For IE7 + _color:#ff0; /* For IE6 +} +/* radius 圆角 + border-radius:[| ]{1,4}[/[|]{1,4}] IE6,7,8不支持 + .test{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} +/* box-shadow 阴影设置IE6,7,8不支持 + box-shadow:none | [ , ]* + = inset? && [ {2,4} && ? ] + none: 无阴影(默认值) + ①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值 + ②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 + ③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 + ④:如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值 + : 设置对象的阴影的颜色。请参阅颜色值 + inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影 +/* text-shadow 设置或检索对象中文本的文字是否有阴影及模糊效果 + text-shadow:none|[,]* + = {2,3} && ? + ①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 + ②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 + ③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 +/* calc() 用于动态计算长度值 Webkit(Chrome/Safari) Presto(Opera) IE6,7,8不支持 + 任何长度值都可以使用calc()函数进行计算。 calc()函数支持+, -, *, /, mod运算 + Gecko(Firefox) -moz-calc() + Trident(IE) calc() /* IE9 + .test{width:-moz-calc(100%-50px);width:calc(100%-50px);background:#eee;} + Firefox浏览器中使用"height: 100%"会固定其高度,而不是自动延伸成100%的高度,这个在IE浏览器中非常非常正常的一个CSS定义,到Firefox浏览器中就会有问题,不过为了兼容,总得研究研究再研究!这个"height: 100%"就象padding一样,要慎用。^_^此处已经解决,如上html,body处设置^_^ + +DIV高度自适应-----CSS布局中最小高度(min-height)的妙用(兼容IE,FF) 以下待验证 +{height:auto !important;height:600px; min-height:600px;} +IE6 不支持min-height属性,但它却认为height就是最小高度。/* 所有浏览器 +#container {min-height:200px; height:auto !important; height:200px;} + + Overflow Bug + +在IE6/7中,overflow无法正确的隐藏有相对定位position:relative;的子元素: +解决方法就是给外包容器 也加上position:relative; + +在IE6、IE7、IE8下,若浮动元素紧邻绝对定位元素的时候并且浮动元素设置了宽度,这样就会导致绝对定位元素"神秘失踪"。触发了IE的haslayout,解决方法就是取消这两个元素直接相邻 +------------------------------------------------------------ */ \ No newline at end of file diff --git a/cnDocs/assets/css/custom.css b/cnDocs/assets/css/custom.css new file mode 100644 index 000000000000..1405dddd4561 --- /dev/null +++ b/cnDocs/assets/css/custom.css @@ -0,0 +1,68 @@ +/*! + * 自定义样式 +**/ + + +.case li{ text-align:center} +.case h4{ margin:5px 0; font-weight:normal; font-size:12px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} + +/* +.none{ margin:0; padding:0;list-style:none} +.solutions li{text-align:center;} +.solutions a.thumbnail{padding-top:5%;} +.solutions h4{margin:5px 0} + +@media (max-width: 767px) { + .solutions a.thumbnail{padding-top:10px;} +} +/* +.solutions li:hover{ + box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); +} + +/* +.solutions li:before,.solutions li:after { content:""; border-radius:3px; width:100%; height:100%; position:absolute; border:7px solid rgba(0, 0, 0, 0.03); left:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; box-shadow:0 1px 4px rgba(0, 0, 0, 0.4); -webkit-transition:0.3s all ease-out; -moz-transition:0.3s all ease-out; -ms-transition:0.3s all ease-out; -o-transition:0.3s all ease-out; transition:0.3s all ease-out; } +.solutions li:before { top:-2px; z-index:-10; -webkit-transform:rotate(8deg); -moz-transform:rotate(8deg); -ms-transform:rotate(8deg); -o-transform:rotate(8deg); transform:rotate(8deg); } +.solutions li:after { top:0px; z-index:-20; -webkit-transform:rotate(-8deg); -moz-transform:rotate(-8deg); -ms-transform:rotate(-8deg); -o-transform:rotate(-8deg); transform:rotate(-8deg); } +.solutions li:hover:before,.solutions li:hover:after { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } + +/* 模拟滚动条 */ +.scoll_box{ height:98px; width:400px;} +.scoll_box ul{ margin-bottom:0} + + +.question,.answer{ padding:0 10px; } +.question p,.answer p{ margin:10px 0} +.question .link,.answer .link{ float: right } +.question{background: #FCFEFC;border-color:#4CBE00 #E3E3E3 #E3E3E3;border-style: solid; border-width: 2px 1px 1px;} +.answer{ background: #FFFCF6; border:#FADEC4 1px solid; margin-bottom: 40px;} +.browser{ float: right; padding-right: 15px;} + +.bug-title{ /* float: left; margin-left: -120px; width: 110px; padding-right: 10px; display: inline; text-align: right; margin-top: 5px */} + +/* 搜索筛选 */ +.filter-tags li span{} +.search-filter{border:1px solid #dbdbdb; border-top:2px solid #E08;color:#555; margin-bottom:10px;} +.filter-info{ border-bottom: 1px solid #ededed;line-height: 22px; padding:8px 10px 4px; background:#f8f8f8} +.result-info i{ font-style:normal;color:#f60} +.filter-tags{ overflow: hidden;margin:0 0 10px 0; padding:0 10px 5px 10px; color:#000} +.filter-tags li{ border-top:1px dashed #ddd; margin-top:-1px; line-height:20px; padding:8px 0;*zoom:1} +.filter-tags .s-tag{ display:inline-block;*display:inline;*zoom:1; padding:0 6px; vertical-align:baseline; margin-right:16px; height:20px; line-height:20px;} +.filter-tags .selected{ background:#e08; font-weight:bold; color:#fff;} +.filter-tags a:hover{ background:#e08;color:#fff; text-decoration:none} +.filter-tags label{ margin-right:15px;*zoom:1; cursor:pointer} +.filter-tags input{ margin-right:3px; vertical-align:top; *vertical-align:baseline; margin-top:3px;} + +.result-info,.filter-tags{ clear:both; *zoom:1} +.your-choices{ overflow:hidden; zoom:1} +.your-choices dd{ display:inline; float:left} +.your-choices dd{ margin:0 3px 3px 0;} +.your-choices a{color:#e08; border:1px solid #d1d1d1; background:#fff; height:19px; line-height:19px; padding:0 3px 0 5px; float:left;white-space:nowrap;_height:17px;_padding:3px 3px 0 5px;} +.tags-empty a{color:#06C} +.your-choices a:hover{color:#e08; text-decoration:none; border-color:#818181} +.your-choices h6{color:#333; font-weight:normal; display:inline} +.your-choices .icon-close{ position:relative;top:3px; margin-left:3px;*top:0; *left:3px;} +.tags-empty a{ border:none; height:22px; background:none; line-height:22px;} + + + diff --git a/cnDocs/assets/css/docs.css b/cnDocs/assets/css/docs.css new file mode 100644 index 000000000000..a94d59e8fa47 --- /dev/null +++ b/cnDocs/assets/css/docs.css @@ -0,0 +1,1067 @@ +/* Add additional stylesheets below +-------------------------------------------------- */ +/* + Bootstrap's documentation styles + Special styles for presenting Bootstrap's documentation and examples +*/ + + + +/* Body and structure +-------------------------------------------------- */ + +body { + position: relative; + padding-top: 40px; +} + +/* Code in headings */ +h3 code { + font-size: 14px; + font-weight: normal; +} + + + +/* Tweak navbar brand link to be super sleek +-------------------------------------------------- */ + +body > .navbar { + font-size: 13px; +} + +/* Change the docs' brand */ +body > .navbar .brand { + padding-right: 0; + padding-left: 0; + margin-left: 20px; + float: right; + font-weight: bold; + color: #000; + text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + transition: all .2s linear; +} +body > .navbar .brand:hover { + text-decoration: none; + text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4); +} + + +/* Sections +-------------------------------------------------- */ + +/* padding for in-page bookmarks and fixed navbar */ +section { + padding-top: 30px; +} +section > .page-header, +section > .lead { + color: #5a5a5a; +} +section > ul li { + margin-bottom: 5px; +} + +/* Separators (hr) */ +.bs-docs-separator { + margin: 40px 0 39px; +} + +/* Faded out hr */ +hr.soften { + height: 1px; + margin: 70px 0; + background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); + background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); + background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); + background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0)); + border: 0; +} + + + +/* Jumbotrons +-------------------------------------------------- */ + +/* Base class +------------------------- */ +.jumbotron { + position: relative; + padding: 40px 0; + color: #fff; + text-align: center; + text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075); + background: #020031; /* Old browsers */ + background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */ + background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); + -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); + box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2); +} +.jumbotron h1 { + font-size: 80px; + font-weight: bold; + letter-spacing: -1px; + line-height: 1; +} +.jumbotron p { + font-size: 24px; + font-weight: 300; + line-height: 1.25; + margin-bottom: 30px; +} + +/* Link styles (used on .masthead-links as well) */ +.jumbotron a { + color: #fff; + color: rgba(255,255,255,.5); + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; +} +.jumbotron a:hover { + color: #fff; + text-shadow: 0 0 10px rgba(255,255,255,.25); +} + +/* Download button */ +.masthead .btn { + padding: 19px 24px; + font-size: 24px; + font-weight: 200; + color: #fff; /* redeclare to override the `.jumbotron a` */ + border: 0; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -webkit-transition: none; + -moz-transition: none; + transition: none; +} +.masthead .btn:hover { + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25); +} +.masthead .btn:active { + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1); +} + + +/* Pattern overlay +------------------------- */ +.jumbotron .container { + position: relative; + z-index: 2; +} +.jumbotron:after { + content: ''; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: url(../img/bs-docs-masthead-pattern.png) repeat center center; + opacity: .4; +} +@media +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and ( min--moz-device-pixel-ratio: 2), +only screen and ( -o-min-device-pixel-ratio: 2/1) { + + .jumbotron:after { + background-size: 150px 150px; + } + +} + +/* Masthead (docs home) +------------------------- */ +.masthead { + padding: 70px 0 80px; + margin-bottom: 0; + color: #fff; +} +.masthead h1 { + font-size: 120px; + line-height: 1; + letter-spacing: -2px; +} +.masthead p { + font-size: 40px; + font-weight: 200; + line-height: 1.25; +} + +/* Textual links in masthead */ +.masthead-links { + margin: 0; + list-style: none; +} +.masthead-links li { + display: inline; + padding: 0 10px; + color: rgba(255,255,255,.25); +} + +/* Social proof buttons from GitHub & Twitter */ +.bs-docs-social { + padding: 15px 0; + text-align: center; + background-color: #f5f5f5; + border-top: 1px solid #fff; + border-bottom: 1px solid #ddd; +} + +/* Quick links on Home */ +.bs-docs-social-buttons { + margin-left: 0; + margin-bottom: 0; + padding-left: 0; + list-style: none; +} +.bs-docs-social-buttons li { + display: inline-block; + padding: 5px 8px; + line-height: 1; + *display: inline; + *zoom: 1; +} + +/* Subhead (other pages) +------------------------- */ +.subhead { + text-align: left; + border-bottom: 1px solid #ddd; +} +.subhead h1 { + font-size: 60px; +} +.subhead p { + margin-bottom: 20px; +} +.subhead .navbar { + display: none; +} + + + +/* Marketing section of Overview +-------------------------------------------------- */ + +.marketing { + text-align: center; + color: #5a5a5a; +} +.marketing h1 { + margin: 60px 0 10px; + font-size: 60px; + font-weight: 200; + line-height: 1; + letter-spacing: -1px; +} +.marketing h2 { + font-weight: 200; + margin-bottom: 5px; +} +.marketing p { + font-size: 16px; + line-height: 1.5; +} +.marketing .marketing-byline { + margin-bottom: 40px; + font-size: 20px; + font-weight: 300; + line-height: 1.25; + color: #999; +} +.marketing-img { + display: block; + margin: 0 auto 30px; + max-height: 145px; +} + + + +/* Footer +-------------------------------------------------- */ + +.footer { + /* text-align: center; */ + padding: 30px 0; + margin-top: 70px; + border-top: 1px solid #e5e5e5; + background-color: #f5f5f5; +} +.footer p { + margin-bottom: 0; + color: #777; +} +.footer-links { + margin: 10px 0; +} +.footer-links li { + display: inline; + padding: 0 2px; +} +.footer-links li:first-child { + padding-left: 0; +} + + + +/* Special grid styles +-------------------------------------------------- */ + +.show-grid { + margin-top: 10px; + margin-bottom: 20px; +} +.show-grid [class*="span"] { + background-color: #eee; + text-align: center; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + min-height: 40px; + line-height: 40px; +} +.show-grid [class*="span"]:hover { + background-color: #ddd; +} +.show-grid .show-grid { + margin-top: 0; + margin-bottom: 0; +} +.show-grid .show-grid [class*="span"] { + margin-top: 5px; +} +.show-grid [class*="span"] [class*="span"] { + background-color: #ccc; +} +.show-grid [class*="span"] [class*="span"] [class*="span"] { + background-color: #999; +} + + + +/* Mini layout previews +-------------------------------------------------- */ +.mini-layout { + border: 1px solid #ddd; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075); + -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075); + box-shadow: 0 1px 2px rgba(0,0,0,.075); +} +.mini-layout, +.mini-layout .mini-layout-body, +.mini-layout.fluid .mini-layout-sidebar { + height: 300px; +} +.mini-layout { + margin-bottom: 20px; + padding: 9px; +} +.mini-layout div { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.mini-layout .mini-layout-body { + background-color: #dceaf4; + margin: 0 auto; + width: 70%; +} +.mini-layout.fluid .mini-layout-sidebar, +.mini-layout.fluid .mini-layout-header, +.mini-layout.fluid .mini-layout-body { + float: left; +} +.mini-layout.fluid .mini-layout-sidebar { + background-color: #bbd8e9; + width: 20%; +} +.mini-layout.fluid .mini-layout-body { + width: 77.5%; + margin-left: 2.5%; +} + + + +/* Download page +-------------------------------------------------- */ + +.download .page-header { + margin-top: 36px; +} +.page-header .toggle-all { + margin-top: 5px; +} + +/* Space out h3s when following a section */ +.download h3 { + margin-bottom: 5px; +} +.download-builder input + h3, +.download-builder .checkbox + h3 { + margin-top: 9px; +} + +/* Fields for variables */ +.download-builder input[type=text] { + margin-bottom: 9px; + font-family: Menlo, Monaco, "Courier New", monospace; + font-size: 12px; + color: #d14; +} +.download-builder input[type=text]:focus { + background-color: #fff; +} + +/* Custom, larger checkbox labels */ +.download .checkbox { + padding: 6px 10px 6px 25px; + font-size: 13px; + line-height: 18px; + color: #555; + background-color: #f9f9f9; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + cursor: pointer; +} +.download .checkbox:hover { + color: #333; + background-color: #f5f5f5; +} +.download .checkbox small { + font-size: 12px; + color: #777; +} + +/* Variables section */ +#variables label { + margin-bottom: 0; +} + +/* Giant download button */ +.download-btn { + margin: 36px 0 108px; +} +#download p, +#download h4 { + max-width: 50%; + margin: 0 auto; + color: #999; + text-align: center; +} +#download h4 { + margin-bottom: 0; +} +#download p { + margin-bottom: 18px; +} +.download-btn .btn { + display: block; + width: auto; + padding: 19px 24px; + margin-bottom: 27px; + font-size: 30px; + line-height: 1; + text-align: center; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; +} + + + +/* Misc +-------------------------------------------------- */ + +/* Make tables spaced out a bit more */ +h2 + table, +h3 + table, +h4 + table, +h2 + .row { + margin-top: 5px; +} + +/* Example sites showcase */ +.example-sites { + xmargin-left: 20px; +} +.example-sites img { + max-width: 100%; + margin: 0 auto; +} + +.scrollspy-example { + height: 200px; + overflow: auto; + position: relative; +} + + +/* Fake the :focus state to demo it */ +.focused { + border-color: rgba(82,168,236,.8); + -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); + outline: 0; +} + +/* For input sizes, make them display block */ +.docs-input-sizes select, +.docs-input-sizes input[type=text] { + display: block; + margin-bottom: 9px; +} + +/* Icons +------------------------- */ +.the-icons { + margin-left: 0; + list-style: none; +} +.the-icons li { + float: left; + width: 25%; + line-height: 25px; +} +.the-icons i:hover { + background-color: rgba(255,0,0,.25); +} + +/* Example page +------------------------- */ +.bootstrap-examples h4 { + margin: 10px 0 5px; +} +.bootstrap-examples p { + font-size: 13px; + line-height: 18px; +} +.bootstrap-examples .thumbnail { + margin-bottom: 9px; + background-color: #fff; +} + + + +/* Bootstrap code examples +-------------------------------------------------- */ + +/* Base class */ +.bs-docs-example { + position: relative; + margin: 15px 0; + padding: 39px 19px 14px; + *padding-top: 19px; + background-color: #fff; + border: 1px solid #ddd; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +/* Echo out a label for the example */ +.bs-docs-example:after { + content: "Example"; + position: absolute; + top: -1px; + left: -1px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + background-color: #f5f5f5; + border: 1px solid #ddd; + color: #9da0a4; + -webkit-border-radius: 4px 0 4px 0; + -moz-border-radius: 4px 0 4px 0; + border-radius: 4px 0 4px 0; +} + +/* Remove spacing between an example and it's code */ +.bs-docs-example + .prettyprint { + margin-top: -20px; + padding-top: 15px; +} + +/* Tweak examples +------------------------- */ +.bs-docs-example > p:last-child { + margin-bottom: 0; +} +.bs-docs-example .table, +.bs-docs-example .progress, +.bs-docs-example .well, +.bs-docs-example .alert, +.bs-docs-example .hero-unit, +.bs-docs-example .pagination, +.bs-docs-example .navbar, +.bs-docs-example > .nav, +.bs-docs-example blockquote { + margin-bottom: 5px; +} +.bs-docs-example .pagination { + margin-top: 0; +} +.bs-navbar-top-example, +.bs-navbar-bottom-example { + z-index: 1; + padding: 0; + height: 90px; + overflow: hidden; /* cut the drop shadows off */ +} +.bs-navbar-top-example .navbar-fixed-top, +.bs-navbar-bottom-example .navbar-fixed-bottom { + margin-left: 0; + margin-right: 0; +} +.bs-navbar-top-example { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} +.bs-navbar-top-example:after { + top: auto; + bottom: -1px; + -webkit-border-radius: 0 4px 0 4px; + -moz-border-radius: 0 4px 0 4px; + border-radius: 0 4px 0 4px; +} +.bs-navbar-bottom-example { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; +} +.bs-navbar-bottom-example .navbar { + margin-bottom: 0; +} +form.bs-docs-example { + padding-bottom: 19px; +} + +/* Images */ +.bs-docs-example-images img { + margin: 10px; + display: inline-block; +} + +/* Tooltips */ +.bs-docs-tooltip-examples { + text-align: center; + margin: 0 0 10px; + list-style: none; +} +.bs-docs-tooltip-examples li { + display: inline; + padding: 0 10px; +} + +/* Popovers */ +.bs-docs-example-popover { + padding-bottom: 24px; + background-color: #f9f9f9; +} +.bs-docs-example-popover .popover { + position: relative; + display: block; + float: left; + width: 260px; + margin: 20px; +} + +/* Dropdowns */ +.bs-docs-example-submenus { + min-height: 180px; +} +.bs-docs-example-submenus > .pull-left + .pull-left { + margin-left: 20px; +} +.bs-docs-example-submenus .dropup > .dropdown-menu, +.bs-docs-example-submenus .dropdown > .dropdown-menu { + display: block; + position: static; + margin-bottom: 5px; + *width: 180px; +} + + + +/* Responsive docs +-------------------------------------------------- */ + +/* Utility classes table +------------------------- */ +.responsive-utilities th small { + display: block; + font-weight: normal; + color: #999; +} +.responsive-utilities tbody th { + font-weight: normal; +} +.responsive-utilities td { + text-align: center; +} +.responsive-utilities td.is-visible { + color: #468847; + background-color: #dff0d8 !important; +} +.responsive-utilities td.is-hidden { + color: #ccc; + background-color: #f9f9f9 !important; +} + +/* Responsive tests +------------------------- */ +.responsive-utilities-test { + margin-top: 5px; + margin-left: 0; + list-style: none; + overflow: hidden; /* clear floats */ +} +.responsive-utilities-test li { + position: relative; + float: left; + width: 25%; + height: 43px; + font-size: 14px; + font-weight: bold; + line-height: 43px; + color: #999; + text-align: center; + border: 1px solid #ddd; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.responsive-utilities-test li + li { + margin-left: 10px; +} +.responsive-utilities-test span { + position: absolute; + top: -1px; + left: -1px; + right: -1px; + bottom: -1px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.responsive-utilities-test span { + color: #468847; + background-color: #dff0d8; + border: 1px solid #d6e9c6; +} + + + +/* Sidenav for Docs +-------------------------------------------------- */ + +.bs-docs-sidenav { + width: 228px; + margin: 30px 0 0; + padding: 0; + background-color: #fff; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); + -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); + box-shadow: 0 1px 4px rgba(0,0,0,.065); +} +.bs-docs-sidenav > li > a { + display: block; + width: 190px \9; + margin: 0 0 -1px; + padding: 8px 14px; + border: 1px solid #e5e5e5; +} +.bs-docs-sidenav > li:first-child > a { + -webkit-border-radius: 6px 6px 0 0; + -moz-border-radius: 6px 6px 0 0; + border-radius: 6px 6px 0 0; +} +.bs-docs-sidenav > li:last-child > a { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} +.bs-docs-sidenav > .active > a { + position: relative; + z-index: 2; + padding: 9px 15px; + border: 0; + text-shadow: 0 1px 0 rgba(0,0,0,.15); + -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); + -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); + box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); +} +/* Chevrons */ +.bs-docs-sidenav .icon-chevron-right { + float: right; + margin-top: 2px; + margin-right: -6px; + opacity: .25; +} +.bs-docs-sidenav > li > a:hover { + background-color: #f5f5f5; +} +.bs-docs-sidenav a:hover .icon-chevron-right { + opacity: .5; +} +.bs-docs-sidenav .active .icon-chevron-right, +.bs-docs-sidenav .active a:hover .icon-chevron-right { + background-image: url(../img/glyphicons-halflings-white.png); + opacity: 1; +} +.bs-docs-sidenav.affix { + top: 40px; +} +.bs-docs-sidenav.affix-bottom { + position: absolute; + top: auto; + bottom: 270px; +} + + + + +/* Responsive +-------------------------------------------------- */ + +/* Desktop large +------------------------- */ +@media (min-width: 1200px) { + .bs-docs-container { + max-width: 970px; + } + .bs-docs-sidenav { + width: 258px; + } + .bs-docs-sidenav > li > a { + width: 230px \9; /* Override the previous IE8-9 hack */ + } +} + +/* Desktop +------------------------- */ +@media (max-width: 980px) { + /* Unfloat brand */ + body > .navbar-fixed-top .brand { + float: left; + margin-left: 0; + padding-left: 10px; + padding-right: 10px; + } + + /* Inline-block quick links for more spacing */ + .quick-links li { + display: inline-block; + margin: 5px; + } + + /* When affixed, space properly */ + .bs-docs-sidenav { + top: 0; + width: 218px; + margin-top: 30px; + margin-right: 0; + } +} + +/* Tablet to desktop +------------------------- */ +@media (min-width: 768px) and (max-width: 979px) { + /* Remove any padding from the body */ + body { + padding-top: 0; + } + /* Widen masthead and social buttons to fill body padding */ + .jumbotron { + margin-top: -20px; /* Offset bottom margin on .navbar */ + } + /* Adjust sidenav width */ + .bs-docs-sidenav { + width: 166px; + margin-top: 20px; + } + .bs-docs-sidenav.affix { + top: 0; + } +} + +/* Tablet +------------------------- */ +@media (max-width: 767px) { + /* Remove any padding from the body */ + body { + padding-top: 0; + } + + /* Widen masthead and social buttons to fill body padding */ + .jumbotron { + padding: 40px 20px; + margin-top: -20px; /* Offset bottom margin on .navbar */ + margin-right: -20px; + margin-left: -20px; + } + .masthead h1 { + font-size: 90px; + } + .masthead p, + .masthead .btn { + font-size: 24px; + } + .marketing .span4 { + margin-bottom: 40px; + } + .bs-docs-social { + margin: 0 -20px; + } + + /* Space out the show-grid examples */ + .show-grid [class*="span"] { + margin-bottom: 5px; + } + + /* Sidenav */ + .bs-docs-sidenav { + width: auto; + margin-bottom: 20px; + } + .bs-docs-sidenav.affix { + position: static; + width: auto; + top: 0; + } + + /* Unfloat the back to top link in footer */ + .footer { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + } + .footer p { + margin-bottom: 9px; + } +} + +/* Landscape phones +------------------------- */ +@media (max-width: 480px) { + /* Remove padding above jumbotron */ + body { + padding-top: 0; + } + + /* Change up some type stuff */ + h2 small { + display: block; + } + + /* Downsize the jumbotrons */ + .jumbotron h1 { + font-size: 45px; + } + .jumbotron p, + .jumbotron .btn { + font-size: 18px; + } + .jumbotron .btn { + display: block; + margin: 0 auto; + } + + /* center align subhead text like the masthead */ + .subhead h1, + .subhead p { + text-align: center; + } + + /* Marketing on home */ + .marketing h1 { + font-size: 30px; + } + .marketing-byline { + font-size: 18px; + } + + /* center example sites */ + .example-sites { + margin-left: 0; + } + .example-sites > li { + float: none; + display: block; + max-width: 280px; + margin: 0 auto 18px; + text-align: center; + } + .example-sites .thumbnail > img { + max-width: 270px; + } + + /* Do our best to make tables work in narrow viewports */ + table code { + white-space: normal; + word-wrap: break-word; + word-break: break-all; + } + + /* Examples: dropdowns */ + .bs-docs-example-submenus > .pull-left { + float: none; + clear: both; + } + .bs-docs-example-submenus > .pull-left, + .bs-docs-example-submenus > .pull-left + .pull-left { + margin-left: 0; + } + .bs-docs-example-submenus p { + margin-bottom: 0; + } + .bs-docs-example-submenus .dropup > .dropdown-menu, + .bs-docs-example-submenus .dropdown > .dropdown-menu { + margin-bottom: 10px; + float: none; + max-width: 180px; + } + + /* Examples: modal */ + .modal-example .modal { + position: relative; + top: auto; + right: auto; + bottom: auto; + left: auto; + } + + /* Tighten up footer */ + .footer { + padding-top: 20px; + padding-bottom: 20px; + } +} diff --git a/cnDocs/assets/css/icons-pure-css.css b/cnDocs/assets/css/icons-pure-css.css new file mode 100644 index 000000000000..74133d0229cd --- /dev/null +++ b/cnDocs/assets/css/icons-pure-css.css @@ -0,0 +1,2740 @@ +/*! + * Oricode Pure-css GUI icons (pc3-icon) v1.0 + * + * Copyright 2012 tCreator, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Remixed by tCreator Service Team. + */ + + +/* ------------------------------------------ +PURE CSS GUI ICONS +by Nicolas Gallagher +- http://nicolasgallagher.com/pure-css-gui-icons/ + +http://nicolasgallagher.com +http://twitter.com/necolas + +Created: 29 July 2010 +Version: 1.0.1 + +Dual licensed under MIT and GNU GPLv2 © Nicolas Gallagher +------------------------------------------ */ + +/* +Yes, this file is big. +No, this won't work in IE. + +Some icons could be produced with fewer pseudo-elements and +still work in Opera...if Opera didn't have a buggy +implementation of background-clip +*/ + +/* ---------------------------------------------------------------------------------------------------------------------------- +== GENERAL STYLES +** ---------------------------------------------------------------------------------------------------------------------------- */ + +/* +html, body {padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff;} +header, hgroup {display:block;} + +a:link, a:visited {border-bottom:1px solid #c55500; color:#c55500; text-decoration:none;} +a:visited {border-bottom:1px solid #730800; color:#730800;} +a:hover, a:focus, a:active {border:0; color:#fff; background:#c55500;} + +.container {width:540px; overflow:hidden; padding:0 0 10px; margin:0 auto 40px;} +.header {border-bottom:1px solid #ddd;} +.footer {padding:0 0 30px; margin-top:20px; margin-bottom:0; text-align:center;} + +.section {float:left; width:30%; margin-left:4.9%;} +h2 + .section {margin-left:0;} + +h1 {margin:1em 0 0; font-size:2.5em; font-weight:normal; line-height:1.2; text-align:center;} +h2 {margin:0.5em 0 1.5em; font-size:1.25em; font-weight:normal; font-style:italic; text-align:center;} +p {margin:1em 0; line-height:1.4em;} + +pre {margin:1.4em 0; font-size:12px; line-height:1.4em; white-space:pre-wrap; word-wrap:break-word;} + +.follow {clear:both; margin-top:1em;} +.follow span {font-weight:bold;} + + +/* ---------------------------------------------------------------------------------------------------------------------------- +== ICONS STYLES +** ---------------------------------------------------------------------------------------------------------------------------- */ + + +/* 添加父标签.pc3-icon */ +/* +.pc3-icon{} + +.pc3-icon ul { + padding:0; + margin:0; +} + +.pc3-icon li { + position:relative; + z-index:1; + overflow:hidden; + list-style:none; + padding:0; + margin:0 0 0.25em; +} + +.pc3-icon li a:link, +.pc3-icon li a:visited { + display:block; + border:0; + padding-left:28px; + color:#c55500; +} + +.pc3-icon li a:hover, +.pc3-icon li a:focus, +.pc3-icon li a:active { + color:#730800; + background:transparent; +} + +.pc3-icon li:before, +.pc3-icon li:after, +.pc3-icon li a:before, +.pc3-icon li a:after { + content:""; + position:absolute; + top:50%; + left:0; +} + +.pc3-icon li a:before, +.pc3-icon li a:after { + margin:-8px 0 0; + background:#c55500; +} + +.pc3-icon li a:hover:before, +.pc3-icon li a:focus:before, +.pc3-icon li a:active:before { + background:#730800; +} + + + + +/* Not links */ + +.pc3-icon .player, +.pc3-icon .headphones, +.pc3-icon .ribbon, +.pc3-icon .views, +.pc3-icon .location, +.pc3-icon .info, +.pc3-icon .help, +.pc3-icon .pie, +.pc3-icon .success, +.pc3-icon .success-alt, +.pc3-icon .warning, +.pc3-icon .denied { + padding-left:28px; +} + + + +/* ---------------------------------------------------------------------------------------------------------------------------- +== USER INTERACTIONS +** ---------------------------------------------------------------------------------------------------------------------------- */ + +/* SEARCH +------------------------------------------------------------------------------------------------------------------------------- */ + +.search a:before { + width:6px; + height:6px; + border:3px solid #c55500; + background:transparent; + /* css3 */ + -webkit-border-radius:12px; + -moz-border-radius:12px; + border-radius:12px; +} + +.search a:after { + left:10px; + width:3px; + height:7px; + margin-top:0; + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.search a:hover:before, +.search a:focus:before, +.search a:active:before { + border-color:#730800; + background:transparent; +} + +.search a:hover:after, +.search a:focus:after, +.search a:active:after { + background:#730800; +} + +/* COMMENT +------------------------------------------------------------------------------------------------------------------------------- */ + +.comment a:before { + width:16px; + height:10px; + margin-top:-8px; + /* css3 */ + -webkit-border-radius:2px; + -moz-border-radius:2px; + border-radius:2px; +} + +.comment a:after { + left:8px; + border:2px solid transparent; + border-top-color:#c55500; + border-left-color:#c55500; + margin-top:2px; + background:transparent; +} + +.comment a:hover:after, +.comment a:focus:after, +.comment a:active:after { + border-top-color:#730800; + border-left-color:#730800; +} + +/* LIKE +------------------------------------------------------------------------------------------------------------------------------- */ + +.like a:before, +.like a:after { + width:14px; + height:9px; + margin-top:-6px; + background:#c55500; + /* css3 */ + -webkit-border-top-left-radius:8px; + -webkit-border-bottom-left-radius:8px; + -moz-border-radius:6px 0 0 6px; + border-radius:6px 0 0 6px; + -webkit-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.like a:after { + left:4px; + /* css3 */ + -webkit-transform:rotate(135deg); + -moz-transform:rotate(135deg); + -ms-transform:rotate(135deg); + -o-transform:rotate(135deg); + transform:rotate(135deg); +} + +.like a:hover:after, +.like a:focus:after, +.like a:active:after { + background:#730800; +} + + +/* ADD +------------------------------------------------------------------------------------------------------------------------------- */ + +.add a:before { + width:16px; + height:16px; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.add a:after { + left:3px; + width:10px; + height:2px; + margin-top:-1px; + background:#fff; +} + +.add:before { + z-index:10; + left:7px; + width:2px; + height:10px; + margin-top:-5px; + background:#fff; +} + +/* Alternative style */ + +.add-alt a:before { + left:6px; + width:5px; + height:15px; + margin-top:-7px; + background:#c55500; +} + +.add-alt a:after { + left:1px; + width:15px; + height:5px; + margin-top:-2px; + background:#c55500; +} + +.add-alt a:hover:after, +.add-alt a:focus:after, +.add-alt a:active:after { + background:#730800; +} + +/* REMOVE +------------------------------------------------------------------------------------------------------------------------------- */ + +.remove a:before { + width:16px; + height:16px; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.remove a:after { + left:3px; + width:10px; + height:2px; + margin-top:-1px; + background:#fff; +} + +/* Alternative style */ + +.remove-alt a:before { + left:1px; + width:15px; + height:5px; + margin-top:-2px; + background:#c55500; +} + +/* DELETE +------------------------------------------------------------------------------------------------------------------------------- */ + +.delete a:before { + width:16px; + height:16px; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.delete a:after { + left:3px; + width:10px; + height:2px; + margin-top:-1px; + background:#fff; + /* css3 */ + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.delete:before { + z-index:10; + left:7px; + width:2px; + height:10px; + margin-top:-5px; + background:#fff; + /* css3 */ + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +/* Alternative style */ + +.delete-alt a:before, +.delete-alt a:after { + left:6px; + width:5px; + height:15px; + margin-top:-7px; + background:#c55500; + /* css3 */ + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.delete-alt a:after { + left:1px; + width:15px; + height:5px; + margin-top:-2px; +} + +.delete-alt a:hover:after, +.delete-alt a:focus:after, +.delete-alt a:active:after { + background:#730800; +} + +/* REPORT +------------------------------------------------------------------------------------------------------------------------------- */ + +.report a:before { + left:3px; + width:7px; + height:7px; + margin-top:-5px; + border-width:7px 0 0 2px; + border-style:solid; + border-color:#c55500; + background:transparent; + /* css3 */ + -webkit-transform:skewY(-8deg); + -moz-transform:skewY(-8deg); + -ms-transform:skewY(-8deg); + -o-transform:skewY(-8deg); + transform:skewY(-8deg); +} + +.report a:after { + left:9px; + width:6px; + height:7px; + margin-top:-3px; + background:#c55500; + /* css3 */ + -webkit-transform:skewY(-6deg); + -moz-transform:skewY(-6deg); + -ms-transform:skewY(-6deg); + -o-transform:skewY(-6deg); + transform:skewY(-6deg); +} + +.report a:hover:before, +.report a:focus:before, +.report a:active:before { + border-color:#730800; + background:transparent; +} + +.report a:hover:after, +.report a:focus:after, +.report a:active:after { + background:#730800; +} + +/* TRASH +------------------------------------------------------------------------------------------------------------------------------- */ + +.trash:after { + left:6px; + width:1px; + height:7px; + border-right:3px double #c55500; + border-left:1px solid #c55500; + margin-top:-2px; +} + +.trash a:before { + left:2px; + width:9px; + height:11px; + margin-top:-6px; + border:2px solid #c55500; + background:transparent; +} + +.trash a:after { + left:5px; + width:3px; + height:2px; + margin-top:-9px; + border:2px solid #c55500; + border-bottom:0; + background:transparent; + /* css3 */ + -webkit-border-top-left-radius:2px; + -webkit-border-top-right-radius:2px; + -moz-border-radius:2px 2px 0 0; + border-radius:2px 2px 0 0; +} + +.trash:hover:after, +.trash a:hover:before, +.trash a:focus:before, +.trash a:active:before, +.trash a:hover:after, +.trash a:focus:after, +.trash a:active:after { + border-color:#730800; + background:transparent; +} + +/* LOCK / UNLOCK +------------------------------------------------------------------------------------------------------------------------------- */ + +.lock:before, +.lock:after, +.unlock:before, +.unlock:after { + z-index:10; + left:8px; + width:3px; + height:3px; + margin-top:-2px; + background:#fff; + /* css3 */ + -webkit-border-radius:3px; + -moz-border-radius:3px; + border-radius:3px; +} + +.lock:before, +.unlock:before { + left:9px; + width:1px; + height:4px; + margin-top:0px; +} + +.lock a:before, +.unlock a:before { + left:3px; + width:13px; + height:10px; + margin-top:-4px; +} + +.lock a:after, +.unlock a:after { + left:5px; + width:5px; + height:5px; + border:2px solid #c55500; + border-bottom:0; + margin-top:-11px; + background:transparent; + /* css3 */ + -webkit-border-radius:5px 5px 0 0; + -moz-border-radius:5px 5px 0 0; + border-radius:5px 5px 0 0; +} + +.unlock a:after { + left:12px; +} + +.lock a:hover:after, +.lock a:focus:after, +.lock a:active:after, +.unlock a:hover:after, +.unlock a:focus:after, +.unlock a:active:after { + border-color:#730800; +} + +/* UPDATE STATUS +------------------------------------------------------------------------------------------------------------------------------- */ + +.update:before { + left:10px; + border-width:2px 0 2px 2px; + border-style:solid; + border-color:transparent #c55500; + margin-top:-1px; +} + +.update a:before { + left:4px; + width:10px; + height:10px; + border:2px solid #c55500; + margin-top:-6px; + background:transparent; + /* css3 */ + -webkit-border-radius:3px; + -moz-border-radius:3px; + border-radius:3px; +} + +.update a:after { + left:10px; + width:10px; + height:3px; + border:1px solid #fff; + margin-top:-6px; + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.update:hover:before { + border-left-color:#730800; +} + +.update a:hover:before, +.update a:focus:before, +.update a:active:before { + border-color:#730800; + background:transparent; +} + +.update a:hover:after, +.update a:focus:after, +.update a:active:after { + background:#730800; +} + +/* RETWEET +------------------------------------------------------------------------------------------------------------------------------- */ + +.retweet:before, +.retweet a:before { + border-style:solid; + border-color:transparent; + background:transparent; +} + +.retweet:before { + z-index:-1; + left:12px; + margin-top:2px; + border-width:5px 5px 0; + border-left-color:#fff; + border-top-color:#c55500; +} + +.retweet a:before { + left:-1px; + margin-top:-7px; + border-width:0 5px 5px; + border-right-color:#fff; + border-bottom-color:#c55500; +} + +.retweet a:after { + z-index:-2; + left:3px; + width:10px; + height:6px; + margin-top:-6px; + border:3px solid #c55500; + background:transparent; +} + +.retweet:hover:before { + border-top-color:#730800; +} + +.retweet a:hover:before, +.retweet a:focus:before, +.retweet a:active:before { + border-bottom-color:#730800; + background:transparent; +} + +.retweet a:hover:after, +.retweet a:focus:after, +.retweet a:active:after { + border-color:#730800; +} + +/* SAVE +------------------------------------------------------------------------------------------------------------------------------- */ + +.save:before, +.save a:before { + left:6px; + border-width:10px 0 10px 8px; + border-style:solid; + border-color:transparent #c55500; + margin-top:-9px; + background:transparent; + /* css3 */ + -webkit-transform:rotate(22.5deg); + -moz-transform:rotate(22.5deg); + -ms-transform:rotate(22.5deg); + -o-transform:rotate(22.5deg); + transform:rotate(22.5deg); +} + +.save a:before { + left:6px; + /* css3 */ + -webkit-transform:rotate(157.5deg); + -moz-transform:rotate(157.5deg); + -ms-transform:rotate(157.5deg); + -o-transform:rotate(157.5deg); + transform:rotate(157.5deg); +} + +.save a:after { + border-width:8px 10px 0; + border-style:solid; + border-color:#c55500 transparent; + margin-top:-3px; + background:transparent; +} + +.save:hover:before, +.save:focus:before, +.save:active:before, +.save a:hover:before, +.save a:focus:before, +.save a:active:before { + border-left-color:#730800; + background:transparent; +} + +.save a:hover:after, +.save a:focus:after, +.save a:active:after { + border-top-color:#730800; + background:transparent; +} + +/* EDIT +------------------------------------------------------------------------------------------------------------------------------- */ + +.edit a:before { + left:3px; + width:5px; + height:5px; + margin-top:2px; + background:#c55500; + -webkit-transform:skew(-10deg, -10deg); + -moz-transform:skew(-10deg, -10deg); + -ms-transform:skew(-10deg, -10deg); + -o-transform:skew(-10deg, -10deg); + transform:skew(-10deg, -10deg); +} + +.edit a:after { + left:3px; + width:13px; + height:6px; + border-left:1px solid #fff; + margin-top:-3px; + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.edit a:hover:before, +.edit a:focus:before, +.edit a:active:before, +.edit a:hover:after, +.edit a:focus:after, +.edit a:active:after { + background:#730800; +} + +/* DOWNLOAD +------------------------------------------------------------------------------------------------------------------------------- */ + +.download a:before { + width:14px; + height:8px; + border:3px solid #c55500; + border-top:0; + margin-top:-5px; + background:transparent; +} + +.download a:after { + left:5px; + border-width:5px 5px 0; + border-style:solid; + border-color:#c55500 transparent; + margin-top:-5px; + background:transparent; +} + +.download a:hover:before, +.download a:focus:before, +.download a:active:before { + border-color:#730800; + background:transparent; +} + +.download a:hover:after, +.download a:focus:after, +.download a:active:after { + border-color:#730800 transparent; +} + +/* ARROWS (up/down/back/forward) +------------------------------------------------------------------------------------------------------------------------------- */ + +.arrow a:before { + width:16px; + height:16px; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.arrow a:after { + left:8px; + border-width:5px 0 5px 6px; + border-style:solid; + border-color:transparent #fff; + margin-top:-5px; + background:transparent; +} + +.arrow:before { + z-index:10; + left:3px; + width:5px; + height:4px; + margin-top:-2px; + background:#fff; +} + +.arrow.back a:after { + left:2px; + border-width:5px 6px 5px 0; +} + +.arrow.back:before { + left:8px; +} + +.arrow.up a:after, +.arrow.down a:after { + left:3px; + border-width:0 5px 6px; + border-color:#fff transparent; + margin-top:-6px; +} + +.arrow.up:before, +.arrow.down:before { + left:6px; + width:4px; + height:5px; + margin-top:0; +} + +.arrow.down a:after { + border-width:6px 5px 0; + margin-top:0; +} + +.arrow.down:before { + margin-top:-5px; +} + +/* Alternative style */ + +.arrow-alt a:before { + left:8px; + border-width:7px 0 7px 8px; + border-style:solid; + border-color:transparent #c55500; + margin-top:-7px; + background:transparent; +} + +.arrow-alt a:after { + left:0; + width:8px; + height:6px; + margin-top:-3px; + background:#c55500; +} + +.arrow-alt a:hover:before, +.arrow-alt a:focus:before, +.arrow-alt a:active:before { + border-color:transparent #730800; + background:transparent; +} + +.arrow-alt a:hover:after, +.arrow-alt a:focus:after, +.arrow-alt a:active:after { + background:#730800; +} + +.arrow-alt.back a:before { + left:0; + border-width:7px 8px 7px 0; +} + +.arrow-alt.back a:after { + left:8px; +} + +.arrow-alt.up a:before, +.arrow-alt.down a:before { + left:1px; + margin-top:-8px; + border-width:0 7px 8px; + border-color:#c55500 transparent; +} + +.arrow-alt.up a:after, +.arrow-alt.down a:after { + left:5px; + width:6px; + height:8px; + margin-top:0; +} + +.arrow-alt.down a:before { + left:1px; + margin-top:0; + border-width:8px 7px 0; +} + +.arrow-alt.down a:after { + margin-top:-8px; +} + +.arrow-alt.up a:hover:before, +.arrow-alt.up a:focus:before, +.arrow-alt.up a:active:before, +.arrow-alt.down a:hover:before, +.arrow-alt.down a:focus:before, +.arrow-alt.down a:active:before { + border-color:#730800 transparent; +} + +/* Alternative style 2 */ + +.arrow-alt2 a:before { + left:8px; + width:7px; + height:7px; + border-width:0 3px 3px 0; + border-style:solid; + border-color:#c55500; + margin-top:-5px; + background:transparent; + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.arrow-alt2 a:after { + left:3px; + width:13px; + height:4px; + margin-top:-2px; + background:#c55500; +} + +.arrow-alt2 a:hover:before, +.arrow-alt2 a:focus:before, +.arrow-alt2 a:active:before { + border-color:#730800; + background:transparent; +} + +.arrow-alt2 a:hover:after, +.arrow-alt2 a:focus:after, +.arrow-alt2 a:active:after { + background:#730800; +} + +.arrow-alt2.back a:before { + left:4px; + border-width:0 0 3px 3px; + /* css3 */ + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.arrow-alt2.back a:after { + left:5px; +} + +.arrow-alt2.back a:hover:before, +.arrow-alt2.back a:focus:before, +.arrow-alt2.back a:active:before { + border-right-color:#730800; +} + +.arrow-alt2.up a:before { + left:4px; + border-width:3px 0 0 3px; + /* css3 */ + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.arrow-alt2.up a:after, +.arrow-alt2.down a:after { + left:7px; + width:4px; + height:13px; + margin-top:-4px; +} + +.arrow-alt2.down a:before { + left:4px; + border-width:0 0 3px 3px; + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.arrow-alt2.down a:after { + margin-top:-8px; +} + + +/* ---------------------------------------------------------------------------------------------------------------------------- +== MISC +** ---------------------------------------------------------------------------------------------------------------------------- */ + +/* HOME +------------------------------------------------------------------------------------------------------------------------------- */ + +.home a:before { + left:1px; + border-style:solid; + border-color:transparent; + border-width:8px 7px; + border-bottom-color:#c55500; + margin-top:-16px; + background:transparent; +} + +.home a:after { + left:3px; + width:2px; + height:4px; + border-style:solid; + border-color:#c55500 #c55500 transparent; + border-width:3px 4px 0; + margin-top:0; + background:transparent; +} + +.home a:hover:before, +.home a:focus:before, +.home a:active:before { + border-bottom-color:#730800; + background:transparent; +} + +.home a:hover:after, +.home a:focus:after, +.home a:active:after { + border-color:#730800 #730800 transparent; +} + +/* PHOTO +------------------------------------------------------------------------------------------------------------------------------- */ + +.photo a:before { + left:2px; + width:16px; + height:12px; + margin-top:-6px; +} + +.photo a:after { + left:6px; + width:8px; + height:2px; + margin-top:-8px; +} + +.photo:after { + left:6px; + width:8px; + height:8px; + margin-top:-4px; + background:#fff; + /* css3 */ + -webkit-border-radius:8px; + -moz-border-radius:8px; + border-radius:8px; +} + +.photo a:hover:after, +.photo a:focus:after, +.photo a:active:after { + background:#730800; +} + +/* VIDEO +------------------------------------------------------------------------------------------------------------------------------- */ + +.video a:before { + left:2px; + width:14px; + height:12px; + margin-top:-6px; + /* css3 */ + -webkit-border-radius:2px; + -moz-border-radius:2px; + border-radius:2px; +} + +.video a:after { + left:14px; + border-style:solid; + border-width:5px 6px 5px 0; + border-color:transparent; + border-right-color:#c55500; + margin-top:-5px; + background:transparent; +} + +.video a:hover:after, +.video a:focus:after, +.video a:active:after { + border-right-color:#730800; +} + +/* MUSIC +------------------------------------------------------------------------------------------------------------------------------- */ + +.music a:before { + left:8px; + width:6px; + height:10px; + border-width:2px 1px 0 2px; + border-style:solid; + border-color:#c55500 transparent transparent #c55500; + background:transparent; + -webkit-border-radius:0 10px 0 0; + -moz-border-radius:0 10px 0 0; + border-radius:0 10px 0 0; +} + +.music a:after { + left:3px; + width:7px; + height:6px; + margin-top:0; + background:#c55500; + -webkit-border-radius:10px; + -moz-border-radius:10px; + border-radius:10px; +} + +.music a:hover:before, +.music a:focus:before, +.music a:active:before { + border-color:#730800 transparent transparent #730800; + background:transparent; +} + +.music a:hover:after, +.music a:focus:after, +.music a:active:after { + background:#730800; +} + +/* CALL +------------------------------------------------------------------------------------------------------------------------------- */ + +.call a:before { + left:5px; + width:4px; + height:8px; + border-width:5px 0 5px 2px; + border-style:solid; + border-color:#c55500; + background:transparent; + /* css3 */ + -webkit-border-top-left-radius:3px 5px; + -webkit-border-bottom-left-radius:3px 5px; + -moz-border-radius-topleft:3px 5px; + -moz-border-radius-bottomleft:3px 5px; + border-top-left-radius:3px 5px; + border-bottom-left-radius:3px 5px; + -webkit-transform:rotate(-30deg); + -moz-transform:rotate(-30deg); + -ms-transform:rotate(-30deg); + -o-transform:rotate(-30deg); + transform:rotate(-30deg); +} + +.call-on a:after { + left:10px; + width:6px; + height:6px; + margin-top:-8px; + border:4px double #c55500; + border-width:4px 4px 0 0; + background:transparent; + /* css3 */ + -webkit-border-radius:0 15px 0 0; + -moz-border-radius:0 15px 0 0; + border-radius:0 15px 0 0; + -webkit-transform:rotate(15deg); + -moz-transform:rotate(15deg); + -ms-transform:rotate(15deg); + -o-transform:rotate(15deg); + transform:rotate(15deg); +} + +.call a:hover:before, +.call a:focus:before, +.call a:active:before, +.call a:hover:after, +.call a:focus:after, +.call a:active:after { + border-color:#730800; + background:transparent; +} + +/* TAGS +------------------------------------------------------------------------------------------------------------------------------- */ + +.tags a:before { + left:6px; + width:9px; + height:15px; + margin-top:-8px; + background:#c55500; + /* css3 */ + -webkit-border-top-left-radius:3px; + -webkit-border-top-right-radius:3px; + -moz-border-radius:3px 3px 0 0; + border-radius:5px 5px 0 0; + -webkit-transform:rotate(-40deg); + -moz-transform:rotate(-40deg); + -ms-transform:rotate(-40deg); + -o-transform:rotate(-40deg); + transform:rotate(-40deg); +} + +.tags a:after { + left:7px; + width:3px; + height:3px; + margin-top:-4px; + background:#fff; + -webkit-border-radius:5px; + -moz-border-radius:5px; + border-radius:5px; +} + + +/* RSS +------------------------------------------------------------------------------------------------------------------------------- */ + +.rss a:before { + left:3px; + width:5px; + height:5px; + margin-top:0; + /* css3 */ + -webkit-border-radius:5px; + -moz-border-radius:5px; + border-radius:5px; +} + +.rss a:after { + left:3px; + width:8px; + height:8px; + border-width:5px 5px 0 0; + border-style:double; + border-color:#c55500; + background:transparent; + /* css3 */ + -webkit-border-top-right-radius:25px; + -moz-border-radius:0 25px 0 0; + border-radius:0 25px 0 0; +} + +.rss a:hover:after, +.rss a:focus:after, +.rss a:active:after { + border-color:#730800; +} + +/* EMAIL +------------------------------------------------------------------------------------------------------------------------------- */ + +.email:before { + z-index:10; + left:6px; + width:12px; + height:12px; + border-width:0 1px 1px 0; + border-style:solid; + border-color:#fff; + margin-top:-13px; + background:transparent; + /* css3 */ + -webkit-transform:rotate(39deg) skew(-12deg); + -moz-transform:rotate(39deg) skew(-12deg); + -ms-transform:rotate(39deg) skew(-12deg); + -o-transform:rotate(39deg) skew(-12deg); + transform:rotate(39deg) skew(-12deg); +} + +.email a:before { + left:3px; + width:6px; + border-width:6px; + border-style:solid; + border-color:#c55500 #c55500 transparent; + margin-top:-7px; + background:transparent; +} + +.email a:after { + left:4px; + border-width:0 8px 9px; + border-style:solid; + border-color:#c55500 transparent; + margin-top:-3px; + background:transparent; +} + +.email a:hover:before, +.email a:focus:before, +.email a:active:before { + border-color:#730800 #730800 transparent; + background:transparent; +} + +.email a:hover:after, +.email a:focus:after, +.email a:active:after { + border-bottom-color:#730800; +} + +/* PROFILE +------------------------------------------------------------------------------------------------------------------------------- */ + +.profile a:before { + left:4px; + width:16px; + height:5px; + margin-top:1px; + /* css3 */ + -webkit-border-top-right-radius:5px; + -webkit-border-top-left-radius:5px; + -moz-border-radius:5px 5px 0 0; + border-radius:5px 5px 0 0; +} + +.profile a:after { + left:9px; + width:6px; + height:10px; + margin-top:-7px; + /* css3 */ + -webkit-border-top-right-radius:5px; + -webkit-border-top-left-radius:5px; + -webkit-border-bottom-right-radius:5px 10px; + -webkit-border-bottom-left-radius:5px 10px; + -moz-border-radius:5px 5px 5px 5px / 5px 5px 10px 10px; + border-radius:5px 5px 5px 5px / 5px 5px 10px 10px; +} + +.profile a:hover:after, +.profile a:focus:after, +.profile a:active:after { + background:#730800; +} + +/* FILE +------------------------------------------------------------------------------------------------------------------------------- */ + +.file a:before { + left:5px; + width:8px; + height:12px; + border:2px solid #c55500; + background:transparent; +} + +.file a:after { + left:4px; + border-width:3px; + border-style:solid; + border-color:#fff #c55500 #c55500 #fff; + margin-top:-9px; + background:transparent; +} + +.file a:hover:before, +.file a:focus:before, +.file a:active:before { + border-color:#730800; + background:transparent; +} + +.file a:hover:after, +.file a:focus:after, +.file a:active:after { + border-color:#fff #730800 #730800 #fff; +} + +/* FOLDER +------------------------------------------------------------------------------------------------------------------------------- */ + +.folder a:before { + left:4px; + width:16px; + height:12px; + margin-top:-6px; + /* css3 */ + -webkit-border-bottom-right-radius:1px; + -webkit-border-bottom-left-radius:1px; + -moz-border-radius:0 0 1px 1px; + border-radius:0 0 1px 1px; +} + +.folder a:after { + left:6px; + width:6px; + height:2px; + margin-top:-8px; + background:#c55500; + /* css3 */ + -webkit-border-top-right-radius:1px; + -webkit-border-top-left-radius:1px; + -moz-border-radius:1px 1px 0 0; + border-radius:1px 1px 0 0; +} + +.folder a:hover:after, +.folder a:focus:after, +.folder a:active:after { + background:#730800; +} + +/* LIST VIEW +------------------------------------------------------------------------------------------------------------------------------- */ + +.list a:before, +.list a:after { + left:8px; + width:12px; + height:2px; + border-width:6px 0; + border-style:double; + border-color:#c55500; + background:transparent; +} + +.list a:after { + left:4px; + width:2px; +} + +.list a:hover:before, +.list a:focus:before, +.list a:active:before, +.list a:hover:after, +.list a:focus:after, +.list a:active:after { + border-color:#730800; + background:transparent; +} + +/* PERMALINK +------------------------------------------------------------------------------------------------------------------------------- */ + +.permalink a:before, +.permalink a:after, +.permalink:after { + left:4px; + width:6px; + height:4px; + border:2px solid #c55500; + background:transparent; + /* css3 */ + -webkit-border-radius:3px; + -moz-border-radius:3px; + border-radius:3px; + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.permalink a:after { + left:12px; + margin-top:-0px; +} + +.permalink:after { + left:7px; + width:10px; + height:2px; + border:1px solid #fff; + margin-top:-2px; + background:#c55500; +} + +.permalink a:hover:before, +.permalink a:focus:before, +.permalink a:active:before, +.permalink a:hover:after, +.permalink a:focus:after, +.permalink a:active:after { + border-color:#730800; + background:transparent; +} + +.permalink:hover:after { + background:#730800; +} + + +/* HISTORY +------------------------------------------------------------------------------------------------------------------------------- */ + +.history a:before, +.history a:after { + left:2px; + width:13px; + height:13px; + border:2px solid #c55500; + margin-top:-8px; + background:transparent; +} + +.history a:before { + /* css3 */ + -webkit-border-radius:18px; + -moz-border-radius:18px; + border-radius:18px; +} + +.history a:after { + left:10px; + width:4px; + height:5px; + border-width:0 0 2px 2px; + margin-top:-5px; + background:transparent; +} + +.history a:hover:before, +.history a:focus:before, +.history a:active:before, +.history a:hover:after, +.history a:focus:after, +.history a:active:after { + border-color:#730800; + background:transparent; +} + +/* TOOLS +------------------------------------------------------------------------------------------------------------------------------- */ + +.tools:after { + left:13px; + width:3px; + height:5px; + margin-top:-8px; + background:#fff; + /* css3 */ + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.tools a:before { + left:6px; + width:4px; + height:15px; + margin-top:-7px; + background:#c55500; + /* css3 */ + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.tools a:after { + left:8px; + width:9px; + height:9px; + background:#c55500; + -webkit-border-radius:8px; + -moz-border-radius:8px; + border-radius:8px; +} + +.tools a:hover:after, +.tools a:focus:after, +.tools a:active:after { + background:#730800; +} + +/* MP3 PLAYER +------------------------------------------------------------------------------------------------------------------------------- */ + +.player:before { + left:3px; + width:9px; + height:6px; + border-width:2px 2px 11px; + border-style:solid; + border-color:#555; + margin-top:-10px; + /* css3 */ + -webkit-border-radius:2px; + -moz-border-radius:2px; + border-radius:2px; +} + +.player:after { + left:6px; + width:3px; + height:3px; + border:2px solid #fff; + /* css3 */ + -webkit-border-radius:8px; + -moz-border-radius:8px; + border-radius:8px; +} + +/* HEADPHONES +------------------------------------------------------------------------------------------------------------------------------- */ + +.headphones:before { + left:2px; + width:12px; + height:10px; + border-width:2px 2px 0; + border-style:solid; + border-color:#555; + margin:-8px 0 0; + /* css3 */ + -webkit-border-top-left-radius:20px; + -webkit-border-top-right-radius:20px; + -moz-border-radius:20px 20px 0 0; + border-radius:20px 20px 0 0; +} + +.headphones:after { + left:5px; + width:4px; + height:6px; + border-width:0 3px; + border-style:solid; + border-color:#555; +} + +/* RIBBON +------------------------------------------------------------------------------------------------------------------------------- */ + +.ribbon:before { + left:6px; + border-width:10px 5px 6px; + border-style:solid; + border-color:#F0A1D1 #F0A1D1 transparent; + margin:-8px 0 0; +} + +/* VIEWS +------------------------------------------------------------------------------------------------------------------------------- */ + +.views:before { + left:3px; + width:14px; + height:14px; + margin-top:-8px; + background:#555; + -webkit-border-top-left-radius:12px; + -webkit-border-bottom-right-radius:12px; + -moz-border-radius:12px 0 12px 0; + border-radius:12px 0 12px 0; + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.views:after { + left:6px; + width:4px; + height:4px; + border:2px solid #fff; + margin-top:-5px; + -webkit-border-radius:6px; + -moz-border-radius:6px; + border-radius:6px; +} + +/* LOCATION +------------------------------------------------------------------------------------------------------------------------------- */ + +.location:before { + left:6px; + width:2px; + height:2px; + border:3px solid #555; + border-bottom:0; + margin-top:-9px; + background:#fff; + -webkit-border-top-left-radius:8px; + -webkit-border-top-right-radius:8px; + -moz-border-radius:8px 8px 0 0; + border-radius:8px 8px 0 0; +} + +.location:after { + left:6px; + border-width:12px 4px 0; + border-style:solid; + border-color:#555 transparent; + margin-top:-4px; +} + +/* INFO +------------------------------------------------------------------------------------------------------------------------------- */ + +.info { + color:#2385BA; +} + +.info:before { + content:"i"; + left:3px; + width:16px; + height:16px; + margin-top:-8px; + font-size:14px; + font-weight:bold; + font-style:italic; + line-height:15px; + text-align:center; + color:#fff; + background:#2385BA; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +/* HELP +------------------------------------------------------------------------------------------------------------------------------- */ + +.help { + color:#2385BA; +} + +.help:before { + content:"?"; + left:3px; + width:16px; + height:16px; + margin-top:-8px; + font-size:14px; + font-weight:bold; + line-height:15px; + text-align:center; + color:#fff; + background:#2385BA; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +/* PIE CHART +------------------------------------------------------------------------------------------------------------------------------- */ + +.pie { + color:#9D2CA3; +} + +.pie:before { + left:3px; + border:8px solid #9D2CA3; + margin-top:-7px; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.pie:after { + left:11px; + width:8px; + height:8px; + border-width:0 0 2px 2px; + border-style:solid; + border-color:#fff; + margin-top:-8px; + background:#9D2CA3; + /* css3 */ + -webkit-border-top-right-radius:16px; + -moz-border-radius:0 16px 0 0; + border-radius:0 16px 0 0; +} + +/* SUCCESS +------------------------------------------------------------------------------------------------------------------------------- */ + +.success { + color:#7F913C; +} + +.success:before { + left:3px; + width:16px; + height:16px; + margin-top:-8px; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; + background:#7F913C; +} + +.success:after { + left:8px; + width:3px; + height:8px; + border-width:0 2px 2px 0; + border-style:solid; + border-color:#fff; + margin-top:-6px; + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +/* Alternative style */ + +.success-alt { + color:#7F913C; +} + +.success-alt:before { + left:6px; + width:5px; + height:12px; + border-width:0 5px 5px 0; + border-style:solid; + border-color:#7F913C; + margin-top:-11px; + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +/* WARNING +------------------------------------------------------------------------------------------------------------------------------- */ + +.warning:before { + content:"!"; + z-index:2; + left:8px; + margin-top:-8px; + font-size:14px; + font-weight:bold; + color:#000; +} + +.warning:after { + z-index:1; + border-width:0 11px 18px; + border-style:solid; + border-color:#F8D201 transparent; + margin-top:-10px; + background:transparent; +} + +/* DENIED +------------------------------------------------------------------------------------------------------------------------------- */ + +.denied { + color:#C00000; +} + +.denied:before { + left:3px; + width:10px; + height:10px; + border:3px solid #C00000; + margin-top:-8px; + background:transparent; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.denied:after { + left:6px; + width:11px; + height:3px; + margin-top:-2px; + background:#C00000; + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + + + +/* ---------------------------------------------------------------------------------------------------------------------------- +== MEDIA CONTROLS +** ---------------------------------------------------------------------------------------------------------------------------- */ + +/* POWER +------------------------------------------------------------------------------------------------------------------------------- */ + +.power a:before { + left:1px; + width:10px; + height:10px; + border:2px solid #c55500; + margin-top:-6px; + background:transparent; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.power a:after { + left:6px; + width:2px; + height:7px; + border:1px solid #fff; + margin:-8px 0 0; + background:#c55500; +} + +.power a:hover:before, +.power a:focus:before, +.power a:active:before { + border-color:#730800; + background:transparent; +} + +.power a:hover:after, +.power a:focus:after, +.power a:active:after { + background:#730800; +} + +/* PLAY +------------------------------------------------------------------------------------------------------------------------------- */ + +.play a:before { + width:16px; + height:16px; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.play a:after { + left:7px; + border:4px solid transparent; + border-left-color:#fff; + margin-top:-4px; + background:transparent; +} + +/* Alternative style */ + +.play-alt a:before { + left:2px; + border:8px solid transparent; + border-width:8px 12px; + border-left-color:#c55500; + margin-top:-8px; + background:transparent; +} + +.play-alt a:hover:before, +.play-alt a:focus:before, +.play-alt a:active:before { + border-left-color:#730800; + background:transparent; +} + +/* STOP +------------------------------------------------------------------------------------------------------------------------------- */ + +.stop a:before { + width:16px; + height:16px; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.stop a:after { + left:5px; + width:6px; + height:6px; + margin-top:-3px; + background:#fff; +} + +/* Alternative style */ + +.stop-alt a:before { + left:1px; + width:14px; + height:14px; + margin-top:-7px; +} + +/* PAUSE +------------------------------------------------------------------------------------------------------------------------------- */ + +.pause a:before { + width:16px; + height:16px; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.pause a:after { + left:5px; + width:2px; + height:8px; + border:2px solid #fff; + border-width:0 2px; + margin-top:-4px; + background:transparent; +} + +/* Alternative style */ + +.pause-alt a:before { + left:2px; + width:4px; + height:14px; + border:4px solid #c55500; + border-width:0 4px; + margin-top:-7px; + background:transparent; +} + +.pause-alt a:hover:before, +.pause-alt a:focus:before, +.pause-alt a:active:before { + border-color:#730800; + background:transparent; +} + +/* VOLUME +------------------------------------------------------------------------------------------------------------------------------- */ + +.volume a:before { + left:-2px; + border:7px solid transparent; + border-right-color:#c55500; + margin-top:-7px; + background:transparent; +} + +.volume a:after { + left:4px; + width:4px; + height:6px; + margin-top:-3px; +} + +.volume a:hover:before, +.volume a:focus:before, +.volume a:active:before { + border-right-color:#730800; + background:transparent; +} + +.volume a:hover:after, +.volume a:focus:after, +.volume a:active:after { + background:#730800; +} + +/* Volume on */ + +.volume-on:before { + left:12px; + width:6px; + height:6px; + margin-top:-5px; + border:4px double #c55500; + border-width:4px 4px 0 0; + /* css3 */ + -webkit-border-radius:0 15px 0 0; + -moz-border-radius:0 15px 0 0; + border-radius:0 15px 0 0; + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.volume-on:hover:before { + border-color:#730800; +} + +/* Mute */ + +.mute:before { + width:16px; + height:16px; + border:1px solid #c55500; + margin-top:-9px; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.mute:after { + width:18px; + border-top:1px solid #c55500; + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.mute:hover:before, +.mute:hover:after { + border-color:#730800; +} + +/* Volume up/down */ + +.volume-up:before { + left:16px; + width:2px; + height:8px; + margin-top:-4px; + background:#c55500; +} + +.volume-up:after, +.volume-down:after { + left:13px; + width:8px; + height:2px; + margin-top:-1px; + background:#c55500; +} + +.volume-up:hover:before, +.volume-up:hover:after, +.volume-down:hover:after { + background:#730800; +} + +/* MIC +------------------------------------------------------------------------------------------------------------------------------- */ + +.mic a:before { + left:6px; + width:7px; + height:12px; + margin-top:-9px; + /* css3 */ + -webkit-border-radius:4px; + -moz-border-radius:4px; + border-radius:4px; +} + +.mic a:after { + left:4px; + width:9px; + height:6px; + border-width:0 1px 1px 1px; + border-style:solid; + border-color:#c55500; + margin-top:-2px; + background:transparent; + /* css3 */ + -webkit-border-bottom-right-radius:11px; + -webkit-border-bottom-left-radius:11px; + -moz-border-radius:0 0 11px 11px; + border-radius:0 0 11px 11px; +} + +.mic:before, +.mic:after { + left:9px; + width:1px; + height:4px; + margin-top:4px; + background:#c55500; +} + +.mic:after { + left:6px; + width:7px; + height:1px; + margin-top:7px; +} + +.mic a:hover:after, +.mic a:focus:after, +.mic a:active:after { + border-color:#730800; +} + +.mic:hover:before, +.mic:hover:after { + background:#730800; +} + +/* FAST FORWARD +------------------------------------------------------------------------------------------------------------------------------- */ + +.fforward a:before { + left:1px; + border:5px solid transparent; + border-width:5px 7px; + border-left-color:#c55500; + margin-top:-4px; + background:transparent; +} + +.fforward a:after { + left:7px; + border:5px solid transparent; + border-width:5px 7px; + border-left-color:#c55500; + margin-top:-4px; + background:transparent; +} + +.fforward a:hover:before, +.fforward a:focus:before, +.fforward a:active:before { + border-left-color:#730800; + background:transparent; +} + +.fforward a:hover:after, +.fforward a:focus:after, +.fforward a:active:after { + border-left-color:#730800; +} + +/* FAST REWIND +------------------------------------------------------------------------------------------------------------------------------- */ + +.frewind a:before { + left:-6px; + border:5px solid transparent; + border-width:5px 7px; + border-right-color:#c55500; + margin-top:-4px; + background:transparent; +} + +.frewind a:after { + border:5px solid transparent; + border-width:5px 7px; + border-right-color:#c55500; + margin-top:-4px; + background:transparent; +} + +.frewind a:hover:before, +.frewind a:focus:before, +.frewind a:active:before { + border-right-color:#730800; + background:transparent; +} + +.frewind a:hover:after, +.frewind a:focus:after, +.frewind a:active:after { + border-right-color:#730800; +} + +/* JUMP FORWARD +------------------------------------------------------------------------------------------------------------------------------- */ + +.next a:before { + left:9px; + width:2px; + height:10px; + margin-top:-4px; +} + +.next a:after { + left:2px; + border:5px solid transparent; + border-width:5px 7px; + border-left-color:#c55500; + margin-top:-4px; + background:transparent; +} + +.next a:hover:after, +.next a:focus:after, +.next a:active:after { + border-left-color:#730800; +} + +/* JUMP REWIND +------------------------------------------------------------------------------------------------------------------------------- */ + +.prev a:before { + left:2px; + width:2px; + height:10px; + margin-top:-4px; +} + +.prev a:after { + left:-3px; + border:5px solid transparent; + border-width:5px 7px; + border-right-color:#c55500; + margin-top:-4px; + background:transparent; +} + +.prev a:hover:after, +.prev a:focus:after, +.prev a:active:after { + border-right-color:#730800; +} + +/* POP-OUT WINDOW +------------------------------------------------------------------------------------------------------------------------------- */ + +.pop a:before, +.pop a:after { + width:12px; + height:8px; + border:1px solid #c55500; + margin-top:-4px; + background:#fff; +} + +.pop a:after { + left:3px; + margin-top:-7px; +} + +.pop a:hover:before, +.pop a:focus:before, +.pop a:active:before, + .pop a:hover:after, + .pop a:focus:after, + .pop a:active:after { + border-color:#730800; + background:#fff; +} + +/* ENLARGE +------------------------------------------------------------------------------------------------------------------------------- */ + +.enlarge a:before { + width:16px; + height:14px; + margin-top:-7px; +} + +.enlarge a:after { + left:1px; + width:7px; + height:6px; + margin-top:-6px; + background:#fff; +} + +/* REPEAT +------------------------------------------------------------------------------------------------------------------------------- */ + +.repeat a:before { + left:1px; + width:9px; + height:9px; + border:3px solid #c55500; + margin-top:-6px; + background:transparent; + /* css3 */ + -webkit-border-radius:16px; + -moz-border-radius:16px; + border-radius:16px; +} + +.repeat a:after { + left:9px; + border:4px solid #fff; + border-width:5px 2px 5px 5px; + border-left-color:#c55500; + margin:-9px 0 0; + background:transparent; +} + +.repeat a:hover:before, +.repeat a:focus:before, +.repeat a:active:before { + border-color:#730800; + background:transparent; +} + +.repeat a:hover:after, +.repeat a:focus:after, +.repeat a:active:after { + border-left-color:#730800; +} + +/* EXPAND +------------------------------------------------------------------------------------------------------------------------------- */ + +.expand a:before { + z-index:-2; + left:1px; + width:5px; + height:0; + border-width:7px 7px 0; + border-style:solid; + border-color:transparent #c55500; + margin-top:-4px; + background:transparent; + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.expand a:after { + left:5px; + width:8px; + height:8px; + border:3px solid #c55500; + border-width:3px 0 0 3px; + margin-top:-6px; + background:transparent; +} + +.expand a:hover:before, +.expand a:focus:before, +.expand a:active:before { + border-color:transparent #730800; + background:transparent; +} + +.expand a:hover:after, +.expand a:focus:after, +.expand a:active:after { + border-color:#730800; +} + +/* SHRINK +------------------------------------------------------------------------------------------------------------------------------- */ + +.shrink a:before { + z-index:-2; + left:1px; + width:5px; + height:0; + border-width:0 7px 7px; + border-style:solid; + border-color:transparent #c55500; + margin-top:-4px; + background:transparent; + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.shrink a:after { + left:5px; + width:8px; + height:8px; + border:3px solid #c55500; + border-width:0 3px 3px 0; + margin-top:-6px; + background:transparent; +} + +.shrink a:hover:before, +.shrink a:focus:before, +.shrink a:active:before { + border-color:transparent #730800; + background:transparent; +} + +.shrink a:hover:after, +.shrink a:focus:after, +.shrink a:active:after { + border-color:#730800; +} + +/* TOGGLE SIZE +------------------------------------------------------------------------------------------------------------------------------- */ + +.toggle-size a:before { + left:2px; + border-width:6px; + border-style:solid; + border-color:#c55500 transparent transparent #c55500; + background:transparent; + margin-top:-7px; +} + +.toggle-size a:after { + left:7px; + border-width:4px; + border-style:solid; + border-color:transparent #c55500 #c55500 transparent; + margin-top:-2px; + background:transparent; +} + +.toggle-size a:hover:before, +.toggle-size a:focus:before, +.toggle-size a:active:before { + border-color:#730800 transparent transparent #730800; + background:transparent; +} + +.toggle-size a:hover:after, +.toggle-size a:focus:after, +.toggle-size a:active:after { + border-color:transparent #730800 #730800 transparent; +} + +/* FULL SCREEN +------------------------------------------------------------------------------------------------------------------------------- */ + +.full:before, +.full:after { + z-index:1; + left:8px; + width:3px; + height:8px; + border:5px solid #c55500; + border-width:5px 0; + margin-top:-8px; + /* css3 */ + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.full:after { + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.full:hover:before, +.full:hover:after { + border-color:#730800; +} + +.full a:before, +.full a:after { + z-index:10; + width:4px; + height:0; + border-width:0 7px 7px; + border-style:solid; + border-color:transparent #c55500; + margin-top:-8px; + background:transparent; +} + +.full a:after { + border-width:7px 7px 0; + margin-top:3px; +} + +.full a:hover:before, +.full a:focus:before, +.full a:active:before, +.full a:hover:after, +.full a:focus:after, +.full a:active:after { + border-color:transparent #730800; + background:transparent; +} + +/* SHRINK +------------------------------------------------------------------------------------------------------------------------------- */ + +.exit:before, +.exit:after { + z-index:1; + top:50%; + left:8px; + width:3px; + height:14px; + border:5px solid #c55500; + border-width:5px 0; + margin-top:-12px; + /* css3 */ + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.exit:after { + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.exit:hover:before, +.exit:hover:after { + border-color:#730800; +} + +.exit a:before, +.exit a:after { + z-index:10; + left:2px; + width:6px; + border-width:5px; + border-style:solid; + border-color:transparent #c55500; + margin-top:-5px; + background:transparent; + /* css3 */ + -webkit-transform:rotate(-45deg); + -moz-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + -o-transform:rotate(-45deg); + transform:rotate(-45deg); +} + +.exit a:after { + /* css3 */ + -webkit-transform:rotate(45deg); + -moz-transform:rotate(45deg); + -ms-transform:rotate(45deg); + -o-transform:rotate(45deg); + transform:rotate(45deg); +} + +.exit a:hover:before, +.exit a:focus:before, +.exit a:active:before, +.exit a:hover:after, +.exit a:focus:after, +.exit a:active:after { + border-color:transparent #730800; + background:transparent; +} + +/* EJECT +------------------------------------------------------------------------------------------------------------------------------- */ + +.eject a:before { + left:1px; + width:14px; + height:2px; + margin-top:4px; +} + +.eject a:after { + left:1px; + border:8px solid transparent; + border-width:8px 7px; + border-bottom-color:#c55500; + margin-top:-13px; + background:transparent; +} + +.eject a:hover:after, +.eject a:focus:after, +.eject a:active:after { + border-bottom-color:#730800; +} + diff --git a/cnDocs/assets/css/noreset.css b/cnDocs/assets/css/noreset.css new file mode 100644 index 000000000000..6a87948158b0 --- /dev/null +++ b/cnDocs/assets/css/noreset.css @@ -0,0 +1,392 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + Css Reset v0.9 + Created: 2012-12-19 + Last Updated: 2012-12-29 + Author: cloudYan + Contact: qqGroup:187260298 +------------------------------------------------------------ */ + +/* =更新日志 + * 2012-12-29 在normalize的基础上,添加清除浮动等常用样式 + * 2012-10-11 新计划noreset,精良保持浏览器默认的属性或统一默认属性值而非直接去掉默认的属性(如:ul,ol等) +------------------------------------------------------------ */ +/* RESET */ + +/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/* + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for `hidden` attribute not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Sets default font family to sans-serif. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Removes default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Addresses `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, + * Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; +} + +/* + * Addresses styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/* + * Addresses styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + + +/* + * Corrects font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * Sets consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/* + * Addresses inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; + font-size: smaller; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * Removes border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/* + * Corrects overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/* + * 1. Corrects font family not being inherited in all browsers. + * 2. Corrects font size not being inherited in all browsers. + * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/* + * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to `content-box` in IE 8/9. + * 2. Removes excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + + +/* + * Removes inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE 8/9. + * 2. Improves readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* 这条分割线以上为normalize.css的样式 +==================================================================================================== */ + +/* 清除浮动 */ +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +.clearfix,.wrap{*zoom:1}/* for IE6 IE7 */ +/* 空标签清除法 */ +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;} + +a{ text-decoration:none} +a:hover{ text-decoration: underline} + + +/* + + + + +*/ \ No newline at end of file diff --git a/cnDocs/assets/css/ori-responsive.css b/cnDocs/assets/css/ori-responsive.css new file mode 100644 index 000000000000..ebc24e8fa33b --- /dev/null +++ b/cnDocs/assets/css/ori-responsive.css @@ -0,0 +1,1050 @@ +/*! + * Oricode CRM DPL v1.0 + * + * Copyright 2012 tCreator, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Remixed by tCreator Service Team. + */ + +/*! + * Bootstrap Responsive v2.1.0 + * + * Copyright 2012 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ + +.clearfix { + *zoom: 1; +} + +.clearfix:before, +.clearfix:after { + display: table; + line-height: 0; + content: ""; +} + +.clearfix:after { + clear: both; +} + +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +.input-block-level { + display: block; + width: 100%; + min-height: 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.hidden { + display: none; + visibility: hidden; +} + +.visible-phone { + display: none !important; +} + +.visible-tablet { + display: none !important; +} + +.hidden-desktop { + display: none !important; +} + +.visible-desktop { + display: inherit !important; +} + +@media (min-width: 768px) and (max-width: 979px) { + .hidden-desktop { + display: inherit !important; + } + .visible-desktop { + display: none !important ; + } + .visible-tablet { + display: inherit !important; + } + .hidden-tablet { + display: none !important; + } +} + +@media (max-width: 767px) { + .hidden-desktop { + display: inherit !important; + } + .visible-desktop { + display: none !important; + } + .visible-phone { + display: inherit !important; + } + .hidden-phone { + display: none !important; + } +} + +@media (min-width: 1200px) { + .row { + margin-left: -30px; + *zoom: 1; + } + .row:before, + .row:after { + display: table; + line-height: 0; + content: ""; + } + .row:after { + clear: both; + } + [class*="span"] { + float: left; + margin-left: 30px; + } + .container, + .navbar-static-top .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { + width: 1170px; + } + .span12 { + width: 1170px; + } + .span11 { + width: 1070px; + } + .span10 { + width: 970px; + } + .span9 { + width: 870px; + } + .span8 { + width: 770px; + } + .span7 { + width: 670px; + } + .span6 { + width: 570px; + } + .span5 { + width: 470px; + } + .span4 { + width: 370px; + } + .span3 { + width: 270px; + } + .span2 { + width: 170px; + } + .span1 { + width: 70px; + } + .offset12 { + margin-left: 1230px; + } + .offset11 { + margin-left: 1130px; + } + .offset10 { + margin-left: 1030px; + } + .offset9 { + margin-left: 930px; + } + .offset8 { + margin-left: 830px; + } + .offset7 { + margin-left: 730px; + } + .offset6 { + margin-left: 630px; + } + .offset5 { + margin-left: 530px; + } + .offset4 { + margin-left: 430px; + } + .offset3 { + margin-left: 330px; + } + .offset2 { + margin-left: 230px; + } + .offset1 { + margin-left: 130px; + } + .row-fluid { + width: 100%; + *zoom: 1; + } + .row-fluid:before, + .row-fluid:after { + display: table; + line-height: 0; + content: ""; + } + .row-fluid:after { + clear: both; + } + .row-fluid [class*="span"] { + display: block; + float: left; + width: 100%; + min-height: 30px; + margin-left: 2.564102564102564%; + *margin-left: 2.5109110747408616%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .row-fluid [class*="span"]:first-child { + margin-left: 0; + } + .row-fluid .span12 { + width: 100%; + *width: 99.94680851063829%; + } + .row-fluid .span11 { + width: 91.45299145299145%; + *width: 91.39979996362975%; + } + .row-fluid .span10 { + width: 82.90598290598291%; + *width: 82.8527914166212%; + } + .row-fluid .span9 { + width: 74.35897435897436%; + *width: 74.30578286961266%; + } + .row-fluid .span8 { + width: 65.81196581196582%; + *width: 65.75877432260411%; + } + .row-fluid .span7 { + width: 57.26495726495726%; + *width: 57.21176577559556%; + } + .row-fluid .span6 { + width: 48.717948717948715%; + *width: 48.664757228587014%; + } + .row-fluid .span5 { + width: 40.17094017094017%; + *width: 40.11774868157847%; + } + .row-fluid .span4 { + width: 31.623931623931625%; + *width: 31.570740134569924%; + } + .row-fluid .span3 { + width: 23.076923076923077%; + *width: 23.023731587561375%; + } + .row-fluid .span2 { + width: 14.52991452991453%; + *width: 14.476723040552828%; + } + .row-fluid .span1 { + width: 5.982905982905983%; + *width: 5.929714493544281%; + } + .row-fluid .offset12 { + margin-left: 105.12820512820512%; + *margin-left: 105.02182214948171%; + } + .row-fluid .offset12:first-child { + margin-left: 102.56410256410257%; + *margin-left: 102.45771958537915%; + } + .row-fluid .offset11 { + margin-left: 96.58119658119658%; + *margin-left: 96.47481360247316%; + } + .row-fluid .offset11:first-child { + margin-left: 94.01709401709402%; + *margin-left: 93.91071103837061%; + } + .row-fluid .offset10 { + margin-left: 88.03418803418803%; + *margin-left: 87.92780505546462%; + } + .row-fluid .offset10:first-child { + margin-left: 85.47008547008548%; + *margin-left: 85.36370249136206%; + } + .row-fluid .offset9 { + margin-left: 79.48717948717949%; + *margin-left: 79.38079650845607%; + } + .row-fluid .offset9:first-child { + margin-left: 76.92307692307693%; + *margin-left: 76.81669394435352%; + } + .row-fluid .offset8 { + margin-left: 70.94017094017094%; + *margin-left: 70.83378796144753%; + } + .row-fluid .offset8:first-child { + margin-left: 68.37606837606839%; + *margin-left: 68.26968539734497%; + } + .row-fluid .offset7 { + margin-left: 62.393162393162385%; + *margin-left: 62.28677941443899%; + } + .row-fluid .offset7:first-child { + margin-left: 59.82905982905982%; + *margin-left: 59.72267685033642%; + } + .row-fluid .offset6 { + margin-left: 53.84615384615384%; + *margin-left: 53.739770867430444%; + } + .row-fluid .offset6:first-child { + margin-left: 51.28205128205128%; + *margin-left: 51.175668303327875%; + } + .row-fluid .offset5 { + margin-left: 45.299145299145295%; + *margin-left: 45.1927623204219%; + } + .row-fluid .offset5:first-child { + margin-left: 42.73504273504273%; + *margin-left: 42.62865975631933%; + } + .row-fluid .offset4 { + margin-left: 36.75213675213675%; + *margin-left: 36.645753773413354%; + } + .row-fluid .offset4:first-child { + margin-left: 34.18803418803419%; + *margin-left: 34.081651209310785%; + } + .row-fluid .offset3 { + margin-left: 28.205128205128204%; + *margin-left: 28.0987452264048%; + } + .row-fluid .offset3:first-child { + margin-left: 25.641025641025642%; + *margin-left: 25.53464266230224%; + } + .row-fluid .offset2 { + margin-left: 19.65811965811966%; + *margin-left: 19.551736679396257%; + } + .row-fluid .offset2:first-child { + margin-left: 17.094017094017094%; + *margin-left: 16.98763411529369%; + } + .row-fluid .offset1 { + margin-left: 11.11111111111111%; + *margin-left: 11.004728132387708%; + } + .row-fluid .offset1:first-child { + margin-left: 8.547008547008547%; + *margin-left: 8.440625568285142%; + } + input, + textarea, + .uneditable-input { + margin-left: 0; + } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 30px; + } + input.span12, + textarea.span12, + .uneditable-input.span12 { + width: 1156px; + } + input.span11, + textarea.span11, + .uneditable-input.span11 { + width: 1056px; + } + input.span10, + textarea.span10, + .uneditable-input.span10 { + width: 956px; + } + input.span9, + textarea.span9, + .uneditable-input.span9 { + width: 856px; + } + input.span8, + textarea.span8, + .uneditable-input.span8 { + width: 756px; + } + input.span7, + textarea.span7, + .uneditable-input.span7 { + width: 656px; + } + input.span6, + textarea.span6, + .uneditable-input.span6 { + width: 556px; + } + input.span5, + textarea.span5, + .uneditable-input.span5 { + width: 456px; + } + input.span4, + textarea.span4, + .uneditable-input.span4 { + width: 356px; + } + input.span3, + textarea.span3, + .uneditable-input.span3 { + width: 256px; + } + input.span2, + textarea.span2, + .uneditable-input.span2 { + width: 156px; + } + input.span1, + textarea.span1, + .uneditable-input.span1 { + width: 56px; + } + .thumbnails { + margin-left: -30px; + } + .thumbnails > li { + margin-left: 30px; + } + .row-fluid .thumbnails { + margin-left: 0; + } +} + +@media (min-width: 768px) and (max-width: 979px) { + .row { + margin-left: -20px; + *zoom: 1; + } + .row:before, + .row:after { + display: table; + line-height: 0; + content: ""; + } + .row:after { + clear: both; + } + [class*="span"] { + float: left; + margin-left: 20px; + } + .container, + .navbar-static-top .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { + width: 724px; + } + .span12 { + width: 724px; + } + .span11 { + width: 662px; + } + .span10 { + width: 600px; + } + .span9 { + width: 538px; + } + .span8 { + width: 476px; + } + .span7 { + width: 414px; + } + .span6 { + width: 352px; + } + .span5 { + width: 290px; + } + .span4 { + width: 228px; + } + .span3 { + width: 166px; + } + .span2 { + width: 104px; + } + .span1 { + width: 42px; + } + .offset12 { + margin-left: 764px; + } + .offset11 { + margin-left: 702px; + } + .offset10 { + margin-left: 640px; + } + .offset9 { + margin-left: 578px; + } + .offset8 { + margin-left: 516px; + } + .offset7 { + margin-left: 454px; + } + .offset6 { + margin-left: 392px; + } + .offset5 { + margin-left: 330px; + } + .offset4 { + margin-left: 268px; + } + .offset3 { + margin-left: 206px; + } + .offset2 { + margin-left: 144px; + } + .offset1 { + margin-left: 82px; + } + .row-fluid { + width: 100%; + *zoom: 1; + } + .row-fluid:before, + .row-fluid:after { + display: table; + line-height: 0; + content: ""; + } + .row-fluid:after { + clear: both; + } + .row-fluid [class*="span"] { + display: block; + float: left; + width: 100%; + min-height: 30px; + margin-left: 2.7624309392265194%; + *margin-left: 2.709239449864817%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .row-fluid [class*="span"]:first-child { + margin-left: 0; + } + .row-fluid .span12 { + width: 100%; + *width: 99.94680851063829%; + } + .row-fluid .span11 { + width: 91.43646408839778%; + *width: 91.38327259903608%; + } + .row-fluid .span10 { + width: 82.87292817679558%; + *width: 82.81973668743387%; + } + .row-fluid .span9 { + width: 74.30939226519337%; + *width: 74.25620077583166%; + } + .row-fluid .span8 { + width: 65.74585635359117%; + *width: 65.69266486422946%; + } + .row-fluid .span7 { + width: 57.18232044198895%; + *width: 57.12912895262725%; + } + .row-fluid .span6 { + width: 48.61878453038674%; + *width: 48.56559304102504%; + } + .row-fluid .span5 { + width: 40.05524861878453%; + *width: 40.00205712942283%; + } + .row-fluid .span4 { + width: 31.491712707182323%; + *width: 31.43852121782062%; + } + .row-fluid .span3 { + width: 22.92817679558011%; + *width: 22.87498530621841%; + } + .row-fluid .span2 { + width: 14.3646408839779%; + *width: 14.311449394616199%; + } + .row-fluid .span1 { + width: 5.801104972375691%; + *width: 5.747913483013988%; + } + .row-fluid .offset12 { + margin-left: 105.52486187845304%; + *margin-left: 105.41847889972962%; + } + .row-fluid .offset12:first-child { + margin-left: 102.76243093922652%; + *margin-left: 102.6560479605031%; + } + .row-fluid .offset11 { + margin-left: 96.96132596685082%; + *margin-left: 96.8549429881274%; + } + .row-fluid .offset11:first-child { + margin-left: 94.1988950276243%; + *margin-left: 94.09251204890089%; + } + .row-fluid .offset10 { + margin-left: 88.39779005524862%; + *margin-left: 88.2914070765252%; + } + .row-fluid .offset10:first-child { + margin-left: 85.6353591160221%; + *margin-left: 85.52897613729868%; + } + .row-fluid .offset9 { + margin-left: 79.8342541436464%; + *margin-left: 79.72787116492299%; + } + .row-fluid .offset9:first-child { + margin-left: 77.07182320441989%; + *margin-left: 76.96544022569647%; + } + .row-fluid .offset8 { + margin-left: 71.2707182320442%; + *margin-left: 71.16433525332079%; + } + .row-fluid .offset8:first-child { + margin-left: 68.50828729281768%; + *margin-left: 68.40190431409427%; + } + .row-fluid .offset7 { + margin-left: 62.70718232044199%; + *margin-left: 62.600799341718584%; + } + .row-fluid .offset7:first-child { + margin-left: 59.94475138121547%; + *margin-left: 59.838368402492065%; + } + .row-fluid .offset6 { + margin-left: 54.14364640883978%; + *margin-left: 54.037263430116376%; + } + .row-fluid .offset6:first-child { + margin-left: 51.38121546961326%; + *margin-left: 51.27483249088986%; + } + .row-fluid .offset5 { + margin-left: 45.58011049723757%; + *margin-left: 45.47372751851417%; + } + .row-fluid .offset5:first-child { + margin-left: 42.81767955801105%; + *margin-left: 42.71129657928765%; + } + .row-fluid .offset4 { + margin-left: 37.01657458563536%; + *margin-left: 36.91019160691196%; + } + .row-fluid .offset4:first-child { + margin-left: 34.25414364640884%; + *margin-left: 34.14776066768544%; + } + .row-fluid .offset3 { + margin-left: 28.45303867403315%; + *margin-left: 28.346655695309746%; + } + .row-fluid .offset3:first-child { + margin-left: 25.69060773480663%; + *margin-left: 25.584224756083227%; + } + .row-fluid .offset2 { + margin-left: 19.88950276243094%; + *margin-left: 19.783119783707537%; + } + .row-fluid .offset2:first-child { + margin-left: 17.12707182320442%; + *margin-left: 17.02068884448102%; + } + .row-fluid .offset1 { + margin-left: 11.32596685082873%; + *margin-left: 11.219583872105325%; + } + .row-fluid .offset1:first-child { + margin-left: 8.56353591160221%; + *margin-left: 8.457152932878806%; + } + input, + textarea, + .uneditable-input { + margin-left: 0; + } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 20px; + } + input.span12, + textarea.span12, + .uneditable-input.span12 { + width: 710px; + } + input.span11, + textarea.span11, + .uneditable-input.span11 { + width: 648px; + } + input.span10, + textarea.span10, + .uneditable-input.span10 { + width: 586px; + } + input.span9, + textarea.span9, + .uneditable-input.span9 { + width: 524px; + } + input.span8, + textarea.span8, + .uneditable-input.span8 { + width: 462px; + } + input.span7, + textarea.span7, + .uneditable-input.span7 { + width: 400px; + } + input.span6, + textarea.span6, + .uneditable-input.span6 { + width: 338px; + } + input.span5, + textarea.span5, + .uneditable-input.span5 { + width: 276px; + } + input.span4, + textarea.span4, + .uneditable-input.span4 { + width: 214px; + } + input.span3, + textarea.span3, + .uneditable-input.span3 { + width: 152px; + } + input.span2, + textarea.span2, + .uneditable-input.span2 { + width: 90px; + } + input.span1, + textarea.span1, + .uneditable-input.span1 { + width: 28px; + } +} + +@media (max-width: 767px) { + body { + padding-right: 20px; + padding-left: 20px; + } + .navbar-fixed-top, + .navbar-fixed-bottom { + margin-right: -20px; + margin-left: -20px; + } + .container-fluid { + padding: 0; + } + .dl-horizontal dt { + float: none; + width: auto; + clear: none; + text-align: left; + } + .dl-horizontal dd { + margin-left: 0; + } + .container { + width: auto; + } + .row-fluid { + width: 100%; + } + .row, + .thumbnails { + margin-left: 0; + } + .thumbnails > li { + float: none; + margin-left: 0; + } + [class*="span"], + .row-fluid [class*="span"] { + display: block; + float: none; + width: auto; + margin-left: 0; + } + .span12, + .row-fluid .span12 { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .input-large, + .input-xlarge, + .input-xxlarge, + input[class*="span"], + select[class*="span"], + textarea[class*="span"], + .uneditable-input { + display: block; + width: 100%; + min-height: 30px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + .input-prepend input, + .input-append input, + .input-prepend input[class*="span"], + .input-append input[class*="span"] { + display: inline-block; + width: auto; + } + .modal { + position: fixed; + top: 20px; + right: 20px; + left: 20px; + width: auto; + margin: 0; + } + .modal.fade.in { + top: auto; + } +} + +@media (max-width: 480px) { + .nav-collapse { + -webkit-transform: translate3d(0, 0, 0); + } + .page-header h1 small { + display: block; + line-height: 20px; + } + input[type="checkbox"], + input[type="radio"] { + border: 1px solid #ccc; + } + .form-horizontal .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + .form-horizontal .controls { + margin-left: 0; + } + .form-horizontal .control-list { + padding-top: 0; + } + .form-horizontal .form-actions { + padding-right: 10px; + padding-left: 10px; + } + .modal { + top: 10px; + right: 10px; + left: 10px; + } + .modal-header .close { + padding: 10px; + margin: -10px; + } + .carousel-caption { + position: static; + } +} + +@media (max-width: 979px) { + body { + padding-top: 0; + } + .navbar-fixed-top, + .navbar-fixed-bottom { + position: static; + } + .navbar-fixed-top { + margin-bottom: 20px; + } + .navbar-fixed-bottom { + margin-top: 20px; + } + .navbar-fixed-top .navbar-inner, + .navbar-fixed-bottom .navbar-inner { + padding: 5px; + } + .navbar .container { + width: auto; + padding: 0; + } + .navbar .brand { + padding-right: 10px; + padding-left: 10px; + margin: 0 0 0 -5px; + } + .nav-collapse { + clear: both; + } + .nav-collapse .nav { + float: none; + margin: 0 0 10px; + } + .nav-collapse .nav > li { + float: none; + } + .nav-collapse .nav > li > a { + margin-bottom: 2px; + } + .nav-collapse .nav > .divider-vertical { + display: none; + } + .nav-collapse .nav .nav-header { + color: #555555; + text-shadow: none; + } + .nav-collapse .nav > li > a, + .nav-collapse .dropdown-menu a { + padding: 9px 15px; + font-weight: bold; + color: #555555; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + } + .nav-collapse .btn { + padding: 4px 10px 4px; + font-weight: normal; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + } + .nav-collapse .dropdown-menu li + li a { + margin-bottom: 2px; + } + .nav-collapse .nav > li > a:hover, + .nav-collapse .dropdown-menu a:hover { + background-color: #f2f2f2; + } + .navbar-inverse .nav-collapse .nav > li > a:hover, + .navbar-inverse .nav-collapse .dropdown-menu a:hover { + background-color: #111111; + } + .nav-collapse.in .btn-group { + padding: 0; + margin-top: 5px; + } + .nav-collapse .dropdown-menu { + position: static; + top: auto; + left: auto; + display: block; + float: none; + max-width: none; + padding: 0; + margin: 0 15px; + background-color: transparent; + border: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } + .nav-collapse .dropdown-menu:before, + .nav-collapse .dropdown-menu:after { + display: none; + } + .nav-collapse .dropdown-menu .divider { + display: none; + } + .nav-collapse .navbar-form, + .nav-collapse .navbar-search { + float: none; + padding: 10px 15px; + margin: 10px 0; + border-top: 1px solid #f2f2f2; + border-bottom: 1px solid #f2f2f2; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + } + .navbar .nav-collapse .nav.pull-right { + float: none; + margin-left: 0; + } + .nav-collapse, + .nav-collapse.collapse { + height: 0; + overflow: hidden; + } + .navbar .btn-navbar { + display: block; + } + .navbar-static .navbar-inner { + padding-right: 10px; + padding-left: 10px; + } +} + +@media (min-width: 980px) { + .nav-collapse.collapse { + height: auto !important; + overflow: visible !important; + } +} diff --git a/cnDocs/assets/css/reset-x.css b/cnDocs/assets/css/reset-x.css new file mode 100644 index 000000000000..7c47eca40a0e --- /dev/null +++ b/cnDocs/assets/css/reset-x.css @@ -0,0 +1,234 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + Css Reset v0.9 + Last Updated: 2011-05-13 + Author: cloudYan + Contact: qqGroup:187260298 - http://www.FAQbaike.com +------------------------------------------------------------ */ +/* =更新日志 + * 2012-10-11 新计划noreset,精良保持浏览器默认的属性或统一默认属性值而非直接去掉默认的属性(如:ul,ol等) + * 2012-05-11 html5新增语义化的标签(除figure外)不必重置样式,默认就没有样式-陈林 + + * 2012-04-04 新项目参考了alipay,yahoo,html5Doctor等结合模块化开发进行研究,html5的Doctype声明,不必写type="text/css" 但是必须要有 rel="stylesheet" + * 2011-09-24 解决了IE下超链接使用绝对定位后失效的问题(使用background:url(about:blank)解决是最佳方案) + * 2011-09-19 原项目代号Ocode取义Original code,参考http://tcreator.info/labs/projects/2011/css-reset.html + + * 研究规划 + * 第一步通用reset.css + * 第二步全站公共样式—common.css + 包括全站统一样式定义;如:a,a:hover等 + 基础的模块组合样式;如:.f14,.mt10,.tc等 + * 第三步css模块—c_common.css + 包括模块公共样式提取 + 公共模块样式 + 模块个性化样式(类似新模块,但多处使用的) + * 第四步网站架构css差异化如何书写及管理css + 单页面/项目css(个性化css)规划 +------------------------------------------------------------ */ +/* 升级原则——渐进增强(Progressive Enhancement) + +渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲,渐进增强是指在确保页面在禁用JavaScript后能正常运作后,再对页面添加各种特效(JavaScript动画、Ajax异步等等)。我们同样可以运用"渐进增强"原则来使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web规范。 + +某些情况下,是无法让所有用户在任何浏览器下都完全一模一样,特别是那些使用IE6的用户。运用渐进增强策略,可以保证让那些用户至少能使用到你网站(或网络应用)的基本功能。 +------------------------------------------------------------ */ +/* RESET */ +/* 内外边距通常让各个浏览器样式的表现位置不同 */ +body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,figure,menu{margin:0;padding:0;} + + +/* 新计划中涉及的属性 +****************************************/ +ul,ol,li{} +/* 去掉列表前的标识, li 会继承 */ +/* +ol,ul{list-style-type:none} + +/* 结束 +****************************************/ + + +/* 语义化的标签的样式默认的margin,padding都为0,不用reset */ +article,aside,details,figcaption,footer,header,hgroup,menu,nav,section{} + +/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ +article,aside,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;} + +/* HTML5 媒体文件跟 img 保持一致 */ +audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} +command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline;} + +/* 去掉各Table cell 的边距并让其边重合 */ +table{border-collapse:collapse;border-spacing:0;} + +/* IE bug fixed: th 不继承 text-align*/ +th{text-align:inherit;} + +/* 去除默认边框 */ +fieldset,img{border:0;} + +/* ie6 7 8(q) bug 显示为行内表现 */ +iframe{display:block;} + +/* webkit内核浏览器会默认给:focus状态的元素加上outline的样式 没必要去除浏览器默认的outline属性 */ +:focus {outline:0;} + +/* 去掉 firefox 下此元素的边框 */ +abbr,acronym{border:0;font-variant:normal;} + +/* 一致的 del 样式 */ +del{text-decoration:line-through;} + +address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;} + + +/* 对齐是排版最重要的因素, 别让什么都居中 */ +caption,th {text-align:left;} + +/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ +h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;} +button,input,select,textarea{font-size:100%;} +q:before,q:after {content:'';} + +/* 统一上标和下标 */ +sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;} +sup{top:-0.5em;} +sub{bottom:-0.25em;} + +/* 让链接在 hover 状态下显示下划线 */ +a:hover {text-decoration:underline;} + +/* 默认不显示下划线,保持页面简洁 */ +ins,a {text-decoration:none;} + +/* 修复火狐下图片和文字之间的间隙,添加img{vertical-align:top;}、img{vertical-align:middle;}或img{display:block}属性即可解决,推荐前者 */ +img{vertical-align:top} + +/* 这条分割线以上的属性会提取到css reset.css中 +==================================================================================================== */ + +/* 全站级公用样式 */ +/* 清除浮动 */ +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +.clearfix,.wrap{*zoom:1}/* for IE6 IE7 */ +/* 空标签清除法 */ +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} + +/* 要注意表单元素并不继承父级 font 的问题 根据自身需求设置 这里可以注意下建议在使用表单元素的时候再定义 */ +body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53;} +blockquote,pre{white-space:pre-wrap;word-wrap:break-word;} + +/* 使Chrome支持12px以下的字体 */ +.text-size{-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} +/* 两端对齐 */ +.text-justify{text-align:justify;text-justify:inter-ideograph;} +/* 半透明 */ +.opacity {opacity:.5;filter:alpha(opacity=50);} +/* 文本过长变成省略号,需要定义宽度 */ +.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} +/* css3属性 */ +.css3_shadow{transition:all 1s ease-out 0s;border-radius:5px;box-shadow:0 0px 4px rgba(206, 201, 170, 0.8);} +.css3_shadow:hover{box-shadow:0 0px 5px rgba(206, 201, 170, 1);} + +/* 定义全站级统一样式 */ +a{color:#06c}a:hover{color:#c06;}.view_more{color:#06c;padding:0 2px;} +.yahei{font-family: "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1"} + +/* 以下是模块化开发属性——模块化组合样式 +------------------------------------------------------------ */ +/* 设置内联, 减少浮动带来的bug */ +.fl,.fr{display:inline}.fl{float:left;}.fr{float:right} +/* 块状盒模型居中及内容居中 */ +bc{margin-left:auto;margin-right:auto;}.tc{text-align:center} + +/* 组合样式 */ +.f12{font-size:12px}.f14{font-size:14px}.f16{font-size:16px}.f18{font-size:18px}.f22{font-size:22px}.f24{font-size:24px} +.lh18{line-height:18px}.lh20{line-height:20px}.lh22{line-height:22px}.lh24{line-height:24px} + +.mt10{margin-top:10px}.mt20{margin-top:20px}.mb10{margin-bottom:10px}.mb20{margin-bottom:20px} +.pd10{padding:10px}.pt10{padding-top:10px}.pb10{padding-bottom:10px}.plr10{padding-left:10px;padding-right:10px} + +/* 这条分割线以上的属性会提取到全站级公用样式 common.css中 +==================================================================================================== */ + +/* 保留扩展样式(以下类名等暂作保留-为更改或设定一个统一的样式,消除过去的滥用以及熟悉新用法这段时间,除符合以下样式外,尽量不要用于其他样式设置) +------------------------------------------------------------ */ +/* 预加载图片路径*/ +#preloader { + background-image:url(); + background-image:url(); + background-image:url(); + width:0px; + height:0px; + display:inline; +} +/* 网页布局常用模块命名 */ +#header{} +#content{} +#footer{} +.main{} +.aside{} +/*幻灯宣传*/ +.promo{} + +/* 大图背景 */ +.bigimg{background:url(../images/img-loading.gif) no-repeat 50% 50%;} +/* 间隔空白,源自腾讯首页 具备良好的兼容性组合性 */ +/* IE6下 div最小高度不能为0的解决方法overflow(否则即使设置 font-size:0 时这个容器的高度最小也为 2px) */ +.hr_a,.hr_b{font-size:1px;line-height:1px;display:block;clear:both;overflow:hidden}.hr_a{height:10px}.hr_b{height:5px} + +.B,.fb{font-weight:bold}.fnb{font-weight:normal} +.tc{text-align:center}.tr{text-align:right}.dis{display:block}.undis{display:none} + +/* 横向排列 */ +.hor li{display:inline;float:left;}.hor li a{display:block;float:left} +/* 处理无背景的块状a标签在IE下失效的问题 */ +.disa a{display:block;width:100%;height:100%;background:url(about:blank);text-indent:-9999px;} + + +/* 这条分割线以上的属性作为保留样式,对其进行非以上属性的样式定义可能引起以后的模块公共样式提取的兼容性问题 +==================================================================================================== */ + +/* 扩展参考(以下全站统一定制的公用模块参考区域,可针对需求进行规划) +------------------------------------------------------------ */ +/* 隐藏, 通常用来与 JS 配合 */ +body .ui-hide {display:none;} + +/* 提示框 -错误red,弹出,提醒yellow,成功green,一般信息 */ +.error,.alert,.notice,.success,.info{border:2px solid #ddd;margin-bottom:1em;padding:0.8em;} +.error,.alert{background:#FBE3E4;border-color:#FBC2C4;color:#8A1F11;} +.notice{background:#FFF6BF;border-color:#FFD324;color:#514721;} +.success{background:#E6EFC2;border-color:#C6D880;color:#264409;} +.info{background:#D5EDF8;border-color: #92CAE4;color:#205791;} +.error a,.alert a{color:#8A1F11;}.notice a{color:#514721;}.success a{color:#264409;}.info a{color:#205791;} + +/*人人网的一个提示框*/ +.yellow-tip-box { + background: url("http://a.xnimg.cn/imgpro/icons/yes.png") no-repeat scroll 20px 8px #FFF9D7; + border: 1px solid #E2C822; + margin-bottom: 10px; + padding: 6px 10px 6px 45px; +} +.yellow-tip-box p { + color: #888888; + margin: 0 !important; +} + +/* = form属性设置 +------------------------------------------------------------ */ +input[type="text"], input[type="password"], input[type="url"], input[type="email"], input.text, input.title, textarea { +background-color:white;border: 1px solid #bbb;color:#black;} +input[type="text"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="email"]:focus, input.text:focus, input.title:focus, textarea:focus {border-color:#666;} +select {background-color:white;border-style:solid;border-width:1px;} +input[type="text"], input[type="password"], input[type="url"], input[type="email"], input.text, input.title, textarea, select { +margin:0.5em 0;} +input.text,input.title{padding:5px;width:300px;} + +/* + + + + +*/ diff --git a/cnDocs/assets/css/reset.css b/cnDocs/assets/css/reset.css new file mode 100644 index 000000000000..6b30541dca87 --- /dev/null +++ b/cnDocs/assets/css/reset.css @@ -0,0 +1,141 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + Css Reset v0.9 + Created: 2011-04-25 + Last Updated: 2011-05-13 + Author: cloudYan + Contact: qqGroup:187260298 +------------------------------------------------------------ */ +/* =更新日志 + * 2012-10-11 新计划noreset,精良保持浏览器默认的属性或统一默认属性值而非直接去掉默认的属性(如:ul,ol等) + * 2012-05-11 html5新增语义化的标签(除figure外)不必重置样式,默认就没有样式-陈林 + + * 2012-04-04 新项目参考了alipay,yahoo,html5Doctor等结合模块化开发进行研究,html5的Doctype声明,不必写type="text/css" 但是必须要有 rel="stylesheet" + * 2011-09-24 解决了IE下超链接使用绝对定位后失效的问题(使用background:url(about:blank)解决是最佳方案) + * 2011-09-19 原项目代号Ocode取义Original code,参考http://www.tcreator.info/labs/projects/2011/css-reset.html + + * 研究规划 + * 第一步通用reset.css + * 第二步全站公共样式—common.css + 包括全站统一样式定义;如:a,a:hover等 + 基础的模块组合样式;如:.f14,.mt10,.tc等 + * 第三步css模块—c_common.css + 包括模块公共样式提取 + 公共模块样式 + 模块个性化样式(类似新模块,但多处使用的) + * 第四步网站架构css差异化如何书写及管理css + 单页面/项目css(个性化css)规划 +------------------------------------------------------------ */ +/* 升级原则——渐进增强(Progressive Enhancement) + +渐进增强(Progressive Enhancement)是为了确保没有页面特效后基本功能也是可用的。简单来讲,渐进增强是指在确保页面在禁用JavaScript后能正常运作后,再对页面添加各种特效(JavaScript动画、Ajax异步等等)。我们同样可以运用"渐进增强"原则来使用CSS3(或者一些CSS2)、HTML5以及其他IE6所不支持的web规范。 + +某些情况下,是无法让所有用户在任何浏览器下都完全一模一样,特别是那些使用IE6的用户。运用渐进增强策略,可以保证让那些用户至少能使用到你网站(或网络应用)的基本功能。 +------------------------------------------------------------ */ +/* RESET */ +/* 内外边距通常让各个浏览器样式的表现位置不同 */ +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,figure,menu{margin:0;padding:0;} + +ol,ul{list-style-type:none} +/* 新计划中涉及的属性 + + +/* 语义化的标签的样式默认的margin,padding都为0,不用reset */ +article,aside,details,figcaption,footer,header,hgroup,menu,nav,section{} + +/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ +article,aside,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;} + +/* HTML5 媒体文件跟 img 保持一致 */ +audio,canvas,video{display:inline-block;*display:inline;*zoom:1;} +command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline;} + +/* 去掉各Table cell 的边距并让其边重合 */ +table{border-collapse:collapse;border-spacing:0;} + +/* IE bug fixed: th 不继承 text-align*/ +th{text-align:inherit;} + +/* 去除默认边框 */ +fieldset,img{border:0;} + +/* ie6 7 8(q) bug 显示为行内表现 */ +iframe{display:block;} + +/* webkit内核浏览器会默认给:focus状态的元素加上outline的样式 没必要去除浏览器默认的outline属性 */ +:focus {outline:0;} + +/* 去掉 firefox 下此元素的边框 */ +abbr,acronym{border:0;font-variant:normal;} + +/* 一致的 del 样式 */ +del{text-decoration:line-through;} + +address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;} + + +/* 对齐是排版最重要的因素, 别让什么都居中 */ +caption,th {text-align:left;} + +/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ +h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;} +button,input,select,textarea{font-size:100%;} +q:before,q:after {content:'';} + +/* 统一上标和下标 */ +sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;} +sup{top:-0.5em;} +sub{bottom:-0.25em;} + +/* 默认不显示下划线,保持页面简洁 */ +ins,a {text-decoration:none;} + +/* 让链接在 hover 状态下显示下划线 */ +a:hover {text-decoration:underline;} + +/* 修复火狐下图片和文字之间的间隙,添加img{vertical-align:top;}、img{vertical-align:middle;}或img{display:block}属性即可解决,推荐前者 */ +img{vertical-align:middle} + +/* 清除浮动 */ +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +.clearfix,.wrap{*zoom:1}/* for IE6 IE7 */ +/* 空标签清除法 */ +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;} +.wrap,.bc{margin-left:auto; margin-right:auto} +.wrap{ width:980px;} + +/* 这条分割线以上的属性会提取到css reset.css中 +==================================================================================================== */ + +/* 全站级公用样式 */ + +/* 要注意表单元素并不继承父级 font 的问题 根据自身需求设置 这里可以注意下建议在使用表单元素的时候再定义 */ +body,button,input,select,textarea{font:12px/1.5 Tahoma,Arial,\5b8b\4f53;} +blockquote,pre{white-space:pre-wrap;word-wrap:break-word;} + +/* 使Chrome支持12px以下的字体 */ +.text-size{-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} +/* 两端对齐 */ +.text-justify{text-align:justify;text-justify:inter-ideograph;} +/* 半透明 */ +.opacity {opacity:.5;filter:alpha(opacity=50);} +/* 文本过长变成省略号,需要定义宽度 */ +.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} +/* css3属性 */ +.css3_shadow{transition:all 1s ease-out 0s;border-radius:5px;box-shadow:0 0px 4px rgba(206, 201, 170, 0.8);} +.css3_shadow:hover{box-shadow:0 0px 5px rgba(206, 201, 170, 1);} + +/* 定义全站级统一样式 */ +a{color:#06c}a:hover{color:#c06;}.view_more{color:#06c;padding:0 2px;} +.yahei{font-family: "Microsoft YaHei","\5FAE\8F6F\96C5\9ED1"} + + +/* + + + + +*/ diff --git a/cnDocs/assets/css/skill.css b/cnDocs/assets/css/skill.css new file mode 100644 index 000000000000..5cc823737080 --- /dev/null +++ b/cnDocs/assets/css/skill.css @@ -0,0 +1,147 @@ +/* 此文档放置参考使用或者技巧性解决方案的样式 */ +/* 清除浮动 */ +.clearfix:after,.wrap:after,.cwrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} +.clearfix,.wrap,.cwrap{zoom:1}/* for IE6 IE7 */ +/* 空标签清除法 */ +.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} + +/* 要注意表单元素并不继承父级 font 的问题 根据自身需求设置 这里可以注意下建议在使用表单元素的时候再定义 */ +body{font:12px/1.5 Tahoma, Arial,\5b8b\4f53;} +button,input,select,textarea{font:12px/1.5 Tahoma, Arial,\5b8b\4f53;} +blockquote,pre{white-space:pre-wrap;word-wrap:break-word;} +/* 如果将font-family中的第一个字体设置为Tahoma,则可以完美的实现(type="checkbox",type="radio")对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。 */ + +/* 使Chrome支持12px以下的字体 */ +.text-size{-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} +/* 两端对齐 */ +.text-justify{text-align:justify;text-justify:inter-ideograph;} +/* 半透明 */ +.opacity {opacity:.5;filter:alpha(opacity=50);} +/* 文本过长变成省略号,需要定义宽度 */ +.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} +/* css3属性 */ +.css3_shadow{transition:all 1s ease-out 0s;border-radius:5px;box-shadow:0 0px 4px rgba(206, 201, 170, 0.8);} +.css3_shadow:hover{box-shadow:0 0px 5px rgba(206, 201, 170, 1);} + +/* 定义全站级统一样式 */ +/*a:link{color:#05a}a:visited{color:#7a94ae}a:hover{color:#f00}.view_more{color:#06c;padding:0 2px;}*/ +.yahei{font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","黑体"} + +/* 以下是模块化开发属性——模块化组合样式 +------------------------------------------------------------ */ +/* 设置内联, 减少浮动带来的bug */ +.fl,.fr{display:inline}.fl{float:left;}.fr{float:right} +/* 块状盒模型居中及内容居中 */ +bc{margin-left:auto;margin-right:auto;}.tc{text-align:center} + +/* 组合样式 */ +.f12{font-size:12px}.f14{font-size:14px}.f16{font-size:16px}.f18{font-size:18px}.f22{font-size:22px}.f24{font-size:24px} +.lh18{line-height:18px}.lh20{line-height:20px}.lh22{line-height:22px}.lh24{line-height:24px} + +.mt10{margin-top:10px}.mt20{margin-top:20px}.mb10{margin-bottom:10px}.mb20{margin-bottom:20px} +.ml10{margin-left:10px}.mr10{margin-right:10px} +.pd10{padding:10px}.pt10{padding-top:10px}.pb10{padding-bottom:10px}.plr10{padding-left:10px;padding-right:10px} + +.wrap{width:980px; margin-left:auto; margin-right:auto} +.cwrap{padding:8px 8px 0;margin-left:auto;margin-right:auto; background:white;} + +/*关于定位*/ + +/* 这条分割线以上的属性会提取到全站级公用样式 common.css中 +==================================================================================================== */ + +/* + +*/ + +/* = 关于一下css调试设置的方法 + +* html {} for IE 6及以下版本 +*:first-child+html {} for IE 7 only +*:first-child+html {} for IE 7及以下版本 +* html {} html>body {} for IE 7以及标准浏览器 +html:first-child {} for Opera 9及以下版本 + +*:ie6-7 +_:ie6 +\0:ie8-9 +\9:ie6-9 +!important: ff、ie6-9 +------------------------------------------------------------ */ +/* =扩展属性 +:+ 仅IE支持 +:要使用的滤镜效果。多个滤镜之间用空格隔开。 + {filter:alpha(opacity=50);}设置透明度 (其它高级浏览器的实现参阅opacity) + div{filter:alpha(opacity=50);} /* for IE8 and earlier 实现50%的透明度,此2段代码的效果相同 + div{opacity:.5;} /* for IE9 and other browsers opacity IE6,7,8不支持,请使用filter属性 +关系选择符 |包含选择符(E F) + |子选择符(E>F)相邻选择符(E+F)兄弟选择符(E~F) 仅IE6不支持 + +属性选择符 -> E[att] 具有att属性的E元素... 仅IE6不支持 +/* 条件Hack + + if条件共包含6种选择方式:是否!、大于gt、大于或等于gte、小于lt、小于或等于lte、非指定版本 + (关于特殊字符<:< >:> ":" &:&) + + 目前的常用IE版本为6.0及以上 +/* 选择符级Hack *** 选择不同的浏览器及版本,尽可能减少对CSS Hack的使用。Hack有风险,使用需谨慎 + 通常如未作特别说明,本文档所有的代码和示例的默认运行环境都为!!标准模式!!。以下下简单列举几个 + * html .test{color:#090;} /* For IE6 and earlier + * + html .test{color:#ff0;} /* For IE7 + .test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE + .test:nth-child(1){color:#0ff;} /* For IE9+ and not IE /* IE都能识别*,但FF不识别 +/*!important + IE6及以下浏览器有个比较显式的支持问题存在,!important并不覆盖掉在同一条样式的后面的规则,但是在两条样式中时是起作用的!!! +/* 属性Hack + 如想同一段文字在IE6,7,8显示为不同颜色,可这样写: +.test{ + color:#c30; /* For Firefox + [;color:#ddd;]; /* For webkit(Chrome and Safari) + color:#090\0; /* For Opera + color:#00f\9; /* For IE8+ + *color:#f00; /* For IE7 + _color:#ff0; /* For IE6 +} +/* radius 圆角 + border-radius:[| ]{1,4}[/[|]{1,4}] IE6,7,8不支持 + .test{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} +/* box-shadow 阴影设置IE6,7,8不支持 + box-shadow:none | [ , ]* + = inset? && [ {2,4} && ? ] + none: 无阴影(默认值) + ①:第1个长度值用来设置对象的阴影水平偏移值。可以为负值 + ②:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 + ③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 + ④:如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值 + : 设置对象的阴影的颜色。请参阅颜色值 + inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影 +/* text-shadow 设置或检索对象中文本的文字是否有阴影及模糊效果 + text-shadow:none|[,]* + = {2,3} && ? + ①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 + ②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 + ③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 +/* calc() 用于动态计算长度值 Webkit(Chrome/Safari) Presto(Opera) IE6,7,8不支持 + 任何长度值都可以使用calc()函数进行计算。 calc()函数支持+, -, *, /, mod运算 + Gecko(Firefox) -moz-calc() + Trident(IE) calc() /* IE9 + .test{width:-moz-calc(100%-50px);width:calc(100%-50px);background:#eee;} + Firefox浏览器中使用"height: 100%"会固定其高度,而不是自动延伸成100%的高度,这个在IE浏览器中非常非常正常的一个CSS定义,到Firefox浏览器中就会有问题,不过为了兼容,总得研究研究再研究!这个"height: 100%"就象padding一样,要慎用。^_^此处已经解决,如上html,body处设置^_^ + +DIV高度自适应-----CSS布局中最小高度(min-height)的妙用(兼容IE,FF) 以下待验证 +{height:auto !important;height:600px; min-height:600px;} +IE6 不支持min-height属性,但它却认为height就是最小高度。/* 所有浏览器 +#container {min-height:200px; height:auto !important; height:200px;} + + Overflow Bug + +在IE6/7中,overflow无法正确的隐藏有相对定位position:relative;的子元素: +解决方法就是给外包容器 也加上position:relative; + +在IE6、IE7、IE8下,若浮动元素紧邻绝对定位元素的时候并且浮动元素设置了宽度,这样就会导致绝对定位元素"神秘失踪"。触发了IE的haslayout,解决方法就是取消这两个元素直接相邻 +------------------------------------------------------------ */ \ No newline at end of file diff --git a/cnDocs/assets/css/ui-common.css b/cnDocs/assets/css/ui-common.css new file mode 100644 index 000000000000..f0773b99b806 --- /dev/null +++ b/cnDocs/assets/css/ui-common.css @@ -0,0 +1,39 @@ +@charset "utf-8"; +/* ------------------------------------------------------------ + Css common v0.9 + Last Updated: 2012-07-25 + Author: Cloudyan + Contact: 1395093509@qq.com +------------------------------------------------------------ */ +/* RESET */ +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,select,textarea,p,blockquote,th,td,hr,button,figure,menu{margin:0;padding:0;}article,aside,details,embed,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}command,datalist,keygen,mark,meter,progress,rp,rt,ruby,time,wbr{display:inline}table{border-collapse:collapse;border-spacing:0}th{text-align:inherit}fieldset,img{border:0}iframe{display:block}:focus{outline:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style-type:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bold}button,input,select,textarea{font-size:100%}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}ins,a{text-decoration:none}a:hover{text-decoration:underline}img{vertical-align:top} +/* common.css */ +.clearfix:after,.wrap:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}.clearfix,.wrap{zoom:1}.clr{clear:both}.clear{clear:both;font-size:0;overflow:hidden;visibility:hidden}.fl,.fr{display:inline}.fl{float:left;}.fr{float:right}bc{margin-left:auto;margin-right:auto;}.tc{text-align:center}.f12{font-size:12px}.f14{font-size:14px}.f16{font-size:16px}.f18{font-size:18px}.f22{font-size:22px}.f24{font-size:24px}.f30{font-size:30px}.lh18{line-height:18px}.lh20{line-height:20px}.lh22{line-height:22px}.lh24{line-height:24px}.lh28{line-height:28px}.lh30{line-height:30px}.mt10{margin-top:10px}.mt20{margin-top:20px}.mb10{margin-bottom:10px}.mb20{margin-bottom:20px}.ml10{margin-left:10px}.mr10{margin-right:10px}.pd10{padding:10px}.pt10{padding-top:10px}.pb10{padding-bottom:10px}.plr10{padding-left:10px;padding-right:10px}blockquote,pre{white-space:pre-wrap;word-wrap:break-word;}.text-size{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}.text-justify{text-align:justify;text-justify:inter-ideograph;}.opacity{opacity:.5;filter:alpha(opacity=50);}.text-ell{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}.css3_shadow{transition:all 1s ease-out 0s;border-radius:5px;box-shadow:0 0px 4px rgba(206,201,170,0.8)}.css3_shadow:hover{box-shadow:0 0px 5px rgba(206,201,170,1)}.yahei{font-family:"Microsoft YaHei","\5FAE\8F6F\96C5\9ED1","黑体"} +.hr_a,.hr_b,.hr_c{font-size:1px;line-height:1px;display:block;clear:both;overflow:hidden}.hr_a{height:10px}.hr_b{height:5px}.hr_c{height:20px} +.no_bg{background:none !important}.no_bd{border:none !important}.p_rel{position:relative}.p_abs{position:absolute} +.B,.fb{font-weight:bold}.fnb{font-weight:normal}.tc{text-align:center}.tr{text-align:right}.dis{display:block}.undis{display:none}.disb{display:inline-block;zoom:1;*display:inline}.inline{display:inline} +.hor li{display:inline;float:left;zoom:1}.hor li a{display:block;float:left} +.disa a,.g_btn a{display:block;width:100%;height:100%;background:url(about:blank);text-indent:-9999px;} +/*全站统一样式dfn表示价格*/ +dfn,i{font-style:normal;} +del,dfn,td.price{ font-family:Tahoma, Geneva, sans-serif; font-family:Arial} +dfn,td.price{color:#f60;} +del{color:#888} +del,dfn,dfn i{display:inline-block;*display:inline;*zoom:1;} +del i,dfn i{font-style:normal;font-weight:500} +ol.num{ padding:5px 10px 10px 30px;} +ol.num li{ list-style:decimal outside; text-indent:0px; line-height:20px; margin:5px 0} +/* 定制样式 */ +.wrap{width:980px;margin-left:auto;margin-right:auto} +button,input,select,textarea{font:12px/1 Tahoma,Arial,\5b8b\4f53;} +/* 驴妈妈UI设计 */ +.link-more{ display:inline-block;*display:inline;*zoom:1; margin-left:3px;} +.link-more i{color:#08c;}.view_more{ cursor: pointer;} +/* 字体颜色控制 */ +.lv-c1{color:#f60} +.lv-ca{color:#333} +.lv-cb{color:#555} +.lv-cc{color:#888} +.lv-cw{color:red} + +body{font:12px/22px \5b8b\4f53,Tahoma,Arial; color:#333; background:#fff; position:relative} diff --git a/cnDocs/assets/css/ui-components.css b/cnDocs/assets/css/ui-components.css new file mode 100644 index 000000000000..719eb5a5e709 --- /dev/null +++ b/cnDocs/assets/css/ui-components.css @@ -0,0 +1,379 @@ + +/* ------------------------------------------------------------ + ui-components v0.9 + Create: 2012-09-14 + Last Updated: 2012-09-29 + Author: Cloudyan + Contact: qqGroup:187260298 1395093509@qq.com + Description: 包含最常用且基本的组件(不要轻易修改此样式表中的样式,详询Author) +------------------------------------------------------------ */ + + +/* 四种常用css注释 + * 比较复杂的组件-变化组合较多,需要详细说明 + * 一般组件比较简单,只需简单说明 + * 简单组件但代码比较多,需要清晰划分css区块 + * 简单注释,只需功能性描述 + */ + + +/** + * @name : alert + * @explain : 操作提示 + * @type : 基类 .alert + * @dependent : 无 + * @author : Cloudyan + * @version : 1.0 + * @html : + +
    + +
    +
    提示标题
    +
    提示描述
    +
    + 按钮 + 链接 +
    +
    +
    + */ + +/** + * @name: UI CSS Framework 1.0 + * @author: Oricode UI + * @description: UI 组件描述 + */ + +/* Misc visuals-其他视觉效果 +----------------------------------*/ + +/* Corner radius-圆角 */ + + +/* 常用css注释举例结束 + ************************** + ********* end ********** + ************************** + */ + +/* (页面html说明举例)搜索页面主体内容 + * 边栏盒模型aside-box 单独定义盒子请附加具体的盒子名称,样式在自定义class名下定义 + * 如有边框添加class="lv-bd" + * 尽量保持结构设计上的统一,保持页面中的注释风格,示例如下: + * 注释开始 + * 注释结束 + */ + +/** + * @name: UI CSS Framework 1.0 + * @author: Oricode Group + * @description: UI 组件描述 + */ + +/** + * @name : mini-tips ===tips alert msg- + * @explain : 操作提示 + * @type : 基类 .tips .alert + * @expand : 扩展 -info -success -error -warning -help -stop -wait === message danger + * @dependent : Oricode + * @author : Cloudyan + * @version : 1.0 + * @html : + + + + + +
    + + 安全提醒:自行编辑,非系统消息 +
    + +
    + +

    Binggo!操作状态提醒!

    +

    您现在可以去畅游网络了。

    +
    + +
    + + +
    +
    提示标题
    +
    提示描述
    +
    + 按钮 + 链接 +
    +
    +
    + + */ +.mtips,.tips-ico,span.tips,.alert-ico{display:inline-block;*display:inline;*zoom:1;} +.tips-ico,.alert-ico{ background:url(/cnBootstrap/cnDocs/solutions/img/ico-combo.png) -1000px -1000px no-repeat; } + +/* tips */ +.tips .tips-ico{ width:14px; height:14px; float:left; margin-right:5px; background-position:0 -34px} +.tips{ margin:0; background:#f9f9f9;border:1px solid #d4d4d4;padding:8px 10px; line-height:14px;} +.tips-info .tips-ico{ background-position:0 -34px} +.tips-warning .tips-ico{ background-position:-14px -34px} +.tips-error .tips-ico{background-position:-28px -34px} +.tips-success .tips-ico{ background-position:-42px -34px} +.tips-help .tips-ico{ background-position:-56px -34px} +.tips-stop .tips-ico{ background-position:-70px -34px} +.tips-wait .tips-ico{ background-position:-84px -34px} + +.tips-info{background:#e5f5ff;border:1px solid #c9d5e2} +.tips-warning{background:#ffffe0;border:1px solid #ff8801} +.tips-error{background:#fff2f2;border:1px solid #f44} +.tips-success{background:#f1ffe2;border:1px solid #7dc25e} +.tips-help{background:#e5f5ff;border:1px solid #c9d5e2} +.tips-stop{background:#fceee8;border:1px solid #f6c8b5} +.tips-wait{background:#e5f5ff;border:1px solid #c9d5e2} + +.tips-arrowup{display:inline-block;height:10px;left:40px;margin-left:-8px;position:absolute;text-indent:-9999em;width:16px;z-index:1;top:-9px;_top:-8px} +.tips-arrowup-message{background-position:-194px -39px} +.tips-arrowup-warning{background-position:-211px -39px} + +/* mini-tips */ +.mtips{padding:9px 10px; line-height:14px; border:none; background:none} +.mtips .tips-ico{ width:14px; height:14px;} + +/* alert */ +.alert .alert-ico{ width:32px; height:32px; float:left; margin:0 0 0 -45px; background-position:0 -34px} +.alert{ background:#f9f9f9;border:1px solid #d4d4d4; padding:20px 30px 20px 65px;} +.alert .alert-title{ font-size:14px; font-weight:bold;} +.alert .alert-title,.alert .alert-line,.alert p{ margin:0} +.alert-info .alert-ico{ background-position:0 0} +.alert-warning .alert-ico{ background-position:-32px 0} +.alert-error .alert-ico{background-position:-64px 0} +.alert-success .alert-ico{ background-position:-96px 0} +.alert-help .alert-ico{ background-position:-128px 0} +.alert-stop .alert-ico{ background-position:-160px 0} +.alert-wait .alert-ico{ background-position:-192px 0} + +.alert-info{background:#e5f5ff;border:1px solid #c9d5e2} +.alert-warning{background:#ffffe0;border:1px solid #ff8801} +.alert-error{background:#fff2f2;border:1px solid #f44} +.alert-success{background:#f1ffe2;border:1px solid #7dc25e} +.alert-help{background:#e5f5ff;border:1px solid #c9d5e2} +.alert-stop{background:#fceee8;border:1px solid #f6c8b5} +.alert-wait{background:#e5f5ff;border:1px solid #c9d5e2} + +.alert-title{ font-size:14px; font-weight:bold} +.alert-line{ font-size:12px; line-height:22px;} + +button.close {padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;} +.alert .close{position:relative; width:24px; height:24px;top:-18px;right:-28px;line-height:22px;} + + +/** + * @name : Autocomplete Plugin + * @explain : 自动完成插件 + * @type : 基类 .auto >> auto-big auto-list + * @dependent : 无 + * @author : Cloudyan + * @version : 1.0 + * @html : + + */ +.auto{font:12px/22px \5b8b\4f53,Tahoma,Arial; width:277px; overflow:hidden;border:1px solid #dbdbdb;background: #fff; +box-shadow:2px 2px 2px 0 rgba(102,102,102,0.2);} +.auto a{color:#333; text-decoration:none} +.auto a:hover{ color:#e08; text-decoration:underline} +.auto-line{color:#888; font-size:12px;font-weight:normal; margin:0;} +.auto-title{color:#999; font-size:12px; font-weight: normal; border-bottom:1px dotted #dbdbdb} +.auto-box{ padding:5px 10px;} +.auto-mini .auto-box{ padding:0;} +.auto-mini a{ padding:0 10px;} +.a2row,.a3row,.a4row,.a5row{ overflow:hidden;*zoom:1; margin-right:-2px; padding-top:2px; margin-bottom:10px;} +.a2row li,.a3row li,.a4row li,.a5row li{ float:left; display:inline;overflow:hidden;} +.a2row li{ width:49.5%}.a3row li{ width:33.25%}.a4row li{ width:24.9%}.a5row li{ width:19.9%} +.auto a{ display:block; white-space:nowrap;overflow:hidden; text-align:left;} +.a2row a,.a3row a{margin-right:10px;text-overflow:ellipsis;} +.auto-mini a{text-overflow:ellipsis;color:#333;} +.auto-mini a:hover{ background:#ff9cc0;color:#fff; text-decoration:none} + +.auto-big{ width:355px;} +.auto-middle{width:277px;} +.auto-small{ width:235px;} +.auto-mini{ width:137px;} + +/* 活动促销icon + * icon101 节日-红色(按顺序排列) 元旦 清明 五一 端午 中秋 国庆 微旅游日 + * icon201 促销-橙色 多人多惠 礼盒 促销 热卖 新品 + * icon301 项目-多彩 超级自由行 开心驴行 + * icon-sp1 促销-大ICON 信用卡促销 多人多惠 早订优惠 招行专享 + * icon-01 标识-景点 + */ +.icon-01, +.icon101,.icon102,.icon103,.icon104,.icon105,.icon106,.icon07, +.icon201,.icon202,.icon203,.icon204,.icon205, +.icon301,.icon302, +.icon-sp1,.icon-sp2,.icon-sp3,.icon-sp4,.icon-sp5,.icon-sp6 +{ background: url(http://pic.lvmama.com/img/new_v/ob_search/combo.gif) no-repeat; display: inline-block;*display: inline;*zoom:1; vertical-align:top;*vertical-align:middle} +.icon-01{ height:16px; width:16px;margin-top:2px;*margin-top:0;} +.icon-01{ background-position: 0 -96px;} +.icon101,.icon102,.icon103,.icon104,.icon105,.icon106,.icon07, +.icon201,.icon202,.icon203,.icon204,.icon205 +{height: 16px;width: 33px; margin-top:2px;*margin-top:0; margin-left:10px;} +/* icon101 节日-红色(按顺序排列) 101元旦 102清明 103五一 104端午 105中秋 106国庆 107微旅游日 */ +.icon101{ background-position: -122px 0} +.icon102{ background-position: -155px -16px} +.icon103{ background-position: -122px -16px} +.icon104{ background-position: -155px -16px} +.icon105{ background-position: -122px -32px} +.icon106{ background-position: -155px -32px} +.icon107{ background-position: -122px -48px;width: 56px;} +/* icon201 促销-橙色 201多人多惠 202礼盒 203促销 204热卖 205新品 */ +.icon201{ background-position: -122px -80px;width: 56px;} +.icon202{ background-position: -179px -80px;width: 12px;} +.icon203{ background-position: -122px -96px;} +.icon204{ background-position: -155px -96px;} +.icon205{ background-position: -122px -112px;} +/* icon301 项目-玫红 301超级自由行 302开心驴行 */ +.icon301,.icon302 +{height: 17px;width: 76px; margin-left:10px;} +.icon301{ background-position: -190px 0; width: 88px;} +.icon302{ background-position: -190px -17px; width: 76px;} +/* icon301 促销-大ICON -sp1信用卡促销 -sp2多人多惠 -sp3早订优惠 -sp4招行专享 */ +.icon-sp1,.icon-sp2,.icon-sp3,.icon-sp4,.icon-sp5,.icon-sp6 +{ width: 90px; height: 34px; margin-bottom:10px;} +.icon-sp1{ background-position: -32px 0} +.icon-sp2{ background-position: -32px -34px} +.icon-sp3{ background-position: -32px -68px} +.icon-sp4{ background-position: -32px -102px} + +/* pages页码小组件 + * 样式默认玫红色(可缺省rosestyle) + * 可组合样式orangestyle橙色 + * @html +
    + 1 + 2 + 3 + ... + 下一页 +
    + */ +.pages{margin:10px 0 0;text-align:right;} +.pages a,.pages span{display:inline-block;zoom:1;*display:inline;margin-left:5px;padding:3px 9px; line-height:18px;} +.pages a{border:1px solid #ddd;color:#333;background:#fff;} +.pages .PageSel,.rosestyle .PageSel{font-weight:bold;border:1px solid #df1a7a;color:#fff;background:#df1a7a;} +.pages a:hover,.rosestyle a:hover{ border-color:#df1a7a;color:#df1a7a; text-decoration:none} +.orangestyle .PageSel{font-weight:bold;border:1px solid #f80;color:#fff;background:#f80;} +.orangestyle a:hover{ border-color:#f80;color:#f80; text-decoration:none} + +/* 星星组件 + * span.big_star 大星星-方形玫红星-无灰色背景(底灰色星星) + * span.re_star starbg 点评星星(灰色背景) + * span.b_star 大星星-玫红星-透明背景(底灰色星星) + * span.sm_star 小星星-玫红小星星 + * span.k_star 小星星-橙色空心 + * span.t_star 小星星-橙色实心(底空心星) + * @html + + */ +span.big_star,span.big_star i,span.b_star,span.b_star i,span.sm_star,span.sm_star i,span.t_star,span.t_star i,span.k_star i,.re-star,.starbg,.starbg i +{ background:url(http://pic.lvmama.com/img/new_v/channel/ico_s_result.gif) no-repeat;display:inline-block;*display:inline;*zoom:1;overflow:hidden;} +span.t_star,span.k_star{display:inline-block;overflow:hidden; height:10px;} +span.t_star,span.k_star{width:62px;} +span.t_star,span.t_star i,span.k_star i{ height:10px; background-position:-50px -100px;} +span.t_star i{background-position:-50px -111px;} +span.t_star i,span.k_star i{ float:left;} +span.sm_star,span.sm_star i{width:68px; height:12px; background-position:-180px -100px;} +span.sm_star i{background-position:-180px -111px; float:left;} +span.big_star,span.big_star i{ width:69px; height:13px; background-position:-24px 0;} +span.big_star i{background-position:-24px -16px; float:left;} +span.b_star,span.b_star i{ width:78px; height:12px; background-position:-27px -124px;} +span.b_star i{background-position:-27px -138px; float:left;} +.re-star,.starbg,.starbg i{ background-position:-250px -100px;width:80px; height:20px;} +.re-star{ padding:0 7px; overflow:hidden; vertical-align:middle} +.starbg{ background-position:-257px -100px;} +.starbg i{float:left; background-position:-257px -120px;} +/* 小星星扩展 */ +span.star1{ width:12px} +span.star2{ width:24px} +span.star3{ width:37px} +span.star4{ width:49px} +span.star5{ width:62px} +small.star{font-weight: normal; font-size:12px; line-height:11px; -webkit-text-size-adjust: none;} +small.star i{ width:100%;} +small.star span.t_star{ margin-right:5px;} + +/* 翻页小组件 */ +.pageoper{color:#555} +.page-arrow,i.arrow{ background:url(http://pic.lvmama.com/img/new_v/ob_search/combo.gif) 1000px 1000px no-repeat; display:inline-block; *display:inline;*zoom:1;} +.page-arrow { width:16px; height:16px; overflow:hidden; position:absolute; top:2px; _top:1px;} +.page-arrow-left{background-position:0 -80px; left:0px;} +.page-arrow-right{background-position:-16px -80px; right:0px;} +.page-prev,.page-next{ display:inline-block;*display:inline;*zoom:1; border:1px solid #dfdfdf; height:20px;line-height:20px; background:#fff; color:#555; position:relative} +.page-prev{ padding:0 4px 0 15px;} +.page-next{ padding:0 15px 0 4px;} +a.page-prev:hover,a.page-next:hover{color:#555; text-decoration:none; border-color:#FFB8DB;} + +/* view-more arrow 展开/收起-箭头 */ +.view-more,.hide-more{ display:inline-block;*display:inline;*zoom:1; line-height:22px; cursor:pointer} +i.arrow{ background-position:0 -112px;width:16px; height:16px; margin:2px 0 0 3px; vertical-align:top; *vertical-align:baseline} +.view-more .arrow{ background-position:0 -112px; } +.hide-more .arrow{background-position:-16px -112px; } + +/** + * @name : tooltip + * @explain : 提示 + * @type : 基类 + * @dependent : 无 + * @author : Cloudyan + * @version : 1.0 + * @html : + +
    +
    +
    +
    +
    +
    标题
    +

    内容

    +
    +
    +
    + */ + +.tooltip {position: absolute;z-index: 1030;display: block; padding:5px 0; font-size: 11px;/*opacity: 0;filter: alpha(opacity=0);*/visibility: visible;} +/*.tooltip.in {opacity: 0.8;filter: alpha(opacity=80);}*/ +.tooltip.top {margin-top: -3px;} +.tooltip.right {margin-left: 3px;} +.tooltip.bottom {margin-top: 3px;} +.tooltip.left {margin-left: -3px;} +.tooltip-outer {max-width: 260px;width:260px; position:relative; overflow:hidden; padding:3px; z-index:10; +/* border-bottom-color:rgba(129,129,129,1); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px;*/ + +} +.tooltip-shadow{ + position:absolute; width:100%; height:100%; _width:265px; _height:200px; top:0; left:0;z-index:50; + background:#000; + opacity:0.1; + filter: alpha(opacity=10); +} +.tooltip-inner{ position:relative; z-index:101; left:0; top:0; padding:5px 8px; background:#fff;text-decoration:none; border:1px solid #c6c6c6; color:#333;zoom:1;/*opacity:1;filter: alpha(opacity=100);*/} +.tooltip-title{color:#333; font-size:12px;} +.tooltip-content{color:#555; line-height:18px; font-size:12px;} +.tooltip-content p{ margin:0;} +.tooltip-content span{color:#ff9714} +.tooltip-arrow {position: absolute; z-index:100;width: 0;height: 0; overflow:hidden;border-color: transparent;border-style: solid;opacity:0.1;filter: alpha(opacity=10);} +.top .tooltip-arrow {bottom: 0;left: 50%;margin-left: -5px;border-top-color:#000;border-width: 5px 5px 0;} +.right .tooltip-arrow {top: 50%;left: 0;margin-top: -5px;border-right-color:#000;border-width: 5px 5px 5px 0;} +.left .tooltip-arrow {top: 50%;right: 0;margin-top: -5px;border-left-color:#000;border-width: 5px 0 5px 5px;} +.bottom .tooltip-arrow {top: 0;left: 50%;margin-left: -5px;border-bottom-color:#000;border-width: 0 5px 5px;} +asdasd{} +.bottom-left .tooltip-arrow,.bottom-right .tooltip-arrow{border-bottom-color:#000;border-width: 0 5px 5px;} +.bottom-left .tooltip-arrow {top: 0;left:25px;} +.bottom-right .tooltip-arrow {top: 0;left:100%; margin-left:-30px;} +.top-left .tooltip-arrow,.top-right .tooltip-arrow{border-top-color:#000;border-width: 5px 5px 0;} +.top-left .tooltip-arrow {bottom: 0;left:25px;} +.top-right .tooltip-arrow {bottom: 0;left:100%; margin-left:-30px;} + diff --git a/cnDocs/assets/css/x-responsive.css b/cnDocs/assets/css/x-responsive.css new file mode 100644 index 000000000000..1ff603a75178 --- /dev/null +++ b/cnDocs/assets/css/x-responsive.css @@ -0,0 +1,47 @@ +/*! + * Bootstrap Responsive v2.2.1 + * + * Copyright 2012 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ + +.clearfix { + *zoom: 1; +} + +.clearfix:before, +.clearfix:after { + display: table; + line-height: 0; + content: ""; +} + +.clearfix:after { + clear: both; +} + +.wrap{margin-left:auto; margin-right:auto; clear:both} +@media (min-width: 768px) and (max-width: 979px) { + +} + +@media (max-width: 979px) { +} + +@media (min-width: 980px) and (max-width: 1199px) { + .wrap{width:980px;} +} + +@media (min-width: 1200px) { + +} + +@media (max-width: 767px) { +} + +@media (max-width: 480px) { + +} \ No newline at end of file diff --git a/cnDocs/assets/ico/apple-touch-icon-114-precomposed.png b/cnDocs/assets/ico/apple-touch-icon-114-precomposed.png new file mode 100644 index 000000000000..790a64f758bf Binary files /dev/null and b/cnDocs/assets/ico/apple-touch-icon-114-precomposed.png differ diff --git a/cnDocs/assets/ico/apple-touch-icon-144-precomposed.png b/cnDocs/assets/ico/apple-touch-icon-144-precomposed.png new file mode 100644 index 000000000000..6d0e463fd36d Binary files /dev/null and b/cnDocs/assets/ico/apple-touch-icon-144-precomposed.png differ diff --git a/cnDocs/assets/ico/apple-touch-icon-57-precomposed.png b/cnDocs/assets/ico/apple-touch-icon-57-precomposed.png new file mode 100644 index 000000000000..4936cca83cfe Binary files /dev/null and b/cnDocs/assets/ico/apple-touch-icon-57-precomposed.png differ diff --git a/cnDocs/assets/ico/apple-touch-icon-72-precomposed.png b/cnDocs/assets/ico/apple-touch-icon-72-precomposed.png new file mode 100644 index 000000000000..b1165bdbddb1 Binary files /dev/null and b/cnDocs/assets/ico/apple-touch-icon-72-precomposed.png differ diff --git a/cnDocs/assets/ico/favicon.ico b/cnDocs/assets/ico/favicon.ico new file mode 100644 index 000000000000..cb8dbdfc429d Binary files /dev/null and b/cnDocs/assets/ico/favicon.ico differ diff --git a/cnDocs/assets/ico/favicon.png b/cnDocs/assets/ico/favicon.png new file mode 100644 index 000000000000..073c13c0f6e9 Binary files /dev/null and b/cnDocs/assets/ico/favicon.png differ diff --git a/cnDocs/assets/img/bootstrap-docs-readme.png b/cnDocs/assets/img/bootstrap-docs-readme.png new file mode 100644 index 000000000000..36603bd3b44e Binary files /dev/null and b/cnDocs/assets/img/bootstrap-docs-readme.png differ diff --git a/cnDocs/assets/img/bootstrap-mdo-sfmoma-01.jpg b/cnDocs/assets/img/bootstrap-mdo-sfmoma-01.jpg new file mode 100644 index 000000000000..2d398982b04d Binary files /dev/null and b/cnDocs/assets/img/bootstrap-mdo-sfmoma-01.jpg differ diff --git a/cnDocs/assets/img/bootstrap-mdo-sfmoma-02.jpg b/cnDocs/assets/img/bootstrap-mdo-sfmoma-02.jpg new file mode 100644 index 000000000000..7a89371a4587 Binary files /dev/null and b/cnDocs/assets/img/bootstrap-mdo-sfmoma-02.jpg differ diff --git a/cnDocs/assets/img/bootstrap-mdo-sfmoma-03.jpg b/cnDocs/assets/img/bootstrap-mdo-sfmoma-03.jpg new file mode 100644 index 000000000000..3638f156463c Binary files /dev/null and b/cnDocs/assets/img/bootstrap-mdo-sfmoma-03.jpg differ diff --git a/cnDocs/assets/img/bs-docs-bootstrap-features.png b/cnDocs/assets/img/bs-docs-bootstrap-features.png new file mode 100644 index 000000000000..7cd8501ae192 Binary files /dev/null and b/cnDocs/assets/img/bs-docs-bootstrap-features.png differ diff --git a/cnDocs/assets/img/bs-docs-masthead-pattern.png b/cnDocs/assets/img/bs-docs-masthead-pattern.png new file mode 100644 index 000000000000..75c46a152dec Binary files /dev/null and b/cnDocs/assets/img/bs-docs-masthead-pattern.png differ diff --git a/cnDocs/assets/img/bs-docs-responsive-illustrations.png b/cnDocs/assets/img/bs-docs-responsive-illustrations.png new file mode 100644 index 000000000000..77c8f18f5ce7 Binary files /dev/null and b/cnDocs/assets/img/bs-docs-responsive-illustrations.png differ diff --git a/cnDocs/assets/img/bs-docs-twitter-github.png b/cnDocs/assets/img/bs-docs-twitter-github.png new file mode 100644 index 000000000000..06100f3989fd Binary files /dev/null and b/cnDocs/assets/img/bs-docs-twitter-github.png differ diff --git a/cnDocs/assets/img/example-sites/8020select.png b/cnDocs/assets/img/example-sites/8020select.png new file mode 100644 index 000000000000..e8eeeb226bfd Binary files /dev/null and b/cnDocs/assets/img/example-sites/8020select.png differ diff --git a/cnDocs/assets/img/example-sites/adoptahydrant.png b/cnDocs/assets/img/example-sites/adoptahydrant.png new file mode 100644 index 000000000000..ec9188914c2f Binary files /dev/null and b/cnDocs/assets/img/example-sites/adoptahydrant.png differ diff --git a/cnDocs/assets/img/example-sites/breakingnews.png b/cnDocs/assets/img/example-sites/breakingnews.png new file mode 100644 index 000000000000..5a077856cc7a Binary files /dev/null and b/cnDocs/assets/img/example-sites/breakingnews.png differ diff --git a/cnDocs/assets/img/example-sites/fleetio.png b/cnDocs/assets/img/example-sites/fleetio.png new file mode 100644 index 000000000000..9207b0cb805e Binary files /dev/null and b/cnDocs/assets/img/example-sites/fleetio.png differ diff --git a/cnDocs/assets/img/example-sites/gathercontent.png b/cnDocs/assets/img/example-sites/gathercontent.png new file mode 100644 index 000000000000..92cd0ee2ae5a Binary files /dev/null and b/cnDocs/assets/img/example-sites/gathercontent.png differ diff --git a/cnDocs/assets/img/example-sites/jshint.png b/cnDocs/assets/img/example-sites/jshint.png new file mode 100644 index 000000000000..ac7086de1d41 Binary files /dev/null and b/cnDocs/assets/img/example-sites/jshint.png differ diff --git a/cnDocs/assets/img/example-sites/kippt.png b/cnDocs/assets/img/example-sites/kippt.png new file mode 100644 index 000000000000..7ea1742f8092 Binary files /dev/null and b/cnDocs/assets/img/example-sites/kippt.png differ diff --git a/cnDocs/assets/img/example-sites/soundready.png b/cnDocs/assets/img/example-sites/soundready.png new file mode 100644 index 000000000000..94e0e01b1108 Binary files /dev/null and b/cnDocs/assets/img/example-sites/soundready.png differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-carousel.png b/cnDocs/assets/img/examples/bootstrap-example-carousel.png new file mode 100644 index 000000000000..725fe07b9e7b Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-carousel.png differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-fluid.jpg b/cnDocs/assets/img/examples/bootstrap-example-fluid.jpg new file mode 100644 index 000000000000..d616ba001bef Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-fluid.jpg differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-fluid.png b/cnDocs/assets/img/examples/bootstrap-example-fluid.png new file mode 100644 index 000000000000..5f49a332f332 Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-fluid.png differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-hero.jpg b/cnDocs/assets/img/examples/bootstrap-example-hero.jpg new file mode 100644 index 000000000000..a9662d2b4bf8 Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-hero.jpg differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-justified-nav.png b/cnDocs/assets/img/examples/bootstrap-example-justified-nav.png new file mode 100644 index 000000000000..3d1e233891ec Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-justified-nav.png differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-marketing-narrow.png b/cnDocs/assets/img/examples/bootstrap-example-marketing-narrow.png new file mode 100644 index 000000000000..4bca8cdafd36 Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-marketing-narrow.png differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-marketing.png b/cnDocs/assets/img/examples/bootstrap-example-marketing.png new file mode 100644 index 000000000000..206e26e34248 Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-marketing.png differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-signin.png b/cnDocs/assets/img/examples/bootstrap-example-signin.png new file mode 100644 index 000000000000..b649a985dcdc Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-signin.png differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-starter.jpg b/cnDocs/assets/img/examples/bootstrap-example-starter.jpg new file mode 100644 index 000000000000..3b1cbf9e78f1 Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-starter.jpg differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-starter.png b/cnDocs/assets/img/examples/bootstrap-example-starter.png new file mode 100644 index 000000000000..1bf4b85ecef6 Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-starter.png differ diff --git a/cnDocs/assets/img/examples/bootstrap-example-sticky-footer.png b/cnDocs/assets/img/examples/bootstrap-example-sticky-footer.png new file mode 100644 index 000000000000..fb80e7b92f9d Binary files /dev/null and b/cnDocs/assets/img/examples/bootstrap-example-sticky-footer.png differ diff --git a/cnDocs/assets/img/examples/browser-icon-chrome.png b/cnDocs/assets/img/examples/browser-icon-chrome.png new file mode 100644 index 000000000000..8c846c54e0d6 Binary files /dev/null and b/cnDocs/assets/img/examples/browser-icon-chrome.png differ diff --git a/cnDocs/assets/img/examples/browser-icon-firefox.png b/cnDocs/assets/img/examples/browser-icon-firefox.png new file mode 100644 index 000000000000..3dd68b11335e Binary files /dev/null and b/cnDocs/assets/img/examples/browser-icon-firefox.png differ diff --git a/cnDocs/assets/img/examples/browser-icon-safari.png b/cnDocs/assets/img/examples/browser-icon-safari.png new file mode 100644 index 000000000000..7aaa29a79393 Binary files /dev/null and b/cnDocs/assets/img/examples/browser-icon-safari.png differ diff --git a/cnDocs/assets/img/examples/slide-01.jpg b/cnDocs/assets/img/examples/slide-01.jpg new file mode 100644 index 000000000000..bedab7d81cc8 Binary files /dev/null and b/cnDocs/assets/img/examples/slide-01.jpg differ diff --git a/cnDocs/assets/img/examples/slide-02.jpg b/cnDocs/assets/img/examples/slide-02.jpg new file mode 100644 index 000000000000..4ed12cc07c4a Binary files /dev/null and b/cnDocs/assets/img/examples/slide-02.jpg differ diff --git a/cnDocs/assets/img/examples/slide-03.jpg b/cnDocs/assets/img/examples/slide-03.jpg new file mode 100644 index 000000000000..37415da3ebfd Binary files /dev/null and b/cnDocs/assets/img/examples/slide-03.jpg differ diff --git a/cnDocs/assets/img/fullscreen_toggle.png b/cnDocs/assets/img/fullscreen_toggle.png new file mode 100644 index 000000000000..d9b9713d272b Binary files /dev/null and b/cnDocs/assets/img/fullscreen_toggle.png differ diff --git a/cnDocs/assets/img/glyphicons-halflings-white.png b/cnDocs/assets/img/glyphicons-halflings-white.png new file mode 100644 index 000000000000..3bf6484a29d8 Binary files /dev/null and b/cnDocs/assets/img/glyphicons-halflings-white.png differ diff --git a/cnDocs/assets/img/glyphicons-halflings.png b/cnDocs/assets/img/glyphicons-halflings.png new file mode 100644 index 000000000000..a9969993201f Binary files /dev/null and b/cnDocs/assets/img/glyphicons-halflings.png differ diff --git a/cnDocs/assets/img/grid-baseline-20px.png b/cnDocs/assets/img/grid-baseline-20px.png new file mode 100644 index 000000000000..ce8c69ca2d7d Binary files /dev/null and b/cnDocs/assets/img/grid-baseline-20px.png differ diff --git a/cnDocs/assets/img/less-logo-large.png b/cnDocs/assets/img/less-logo-large.png new file mode 100644 index 000000000000..8f62ffbe0899 Binary files /dev/null and b/cnDocs/assets/img/less-logo-large.png differ diff --git a/cnDocs/assets/img/responsive-illustrations.png b/cnDocs/assets/img/responsive-illustrations.png new file mode 100644 index 000000000000..a4bcbe302cc2 Binary files /dev/null and b/cnDocs/assets/img/responsive-illustrations.png differ diff --git a/cnDocs/assets/js/DD_belatedPNG-min.js b/cnDocs/assets/js/DD_belatedPNG-min.js new file mode 100644 index 000000000000..6062fb3c1c4c --- /dev/null +++ b/cnDocs/assets/js/DD_belatedPNG-min.js @@ -0,0 +1,13 @@ +/** +* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML . +* Author: Drew Diller +* Email: drew.diller@gmail.com +* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/ +* Version: 0.0.8a +* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license +* +* Example usage: +* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector +* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement +**/ +var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}},createVmlStyleSheet:function(){var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");b.addRule(this.ns+"\\:shape","position:absolute;");b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute("media","print");document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns+"\\:*","{display: none !important;}");a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){var b,c,a;b=event.srcElement;if(!b.vmlInitiated){return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)}if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if(b.currentStyle.filter.search("lpha")!=-1){var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;bn.H){i.B=n.H}d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}else{d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f]=0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else{e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]++}return d[f]},fixPng:function(c){c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){return}c.isImg=false;if(c.nodeName=="IMG"){if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{return}}else{if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill:{}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)}}c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet(); \ No newline at end of file diff --git a/cnDocs/assets/js/README.md b/cnDocs/assets/js/README.md new file mode 100644 index 000000000000..66903c71a637 --- /dev/null +++ b/cnDocs/assets/js/README.md @@ -0,0 +1,106 @@ +## 2.0 BOOTSTRAP JS PHILOSOPHY +These are the high-level design rules which guide the development of Bootstrap's plugin apis. + +--- + +### DATA-ATTRIBUTE API + +We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript. + +We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: + + $('body').off('.data-api') + +To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this: + + $('body').off('.alert.data-api') + +--- + +### PROGRAMMATIC API + +We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API. + +All public APIs should be single, chainable methods, and return the collection acted upon. + + $(".btn.danger").button("toggle").addClass("fat") + +All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior: + + $("#myModal").modal() // initialized with defaults + $("#myModal").modal({ keyboard: false }) // initialized with now keyboard + $("#myModal").modal('show') // initializes and invokes show immediately afterqwe2 + +--- + +### OPTIONS + +Options should be sparse and add universal value. We should pick the right defaults. + +All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`. + + $.fn.modal.defaults = { … } + +An options definition should take the following form: + + *noun*: *adjective* - describes or modifies a quality of an instance + +examples: + + backdrop: true + keyboard: false + placement: 'top' + +--- + +### EVENTS + +All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action. + + show | shown + hide | hidden + +--- + +### CONSTRUCTORS + +Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way: + + + $.fn.popover.Constructor + +--- + +### DATA ACCESSOR + +Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data API like this: + + $('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor + +--- + +### DATA ATTRIBUTES + +Data attributes should take the following form: + +- data-{{verb}}={{plugin}} - defines main interaction +- data-target || href^=# - defined on "control" element (if element controls an element other than self) +- data-{{noun}} - defines class instance options + +examples: + + // control other targets + data-toggle="modal" data-target="#foo" + data-toggle="collapse" data-target="#foo" data-parent="#bar" + + // defined on element they control + data-spy="scroll" + + data-dismiss="modal" + data-dismiss="alert" + + data-toggle="dropdown" + + data-toggle="button" + data-toggle="buttons-checkbox" + data-toggle="buttons-radio" \ No newline at end of file diff --git a/cnDocs/assets/js/application.js b/cnDocs/assets/js/application.js new file mode 100644 index 000000000000..f880bc05d53f --- /dev/null +++ b/cnDocs/assets/js/application.js @@ -0,0 +1,156 @@ +// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT +// IT'S ALL JUST JUNK FOR OUR DOCS! +// ++++++++++++++++++++++++++++++++++++++++++ + +!function ($) { + + $(function(){ + + var $window = $(window) + + // Disable certain links in docs + $('section [href^=#]').click(function (e) { + e.preventDefault() + }) + + // side bar + setTimeout(function () { + $('.bs-docs-sidenav').affix({ + offset: { + top: function () { return $window.width() <= 980 ? 290 : 210 } + , bottom: 270 + } + }) + }, 100) + + // make code pretty + window.prettyPrint && prettyPrint() + + // add-ons + $('.add-on :checkbox').on('click', function () { + var $this = $(this) + , method = $this.attr('checked') ? 'addClass' : 'removeClass' + $(this).parents('.add-on')[method]('active') + }) + + // add tipsies to grid for scaffolding + if ($('#gridSystem').length) { + $('#gridSystem').tooltip({ + selector: '.show-grid > [class*="span"]' + , title: function () { return $(this).width() + 'px' } + }) + } + + // tooltip demo + $('.tooltip-demo').tooltip({ + selector: "a[data-toggle=tooltip]" + }) + + $('.tooltip-test').tooltip() + $('.popover-test').popover() + + // popover demo + $("a[data-toggle=popover]") + .popover() + .click(function(e) { + e.preventDefault() + }) + + // button state demo + $('#fat-btn') + .click(function () { + var btn = $(this) + btn.button('loading') + setTimeout(function () { + btn.button('reset') + }, 3000) + }) + + // carousel demo + $('#myCarousel').carousel() + + // javascript build logic + var inputsComponent = $("#components.download input") + , inputsPlugin = $("#plugins.download input") + , inputsVariables = $("#variables.download input") + + // toggle all plugin checkboxes + $('#components.download .toggle-all').on('click', function (e) { + e.preventDefault() + inputsComponent.attr('checked', !inputsComponent.is(':checked')) + }) + + $('#plugins.download .toggle-all').on('click', function (e) { + e.preventDefault() + inputsPlugin.attr('checked', !inputsPlugin.is(':checked')) + }) + + $('#variables.download .toggle-all').on('click', function (e) { + e.preventDefault() + inputsVariables.val('') + }) + + // request built javascript + $('.download-btn .btn').on('click', function () { + + var css = $("#components.download input:checked") + .map(function () { return this.value }) + .toArray() + , js = $("#plugins.download input:checked") + .map(function () { return this.value }) + .toArray() + , vars = {} + , img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png'] + + $("#variables.download input") + .each(function () { + $(this).val() && (vars[ $(this).prev().text() ] = $(this).val()) + }) + + $.ajax({ + type: 'POST' + , url: /\?dev/.test(window.location) ? 'http://localhost:3000' : 'http://bootstrap.herokuapp.com' + , dataType: 'jsonpi' + , params: { + js: js + , css: css + , vars: vars + , img: img + } + }) + }) + }) + +// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi +$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) { + var url = opts.url; + + return { + send: function(_, completeCallback) { + var name = 'jQuery_iframe_' + jQuery.now() + , iframe, form + + iframe = $(' + +
  • + +
  • + +
  • + +
  • + +
    + +
    + +
    + +

    Bootstrap简介

    + + +
    +
    + +

    由匠人建 为匠人用

    +

    由 Twitter 大神@mdo and @fat创建, Bootstrap 使用 LESS CSS, 通过 Node 编译, 在 GitHub 网站上进行管理维护并不断完善。

    +
    +
    + +

    适合于每一个人

    +

    cnBootstrap 不仅在主流浏览器表现卓越(甚至包括IE7), 并通过 响应式布局 对平板和智能手机提供支持。

    +
    +
    + +

    功能便携 应有尽有

    +

    12列的响应栅格布局,众多的组件,JavaScript插件,排版,表单控件,甚至可以根据需求定制自己的Bootstrap

    +
    +
    + +
    + +

    Bootstrap案例

    + +
    + +
    + +
    + +
    + \ No newline at end of file diff --git a/cnDocs/javascript.php b/cnDocs/javascript.php new file mode 100644 index 000000000000..5f60a8a107e7 --- /dev/null +++ b/cnDocs/javascript.php @@ -0,0 +1,1745 @@ + + + + + + +
    +
    +

    JavaScript

    +

    让Bootstrap的组件变得生动—提供了13种 jQuery 组件。 +

    +
    + +
    + + +
    + +
    + + + +
    + + +

    Individual or compiled

    +

    插件能够单独使用(虽然有些需要有依赖)或者一次性全部引用进来。bootstrap.jsbootstrap.min.js 都在一个文件中包含了所有的插件。

    + +

    数据属性

    +

    你可以通过API标记使用所有的Bootstrap插件,而不必编写一行代码。这是Bootstrap插件最重要的特点,也是你选择使用插件时首要考虑的问题。

    + +

    这表示,在某些情况下,你可以采取措施关闭其功能。因此,我们还提供禁用数据属性API的功能——通过命名空间data-api取消绑定事件。比如下面这样: +

    $('body').off('.data-api')
    + +

    另外,针对特定的插件,也可以使用插件名加data-api的形式作为其命名空间,像下面这样:

    +
    $('body').off('.alert.data-api')
    + +

    +

    我们确信,你应该能够通过JavaScript API使用所有的Bootstrap插件。所有的公共API都是单一的,支持链式写法并返回集合以便操作。

    +
    $(".btn.danger").button("toggle").addClass("fat")
    +

    所有的方法都应该可以接受一个可选参数,一个实现特定方法的字符串或者什么也不设置(启用插件的默认效果):

    +
    +$("#myModal").modal()                       // initialized with defaults
    +$("#myModal").modal({ keyboard: false })   // initialized with no keyboard
    +$("#myModal").modal('show')                // initializes and invokes show immediately
    +
    +

    Each plugin also exposes its raw constructor on a `Constructor` property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').

    + +

    解决冲突

    +

    有时候必须要Bootstrap和其他Ui框架同时使用。这种情况下,命名空间冲突偶有发生。如果发生这种情况,你可以在插件中调用 .noConflict 以获得你需要恢复的值。

    + +
    +var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
    +$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
    +
    + +

    事件

    +

    Bootstrap在大多数插件中都提供了自定义事件。一般来说,有两种形式——触发事件(如显示)和监听事件(如显示完成时)

    +

    所有的触发事件都提供阻止冒泡(preventDefault)机制。这能有效的避免级联事件。

    +
    +$('#myModal').on('show', function (e) {
    +    if (!data) return e.preventDefault() // stops modal from being shown
    +})
    +
    +
    + + + + +
    + +

    关于过渡效果

    +

    对于简单的转场效果,包含 bootstrap-transition.js 文件即可滑入幻灯片或淡出消息框。需要动画(animation)插件支持

    +

    用例

    +

    使用过渡插件的几个例子:

    +
      +
    • 模态窗口的淡入淡出
    • +
    • tabs标签的淡入
    • +
    • 通知的淡出
    • +
    • 轮播插件的窗格化
    • +
    + +
    + + + + +
    + + + +

    示例

    +

    类似传统的javascript模态对话框,但更圆滑更灵活,带有最基本的功能和智能默认项。

    + +

    静态的例子

    +

    下面就是一个静态渲染的模态对话框。

    +
    + +
    +
    +<div class="modal hide fade">
    +  <div class="modal-header">
    +    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    +    <h3>对话框标题</h3>
    +  </div>
    +  <div class="modal-body">
    +    <p>小寒,你好!</p>
    +  </div>
    +  <div class="modal-footer">
    +    <a href="#" class="btn">关闭</a>
    +    <a href="#" class="btn btn-primary">保存更改</a>
    +  </div>
    +</div>
    +
    + +

    动态的例子

    +

    点击下的按钮会通过javascript触发一个模态对话框。对话框从页面顶端滑下的同时逐渐呈现。

    + + + +
    +<!-- Button to trigger modal -->
    +<a href="#myModal" role="button" class="btn" data-toggle="modal">点击演示</a>
    +
    +<!-- Modal -->
    +<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    +  <div class="modal-header">
    +    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    +    <h3 id="myModalLabel">对话框标题</h3>
    +  </div>
    +  <div class="modal-body">
    +    <p>小寒,你好!</p>
    +  </div>
    +  <div class="modal-footer">
    +    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
    +    <button class="btn btn-primary">保存更改</button>
    +  </div>
    +</div>
    +
    +
    强调! 实现对话框淡入淡出的动画效果,必须引用 bootstrap-transition.js,再对 .modal 元素应用 .fade
    +
    +

    用法

    +

    data属性

    +

    你可以简单的利用javascript插件实现一个模态窗口,仅需要在HTML标签中配置 data-toggle="modal" 作为触发模态窗口的控制器,同时指定 data-target="#foo" 或者 href="#foo" 来关联要弹出的元素的ID,这些内容将显示在模态对话框中。

    +

    同时,配置模态窗口的配置项,可以在控制器或者模态窗口的标签上配置一些数据。

    +
    <button type="button" data-toggle="modal" data-target="#myModal">点击触发对话框</button>
    +

    配置JavaScript

    +

    使用JavaScript调用ID为 myModal 的模态对话框:

    +
    $('#myModal').modal(options)
    +

    选项

    +

    选项可以通过data属性或JavaScript设置。对于data属性,只需在选项名称后附加 data-,作为 data-backdrop=""

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名字类型默认值描述
    backdrop布尔值true包括 modal-backdrop 模态背景元素。另外,指定特定的背景后在其上点击无法关闭模态窗口。
    keyboard布尔值true为true时按下ESC键关闭模态对话框。
    show布尔值true在初始化时显示对话框。
    remotepathfalse

    如果是远程的URL,内容将通过jQuery的 load 方法加载并注入.modal-body。如果使用了data api,则可以选择使用指定的远程数据源的 href 标签,示例如下:

    +
    <a data-toggle="modal" href="remote.html" data-target="#modal">点击我</a>
    +

    方法

    +

    .modal(options)

    +

    将某个元素变成对话框激活,接受一个 object 做为可选参数。

    +
    +$('#myModal').modal({
    +  keyboard: false
    +})
    +
    +

    .modal('toggle')

    +

    手动切换对话框打开和关闭。

    +
    $('#myModal').modal('toggle')
    +

    .modal('show')

    +

    打开对话框

    +
    $('#myModal').modal('show')
    +

    .modal('hide')

    +

    关闭对话框

    +
    $('#myModal').modal('hide')
    +

    事件

    +

    Bootstrap的对话框类扩展了一组事件,可以介入对话框的某些功能实现。

    + + + + + + + + + + + + + + + + + + + + + + + + + +
    事件描述
    show该事件在调用 show 方法时立刻触发。
    shown该事件在对话框已经呈现给用户后(要等CSS过渡效果生效后)触发。
    hide该事件在对话框使用 hide 方法时立刻触发。
    hidden该事件在对话框已经关闭后(要等CSS过渡效果生效后)触发。
    +
    +$('#myModal').on('hidden', function () {
    +  // do something…
    +})
    +
    + + + + + + + + + + +
    + + + +

    导航栏示例

    +

    滚动侦测会根据当前滚动条位置而自动更新导航栏中的链接状态。滚动下面的内容区域,然后观察导航条状态,导航条中的菜单甚至下拉项都会同步高亮。试一下!

    +
    + +
    +

    杨过

    +

    杨过和小龙女最终做了神仙眷侣
    + 也许他知道,也许他不知道
    + 也许他装作不知道
    + 程英和陆无双为他负尽青春抛尽韶华
    + 郭襄为他天涯思君念念不忘
    + 也许他记得,也许他不记得
    + 曾经有一个叫公孙绿萼的姑娘把一生停驻在他一刹那的目光里,
    + 而他所能给的,也只能是一曲清箫、三枚金针或者某一刻的眷顾而已。。。。。。

    +

    张无忌

    +

    张无忌放弃了江湖与江山
    + 他把幸福给了赵敏
    + 却把牵挂给了小昭
    + 把漂泊给了蛛儿
    + 把憾恨给了芷若……

    +

    one

    +

    杨过与小龙女终成眷属,逍遥于江湖之外,他可记得,还有一个痴心的女子对他天涯思君念念不忘,抛尽韶华,守候一生。他是否会想起,多年前那张天真无邪的面容,是否会想起,初遇时她莞尔一笑,道,我姓郭,单名一个襄字。

    +

    眷恋的人,给不了你承诺,于是你终于明白,幸福是一件多么可遇不可求的事情。可是为何仍要飞蛾扑火,执着一生?也许就如李莫愁时常低吟的那样:问世间情为何物,直教人生死相许。这世界上最复杂的东西,一个人又如何能想的透彻?

    +

    two

    +

    倚天的结局处,周芷若曾这样问过张无忌,在小昭、蛛儿、赵敏和她四个人中,他真正爱的人是哪一个。张无忌一时感慨万千,想起自己也曾扪心自问过,那时只觉得,若能和四位姑娘一起长相厮守,岂不逍遥快活?然而世事变迁,小昭远赴波斯做了教主,表妹蛛儿逝世,芷若误入歧途,只有赵姑娘一直陪在自己身边。虽然期间曾产生过误会,他对赵敏是又爱又恨,但心里从未放下过对她的牵念。然而,芷若的介入总让他内心摇摆不定,始终无法正视自己的情感。直到这一刻,面对赵敏的不辞而别,他终于发现,自己对那鬼灵精怪的小妖女竟这般难以割舍,若是今生再见不了她,自己也决计活不下去了。他终于找到心底的那个答案,对芷若,他是一向敬重,对蛛儿,他是心生感激,对小昭,他是意存怜惜,但对赵敏,却是刻骨铭心的相爱。

    +

    人有时候,总在失去时才后知后觉,一些人,一些事,以为只是生命中一抹浮云,以为可以从此相忘于江湖,却在别离之际发现,那些过往原来早已扎根在心底,拿不掉,抹不去。

    +

    three

    +

    有一个人,教会你如何去爱了,但是,他却不爱你了。
    + 有一个人,你一直在等他,他却忘记了你。
    + 有一个人,他想离开了,你却没有丝毫挽留,因为你渐渐明白,挽留是没有用的,你能给的,只有自由。

    +

    你以为只要走的很潇洒,就不会有太多的痛苦,就不会有留恋,可是,为什么在喧闹的人群中会突然沉默下来,为什么听歌听到一半会突然哽咽不止。你不知道自己在期待什么,不知道自己在坚持什么,脑海里挥之不去的,都是过往的倒影。

    +

    爱你的人,对你的要求很少,可以在很想你的时候看看你,可以在寂寞的时候和你说句话,这就是她所有的幸福。

    +

    如果因为执念而作出仓促的决定,可以离开,但请不要走远,不要急着为彼此定性,不要急着分清界限, 回头看看,她是否还在。

    +

    善待爱你的那个人,那个不希望你困扰,所以强颜欢笑、骗你说释怀了的人,那个默默关注你,从不曾离开的人,如果你还彷徨着,如果你还抑制不住的想着她,如果你还在意她的一颦一簇,不妨给她一个可能,也给自己一个可能。

    +

    在爱情里,如果两人都很被动,一段美好的姻缘不免在时间的摧残下消磨殆尽,并不是两个人不适合,而是双方都习惯于等待,等待对方先主动,没有耐心的人于是选择离开,最后徒留遗憾。

    +

    所以,爱是有来生的,就像不灭的火种,只需加点干柴,它依旧能发出夺目的火光。

    +
    +
    + + +
    + + +

    用法

    + +

    使用data属性

    +

    在想侦测的元素(往往是body)上添加 data-spy="scroll" 就很容易在置顶导航条上实现滚动侦测。一般你会在 .nav 使用滚动侦听插件。

    +
    <body data-spy="scroll" data-target=".navbar">...</body>
    + +

    使用JavaScript

    +

    通过javascript调用滚动侦测:

    +
    $('#navbar').scrollspy()
    + +
    + 强调! 导航条链接必须指向一个可解析的元素id。举个例子,导航中的 <a href="#home">home</a> 必须对应着dom中一个真实存在的id='home'元素,比如 <div id="home"></div> 。 +
    + +

    方法

    +

    .scrollspy('refresh')

    +

    当使用滚动侦听且结合DOM节点的添加删除操作时,需要调用refresh方法,如下:

    +
    +$('[data-spy="scroll"]').each(function () {
    +  var $spy = $(this).scrollspy('refresh')
    +});
    +
    + +

    选项

    +

    选项可以通过data属性或JavaScript设置。对于data属性,只需在选项名称后附加 data-,作为 data-offset=""

    + + + + + + + + + + + + + + + + + +
    名称类型默认值描述
    offset数字10计算滚动位置时相对顶端的偏移量
    + +

    事件

    + + + + + + + + + + + + + +
    事件描述
    activate此事件将触发一个新的项目激活滚动侦听功能。
    +
    + + + + +
    + + + +

    标签页示例

    +

    该插件通过点击标签页和胶囊链接切换显示不同容器中的内容。

    +
    + +
    +
    +

    这世上有一个被说滥的故事,叫大话西游。
    + 这世上有一句被说滥的情话,“曾经有一份真挚的爱情摆在我面前,......”
    + 十年前,一群青春浪漫的孩子,在街头小影院,被周星驰逗得前仰马翻。
    + 十年后,一个人,两张碟,突然就看懂了,开头孙悟空为什么放弃西天取经:才华横溢的年轻人不愿意被条条框框所束缚。
    + 这是一种有趣的对比,十年前的我们青春年少,逃课躲在小影院,疯狂迷恋周星驰,仿佛开头不愿取经的孙悟空,十年后的我们为人父母,规规矩矩,任你有再大的本事翻不出生活的五指山,如同带上紧箍咒的至尊宝,走上西天之路。
    + 这是一个关于宿命的故事,十年前我们看出了笑声,十年后却看出了眼泪,前生,今世,轮回,体制,爱情,从开头到结尾,从大战观音到毅然走上取经之路,不到三个小时;而我们从年少懵懂到老于世故却走了整整二十年,一部电影浓缩了人的一生,大话西游应该得奥斯卡。

    +
    +
    +

    + 紫霞说:谁拔出我的紫青宝剑,谁就是我的如意郎君。
    晶晶爱了弃她而去的悟空五百年,五百年后看见跟悟空一模一样的至尊宝时仍然念念不忘,原来恨一个人可以这么久。
    + 晶晶说:你不怕我杀了你吗?
    + 至尊宝:怕,不过没办法,我不想你看着我的时候心里却想着另外一个人。

    +

    至尊宝爱上了晶晶,为了救晶晶,又遇见了紫霞,当他发现紫霞才是最爱的时候,又放不下晶晶,爱情有时不是两个人的事,而是三个人的事,爱情方程千古难解,命运永远在跟至尊宝开着愚人的玩笑,他只有变成孙悟空才能救紫霞,而变成孙悟空就不能对紫霞再有半点情欲,有时候可以选择也是一种痛苦。

    +
    + + +
    +
    + + +
    + + +

    用法

    +

    通过JavaScript启用tab标签功能(每个tab选项卡需要分别激活)

    +
    +$('#myTab a').click(function (e) {
    +  e.preventDefault();
    +  $(this).tab('show');
    +})
    +

    支持的JavaScript激活方式

    +
    +$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
    +$('#myTab a:first').tab('show'); // Select first tab
    +$('#myTab a:last').tab('show'); // Select last tab
    +$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
    +
    + +

    标记

    +

    在某个元素上设置 data-toggle="tab"data-toggle="pill" 而无须编写javascript,就可以激活标签页或是胶囊链接。

    +
    +<ul class="nav nav-tabs">
    +  <li><a href="#home" data-toggle="tab">首页</a></li>
    +  <li><a href="#profile" data-toggle="tab">介绍</a></li>
    +  <li><a href="#messages" data-toggle="tab">消息</a></li>
    +  <li><a href="#settings" data-toggle="tab">设置</a></li>
    +</ul>
    + +

    方法

    +

    $().tab

    +

    激活一个标签页元素和内容容器。标签页应该含有 data-target='#id'href='#id' 属性以指向dom中的某个容器节点。

    +
    +<ul class="nav nav-tabs" id="myTab">
    +  <li class="active"><a href="#home">Home</a></li>
    +  <li><a href="#profile">Profile</a></li>
    +  <li><a href="#messages">Messages</a></li>
    +  <li><a href="#settings">Settings</a></li>
    +</ul>
    +
    +<div class="tab-content">
    +  <div class="tab-pane active" id="home">...</div>
    +  <div class="tab-pane" id="profile">...</div>
    +  <div class="tab-pane" id="messages">...</div>
    +  <div class="tab-pane" id="settings">...</div>
    +</div>
    +
    +<script>
    +  $(function () {
    +    $('#myTab a:last').tab('show');
    +  })
    +</script>
    +
    + +

    事件

    + + + + + + + + + + + + + + + + + +
    事件描述
    show该事件在标签开始展示时(尚未渲染完之前)触发。event.target 指向要激活的标签,event.relatedTarget 提向之前已激活的标签(如果有的话)。
    shown该事件在标签已经呈现后(已渲染完成)触发。event.target 指向要激活的标签,event.relatedTarget 提向之前已激活的标签(如果有的话)。
    +
    +$('a[data-toggle="tab"]').on('shown', function (e) {
    +  e.target // activated tab
    +  e.relatedTarget // previous tab
    +})
    +
    +
    + + + +
    + + + +

    示例

    +

    受Jason Frame所写的出色的jQuery.tipsy插件所启发;Tooltips做为前者的升级版,不依赖于图像, 使用css3显示动画效果,利用data-属性对标题做本地化存储。

    +

    For performance reasons, the tooltip and popover data-apis are opt in, meaning you must initialize them yourself.

    +

    鼠标经过下面链接时显示tooltips:

    +
    +

    Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. +

    +
    + +

    支持四个方向

    + + + +
    + + +

    用法

    +

    通过javascript触发工具提示:

    +
    $('#example').tooltip(options)
    + +

    选项

    +

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名称类型默认值描述
    animation布尔值true为工具提示添加一个淡入的过渡效果。
    html布尔值false
    placement字符串或函数'top'工具提示的位置:top | bottom | left | right。
    selector字符串false如果提供了selector,将对符合条件的某个或多个元素启用工具提示。
    title字符串或函数''如果'title'属性不存在的话,就使用该值做为默认的标题。
    trigger字符串'hover'工具提示的触发方式:点击(click) | 鼠标经过(hover) | 获得焦点(focus) | 手动触发(manual)
    delay数字或对象0 +

    显示和隐藏时的延迟时间(以毫秒计)

    +

    如果提供的是一个数字,延迟就会同时被应用到显示和隐藏。

    +

    如果是一个对象,其结构就是: delay: { show: 500, hide: 100 }

    +
    containerstring | falsefalse +

    Appends the tooltip to a specific element container: 'body'

    +
    +
    + 强调! + 每个工具提示都可以单独通过设置data-属性以实现与javascript调用同样的功能 +
    + +

    标记

    +

    出于性能的考虑,在使用工具提示和弹出提示时建议利用data-属性,再指定一个selector选项即可。

    +
    <a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>
    + +

    方法

    +

    $().tooltip(options)

    +

    对某个元素集合添加工具提示的处理。

    +

    .tooltip('show')

    +

    显示某个元素的工具提示。

    +
    $('#element').tooltip('show')
    +

    .tooltip('hide')

    +

    隐藏某个元素的工具提示。

    +
    $('#element').tooltip('hide')
    +

    .tooltip('toggle')

    +

    切换某个元素的工具提示的隐藏和显示状态。

    +
    $('#element').tooltip('toggle')
    +

    .tooltip('destroy')

    +

    隐藏和销毁某个元素的工具提示。

    +
    $('#element').tooltip('destroy')
    +
    + + + + +
    + + +

    示例

    +

    与iPad上的效果类似,把存放输助信息的元素显示为弹出框提示。Hover over the button to trigger the popover. 需要包含 Tooltip

    + +

    静态的弹出提示

    +

    支持四个方向的弹出提示:top, right, bottom 和 left。

    +
    +
    +
    +

    Popover top

    +
    +

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    +
    +
    + +
    +
    +

    Popover right

    +
    +

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    +
    +
    + +
    +
    +

    Popover bottom

    +
    +

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    +
    +
    + +
    +
    +

    Popover left

    +
    +

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    +
    +
    + +
    +
    +

    No markup shown as popovers are generated from JavaScript and content within a data attribute.

    + +

    动态的例子

    + + +

    Four directions

    + + + +
    + + +

    用法

    +

    使用JavaScript启用弹出提示:

    +
    $('#example').popover(options)
    + +

    选项

    +

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名称类型默认值描述
    animation布尔值true为弹出提示添加一个淡入的过渡效果。
    html布尔值falseInsert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.
    placement字符串或函数'right'how to position the popover - top | bottom | left | right
    selectorstringfalseif a selector is provided, tooltip objects will be delegated to the specified targets
    triggerstring'click'how popover is triggered - click | hover | focus | manual
    titlestring | function''default title value if `title` attribute isn't present
    contentstring | function''default content value if `data-content` attribute isn't present
    delaynumber | object0 +

    delay showing and hiding the popover (ms) - does not apply to manual trigger type

    +

    If a number is supplied, delay is applied to both hide/show

    +

    Object structure is: delay: { show: 500, hide: 100 }

    +
    containerstring | falsefalse +

    Appends the popover to a specific element container: 'body'

    +
    +
    + Heads up! + Options for individual popovers can alternatively be specified through the use of data attributes. +
    + +

    标记

    +

    For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

    + +

    方法

    +

    $().popover(options)

    +

    Initializes popovers for an element collection.

    +

    .popover('show')

    +

    Reveals an elements popover.

    +
    $('#element').popover('show')
    +

    .popover('hide')

    +

    Hides an elements popover.

    +
    $('#element').popover('hide')
    +

    .popover('toggle')

    +

    Toggles an elements popover.

    +
    $('#element').popover('toggle')
    +

    .popover('destroy')

    +

    Hides and destroys an element's popover.

    +
    $('#element').popover('destroy')
    +
    + + + + +
    + + + +

    通知示例

    +

    Add dismiss functionality to all alert messages with this plugin.

    +
    +
    + + Holy guacamole! Best check yo self, you're not looking too good. +
    +
    + +
    +
    + +

    Oh snap! You got an error!

    +

    Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

    +

    + Take this action Or do this +

    +
    +
    + + +
    + + +

    用法

    +

    通过JavaScript触发通知:

    +
    $(".alert").alert()
    + +

    标记

    +

    只须对关闭按钮添加 data-dismiss="alert" 就会自动实现一个通知的关闭功能。

    +
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    + +

    方法

    +

    $().alert()

    +

    对所有通知消息赋予关闭功能。在要关闭时使用动画效果,就要在通知上应用 .fade.in

    +

    .alert('close')

    +

    关闭通知

    +
    $(".alert").alert('close')
    + + +

    事件

    +

    Bootstrap的通知类扩展了一组事件,可以介入通知的某些功能实现。

    + + + + + + + + + + + + + + + + + +
    事件描述
    close在调用 close 方法时立刻触发。
    closed在通知已经关闭后(等待css过渡效果完成)触发。
    +
    +$('#my-alert').bind('closed', function () {
    +  // do something…
    +})
    +
    +
    + + + + +
    + + +

    使用示例

    +

    控制按钮的状态或者为其他复合控件(比如工具条)创建按钮组。

    + +

    具备状态的

    +

    添加 data-loading-text="Loading..." 属性将激活按钮的加载状态效果。

    +
    + +
    +
    <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
    + +

    单独开关

    +

    添加 data-toggle="button" 属性将激活按钮的单独开关状态。

    +
    + +
    +
    <button type="button" class="btn" data-toggle="button">Single Toggle</button>
    + +

    复选

    +

    添加 data-toggle="buttons-checkbox" 属性将激活按钮组的复选状态。

    +
    +
    + + + +
    +
    +
    +<div class="btn-group" data-toggle="buttons-checkbox">
    +  <button type="button" class="btn">左</button>
    +  <button type="button" class="btn">中</button>
    +  <button type="button" class="btn">右</button>
    +</div>
    +
    + +

    单选

    +

    添加 data-toggle="buttons-radio" 属性将激活按钮组的单选状态。

    +
    +
    + + + +
    +
    +
    +<div class="btn-group" data-toggle="buttons-radio">
    +  <button type="button" class="btn">左</button>
    +  <button type="button" class="btn">中</button>
    +  <button type="button" class="btn">右</button>
    +</div>
    +
    + + +
    + + +

    用法

    +

    通过JavaScript启用按钮:

    +
    $('.nav-tabs').button()
    + +

    标记

    +

    Data属性是按钮组件的组成部分。下面示例代码将展示各种标记类型。

    + +

    选项

    +

    + +

    方法

    +

    $().button('toggle')

    +

    Toggles push state. Gives the button the appearance that it has been activated.

    +
    + 强调! + 可以使用 data-toggle 属性自动设置按钮状态。 +
    +
    <button type="button" class="btn" data-toggle="button" >…</button>
    +

    $().button('loading')

    +

    设置按钮为载入状态 - 按钮无效且将文本变成载入文本 载入文本应该设置在按钮的 data-loading-text 的属性中。 +

    +
    +<button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
    +
    +
    + 强调! + Firefox在页面载入时会保持按钮无效状态。变通方案是在按钮上应用 autocomplete="off"。 +
    +

    $().button('reset')

    +

    重置按钮状态 - 将按钮文字复原。

    +

    $().button(string)

    +

    重置按钮状态 - 将按钮文字变成为指定的文字。

    +
    <button type="button" class="btn" data-complete-text="finished!" >...</button>
    +<script>
    +  $('.btn').button('complete')
    +</script>
    +
    +
    + + + + +
    + + +

    介绍

    +

    为可折叠的组件(比如手风琴式应用,导航栏)提供基本的样式和灵活的支持。

    +

    * 需要包含 Transitions 插件。

    + +

    手风琴式应用示例

    +

    使用折叠插件构造手风琴式的边栏:

    + +
    +
    +
    + +
    +
    + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
    +
    +
    +
    + +
    +
    + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
    +
    +
    +
    + +
    +
    + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
    +
    +
    +
    +
    +
    +<div class="accordion" id="accordion2">
    +  <div class="accordion-group">
    +    <div class="accordion-heading">
    +      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
    +        Collapsible Group Item #1
    +      </a>
    +    </div>
    +    <div id="collapseOne" class="accordion-body collapse in">
    +      <div class="accordion-inner">
    +        Anim pariatur cliche...
    +      </div>
    +    </div>
    +  </div>
    +  <div class="accordion-group">
    +    <div class="accordion-heading">
    +      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
    +        Collapsible Group Item #2
    +      </a>
    +    </div>
    +    <div id="collapseTwo" class="accordion-body collapse">
    +      <div class="accordion-inner">
    +        Anim pariatur cliche...
    +      </div>
    +    </div>
    +  </div>
    +</div>
    +...
    +
    +

    You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.

    +
    +<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    +  simple collapsible
    +</button>
    +
    +<div id="demo" class="collapse in"> … </div>
    +
    + + +
    + + +

    用法

    + +

    使用data属性

    +

    只要在元素上添加 data-toggle="collapse"data-target 就能自动变成可折叠的。 + data-target 属性接受一个css选择器,以选取元素添加折叠。 + 一定要在折叠元素上添加 .collapse 。如果要默认某折叠元素是打开的,只要添加 .in

    +

    若要对某个折叠控件添加手风琴风格的分组管理,就要添加 data-parent="#selector"。详见上面的演示。

    + +

    使用JavaScript

    +

    手动调用:

    +
    $(".collapse").collapse()
    + +

    选项

    +

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

    + + + + + + + + + + + + + + + + + + + + + + + +
    名称类型默认值描述
    parent选择器false如果指定了选择器,那么在显示折叠顶时,所有被选取的元素集合中的可折叠项都被关闭(与传统的手风琴应用相似)。
    toggle布尔值true切换可折叠元素
    + + +

    方法

    +

    .collapse(options)

    +

    Activates your content as a collapsible element. Accepts an optional options object. +

    +$('#myCollapsible').collapse({
    +  toggle: false
    +})
    +
    +

    .collapse('toggle')

    +

    Toggles a collapsible element to shown or hidden.

    +

    .collapse('show')

    +

    Shows a collapsible element.

    +

    .collapse('hide')

    +

    Hides a collapsible element.

    + +

    事件

    +

    Bootstrap's collapse class exposes a few events for hooking into collapse functionality.

    + + + + + + + + + + + + + + + + + + + + + + + + + +
    事件描述
    show该事件在调用 show 实例方法时立刻触发。
    shown该事件在可折叠元素已经呈现给用户后触发(等待CSS过渡效果完成)。
    hide + 该事件在调用 hide 方法时立刻触发。
    hidden该事件在可折叠元素已经在用户面前完全隐藏后触发(等待CSS过渡效果完成)。
    +
    +$('#myCollapsible').on('hidden', function () {
    +  // do something…
    +})
    +
    + + + + + + + + + +
    + + + +

    示例

    +

    简单,易于拓展,可迅速地为表单中的文本输入框创建优雅的提醒。如下:

    +
    + +
    +
    <input type="text" data-provide="typeahead">
    + + +
    + + +

    用法

    + +

    使用data属性

    +

    使用data-属性为一个元素加入输入提醒功能。

    + +

    使用JavaScript

    +

    手动调用输入提醒:

    +
    $('.typeahead').typeahead()
    + +

    选项

    +

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名称类型默认值描述
    source数组,函数[ ]用于查询的数据源。May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
    items数字8下拉列表中的最多显示个数。
    minLength数字1触发自动完成插件所需要的最小字符数。
    matcher函数不区分大小写该matcher函数用于决定某个查询是否匹配某个项。它接受唯一一个参数, item ,用于测试是否符合查询。通过 this.query 访问当前查询,如果匹配查询,就返回一个布尔值 true
    sorter函数精确匹配,
    区分大小写,
    不区分大小写
    该函数用来排序自动完成的结果。它接受唯一一个参数 items ,还拥有输入提醒的范围。使用 this.query 引用当前查询。
    updater函数返回选定的项目该方法用于返回选定的项目。接受一个参数,实现该项的输入提醒的限定范围。
    highlighter函数高亮所有默认的匹配该函数用来高亮自动完成的结果。它接受唯一一个参数 items ,还拥有输入提醒的范围。应该返回html。
    + +

    方法

    +

    .typeahead(options)

    +

    使用输入提醒初始化一个输入框。

    +
    + + + + +
    + + +

    示例

    +

    The subnavigation on the left is a live demo of the affix plugin.

    + +
    + +

    Usage

    + +

    使用data属性

    +

    To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.

    + +
    <div data-spy="affix" data-offset-top="200">...</div>
    + +
    + Heads up! + You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page. +
    + +

    Via JavaScript

    +

    Call the affix plugin via JavaScript:

    +
    $('#navbar').affix()
    + +

    方法

    +

    .affix('refresh')

    +

    When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:

    +
    +$('[data-spy="affix"]').each(function () {
    +  $(this).affix('refresh')
    +});
    +
    +

    选项

    +

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

    + + + + + + + + + + + + + + + + + +
    Nametypedefault描述
    offsetnumber | function | object10Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object offset: { x: 10 }. Use a function when you need to dynamically provide an offset (useful for some responsive designs).
    +
    + + + + + + + + \ No newline at end of file diff --git a/cnDocs/plugins/auto.css b/cnDocs/plugins/auto.css new file mode 100644 index 000000000000..38d112847414 --- /dev/null +++ b/cnDocs/plugins/auto.css @@ -0,0 +1,35 @@ +/*! + * plugin style +**/ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cnDocs/plugins/autocomplete.html b/cnDocs/plugins/autocomplete.html new file mode 100644 index 000000000000..a2afd5dccccd --- /dev/null +++ b/cnDocs/plugins/autocomplete.html @@ -0,0 +1,182 @@ + + + + +AutoComplete 自动完成 + + + + + + + + + +
    +

    AutoComplete 自动完成

    +

    AutoComplete 自动完成插件又称自动提醒/自动补全,是在用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便。

    + +

    完善统一的自动提醒框

    +
    + + +
    +
    +

    输入中文/拼音或在下列关键词中进行选择

    +
    热门城市
    + +
    热门景点
    + +
    热门主题
    + +
    +
    + + + + +
    +
    +

    热门城市(可直接选择城市或输入城市全拼)

    + +
    +
    + + + + + + + +
    +
    +
    热门城市
    + +
    其他城市
    + +
    +
    + + + + + + +
    +
    +
    +
    +

    问题及注意事项:

    +

    这是描述

    + +
    + + + diff --git a/cnDocs/plugins/mless.html b/cnDocs/plugins/mless.html new file mode 100644 index 000000000000..acf53d328701 --- /dev/null +++ b/cnDocs/plugins/mless.html @@ -0,0 +1,40 @@ + + + + +组件解决方案 + + + + + + + + + +
    +

    这是模版

    +

    组件描述

    + 这是一个按钮测试 +
    + 组件展示 + +
    +
    +
    +
    +

    问题及注意事项:

    +

    这是描述

    + +
    + + + + + + diff --git a/cnDocs/plugins/typo.html b/cnDocs/plugins/typo.html new file mode 100644 index 000000000000..a47b940b937f --- /dev/null +++ b/cnDocs/plugins/typo.html @@ -0,0 +1,76 @@ + + + + +中文排版 + + + + + + + + +
    +

    中文网页重设与排版

    +

    目标:一致化浏览器排版效果,构建最适合中文阅读的网页排版。包括桌面和移动平台。

    +

    这是一个TYPO.CSS的开源项目,详情:TYPO.CSS

    +
    Alpha 中,各路牛人都来支持一下,加入开发啊!
    + +

    预览:typo.css

    + +

    一、目录结构

    + +
    .
    +├── README.md           --- 使用帮助
    +├── TODO.md             --- TODO-List
    +├── license.txt         --- 许可证
    +├── typo.css            --- 将应用于你的项目
    +└── typo.html           --- Demo/预览
    +
    + +

    二、TYPO.CSS 的设计和使用

    + +

    建议看源代码,特别是注释,需要认真看。typo.css 主要包括:

    + +

    1、一般 reset.css 所需的内容

    + +

    目前的设计是这样的,尽量保持完整的 reset,比如让 ul/ol 无样式并且无多余的 padding/margin,这是必须的,因为一个网可能需要很多自定义的的内容,在实践中我们并不希望像 ul/ol 有样式,这样我们得用优先级去覆盖,这是非常麻烦的事。所以 typo.css 并不像 normalize.css,后者给每一个元素都预先定义了样式,这样在自定义的时候将是非常痛苦的。要大保持干净的所有元素一致化的 reset 才是最佳实践。

    + +

    为什么不是 Han 这个项目?

    + +

    2、class="typo" 阅读内容排版

    + +

    在文章/文档阅读的页面,需添加 .typo 这个 class,这样 table/ol/ul 等都会有预定的样式,让你的排版像 http://typo.sofish.de 一样,让用户阅读起来更舒服。

    + +

    3、增加类:

    + +

    主要是一些需要中文日常排版需要的元素和语文对应样式的增强,目前包括:

    + +

    (1) 专名号:使用标签 <u> 或者 .typo-u
    + (2) 着重号:使用 class .typo-em
    + (3) 首字下沉:使用 class .typo-first
    + (4) 清理浮动:与一般 reset.css 保持一致 .clearfix

    + +

    三、开源许可

    + +

    Sofish Lin: founder, creator of Alice CSS, a code writter, a semi-designer.
    Hotoo: developer, VIM guru, front-end web developer @ alipay.com

    + +

    基于 MIT License 开源,使用代码只需说明来源,或者引用 license.txt 即可。

    + +
    + 这是案例展示 + +
    +
    +
    +
    + +

    问题及注意事项:

    +

    这是描述

    + +
    + + diff --git a/cnDocs/project.php b/cnDocs/project.php new file mode 100644 index 000000000000..3d2043e1ecce --- /dev/null +++ b/cnDocs/project.php @@ -0,0 +1,209 @@ + + + + + + +
    +
    +

    项目研究及分享

    +

    最新项目研究及分享资源连接等

    +
    +
    +
    + + +
    + +
    + +
    + +

    Scrollpane实现模拟滚动条滚动条,只需在需要实现的位置最外层盒子上添加class="scroll-pane"即可!

    +
    +
    +
      +
    • 这是模拟滚动条
    • +
    • 使用起来非常方便
    • +
    • 但是需要按照要求去做
    • +
    • 第一:实现模拟的地方最外层最好是div
    • +
    • 为了方面js在里面自动插入模拟滚动条的div结构
    • +
    • 这时最外层只需要定义宽高即可
    • +
    • 关于模拟滚动条的样式
    • +
    • 请到其单独的样式表中定义
    • +
    • 使用起来很方面吧
    • +
    • 真的是太方便了!
    • +
    +
    +
    +
    +<div class="scoll_box scroll-pane">
    +<ul>
    +<li></li>
    +...
    +<li></li>
    +</ul>
    +</div>
    +
    +// js调用
    +$('.scroll-pane').jScrollPane();
    +
    +

    依赖:

    +

    模拟滚动条功能依赖插件jquery.mousewheel.js,jquery.jscrollpane.min.js和样式jquery.jscrollpane.css

    +

    更详细内容可参考:jscrollpane项目

    +

    注意! 以前版本不能支持jQuery库1.8版,现在支持了。

    +
    + + + +
    + +

    在实际前端开发中,由于select的不稳定性,以及在低版本的IE中的样式不可定性,带来了很大的不方便,因此,总结了这个列表模拟select的js插件。主要有 select标签自动生成模拟,div直接构造模拟select两种方式。

    +

    select标签自动生成模拟

    +

    这是在页面中使用select标签,通过js自动生成相应的div+ul的模拟结构(隐藏了select标签),优点:处理编辑改动页面时便捷,缺点:在调试时要调整自动生成的模拟结构的样式效果,这个比较麻烦,但调试好后,很方便使用!

    + +

    div直接构造模拟select

    +

    页面上不存在select标签,直接使用div+js模拟select效果,功能强大,甚至可以做自动帅选功能,推荐使用!

    +
    + +
    +
    +
    +
    +

    方法一依赖:

    +

    模拟select功能依赖插件.js和样式.css

    +

    更详细内容可参考:

    +

    方法二依赖:

    +

    模拟select功能依赖插件.js和样式.css

    +

    更详细内容可参考:Chosen 项目

    +

    注意:

    +
    + + +
    + +

    分页组件

    +

    页码是常用的网页组件

    +
    + + +
    + +

    前端项目

    +
      +
    1. Arale - Alipay前端解决方案
    2. +
    3. Alice - Alipay前端样式库
    4. +
    5. KISSY - 淘宝开源 JS 类库
    6. +
    7. Web前端实验室
    8. +
    9. CSS3.0 Maker
    10. +
    11. CSS3 Please!
    12. +
    13. CSS Arrow Please
    14. +
    15. QUI 网页界面集成框架
    16. +
    17. UI for the Web powered by HTML5, jQuery & CSS3
    18. +
    19. artTemplate  相关介绍
    20. +
    21. 研究使用SeaJS
    22. +
    23. +
    24. +
    +

    解决方案或前端资源

    +
      +
    1. Pure CSS GUI icons
    2. +
    3. PLACEHOLD.IT 使用举例:http://placehold.it/800x500
    4. +
    5. 模拟滚动条 项目-jScrollPane
    6. +
    7. jQuery API中文手册(CHM)最新版下载
    8. +
    9. CSS样式表 中文手册(chm)最新版下载
    10. +
    +

    可研究方案

    +
      +
    1. 瀑布流研究    照片墙-(此瀑布流布局的实现
    2. + +
    +

    Icon

    +
      +
    1. IconPng 爱看图标网,免费图标搜索引擎
    2. +
    3. Icon Finder
    4. +
    +

    研读扩展

    +
      +
    1. TaoBaoUED博客
    2. +
    3. [译]IE6终极备忘:修复IE6下 25+ Bugs
    4. +
    5. 打败 IE 的葵花宝典:CSS Bug Table
    6. +
    7. 伯乐在线
    8. +
    9. +
    10. +
    11. +
    +

    jQuery Plugin

    + +

    前端工具

    + +
    +
    +
    +
    + \ No newline at end of file diff --git a/cnDocs/scaffolding.php b/cnDocs/scaffolding.php new file mode 100644 index 000000000000..33a660c1244d --- /dev/null +++ b/cnDocs/scaffolding.php @@ -0,0 +1,528 @@ + + + + + + +
    +
    +

    框架

    +

    Bootstrap是建立在响应式布局12列栅格系统之上实现布局和组件。

    +
    +
    +
    + + +
    + +
    + + +
    + +

    要求HTML5 doctype

    +

    Bootstrap用到的HTML元素和CSS属性需要HTML5 doctype。因此每个使用Bootstrap的页面都应该包启HTML5声明。

    +

    页面框架是创建所有页面的基础,拷贝以下代码作为你的页面的初始状态。

    +
    +<!DOCTYPE html>
    +<html>
    +<head>
    +<meta charset="utf-8" />
    +<title>your title</title>
    +<link rel="stylesheet" href="css_example_url" />
    +<script src="js_example_url"></script>
    +</head>
    +<body>
    +...
    +</body>
    +</html>
    +
    +

    排版和链接

    +

    Bootstrap设置了基本的全局显示效果,排版和链接样式。具体来说,我们:

    +
      +
    • 移除了 marginmargin
    • +
    • 设置 margin 背景色为 background-color: white;
    • +
    • @baseFontFamily, @baseFontSize, 和 @baseLineHeight 做为排版的基础变量
    • +
    • 使用 @linkColor 设置全局链接的颜色,链接仅在 :hover 状下显示下划线
    • +
    +

    这些样式都在 scaffolding.less文件中。

    +

    在page.less文件中,我们对全局显示、字体、链接做了设置。你可以通过修改variables.less中相关的值来改变这些设置。相关的设置:

    +

    Reset via Normalize

    +

    从Bootstrap 2开始,使用 Normalize.css 对默认的CSS进行重置(reset)。Normalize.css 项目由 Nicolas Gallagher 创建 HTML5 Boilerplate 项目也出于他手。新的reset代码保存在 reset.less ,并移除了一些元素,从而更加简洁明了。

    +
    + + +
    + +

    Live grid example

    +

    在缺省情况下,Bootstrap提供940px宽, 12列的无响应功能栅格系统。通过添加响应式CSS样式,栅格系统能自适应宽度为724px 和 1170px的分辨率,并且在767px分辨率以下,栅格将变化为流体布局及垂直堆栈式排列。

    +
    +
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    +
    +
    2
    +
    3
    +
    4
    +
    +
    +
    4
    +
    5
    +
    +
    +
    9
    +
    +
    + +

    +

    对于一个简单的两列布局,创建一个 .row 并添加适当数量的 .span* 列。由于这是一个12列的栅格系统,每个 .span* 都是12列中的那些,并且应该是每列最多达到12(或者说是其列总数最大为12)。

    +
    +<div class="row">
    +  <div class="span4">...</div>
    +  <div class="span8">...</div>
    +</div>
    +
    +

    在这个例子中,我们有 .span4.span8,共12列和一个完整的行。

    +

    列的偏移

    +

    使用 .offset* 样式将列向右偏移。每一样式都会添加其等列宽度的左边距,如 .offset4 将移动 .span4 的列宽作为其偏移量。

    +
    +
    +
    4
    +
    3 offset 2
    +
    +
    +
    3 offset 1
    +
    3 offset 2
    +
    +
    +
    6 offset 3
    +
    +
    +
    +<div class="row">
    +  <div class="span4">...</div>
    +  <div class="span3 offset2">...</div>
    +</div>
    +
    +

    列的内嵌

    +

    默认的栅格系统下很容易实现内嵌,只要在一个已存在的 .span* 列中,嵌套一个新的 .row 列,然后在 .row 列中再添加一组 .span* 列即可。内嵌的行应该包含多个列,行的 span* 应该是几个内嵌列 span* 之和。

    +

    示例

    +

    这里两个内嵌的 .span4 列包含在 .span8 列中。

    +
    +
    + Level 1 column +
    +
    + Level 2 +
    +
    + Level 2 +
    +
    +
    +
    +
    +<div class="row">
    +  <div class="span9">
    +    Level 1 column
    +    <div class="row">
    +      <div class="span6">Level 2</div>
    +      <div class="span3">Level 2</div>
    +    </div>
    +  </div>
    +</div>
    +
    +
    + + + + +
    + + +

    流体栅格示例

    +

    流体栅格系统的列宽使用百分比计算宽度而非像素。与像素栅格布局一样,流体栅格系统也能根据设备和分辨率不同提供了不同的响应性方案。

    +
    +
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    +
    +
    4
    +
    4
    +
    4
    +
    +
    +
    4
    +
    8
    +
    +
    +
    6
    +
    6
    +
    +
    +
    12
    +
    +
    +

    基本流体布局HTML代码

    +

    把固定布局变成流式布局很简单,把 .row 变成 .row-fluid 即可,列内容不变,因此在流式布局和固定布局之间转换非常简单。

    +
    +<div class="row-fluid">
    +  <div class="span4">...</div>
    +  <div class="span8">...</div>
    +</div>
    +
    + +

    流布局偏移

    +

    与像素栅格系统操作方式相同:添加 .offset* 到任意列实现*列的偏移。

    +
    +
    +
    4
    +
    4 offset 4
    +
    +
    +
    3 offset 3
    +
    3 offset 3
    +
    +
    +
    6 offset 6
    +
    +
    +
    +<div class="row-fluid">
    +  <div class="span4">...</div>
    +  <div class="span4 offset2">...</div>
    +</div>
    +
    + +

    流体列的内嵌

    +

    流式列的内嵌稍稍有点不同:内嵌列宽度数值与父级无关,其累计应该为12,因为所有的内嵌列都是按比例而非像素分配父列的100%宽度。

    +
    +
    + Fluid 12 +
    +
    + Fluid 6 +
    +
    + Fluid 6 +
    +
    + Fluid 6 +
    +
    +
    +
    + Fluid 6 +
    +
    +
    +
    +
    +<div class="row-fluid">
    +  <div class="span12">
    +    Fluid 12
    +    <div class="row-fluid">
    +      <div class="span6">
    +        Fluid 6
    +        <div class="row-fluid">
    +          <div class="span6">Fluid 6</div>
    +          <div class="span6">Fluid 6</div>
    +        </div>
    +      </div>
    +      <div class="span6">Fluid 6</div>
    +    </div>
    +  </div>
    +</div>
    +
    +
    + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    变量默认值描述
    @gridColumns12列的数量
    @gridColumnWidth60px每列的宽度
    @gridGutterWidth20px列之间的间隔宽度
    @siteWidth计算所有列的总宽度(含间隔)计算列的总宽度以设置 .container-fixed() 的宽度
    + +

    LESS中的变量

    +

    Bootstrap内置了一组很有用的变量,用以定制上述的默认940px栅格系统。这些变量保存在variables.less中。

    + +

    如何定制

    +

    修改栅格意味着改变三个 @grid* 变量并要重新编译Bootstrap。改变variables.less中的栅格变量,再使用四种方式中的某一种重编译less。在添加更多列之前,要先在grid.less在定义这三个变量。

    + +

    保持响应性

    +

    定制的栅格只能工作在默认的940px下,若要保证Bootstrap的全面响应性,还得更改responsive.less中的栅格内容。

    + +
    + + +
    + +

    固定布局

    +

    提供一个共同的固定宽度(也可以选择相应式宽度) 居中布局,仅仅使用 <div class="container"> 即可。

    +
    +
    +
    +
    +<body>
    +  <div class="container">
    +    ...
    +  </div>
    +</body>
    +
    +

    流体布局

    +

    使用 <div class="container-fluid"> 实现一个两列流体布局,拥有一个左边栏。很适合做应用和文档。

    +

    +
    +
    +
    +
    +
    +<div class="container-fluid">
    +  <div class="row-fluid">
    +    <div class="span2">
    +      <!--Sidebar content-->
    +    </div>
    +    <div class="span10">
    +      <!--Body content-->
    +    </div>
    +  </div>
    +</div>
    +
    +
    + + +
    + +

    启用响应功能

    +

    在您的项目文档 <head> 中包括适当的meta标签以及额外的样式表即可打开响应式CSS。如果你使用的是“自定义”Bootstrap页面,那么你只需要包括meta标签即可。

    +
    +<meta name="viewport" content="width=device-width, initial-scale=1.0">
    +<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    +
    +

    提醒 并不是所有的设计都需要响应功能,所以 Bootstrap 在默认情况下不包含响应功能。但不是为了鼓励开发者移除此功能,这里我们最好启用它。

    + +

    响应式设计用来做什么?

    + Responsive devices +

    Medias Query允许浏览器基于不同的条件而使用不同的CSS:比如宽高比,宽度,显示类型等等。但最常用的条件还是 min-widthmax-width 。 +

    +
      +
    • 在栅格中修改列的宽度
    • +
    • 堆叠元素,而不是让其浮动
    • +
    • 根据不同设备重置标题和文字的大小,以获得更好的阅读体验。
    • +
    +

    谨慎地使用media query,建议仅仅将其做为你的手机用户的初体验。对于大型项目而言,最好还是选择专业的代码库,而不是进行层层的media查询。

    + +

    支持的设备

    +

    Bootstrap在responsive.less文件中提供了一组media query,令你的项目可以更为便捷地适应多种设备和分辨率。包括:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    设备布局宽度列宽度间隔宽度
    大分辨率>=1200px70px30px
    默认>=980px60px20px
    水平平板>=768px42px20px
    智能手机到垂直平板<=767px流式列,非固定宽度
    智能手机<=480px流式列,非固定宽度
    +
    +/* Large desktop */
    +@media (min-width: 1200px) { ... }
    +
    +/* Portrait tablet to landscape and desktop */
    +@media (min-width: 768px) and (max-width: 979px) { ... }
    +
    +/* Landscape phone to portrait tablet */
    +@media (max-width: 767px) { ... }
    +
    +/* Landscape phones and down */
    +@media (max-width: 480px) { ... }
    +
    + + +

    响应式设计类

    +

    为了更高效友好地面向移动设备开发,可以使用这些基础实用类根据设备的不同决定内容的显示或隐藏。下表展示了可用的类,及其在media query(设备标识)下的效果。 + 这些类保存在 responsive.less

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    ClassPhones 767px and belowTablets 979px to 768pxDesktops Default
    .visible-phoneVisible
    .visible-tabletVisible
    .visible-desktopVisible
    .hidden-phoneVisibleVisible
    .hidden-tabletVisibleVisible
    .hidden-desktopVisibleVisible
    + +

    何时适用

    +

    你的网站已经有了一点底子,但并不想再为不同设备而重新创建一个完全不同的站点,这种情况就适合使用实用类来完善呈现效果。响应式设计不应该使用在表格布局上,它也是不被支持的。

    + +

    测试案例

    +

    改变你的浏览器尺寸,或是不在同的设备上浏览,以观察上述类的效果。

    +

    显示

    +

    绿色选中的复选框是表示在您当前的窗口中是可见的。

    +
      +
    • Phone✔ Phone
    • +
    • Tablet✔ Tablet
    • +
    • Desktop✔ Desktop
    • +
    +

    隐藏

    +

    这里绿色选中的复选框是表示在您当前的窗口中是隐藏的。

    +
      +
    • Phone✔ Phone
    • +
    • Tablet✔ Tablet
    • +
    • Desktop✔ Desktop
    • +
    + +
    + + + +
    +
    + +
    + \ No newline at end of file diff --git a/cnDocs/skill.php b/cnDocs/skill.php new file mode 100644 index 000000000000..9711a8a72950 --- /dev/null +++ b/cnDocs/skill.php @@ -0,0 +1,133 @@ + + + + + + +
    +
    +

    Skill And Experience

    +

    Skill And Experience list.

    +
    +
    +
    + + +
    + +
    + +
    + +

    Skill And Experience CSS技巧和经验集合

    +

    CSS技巧和经验列表

    +

    点击下拉出详细的解决办法

    +
      +
    1. 如何清除图片下方出现几像素的空白间隙?
    2. +
    3. 如何让文本垂直对齐文本输入框?
    4. +
    5. 如何让单行文本在容器内垂直居中?
    6. +
    7. 如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?
    8. +
    9. 为什么Standard mode下IE无法设置滚动条的颜色?
    10. +
    11. 如何使文本溢出边界不换行强制在一行内显示?
    12. +
    13. 如何使文本溢出边界显示为省略号?
    14. +
    15. 如何使连续的长字符串自动换行?
    16. +
    17. 如何清除浮动?
    18. +
    19. 如何定义鼠标指针的光标形状为手型并兼容所有浏览器?
    20. +
    21. 如何让已知高度的容器在页面中水平垂直居中?
    22. +
    23. 如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?
    24. +
    25. 如何设置span的宽度和高度(即如何设置内联元素的宽高)?
    26. +
    27. 如何给一个元素定义多个不同的css规则?
    28. +
    29. 如何让某个元素充满整个页面?
    30. +
    31. 如何让某个元素距离窗口上右下左4边各10像素?
    32. +
    33. 如何去掉超链接的虚线框?
    34. +
    35. 如何容器透明,内容不透明?
    36. +
    37. 如何让整个页面水平居中?
    38. +
    39. 为什么容器的背景色没显示出来?为什么容器无法自适应内容高度?
    40. +
    41. 如何做1像素细边框的table?
    42. +
    43. 如何使页面文本行距始终保持为n倍字体大小的基调?
    44. +
    45. 标准模式Standard mode和怪异模式Quirks mode下的盒模型区别?
    46. +
    47. 以图换字的几种方法及优劣分析
    48. +
    49. 为什么2个相邻div的margin只有1个生效?
    50. +
    51. 如何在文本框中禁用中文输入法?
    52. +
    53. 如何解决列表中list-style-image不能精准定位的问题?
    54. +
    55. 如何解决伪对象:before和:after在input标签上的怪异表现的问题?
    56. +
    57. 如何解决伪对象:before和:after无法在Chrome,Safari,Opera上定义过渡和动画的问题?
    58. +
    59. 如何让层在falsh上显示?
    60. +
    61. 如何使用标准的方法在页面上插入flash?
    62. +
    63. 如何在点文字时也选中复选框或单选框?
    64. +
    65. IE下如何对Standard Mode与Quirks Mode进行切换?
    66. +
    67. 如何区别display:none与visibility:hidden?
    68. +
    69. 如何设置IE下的iframe背景透明?
    70. +
    +
    + + + + +
    +
      +
    1. +

      如何清除图片下方出现几像素的空白间隙?

      +

      方法1:

      +
      +img{display:block;}
      +
      +

      方法2:

      +
      +img{vertical-align:top;}
      +
      +

      除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的 + + 和 + + 值都可以

      +

      方法3:

      +
      +#test{font-size:0;line-height:0;}
      +
      +

      #test为img的父元素

      +
    2. +
    +
    + + + + +
    +
    +
    + \ No newline at end of file diff --git a/cnDocs/solution.php b/cnDocs/solution.php new file mode 100644 index 000000000000..f1aeb1892ec1 --- /dev/null +++ b/cnDocs/solution.php @@ -0,0 +1,184 @@ + + + + + + +
    +
    +

    兼容解决方案

    +

    头痛的问题,我们提前搞定

    +
    +
    + + +
    + + + + + + +
    + +

    兼容解决方案 认真思考,认真总结,不但要知其然,更要知其所以然。

    +

    solutions 界面及缩略图设计参考:界面设计速成

    + + + + +

    组件解决方案 统一规划、批量生产

    + + +

    HTML5/CSS3 特效 提升体验、平滑升级

    + + +

    JS解决方案 经典功能

    + + +
    +

    cnBootstrap 是 Twitter 开发的前端框架 Bootstrap 的中文版,并集成了 aliceui 兼容解决方案(包括但不限于aliceui),亦将我所了解的解决方案也整合进了此列表中,现仍在完善中...

    +

    欢迎广大网友提意见共同完善,此项目在Github上开源管理

    + + +
    + + + + + + + \ No newline at end of file diff --git a/cnDocs/solutions.html b/cnDocs/solutions.html new file mode 100644 index 000000000000..5671c638eb67 --- /dev/null +++ b/cnDocs/solutions.html @@ -0,0 +1,218 @@ + + + + +前端解决方案 · Oricode - Twitter Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +

    前端解决方案

    +

    头痛的问题,我们提前搞定

    +
    +
    + + +
    + + +
    + +
    + + + +
    + +

    原本想把解决方案的案例全部放置到此页中,左侧配置导航引导,而如果仅仅放置经典解决方案,难免忽略一些常用的问题,全整理在此页面就太过琐碎了。遂决定按照此思想方式,针对每个解决方案的不同实现方法汇总单一的页面,这样有的放矢,也方便大家对比差异优劣!

    +

    同时为了排除过多的代码样式干扰,案例一般采用浏览器默认样式。

    +
    + + +
    + +

    固定宽度的容器水平居中 具有固定宽度或百分比等已知值的容器居中

    +
    +
    固定宽度或百分比的已知值
    +
    +
    +.test{ background:#ccc; width:300px; width:50%; height:80px;}
    +.bc{ margin-left:auto; margin-right:auto}
    +
    +

    核心:width定值 + margin-left:auto; margin-right:auto;,二者缺一不可。

    +
      +
    • 优:固定宽度容器水平居中实现超级简单,用于页面主体居中特方便。
    • +
    • 劣:此实现思想无法应用于垂直居中,也无法实现未知宽度的容器水平居中。
    • +
    + +

    内容的水平/垂直居中 垂直方向上仅适用于单行内容居中

    +
    +
    内容的水平/垂直居中
    +
    +
    +<div style="text-align:center;line-height:80px;">固定宽度或百分比的已知值</div>
    +
    +

    核心:水平text-align:center; + 垂直(适用于单行内容)line-height:等于容器高度;

    +
      +
    • 优:实现简单。
    • +
    • 劣:无法支持多行文本。
    • +
    + + +

    CSS绝对定位居中 相对于具备定位属性的父标签

    +
    +
    +
    +
    +
    +.Lx,.Ly{position:absolute;left:50%;top:50%;background:red;}
    +.Lx{width:100px;height:30px;margin-left:-50px;margin-top:-15px;}
    +.Ly{width:30px;height:100px;margin-left:-15px;margin-top:-50px;}
    +
    + + +
    + + + + + +
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/cnDocs/solutions/1px-round-corner.html b/cnDocs/solutions/1px-round-corner.html new file mode 100644 index 000000000000..d04c87399270 --- /dev/null +++ b/cnDocs/solutions/1px-round-corner.html @@ -0,0 +1,76 @@ + + + + +1像素圆角 + + + + + +
    +

    1像素圆角

    +

    结构:支持 -hover, hover 时为 class=".as-rc .as-rc-hover"

    + +
    +

    +  一像素圆角  + 混排的文字 +

    + +  由 <a/> 标签实现时不用加 .as-rc-hover  + 混排的文字 + +
    +
    +/*
    +  @ 名称: 1像素圆角
    +  @ 描述: 需要自己设置宽度,或者高度,否则会随内容自适应
    +  @ 用法: 
    +    最外层:.as-rc 
    +    内容层:.as-rc-cnt
    +    鼠标经过:.as-rc-hover
    +*/
    +
    +/* base */
    +.as-rc{
    +    display:inline-block;vertical-align: middle;
    +    border-left:1px solid #ddd;border-right:1px solid #ddd;  /* 可重设 */
    +}
    +
    +/* 
    +  不要直接给 BOTTON | INPUT[type=submit[button]] 添加边框
    +  这会引发 IE 的 1px 的黑边 bug
    +  Note: 一般不要把 input 作为.as-rc-cnt 层 
    + */
    +.as-rc-cnt{
    +    float:left;position: relative;
    +    border-top: 1px solid #ddd;border-bottom:1px solid #ddd; /* 可重设 */
    +    margin:-1px 0;
    +}
    +
    +/* HACK for ie6 7 */
    +div.as-rc, p.as-rc, h2.as-rc, h3.as-rc, h4.as-rc, h5.as-rc, h6.as-rc, ul.as-rc, ol.as-rc{
    +    *display: inline;
    +}
    +
    +/* 鼠标经过 */
    +.as-rc-hover, .as-rc-hover .as-rc-cnt, .as-rc:hover, .as-rc:hover .as-rc-cnt{
    +    border-color: #aaa; /* 可重设 */
    +    text-decoration: none;
    +}
    +
    +
    +

    问题及注意事项:

    +

    最好不要给 INPUT[type=submit[button]] || BUTTON 直接添加border,避免 lte IE7 出现的1px 黑边 bug。

    +
      +
    • 好处:跨浏览器,自适应高度和宽度
    • +
    • 缺点:外观太简单
    • +
    + + +
    + + diff --git a/cnDocs/solutions/3d-pointer.html b/cnDocs/solutions/3d-pointer.html new file mode 100644 index 000000000000..2ba8d43c99a1 --- /dev/null +++ b/cnDocs/solutions/3d-pointer.html @@ -0,0 +1,226 @@ + + + + +CSS3幻灯片 3D百叶窗 + + + + + +
    +

    CSS3幻灯片 3D百叶窗

    +

    CSS3实现的幻灯片——3D百叶窗

    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/A-grade.html b/cnDocs/solutions/A-grade.html new file mode 100644 index 000000000000..d9c66b219f1f --- /dev/null +++ b/cnDocs/solutions/A-grade.html @@ -0,0 +1,451 @@ + + + + +YUI A-grade Browsers selector support + + + + + +
    +

    YUI A-grade Browsers selector support

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     IE6IE7IE8Firefox3.5Opera10.10Chrome4.0Safari4
    *:所有的元素 YYYYYYY
    E:E元素 YYYYYYY
    E[foo]:属性选择器,元素E拥有属性fooNYYYYYY
    E[foo=”bar”]:属性选择器,元素E有属性foo,且它的属性值是bar NYYYYYY
    E[foo~=”bar”]:属性选择器,元素E有属性foo,bar是它的属性值中的一个。 NYYYYYY
    E[foo^=”bar”]:属性选择器,元素E有属性foo,bar是它的第一个属性值。 NYYYYYY
    E[foo$=”bar”]:属性选择器,元素E有属性foo,bar是它的最后一个属性值。 NYYYYYY
    E[foo*=”bar”]:属性选择器,元素E有属性foo,bar是它其中一个属性值的子串。 NYYYYYY
    E[foo|=”en”]:属性选择器,元素E有属性foo,且foo的第一个属性值以en开始,跟着是”-”。(例:<p class=”test-p”>
    + P[class|=”test”])
    NYYYYYY
    E:root:元素E是文档的根 NNNY(html:root) Y(html:root) Y(html:root) Y(html:root)
    E:nth-child(n):元素E是它父节点的第n个孩子(n的取值可以为odd(奇数)even(偶数),4n,4n+1,4n+2) NNNYYYY
    E:nth-last-child(n):元素E是它父节点的倒数第n个孩子(n的取值可以为odd(奇数)even(偶数),4n,4n+1,4n+2) NNNYYYY
    E:nth-of-type(n):跟元素E是相同元素且是它父节点的第n个孩子(n的取值可以为odd(奇数)even(偶数),4n,4n+1,4n+2) NNNYYYY
    E:nth-last-of-type(n):跟元素E是相同元素且是它父节点的倒数第n个孩子(n的取值可以为odd(奇数)even(偶数),4n,4n+1,4n+2) NNNYYYY
    E:first-child:元素E是它父节点的第1个孩子 NYYYYYY
    E:last-child:元素E是它父节点的最后一个孩子 NNNYYYY
    E:first-of-type:跟元素E是相同元素且是它父节点的第1个孩子 NNNYYYY
    E:last-of-type:跟元素E是相同元素且是它父节点的最后一个孩子 NNNYYYY
    E:only-child:元素E是它父节点的唯一孩子 NNNYYYY
    E:only-of-type:跟元素E是相同元素且是它父节点的唯一孩子 NNNYYYY
    E:empty:元素E没有子节点(包括文本节点) NNNYYYY
    E:link:元素E是a,且未访问 YYYYYYY
    E:visited:元素E是a,且已访问 YYYYYYY
    E:active:元素E在用户活动中 Y(仅a元素) Y(仅a元素) YYYYY
    E:hover:鼠标悬浮在元素E上 Y(仅a元素) YYYYYY
    E:focus:元素E得到焦点 NNYYYYY
    E:target:元素E是url的目标 NNNYYYY
    E:lang(fr):元素E的语言是fr NNYYYYY
    E:enabled:元素E被启用 NNNYYYY
    E:disabled:元素E被禁 NNNYYYY
    E:checked:元素E被选中 NNNNYNN
    E:first-line:元素E的第一行 NYYYYYY
    E:first-letter:元素E的第一个字母 NYYYYYY
    E:before:元素E的前面(与CSS的content属性合用,在已有内容前附加内容) NNYYYYY
    E:after:元素E的后面(与CSS的content属性合用,在已有内容后附加内容) NNYYYYY
    E.warning:元素E的class是warning YYYYYYY
    E#myid:元素E的id是myid YYYYYYY
    E:not(s):元素E不是元素s NNNYYYY
    E F:元素F是元素E的子孙 YYYYYYY
    E>F:元素F是元素E的孩子 NYYYYYY
    E+F:元素F是元素E的直接后继兄弟节点 NYYYYYY
    E~F:元素F是元素E的后继兄弟节点 NYYYYYY
    +

    +
    + + diff --git a/cnDocs/solutions/README.md b/cnDocs/solutions/README.md new file mode 100644 index 000000000000..eedb072bbb8e --- /dev/null +++ b/cnDocs/solutions/README.md @@ -0,0 +1,26 @@ +# 前端解决方案 # + +## 概述 ## + +原本想把解决方案的案例全部放置到此页中,左侧配置导航引导,而如果仅仅放置经典解决方案,难免忽略一些常用的问题,全整理在此页面就太过琐碎了。 + +遂决定按照此思想方式,针对每个解决方案的不同实现方法汇总单一的页面,这样有的放矢,也方便大家对比差异优劣!同时把 aliceui 的兼容解决方案摘录过来,完善解决方案库并对其进行了完善/修正,(并不限于aliceui,还包括以前我总结的一些前端解决办法以及一些攻城师博文里提到的好的方案),个人阅历有限,无法大局观,并不能期望能集所有解决方案与一体,还望网友体谅,但我仍然会一个个来,慢慢补充完善! + +如有纰漏,还望指正,同时期望感兴趣的网友也加入进来,哪怕提意见也好,每个人的想法都是能锤炼这样一个不完善的项目的! + +为了排除过多的代码样式干扰,案例借鉴normalize.css统一了浏览器默认样式,并适当的辅助美化。 + +请点击查看具体效果:[兼容解决方案](http://www.tcreator.info/cnbootstrap/cndocs/solutions.php) + +## 设计规划 ## + +现解决方案大致分为——兼容性、组件类、HTML5/CSS3新技术、JS交互四个分类。 + +为了迅速提高及推进应用,现将加快解决方案设计步伐,快速推进各类目的解决方案类型及实例... + + +## TODO ## + +现在已经整理了不少的解决方案,其中有些还是很不错的,aliceui的都很不错,只有少量的被我用其他方法替换掉了,有了解决方案后就要统一规划成一个解决方案办法,统一风格模式,暂时还未定夺,但也许我会采用sl-前缀,各有优劣吧,沿用开源项目一方面方便升级,但不方便加入自己的想法,修改后升级交错就比较麻烦,自行一套,可以互不干扰,升级需要手工了! + +这项将于新的一年开始定夺啦... \ No newline at end of file diff --git a/cnDocs/solutions/alerts.html b/cnDocs/solutions/alerts.html new file mode 100644 index 000000000000..cb0d6c47d65f --- /dev/null +++ b/cnDocs/solutions/alerts.html @@ -0,0 +1,247 @@ + + + + +信息提示框 + + + + + + +
    +

    信息提示框

    +

    各种类型的信息提示框(消息,警告,错误,成功,帮助,停止,等待,正在进行……)

    + +
    +

    一般信息ico

    + + + + + + + + + + + + +

    简单块级行提醒

    + +

    + 安全提醒:自行编辑,非系统消息 +

    +
    + + 消息提醒:自行编辑,非系统消息 +
    +
    + + 警告提醒:自行编辑,非系统消息 +
    +
    + + 错误提醒:自行编辑,非系统消息 +
    +
    + + 成功提醒:自行编辑,非系统消息 +
    +
    + + 帮助提醒:自行编辑,非系统消息 +
    +
    + + 停止提醒:自行编辑,非系统消息 +
    +
    + + 等待提醒:自行编辑,非系统消息 +
    +

    内联行提醒

    + + + 安全提醒:自行编辑,非系统消息 + + + + + +

    操作反馈框

    + +
    +

    恭喜!操作成功!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    Binggo!操作状态提醒!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    注意!操作有风险,付款需谨慎!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    对不起!操作有误!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    恭喜!操作成功!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    有疑问?您可以参考以下内容!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    警告!此删除操作后数据将不可恢复!

    +

    您现在可以去畅游网络了。

    +
    +
    + +

    驴妈妈正在努力的为您查找,请稍后…

    +

    您现在可以去畅游网络了。

    +
    + + + + +

    包含按钮链接的提醒框仍在筹划中……

    + +
    + +
    +
    提示标题
    +
    提示描述
    +
    + 按钮 + 链接 +
    +
    +
    + + + +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + + + diff --git a/cnDocs/solutions/border.html b/cnDocs/solutions/border.html new file mode 100644 index 000000000000..c55e206f8a6f --- /dev/null +++ b/cnDocs/solutions/border.html @@ -0,0 +1,124 @@ + + + + +css border 解决方案 + + + + + +
    +

    border 解决方案

    +

    好好使用 border 可以实现很多意想不到的效果。下面这些情况你遇到了吗?

    + +
    +

    border 做图形 更多参见 纯css图形

    +
    +
    +
    +
    +
    +
    +

    border 实现箭头 arrow

    +

    +
    +
    +
    +
    +
    +

    大前端浩子的方法

    +
    +
    + + + + + Hi,知道吗? 大前端D7主题很快就疯抢了! +
    +
    + + Hi,知道吗?
    大前端D7主题很快就疯抢了! +
    +
    + + Hi,知道吗?
    大前端D7主题很快就疯抢了! +
    +
    + + Hi,知道吗?
    大前端D7主题很快就疯抢了! +
    +
    + + Hi,知道吗?
    大前端D7主题很快就疯抢了! +
    + +
    + + Hi,知道吗?
    大前端D7主题很快就疯抢了! +
    +
    + + Hi,知道吗?
    大前端D7主题很快就疯抢了! +
    +
    + + Hi,知道吗?
    大前端D7主题很快就疯抢了! +
    +
    + + Hi,知道吗?
    大前端D7主题很快就疯抢了! +
    +
    +

    浩子哥说:这段CSS写的已经很简练了,所以不要嫌多,因为它具有很强的扩展性。

    +

    如果你希望尖角居中显示,可以在 .poptip-arrow 这个span上加上 style="left:50%" 或者 style="top:50%"

    +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/button.html b/cnDocs/solutions/button.html new file mode 100644 index 000000000000..c0b1191459ab --- /dev/null +++ b/cnDocs/solutions/button.html @@ -0,0 +1,877 @@ + + + + +按钮兼容最佳解决方案 + + + + + +
    +

    按钮兼容最佳解决方案

    +

    鉴于按钮在网页中应用广泛,且在表单布局中兼容性问题比重较大,有必要针对按钮实现统一兼容解决方案。

    +

    首先要实现如下四种常用代码结构实现的Button表现相同(宽高大小对齐方式等,消除兼容性差异)

    +
      +
    • 已知的Bug:慎用A标签提交表单IE6下事件冲突
    • +
    • 为什么不用图片按钮?图片按钮虽能全兼容,但适应性扩展性都不高(所以它只能成为临时/应急解决方案),同时为了向前发展及提高效率,也必须要舍弃这种低效的做法。
    • +
    +
    +<a class="btn" href="">Link</a>
    +<button class="btn" type="submit">Button</button>
    +<input class="btn" type="button" value="Input">
    +<input class="btn" type="submit" value="Submit">
    +
    +
    +

    测试按钮 前四行纵向比较宽度及垂直对齐方式,后四行横向比较高度

    + + +
    +
    +/* 注意事项-自适应按钮问题颇多,主要表现在:
    + * IE6/IE7,高度不能使用padding去搞,需设置具体高度,a标签按钮同时需设置相应line-height保持垂直居中,宽度自适应则比较容易
    + * Firefox火狐下input的line-height无效,仅跟字体大小或input高度关联控制,input按钮高度表现不一致,需要定高解决
    + * 另外IE6,IE7,IE9,IE10,Firefox,Opera的按钮都有聚焦的虚边线(IE8和chrome没有虚线)opera下input按钮还有黑色实边线,影响美观,需要处理(firefox,opera可通过outline来处理虚边线,IE6-10可以使用js方法添加hidefocus属性去除虚线)
    + */
    +button,
    +input {
    +    *overflow: visible; /* IE6/7 内间距宽度一致 */
    +    line-height: normal;
    +}
    +.btn {
    +    *border: 0; /* IE6 IE7下聚焦状态会有不可控的黑色边框 */
    +}
    +input.btn{
    +    _width: auto;
    +    /* IE6下使input的按钮和a及button的按钮保持宽度一致 */
    +}
    +
    +
    + +
    +
    +

    问题及注意事项:

    +
      +
    • text-indent在IE6/IE7中的位置偏移BUG
    • +
    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/buttons.html b/cnDocs/solutions/buttons.html new file mode 100644 index 000000000000..56accea6cc7f --- /dev/null +++ b/cnDocs/solutions/buttons.html @@ -0,0 +1,300 @@ + + + + +网页中的按钮 + + + + + + + + + +
    +

    网页中的按钮

    +

    关于按钮,BT项目中已经做了大量的研究,也比较完美了,唯一的缺憾是不支持IE6以及在Firefox及IE7中表现的并不一致。

    +

    这里专门针对网页中的按钮做了进一步的测试研究与实践,提供了兼容的解决方案能完全满足你的需求,并能与网站的其他组件友好的组合使用。(由于之前已经做过一部分CSS通用按钮测试,此处继续前面的测试进行组件开发,这里主要侧重于应用级。)

    + +
    +

    buttons.css

    +

    按钮尺寸、类别 可组合

    + + + + + + +

    + + + + + + + + + + + + + + + +

    按钮禁用样式

    + + + + + + +

    + + + + + + + + + + + + + + +

    + + + +

    + + + +普通按钮 +
    +
    +<button class="btn btn-mini">迷你按钮</button>
    +<button class="btn btn-small">小按钮</button>
    +<button class="btn">默认按钮</button>
    +<button class="btn btn-big">大按钮</button>
    +<button class="btn btn-large">超大按钮</button>
    +
    +<button class="btn btn-primary">主按钮</button>
    +<button class="btn btn-info">次按钮</button>
    +<button class="btn btn-success">成功</button>
    +<button class="btn btn-warning">警告</button>
    +<button class="btn btn-danger">危险</button>
    +<button class="btn btn-inverse">反色</button>
    +<button class="btn btn-link">链接</button>
    +
    +<button class="btn btn-buff">浅黄</button>
    +<button class="btn btn-orange">橙色</button>
    +<button class="btn btn-pink">玫红</button>
    +
    +<button class="btn btn-large btn-block">块级按钮</button>
    +
    +<button class="btn disabled">禁用按钮</button>
    +<button class="btn"><i class="icon--user"></i> 组合按钮</button>
    +<span class="btn">普通按钮</span>
    +
    +

    问题及注意事项:

    +

    按钮使用中的注意事项,请参考 按钮兼容最佳方案

    + +

    按钮组

    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    +<div class="btn-group">
    +  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    +    Action
    +    <span class="caret"></span>
    +  </a>
    +  <ul class="dropdown-menu">
    +    <!-- dropdown menu links -->
    +  </ul>
    +</div>
    +
    + +

    按钮菜单

    +
    +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    +<div class="btn-group">
    +  <button class="btn">Action</button>
    +  <button class="btn dropdown-toggle" data-toggle="dropdown">
    +    <span class="caret"></span>
    +  </button>
    +  <ul class="dropdown-menu">
    +    <!-- dropdown menu links -->
    +    <li><a href="#">动作</a></li>
    +    <li><a href="#">另一个动作</a></li>
    +    <li><a href="#">其他</a></li>
    +    <li class="divider"></li>
    +    <li><a href="#">被间隔的链接</a></li>
    +  </ul>
    +</div>
    +
    +
    + + + + + + + + diff --git a/cnDocs/solutions/center-middle.html b/cnDocs/solutions/center-middle.html new file mode 100644 index 000000000000..c4ce74988428 --- /dev/null +++ b/cnDocs/solutions/center-middle.html @@ -0,0 +1,521 @@ + + + + +水平/垂直居中 + + + + + +
    +

    水平/垂直居中

    + + + + +

    使用table

    +

    无论水平还是垂直居中,使用 table 实现都超简单,只需 text-algin:center;vertical-align:middle; 就可以了。
    这便是下面的水平/垂直居中的第一个方法。

    + +

    小提示:下面方法中的水平居中案例及垂直居中的前四个案例摘自曹刘阳所著《编写高质量代码——Web前端开发修炼之道》的Page104-112
    +      方法三(inline-block + vertical-align:middle 方法)取自QQ空间相册预览的垂直居中效果,提取后的效果预览 +

    +

    水平居中

    +

    除上述 table 方法外,其他的CSS实现居中会遇到很多种情况,不同的情况使用的方法不同。

    + + +

    文本、图片等行内元素的水平居中

    +

    给父元素设置 text-align:center 可以实现文本、图片等行内元素的水平居中,如下:

    +
    +

    hello world!

    +
    +

    +
    +
    +.tc{text-align:center}
    +
    +<p class="tc">hello world!</p>
    +<p class="tc"><img src="img/"></p>
    +
    +

    注意:以上方法适用的是内联元素。

    + + +

    确定宽度的块级元素的水平居中

    +

    确定宽度的块级元素的水平居中是通过设置 margin-left:automargin-right:auto 来实现的,如下:

    +
    +
    +
    +
    +.bc{margin-left:auto;margin-right:auto;}
    +.ctest{width:300px;height:100px;background:#ccc;}
    +
    +<div class="ctest bc"></div>
    +
    + + +

    不确定宽度的块级元素的水平居中

    +

    不确定宽度的块级元素有三种方式可以实现居中。以分页模块为例,因为分页的数量是不确定的,所以我们不能通过设置宽度来显示它的弹性。

    + +

    方法一:外嵌套table方法

    +
    + + +
    +
      +
    • 1
    • +
    +
    + + +
    +
      +
    • 1
    • +
    • 2
    • +
    • 3
    • +
    +
    + + +
    + +
    +
    +
    +.bc{margin-left:auto;margin-right:auto;}
    +.pages1 li{float:left;display:inline;margin-right:5px;}
    +.pages1 a{float:left;display:block;padding:0 9px; height:25px; line-height:25px;}
    +
    +<table class="bc">
    +    <tr><td>
    +        <ul class="pages pages1">
    +            <li><a href="#">1</a></li>
    +        </ul>
    +    </td></tr>
    +</table>
    +
    +

    这里用到了一个有趣的标签 table 来帮助实现了不确定宽度的块级元素的水平居中,table有趣的地方在于它本身并不是块级元素,如果不给它设定宽度的话,它的宽度由内部元素的宽度“撑起”,但即使不设定它的宽度,仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中!将 ul 包含在 table 标签内,对 table 设置 margin-left:auto 和 margin-right:auto 就可以使 table 水平居中,间接使 ul 实现了水平居中。

    +

    这种做法很巧妙,但缺点是增加了无语义的标签,加深了标签的嵌套层数。

    + +

    方法二:变块级为inline类型

    +
    +
      +
    • 1
    • +
    +
      +
    • 1
    • +
    • 2
    • +
    • 3
    • +
    + +
    +
    +.pages2{text-align:center; padding:5px;}
    +.pages2 li{display:inline;}
    +.pages2 a{padding:4px 9px; line-height:25px;}
    +
    +<ul class="pages pages2">
    +    <li><a href="#">1</a></li>
    +</ul>
    +
    + +

    这里换了种思路,改变块级元素的display为 inline 类型,然后使用 text-align:center 来实现居中。相较于方法一,它的好处是不用增加无语义标签,简化了标签的嵌套深度,但它也存在一定的问题:它将块级元素的 display 类型改为 inline,变成了行内元素,而行内元素比起块级元素缺少一些功能,比如设定长宽值,在某些特殊需求的CSS设置中,这种方法可能会带来一些限制。

    + +

    注:其实这里使用变块级为inline-block类型更为合适,此方法为水平居中推荐方案

    + +

    方法三:使用position:relative

    +
    +
      +
    • 1
    • +
    +
      +
    • 1
    • +
    • 2
    • +
    • 3
    • +
    + +
    +
    +.pages3{float:left;clear:both;padding-top:5px;position:relative;left:50%;}
    +.pages3 li{float:left;display:inline;margin-right:5px;position:relative;left:-50%;}
    +.pages3 a{float:left;padding:0 9px; height:25px; line-height:25px;}
    +
    +<ul class="pages pages3">
    +    <li><a href="#">1</a></li>
    +</ul>
    +
    + +

    方法三通过给父标签设置 float,然后父元素设置 position:relativeleft:50%;,子元素设置 position:relativeleft:-50%; 来实现水平居中。它可以保留块级元素仍以 display:block 的形式显示,而且不会添加无语义标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。

    +

    此方法可以解决浮动居中的问题,详情参见float-center.html

    + +

    这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方式可以视具体情况而定。

    + + + + + + + + + +

    垂直居中

    + +

    父元素高度不确定的文本、图片、块级元素的垂直居中

    +

    父元素高度不确定的文本、图片、块级元素的垂直居中是通过给父级容器设置相同上下边距实现的,如下:

    +
    +

    hello world!

    +
    +

    +
    +

    +
    +
    +.mtest{padding:20px 0}
    +
    +<p class="mtest">hello world!</p>
    +<p class="mtest"><img src="img/"></p>
    +<div class="mtest"><p class="ctest"></p></div>
    +
    + + +

    父元素高度确定的单行文本的垂直居中

    +

    设置此单行文本 line-height 高度等于父元素高度即可

    +
    +

    hello world!

    +
    +
    +<p style="height:100px;line-height:100px;background:#ccc;">hello world!</p>
    +
    + + +

    父元素高度确定的多行文本、图片、块级元素的垂直居中

    +

    父元素高度确定的多行文本、图片、块级元素的垂直居中有两种方法。

    + +

    方法一:外嵌套table方法

    +

    说到垂直居中,CSS中有一个用于垂直居中的属性 vertical-align,但只是当父元素为td或tr时,这是属性才会生效,对于其他块级元素,例如div、p等,默认情况下是不支持 vertical-align 属性的。在Firefox和IE8+下,可以设置块级元素的display类型为 table-cell,激活vertical-align属性,但在IE6和IE7并不支持 display:table-cell,所以这种方法没办法跨浏览器兼容。

    +

    但我们可以使用最原始的笨方法来实现兼容——既然不支持块级元素设置为table-cell来模拟表格,那么我们就直接使用表格好了,如下:

    +
    + + +
    + hello world!
    + hello world!
    + hello world! +
    +
    + + +
    + +
    +
    + + +
    +
    +
    +
    +
    +table.middle{height:130px;background:#ccc;}
    +
    +<table class="middle">
    +    <tr><td>
    +        hello world!<br>
    +        hello world!<br>
    +        hello world!
    +    </td></tr>
    +</table>
    +
    +<table class="middle">
    +    <tr><td>
    +        <img src="img/center-middle.png" height="60">
    +    </td></tr>
    +</table>
    +
    +<table class="middle">
    +    <tr><td>
    +        <div class="ctest"></div>
    +    </td></tr>
    +</table>
    +
    + +

    因为td标签默认情况下就隐式地设置了vertical-align的值为middle,所以我们不需要在显式地设置一遍。

    + +

    方法二:display:table-cell + hack

    +

    对支持 display:table-cell 的IE8+和Firefox用 display:table-cellvertical-align:middle 来实现居中,对不支持 display:table-cell 的IE6和IE7,使用特定的hack,如下:

    +
    +
    +
    +

    + hello world!
    + hello world!
    + hello world! +

    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +/* 垂直居中 */
    +.box{position:relative;height:120px;display:table-cell;vertical-align:middle;background:#ccc;}
    +.verticalWrap{*position:absolute;*top:-50%;}
    +.vertical{*position:relative;*top:-50%;}
    +
    +<div class="box2">
    +    <div class="verticalWrap">
    +        <div class="vertical">
    +            hello world!<br>
    +            hello world!<br>
    +            hello world!
    +        </div>
    +    </div>
    +</div>
    +
    +<div class="box2">
    +    <div class="verticalWrap">
    +        <img class="vertical" src="img/center-middle.png" height="60">
    +    </div>
    +</div>
    +
    +<div class="box2">
    +    <div class="verticalWrap">
    +        <div class="ctest vertical"></div>
    +    </div>
    +</div>
    +
    + +

    利用hack技术区别对待标准浏览器和IE6/7,在不支持 display:table-cell 的IE6/7下,通过给父子两层元素分别设置 top:50%top:-50% 来实现居中。这种方法的好处是没有增加额外的标签,但它的缺点也很明显,一方面使用了hack,不利于维护,另一方面,它需要设置 position:relativeposition:absolute,带来了副作用。

    + +

    方法三:inline-block + vertical-align:middle 方法

    +

    父元素高度固定、子元素的高度不固定,使用inline-block 元素设置 vertical-align:middle 后会垂直居中对齐,添加 .middle-full 空标签辅助实现,如下:

    +

    注意: 使用这种方式,针对图片的自动缩放使用 max-width:100%; 时,middle-full和图片间不能有空格空行等

    +
    +
    +

    + hello world!
    + hello world!
    + hello world! +

    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +/* 垂直居中 */
    +.middle-item,.middle-full{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}
    +.middle-full{height:100%;width:0;overflow:hidden;font-size:0;}
    +
    +<div class="box3">
    +    <div class="middle-full"></div>
    +    <p class="middle-item">
    +        hello world!<br>
    +        hello world!<br>
    +        hello world!
    +    </p>
    +</div>
    +
    +<div class="box3">
    +    <div class="middle-full"></div>
    +    <img class="middle-item" src="img/center-middle.png" height="60">
    +</div>
    +
    +<div class="box3">
    +    <div class="middle-full"></div>
    +    <div class="ctest middle-item"></div>
    +</div>
    +
    +

    利用inline-block 属性的元素设置 vertical-align:middle 后垂直居中对齐的特性,在父标签内放置辅助标签 .middle-full 等高于父标签(宽度为0),表现元素会垂直居中对齐于此标签,从而实现想要的效果。优点相比于方法二大大减少了标签嵌套层级,且更容易实现水平垂直居中(再添加text-align:center即可),同时避免了方法二设置position属性可能引起的副作用。

    + + +

    CSS实现 图片等比缩放并垂直居中

    +

    不借助 空标签 而是使用 line-height 实现垂直居中(line-height 为父级元素高度)

    +

    注意: 使用这种方式,不同尺寸的盒子需要设置不同的 line-height,并且网页文件必须使用 HTML5 头部声明。

    +
    +
    + +
    +
    +
    +/* 垂直居中 */
    +.box4{ height:200px; text-align:center;background:#ccc; line-height: 200px;}
    +.img-middle{max-height:100%;display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}
    +
    +<div class="box4">
    +    <img class="img-middle" src="img/center-middle.png" height="60">
    +</div>
    +
    +
    + +

    弹窗的居中 定位实现

    +
    +
    +
    +
    +
    +.Lx,.Ly{position:absolute;left:50%;top:50%;background:red;}
    +.Lx{width:100px;height:30px;margin-left:-50px;margin-top:-15px;}
    +.Ly{width:30px;height:100px;margin-left:-15px;margin-top:-50px;}
    +
    + +

    问题及注意事项:

    +

    + +
    + + diff --git a/cnDocs/solutions/clear-float.html b/cnDocs/solutions/clear-float.html new file mode 100644 index 000000000000..b02aeff18073 --- /dev/null +++ b/cnDocs/solutions/clear-float.html @@ -0,0 +1,150 @@ + + + + +清除浮动 + + + + + +
    +

    清除浮动

    +

    如果使用div(或其他容器)包裹一个浮动的元素,经常会遇到一些无法包裹内部元素的问题。

    +

    这时就需要清除浮动:必须给容器(如div)定义明确的 heightwidthoverflow 之中一个属性(除了auto值)才能将浮动元素严实地包裹。

    +

    最常见的有四种方法:

    +
      +
    • clearfix清除法:clearfix使用:after属性,配合zoom:1 来实现清除浮动;实现:只要在其父层添加 class="clearfix" 即可。
    • +
    • overflow清除法:父标签定义overflow之中一个属性(除了auto值)。
    • +
    • 额外空标签清除法:在浮动层父标签内部最后添加空标签 <div class="clear"></div> 来实现。
    • +
    • inline-block方法:在浮动层父标签上设置 inline-block 属性。
    • +
    + +

    clearfix清除法 推荐方法

    +
    +
      +
    • +
    • +
    • +
    + +
    +
    +/*简洁版*/
    +.clearfix:before, .clearfix:after {
    +    content:"";
    +    display:table;
    +}
    +.clearfix:after{
    +    clear:both;
    +    overflow:hidden;
    +}
    +.clearfix{
    +    zoom:1;
    +}
    +
    +/* 经典版 */
    +.clearfix:after {
    +    visibility: hidden;
    +    display: block;
    +    font-size: 0;
    +    content: " ";
    +    clear: both;
    +    height: 0;
    +}
    +* html .clearfix             { zoom: 1; } /* IE6 */
    +*:first-child+html .clearfix { zoom: 1; } /* IE7 */
    +
    + +

    overflow清除法

    +
    +
      +
    • +
    • +
    • +
    + +
    +
    +.test2{
    +    overflow:hidden;*zoom:1;
    +}
    +
    + +

    空标签清除法

    +
    +
      +
    • +
    • +
    • +
    • +
    +

    小提醒:float元素设定 margin-bottom 时在 IE6/IE7 下会失效,目前发现只有空标签清除法+固定宽度才能有效解决,且不能是li结构

    +
    +
    +
    +
    +
    +
    +
    +
    +.clear{
    +    display:block !important;
    +    clear:both !important; /* 空标签清除浮动核心代码 */
    +}
    +
    + +

    inline-block方法

    +
    +
      +
    • +
    • +
    • +
    +

    注意:这个demo和上面几个是有所不同的哦,细心的你早就发现了,前面的比这个宽度要大啊。

    +
    +
    +.test4{
    +    display:inline-block;*display:inline;*zoom:1;
    +}
    +
    +

    问题及注意事项:

    + + + +
    + + + + + diff --git a/cnDocs/solutions/copy/ZeroClipboard.js b/cnDocs/solutions/copy/ZeroClipboard.js new file mode 100644 index 000000000000..c9785087bc36 --- /dev/null +++ b/cnDocs/solutions/copy/ZeroClipboard.js @@ -0,0 +1,335 @@ +/*! + * zeroclipboard + * The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. + * Copyright 2012 Jon Rohan, James M. Greene, . + * Released under the MIT license + * http://jonrohan.github.com/ZeroClipboard/ + * v1.1.7 + */(function() { + "use strict"; + var _getStyle = function(el, prop) { + var y = el.style[prop]; + if (el.currentStyle) y = el.currentStyle[prop]; else if (window.getComputedStyle) y = document.defaultView.getComputedStyle(el, null).getPropertyValue(prop); + if (y == "auto" && prop == "cursor") { + var possiblePointers = [ "a" ]; + for (var i = 0; i < possiblePointers.length; i++) { + if (el.tagName.toLowerCase() == possiblePointers[i]) { + return "pointer"; + } + } + } + return y; + }; + var _elementMouseOver = function(event) { + if (!ZeroClipboard.prototype._singleton) return; + if (!event) { + event = window.event; + } + var target; + if (this !== window) { + target = this; + } else if (event.target) { + target = event.target; + } else if (event.srcElement) { + target = event.srcElement; + } + ZeroClipboard.prototype._singleton.setCurrent(target); + }; + var _addEventHandler = function(element, method, func) { + if (element.addEventListener) { + element.addEventListener(method, func, false); + } else if (element.attachEvent) { + element.attachEvent("on" + method, func); + } + }; + var _removeEventHandler = function(element, method, func) { + if (element.removeEventListener) { + element.removeEventListener(method, func, false); + } else if (element.detachEvent) { + element.detachEvent("on" + method, func); + } + }; + var _addClass = function(element, value) { + if (element.addClass) { + element.addClass(value); + return element; + } + if (value && typeof value === "string") { + var classNames = (value || "").split(/\s+/); + if (element.nodeType === 1) { + if (!element.className) { + element.className = value; + } else { + var className = " " + element.className + " ", setClass = element.className; + for (var c = 0, cl = classNames.length; c < cl; c++) { + if (className.indexOf(" " + classNames[c] + " ") < 0) { + setClass += " " + classNames[c]; + } + } + element.className = setClass.replace(/^\s+|\s+$/g, ""); + } + } + } + return element; + }; + var _removeClass = function(element, value) { + if (element.removeClass) { + element.removeClass(value); + return element; + } + if (value && typeof value === "string" || value === undefined) { + var classNames = (value || "").split(/\s+/); + if (element.nodeType === 1 && element.className) { + if (value) { + var className = (" " + element.className + " ").replace(/[\n\t]/g, " "); + for (var c = 0, cl = classNames.length; c < cl; c++) { + className = className.replace(" " + classNames[c] + " ", " "); + } + element.className = className.replace(/^\s+|\s+$/g, ""); + } else { + element.className = ""; + } + } + } + return element; + }; + var _getDOMObjectPosition = function(obj) { + var info = { + left: 0, + top: 0, + width: obj.width || obj.offsetWidth || 0, + height: obj.height || obj.offsetHeight || 0, + zIndex: 9999 + }; + var zi = _getStyle(obj, "zIndex"); + if (zi && zi != "auto") { + info.zIndex = parseInt(zi, 10); + } + while (obj) { + var borderLeftWidth = parseInt(_getStyle(obj, "borderLeftWidth"), 10); + var borderTopWidth = parseInt(_getStyle(obj, "borderTopWidth"), 10); + info.left += isNaN(obj.offsetLeft) ? 0 : obj.offsetLeft; + info.left += isNaN(borderLeftWidth) ? 0 : borderLeftWidth; + info.top += isNaN(obj.offsetTop) ? 0 : obj.offsetTop; + info.top += isNaN(borderTopWidth) ? 0 : borderTopWidth; + obj = obj.offsetParent; + } + return info; + }; + var _noCache = function(path) { + return (path.indexOf("?") >= 0 ? "&" : "?") + "nocache=" + (new Date).getTime(); + }; + var _vars = function(options) { + var str = []; + if (options.trustedDomains) { + if (typeof options.trustedDomains === "string") { + str.push("trustedDomain=" + options.trustedDomains); + } else { + str.push("trustedDomain=" + options.trustedDomains.join(",")); + } + } + return str.join("&"); + }; + var _inArray = function(elem, array) { + if (array.indexOf) { + return array.indexOf(elem); + } + for (var i = 0, length = array.length; i < length; i++) { + if (array[i] === elem) { + return i; + } + } + return -1; + }; + var _prepGlue = function(elements) { + if (typeof elements === "string") throw new TypeError("ZeroClipboard doesn't accept query strings."); + if (!elements.length) return [ elements ]; + return elements; + }; + var ZeroClipboard = function(elements, options) { + if (elements) (ZeroClipboard.prototype._singleton || this).glue(elements); + if (ZeroClipboard.prototype._singleton) return ZeroClipboard.prototype._singleton; + ZeroClipboard.prototype._singleton = this; + this.options = {}; + for (var kd in _defaults) this.options[kd] = _defaults[kd]; + for (var ko in options) this.options[ko] = options[ko]; + this.handlers = {}; + if (ZeroClipboard.detectFlashSupport()) _bridge(); + }; + var currentElement, gluedElements = []; + ZeroClipboard.prototype.setCurrent = function(element) { + currentElement = element; + this.reposition(); + this.htmlBridge.setAttribute("data-clipboard-text", this.options.text || element.getAttribute("data-clipboard-text")); + if (this.ready()) this.flashBridge.setText(this.options.text || element.getAttribute("data-clipboard-text")); + if (element.getAttribute("title")) { + this.setTitle(element.getAttribute("title")); + } + this.setHandCursor(_getStyle(element, "cursor") == "pointer"); + }; + ZeroClipboard.prototype.setText = function(newText) { + if (newText && newText !== "") { + this.options.text = newText; + if (this.ready()) this.flashBridge.setText(newText); + } + }; + ZeroClipboard.prototype.setTitle = function(newTitle) { + if (newTitle && newTitle !== "") this.htmlBridge.setAttribute("title", newTitle); + }; + ZeroClipboard.prototype.setSize = function(width, height) { + if (this.ready()) this.flashBridge.setSize(width, height); + }; + ZeroClipboard.prototype.setHandCursor = function(enabled) { + if (this.ready()) this.flashBridge.setHandCursor(enabled); + }; + ZeroClipboard.version = "1.1.7"; + var _defaults = { + moviePath: "ZeroClipboard.swf", + trustedDomains: null, + text: null, + hoverClass: "zeroclipboard-is-hover", + activeClass: "zeroclipboard-is-active" + }; + ZeroClipboard.setDefaults = function(options) { + for (var ko in options) _defaults[ko] = options[ko]; + }; + ZeroClipboard.destroy = function() { + ZeroClipboard.prototype._singleton.unglue(gluedElements); + var bridge = ZeroClipboard.prototype._singleton.htmlBridge; + bridge.parentNode.removeChild(bridge); + delete ZeroClipboard.prototype._singleton; + }; + ZeroClipboard.detectFlashSupport = function() { + var hasFlash = false; + try { + if (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) { + hasFlash = true; + } + } catch (error) { + if (navigator.mimeTypes["application/x-shockwave-flash"]) { + hasFlash = true; + } + } + return hasFlash; + }; + var _bridge = function() { + var client = ZeroClipboard.prototype._singleton; + client.htmlBridge = document.getElementById("global-zeroclipboard-html-bridge"); + if (client.htmlBridge) { + client.flashBridge = document["global-zeroclipboard-flash-bridge"]; + return; + } + var html = ' '; + client.htmlBridge = document.createElement("div"); + client.htmlBridge.id = "global-zeroclipboard-html-bridge"; + client.htmlBridge.setAttribute("class", "global-zeroclipboard-container"); + client.htmlBridge.setAttribute("data-clipboard-ready", false); + client.htmlBridge.style.position = "absolute"; + client.htmlBridge.style.left = "-9999px"; + client.htmlBridge.style.top = "-9999px"; + client.htmlBridge.style.width = "15px"; + client.htmlBridge.style.height = "15px"; + client.htmlBridge.style.zIndex = "9999"; + client.htmlBridge.innerHTML = html; + document.body.appendChild(client.htmlBridge); + client.flashBridge = document["global-zeroclipboard-flash-bridge"]; + }; + ZeroClipboard.prototype.resetBridge = function() { + this.htmlBridge.style.left = "-9999px"; + this.htmlBridge.style.top = "-9999px"; + this.htmlBridge.removeAttribute("title"); + this.htmlBridge.removeAttribute("data-clipboard-text"); + _removeClass(currentElement, this.options.activeClass); + currentElement = null; + this.options.text = null; + }; + ZeroClipboard.prototype.ready = function() { + var ready = this.htmlBridge.getAttribute("data-clipboard-ready"); + return ready === "true" || ready === true; + }; + ZeroClipboard.prototype.reposition = function() { + if (!currentElement) return false; + var pos = _getDOMObjectPosition(currentElement); + this.htmlBridge.style.top = pos.top + "px"; + this.htmlBridge.style.left = pos.left + "px"; + this.htmlBridge.style.width = pos.width + "px"; + this.htmlBridge.style.height = pos.height + "px"; + this.htmlBridge.style.zIndex = pos.zIndex + 1; + this.setSize(pos.width, pos.height); + }; + ZeroClipboard.dispatch = function(eventName, args) { + ZeroClipboard.prototype._singleton.receiveEvent(eventName, args); + }; + ZeroClipboard.prototype.on = function(eventName, func) { + var events = eventName.toString().split(/\s/g); + for (var i = 0; i < events.length; i++) { + eventName = events[i].toLowerCase().replace(/^on/, ""); + if (!this.handlers[eventName]) this.handlers[eventName] = func; + } + if (this.handlers.noflash && !ZeroClipboard.detectFlashSupport()) { + this.receiveEvent("onNoFlash", null); + } + }; + ZeroClipboard.prototype.addEventListener = ZeroClipboard.prototype.on; + ZeroClipboard.prototype.receiveEvent = function(eventName, args) { + eventName = eventName.toString().toLowerCase().replace(/^on/, ""); + var element = currentElement; + switch (eventName) { + case "load": + if (args && parseFloat(args.flashVersion.replace(",", ".").replace(/[^0-9\.]/gi, "")) < 10) { + this.receiveEvent("onWrongFlash", { + flashVersion: args.flashVersion + }); + return; + } + this.htmlBridge.setAttribute("data-clipboard-ready", true); + break; + case "mouseover": + _addClass(element, this.options.hoverClass); + break; + case "mouseout": + _removeClass(element, this.options.hoverClass); + this.resetBridge(); + break; + case "mousedown": + _addClass(element, this.options.activeClass); + break; + case "mouseup": + _removeClass(element, this.options.activeClass); + break; + case "complete": + this.options.text = null; + break; + } + if (this.handlers[eventName]) { + var func = this.handlers[eventName]; + if (typeof func == "function") { + func.call(element, this, args); + } else if (typeof func == "string") { + window[func].call(element, this, args); + } + } + }; + ZeroClipboard.prototype.glue = function(elements) { + elements = _prepGlue(elements); + for (var i = 0; i < elements.length; i++) { + if (_inArray(elements[i], gluedElements) == -1) { + gluedElements.push(elements[i]); + _addEventHandler(elements[i], "mouseover", _elementMouseOver); + } + } + }; + ZeroClipboard.prototype.unglue = function(elements) { + elements = _prepGlue(elements); + for (var i = 0; i < elements.length; i++) { + _removeEventHandler(elements[i], "mouseover", _elementMouseOver); + var arrayIndex = _inArray(elements[i], gluedElements); + if (arrayIndex != -1) gluedElements.splice(arrayIndex, 1); + } + }; + if (typeof module !== "undefined") { + module.exports = ZeroClipboard; + } else { + window.ZeroClipboard = ZeroClipboard; + } +})(); \ No newline at end of file diff --git a/cnDocs/solutions/copy/ZeroClipboard.min.js b/cnDocs/solutions/copy/ZeroClipboard.min.js new file mode 100644 index 000000000000..d14678973fe8 --- /dev/null +++ b/cnDocs/solutions/copy/ZeroClipboard.min.js @@ -0,0 +1,8 @@ +/*! + * zeroclipboard + * The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. + * Copyright 2012 Jon Rohan, James M. Greene, . + * Released under the MIT license + * http://jonrohan.github.com/ZeroClipboard/ + * v1.1.7 + */(function(){"use strict";var a=function(a,b){var c=a.style[b];a.currentStyle?c=a.currentStyle[b]:window.getComputedStyle&&(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));if(c=="auto"&&b=="cursor"){var d=["a"];for(var e=0;e=0?"&":"?")+"nocache="+(new Date).getTime()},i=function(a){var b=[];return a.trustedDomains&&(typeof a.trustedDomains=="string"?b.push("trustedDomain="+a.trustedDomains):b.push("trustedDomain="+a.trustedDomains.join(","))),b.join("&")},j=function(a,b){if(b.indexOf)return b.indexOf(a);for(var c=0,d=b.length;c ';a.htmlBridge=document.createElement("div"),a.htmlBridge.id="global-zeroclipboard-html-bridge",a.htmlBridge.setAttribute("class","global-zeroclipboard-container"),a.htmlBridge.setAttribute("data-clipboard-ready",!1),a.htmlBridge.style.position="absolute",a.htmlBridge.style.left="-9999px",a.htmlBridge.style.top="-9999px",a.htmlBridge.style.width="15px",a.htmlBridge.style.height="15px",a.htmlBridge.style.zIndex="9999",a.htmlBridge.innerHTML=b,document.body.appendChild(a.htmlBridge),a.flashBridge=document["global-zeroclipboard-flash-bridge"]};l.prototype.resetBridge=function(){this.htmlBridge.style.left="-9999px",this.htmlBridge.style.top="-9999px",this.htmlBridge.removeAttribute("title"),this.htmlBridge.removeAttribute("data-clipboard-text"),f(m,this.options.activeClass),m=null,this.options.text=null},l.prototype.ready=function(){var a=this.htmlBridge.getAttribute("data-clipboard-ready");return a==="true"||a===!0},l.prototype.reposition=function(){if(!m)return!1;var a=g(m);this.htmlBridge.style.top=a.top+"px",this.htmlBridge.style.left=a.left+"px",this.htmlBridge.style.width=a.width+"px",this.htmlBridge.style.height=a.height+"px",this.htmlBridge.style.zIndex=a.zIndex+1,this.setSize(a.width,a.height)},l.dispatch=function(a,b){l.prototype._singleton.receiveEvent(a,b)},l.prototype.on=function(a,b){var c=a.toString().split(/\s/g);for(var d=0;d + + + +Zero Clipboard Test + + + + + + +
    +

    Zero Clipboard

    + +

    Zero Clipboard Demo

    +

    +
    + +

    + +

    + +

    +
    +

    Debug Console:

    +
    +
    + + + + + + + + + diff --git a/cnDocs/solutions/cross-browers-copy.html b/cnDocs/solutions/cross-browers-copy.html new file mode 100644 index 000000000000..73682b09a4e0 --- /dev/null +++ b/cnDocs/solutions/cross-browers-copy.html @@ -0,0 +1,119 @@ + + + + +跨浏览器剪贴功能 + + + + + +
    +

    跨浏览器剪贴功能

    +

    IE本身有提供了原生的支持:clipboardDatasetData。Firefox 等都没有,因此利用 flash 来做跨浏览器支持。

    + +

    使用 ZeroClipboard 是目前最好的解决方式(需要在服务器上运行):

    +

    Zero Clipboard的实现原理

    +

    Zero Clipboard 利用透明的 Flash 让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。

    +
    +

    Zero Clipboard Demo

    +

    +
    +

    + +

    +

    + +

    +
    +
    +

    Debug Console:

    +
    +
    +
    +THML:
    +<button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
    +<script src="ZeroClipboard.js"></script>
    +<script src="main.js"></script>
    +
    +// main.js
    +var clip = new ZeroClipboard( document.getElementById("copy-button"), {
    +    moviePath: "/path/to/ZeroClipboard.swf"
    +});
    +
    +clip.on( 'load', function(client) {
    +    // alert( "movie is loaded" );
    +});
    +
    +clip.on( 'complete', function(client, args) {
    +    this.style.display = 'none'; // "this" is the element that was clicked
    +    alert("Copied text to clipboard: " + args.text );
    +});
    +
    +clip.on( 'mouseover', function(client) {
    +    // alert("mouse over");
    +});
    +
    +clip.on( 'mouseout', function(client) {
    +  // alert("mouse out");
    +});
    +
    +clip.on( 'mousedown', function(client) {
    +    // alert("mouse down");
    +});
    +
    +clip.on( 'mouseup', function(client) {
    +    // alert("mouse up");
    +});
    +
    +

    问题及注意事项:

    +

    ZeroClipboard 项目官网 使用介绍

    + +
    + + + + + + + diff --git a/cnDocs/solutions/cross-domain-iframe.html b/cnDocs/solutions/cross-domain-iframe.html new file mode 100644 index 000000000000..ce52b081d40e --- /dev/null +++ b/cnDocs/solutions/cross-domain-iframe.html @@ -0,0 +1,101 @@ + + + + +iframe 跨域自适应 + + + + + +
    +

    iframe 跨域自适应

    +

    iframe 透明背景(IE6这些老掉牙的浏览器)

    +
      +
    • 添加属性 allowTransparency="true"
    • +
    • 在 iframe 源上把 body 设置为 background-color:transparent;
    • +
    + +

    自适应高度:支持跨域 | 动态高度

    +

    跨域原理——同域可通讯

    +

    在引用页(B)上创建一个隐藏的 iframe,引用与本页(A)同域的代理页面(C),并将B的高度作为 C.location的hash 值, C获取这个 hash 值。因为C与A同域,可以通信,因此将这个 hash 传给A来设置 iframe 的高度

    + +
    + 这是案例展示 + +
    +
    +(function () {
    +    var getHeight = function () {
    +            return Math.min(document.documentElement.scrollHeight, document.body.scrollHeight);
    +        };
    +
    +    var preHeight = getHeight(),
    +        agent_iframe;
    +
    +    var createIframe = function (height) {
    +            agent_iframe = document.createElement("iframe");
    +            agent_iframe.style.height = "0";
    +            agent_iframe.style.width = "0";
    +            agent_iframe.style.border = "none";
    +            agent_iframe.src = "C页面地址#" + height;
    +            document.body.appendChild(agent_iframe);
    +        }
    +
    +    createIframe(preHeight);
    +
    +    var checkHeight = function () {
    +            var currentHeight = getHeight();
    +            if (currentHeight != preHeight) {
    +                agent_iframe.src = "C页面地址#" + currentHeight;
    +                preHeight = currentHeight;
    +            }
    +            setTimeout(checkHeight, 500);
    +        }
    +
    +    setTimeout(checkHeight, 500);
    +})();
    +
    +// C页面脚本
    +(function () {
    +    var preHeight = parseInt(window.location.hash.substring(1), 10),
    +        ifrmae = window.top.document.getElementById("A页面iframe的ID");
    +
    +    ifrmae.height = preHeight;
    +    setInterval(function () {
    +        var newHeight = parseInt(window.location.hash.substring(1), 10);
    +        if (newHeight !== preHeight) {
    +            ifrmae.height = newHeight;
    +            preHeight = newHeight;
    +        }
    +    }, 500);
    +})(); 
    +
    +

    同域自适应:

    +
    +(function(){
    +    // 使用了arale DOM
    +    frame = D.get("frame_content_parent");
    +    function reSetIframe(){
    +        var frameContent = frame.contentWindow.document,
    +            bodyHeight = Math.max(frameContent.documentElement.scrollHeight,frameContent.body.scrollHeight);
    +        if (bodyHeight != D.getStyle(frame, "height")){
    +            D.setStyle(frame, "height", bodyHeight + "px");
    +        }
    +    }
    +    if(frame){
    +        D.setStyle(frame,"height","auto");
    +        setInterval(reSetIframe,300);
    +    }
    +})();
    +
    +

    动态高度原理: 用 setInterval 来持续检测

    +

    详细说明:http://www.zhouqicf.com/javascript/iframe-auto-height

    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-background-clip.html b/cnDocs/solutions/css3-background-clip.html new file mode 100644 index 000000000000..a58e3628180d --- /dev/null +++ b/cnDocs/solutions/css3-background-clip.html @@ -0,0 +1,202 @@ + + + + +CSS3 background-clip 背景裁剪 + + + + + +
    +

    CSS3 background-clip 背景裁剪

    +

    浏览器参照基准:IE9+, Firefox3.6+, Chrome5+, Safari5+, Opera11.50+

    +

    用于指定background是否包含content之外的border,padding。默认值为border-box,即background从包含border在内的地方开始渲染,IE的默认表现也等同于border-box

    + +
    +

    背景裁剪(背景从border(即包括border在内)开始绘制(渲染)):

    +
    +
    +.background-clip-border{
    +    -moz-background-clip:border-box;           /* For Firefox */
    +    -webkit-background-clip:border-box;        /* For Chrome, Safari */
    +    -o-background-clip:border-box;             /* For Opera */
    +    -ms-background-clip:border-box;            /* For IE */
    +    background-clip:border-box;                /* For Future */
    +}
    +
    +
    +

    背景裁剪(背景从padding(即包括padding在内)开始绘制):

    +
    +
    +.background-clip-padding{
    +    -moz-background-clip:padding-box;           /* For Firefox */
    +    -webkit-background-clip:padding-box;        /* For Chrome, Safari */
    +    -o-background-clip:padding-box;             /* For Opera */
    +    -ms-background-clip:padding-box;            /* For IE */
    +    background-clip:padding-box;                /* For Future */
    +}
    +
    +
    +

    背景裁剪(背景从content(即内容部分)开始绘制):

    +
    +
    +.background-clip-content{
    +    -moz-background-clip:content-box;           /* For Firefox */
    +    -webkit-background-clip:content-box;        /* For Chrome, Safari */
    +    -o-background-clip:content-box;             /* For Opera */
    +    -ms-background-clip:content-box;            /* For IE */
    +    background-clip:content-box;                /* For Future */
    +}
    +
    +
    +

    背景裁剪(将背景裁剪作为文本的填充色):

    +
    +
    +/* 如果你的浏览器支持text值,你将会看到本段文字的颜色直接使用了背景颜色:红色,且背景将被裁剪掉不再显示 */
    +.background-clip-text{
    +    background-color:#f00;
    +    -webkit-text-fill-color:transparent;
    +    -webkit-background-clip:text;               /* For Chrome, Safari */
    +    background-clip:text;                       /* For Future */
    +}
    +
    +
    +
    +

    background-clip 背景裁剪实现的文字特效

    +
    +

    流光溢彩文字

    +

    Clip Text

    +
    +
    +.cliptext{
    +    background:url(images/mask_text_bg.png) repeat;
    +    -webkit-background-clip:text;
    +    -webkit-text-fill-color:transparent;
    +    -webkit-animation:cliptext 25s linear infinite;
    +}
    +@-webkit-keyframes cliptext{
    +    0%{background-position:left top;}
    +    50%{background-position:right top;}
    +    100%{background-position:left top;}
    +}
    +
    +
    +

    遮罩效果

    +
    +
    +.cliptext2{
    +    background:url(images/girl2.jpg) repeat;
    +    background-size:auto;
    +    -webkit-background-clip:text;
    +    -webkit-text-fill-color:transparent;
    +    -webkit-animation:cliptext 20s linear infinite;
    +    font-size:196px;
    +    text-transform:uppercase;
    +}
    +@-webkit-keyframes cliptext{
    +    0%{background-position:left top;}
    +    50%{background-position:right top;}
    +    100%{background-position:left top;}
    +}
    +
    +
    +

    有点粗糙的光影划过文字效果

    +
    +
    +.cliptext3{
    +    background:#333 -webkit-linear-gradient(-15deg,#000 5%,rgba(255,255,255,.7),rgba(255,255,255,.9),rgba(255,255,255,.7),#000 10%) no-repeat;
    +    -webkit-background-clip:text;
    +    -webkit-text-fill-color:transparent;
    +    -webkit-animation:cliptext 10s linear infinite;
    +    font-size:56px;
    +}
    +@-webkit-keyframes cliptext{
    +	0%{background-position:left 0;}
    +	100%{background-position:1200px 0;}
    +}
    +
    + +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-background-origin.html b/cnDocs/solutions/css3-background-origin.html new file mode 100644 index 000000000000..215576636b73 --- /dev/null +++ b/cnDocs/solutions/css3-background-origin.html @@ -0,0 +1,92 @@ + + + + +CSS3 background-origin背景图片参考位置 + + + + + +
    +

    CSS3 background-origin背景图片参考位置

    +

    浏览器参照基准:IE9+, Firefox3.6+, Chrome5+, Safari5+, Opera11.50+

    +

    用于指定background-position计算的参考位置。默认值为padding-box,IE下的一般标记默认表现等同于border-box(hasLayout的标记或一般标记被触发hasLayout时,表现等同于padding-box)

    + +
    +

    背景起点(以border(即包括border)为原点计算背景图的background-position):

    +
    +
    +.background-origin-border{
    +    -moz-background-origin:border-box;         /* For Firefox */
    +    -webkit-background-origin:border-box;      /* For Chrome, Safari */
    +    -o-background-origin:border-box;           /* For Opera */
    +    -ms-background-origin:border-box;          /* For IE */
    +    background-origin:border-box;              /* For Future */
    +}
    +
    +
    +

    背景起点(以padding(即包括padding)为原点计算背景图的background-position):

    +
    +
    +.background-origin-padding{
    +    -moz-background-origin:padding-box;         /* For Firefox */
    +    -webkit-background-origin:padding-box;      /* For Chrome, Safari */
    +    -o-background-origin:padding-box;           /* For Opera */
    +    -ms-background-origin:padding-box;          /* For IE */
    +    background-origin:padding-box;              /* For Future */
    +}
    +
    +
    +

    背景起点(以content(即从content开始)为原点计算背景图的background-position):

    +
    +
    +.background-origin-content{
    +    -moz-background-origin:content-box;         /* For Firefox */
    +    -webkit-background-origin:content-box;      /* For Chrome, Safari */
    +    -o-background-origin:content-box;           /* For Opera */
    +    -ms-background-origin:content-box;          /* For IE */
    +    background-origin:content-box;              /* For Future */
    +}
    +
    +
    +
    + +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-background-size.html b/cnDocs/solutions/css3-background-size.html new file mode 100644 index 000000000000..f111e612f72b --- /dev/null +++ b/cnDocs/solutions/css3-background-size.html @@ -0,0 +1,100 @@ + + + + +CSS3 background-size 背景图尺寸 + + + + + +
    +

    background-size 背景图尺寸

    +

    浏览器参照基准:IE9.0+, Firefox3.6+, Chrome5+, Safari5+, Opera11.50+

    +

    语法:background-size:[length|percentage|auto]{1,2}|cover|contain 用于设置背景图片的大小
    +    有2个可选值(分别指定背景图的width和height),如果只指定1个值的,则第2个值默认为auto(即等比缩放;特定值cover和contain除外)

    +

    原图

    +

    +
    +

    背景图尺寸(数值表示方式):

    +
    +
    +.background-size{
    +    background-size:150px 120px;
    +}
    +
    +
    +

    背景图尺寸(百分比表示方式):

    +
    +
    +.background-size{
    +    background-size:50% 80%;
    +}
    +
    +
    +

    背景图尺寸(等比扩展图片来填满元素,即cover值):

    +
    +
    +.background-size{
    +    background-size:cover;
    +}
    +
    +
    +

    background-size的cover特定值会保持图像本身的宽高比例,将图片缩放到正好完全覆盖定义背景的区域。

    +

    背景图尺寸(等比缩小图片来适应元素的尺寸,即contain值):

    +
    +
    +.background-size{
    +    background-size:contain;
    +}
    +
    +
    +

    背景图尺寸(以图片自身大小来填充元素,即auto值):

    +
    +
    +.background-size{
    +    background-size:auto;
    +}
    +
    +
    +

    背景图尺寸(背景图自适应容器大小,宽高100%):

    +
    +
    +.background-size{
    +    background-size:100% 100%;
    +}
    +
    +
    +

    你可以任意调整示例中容器的宽高,用以测试背景图是否会随着容器的大小变化而变化

    +

    background-size 设置背景图大小与平铺:

    +
    +
    +.background-size-resize-repeat{
    +    background:#eee url(images/m5.jpg) repeat-x;
    +    background-size:150px 100%;
    +}
    +
    +
    + +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + diff --git a/cnDocs/solutions/css3-border-colors.html b/cnDocs/solutions/css3-border-colors.html new file mode 100644 index 000000000000..90ac808c8e26 --- /dev/null +++ b/cnDocs/solutions/css3-border-colors.html @@ -0,0 +1,76 @@ + + + + +CSS3 border-colors 多组边框色 + + + + + +
    +

    border-colors 多组边框色: 现仅Firefox支持

    +

    浏览器参照基准:Firefox3.6+, 其他浏览器暂不支持, IE系列不做参考

    +

    多重边框色(常规):border-colors/-moz-border-colors

    +
    +

    如border宽为(n)px,则最多可以设置n组边框色,每组边框色为1px

    +
    +
    +.border-colors{
    +    border-width:6px;
    +    border-style:solid;
    +    /* For Firefox3.6+ 需要分开写*/
    +    -moz-border-top-colors:#000 #fff #999 #aaa #ccc #eee;
    +    -moz-border-right-colors:#000 #fff #999 #aaa #ccc #eee;
    +    -moz-border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
    +    -moz-border-left-colors:#000 #fff #999 #aaa #ccc #eee;
    +}
    +
    +
    +
    +

    多重边框色(非常规-边框为10px,却只设置了6组边框颜色):border-colors/-moz-border-colors

    +
    +

    如border宽为10px,却只设置了6组边框色,那么最后一组边框色将渲染剩余的宽度

    +
    +
    +.border-colors2{
    +    border-width:10px;
    +    border-style:solid;
    +    /* For Firefox3.6+ */
    +    -moz-border-top-colors:#100 #300 #600 #800 #900 #a00; 
    +    -moz-border-right-colors:#100 #300 #600 #800 #900 #a00;
    +    -moz-border-bottom-colors:#100 #300 #600 #800 #900 #a00;
    +    -moz-border-left-colors:#100 #300 #600 #800 #900 #a00;
    +}
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-box-reflect.html b/cnDocs/solutions/css3-box-reflect.html new file mode 100644 index 000000000000..e92770912128 --- /dev/null +++ b/cnDocs/solutions/css3-box-reflect.html @@ -0,0 +1,228 @@ + + + + +CSS3 box-reflect倒影 + + + + + +
    +

    CSS3 box-reflect倒影

    +

    浏览器参照基准:Webkit Only

    +

    语法:box-reflect:none | <direction> <offset>? <mask-box-image>?

    + +
    +

    如果你需要一个简单倒影,你可以这样做:

    +
    +

    简单的文字倒影

    +
    +
    +
    +.box-reflect{
    +    -webkit-box-reflect: below;
    +    box-reflect: below;
    +}
    +注意:设置倒影元素的padding是会影响倒影位置的
    +
    +
    +

    <offset> 允许你定义倒影与元素之间的距离:

    +
    +

    简单的文字倒影

    +
    +
    +
    +.box-reflect{
    +    -webkit-box-reflect: below 10px;
    +    box-reflect: below 10px;
    +}
    +
    +
    +

    <mask-box-image> 允许你用Gradient图像或image作为遮罩:

    +
    +

    简单的文字倒影

    +
    +
    +
    +.box-reflect{
    +    -webkit-box-reflect:below 1px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));
    +    box-reflect: below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));
    +}
    +
    +

    常规的图片倒影效果:

    +
    +

    倒影方向:

    +
      +
    • +

      box-reflect:above

      + CSS3倒影效果:倒影在上边 +
    • +
    • +

      box-reflect:below

      + CSS3倒影效果:倒影在下边 +
    • +
    • +

      box-reflect:left

      + CSS3倒影效果:倒影在左边 +
    • +
    • +

      box-reflect:right

      + CSS3倒影效果:倒影在右边 +
    • +
    +
    +
    +-webkit-box-reflect:above;
    +-webkit-box-reflect:below;
    +-webkit-box-reflect:left;
    +-webkit-box-reflect:right;
    +分别对应上下左右
    +
    +
    +

    图片与倒影之间有1像素间隔:

    +
      +
    • +

      box-reflect:below 1px

      + 图片与倒影之间有1像素间隔 +
    • +
    +
    +
    +-webkit-box-reflect:below 1px;
    +
    +

    应用级的图片倒影:

    +
    +
    + 美女 + 美女 + 美女 + 美女 + 美女 +
    +
    +
    +.app-box img{
    +    display:inline-block;
    +    width:200px;
    +    margin:10px 15px 150px;
    +    -webkit-box-reflect:below 5px -webkit-linear-gradient(transparent,transparent 60%,rgba(0,0,0,.2));
    +    padding:5px;
    +    box-shadow:0 0 8px rgba(0,0,0,.4);
    +    background:#fff;
    +    -webkit-transform-style: preserve-3d;
    +    -webkit-transition:all .5s ease-in-out;
    +    -moz-transition:all .8s ease-in-out;
    +    -o-transition:all .8s ease-in;
    +    -ms-transition:all .8s ease-in;
    +    transition:all .8s ease-in;
    +}
    +.app-box img:hover{
    +    box-shadow:0 0 8px rgba(0,0,0,.3);
    +    -webkit-transform:scale(1.15);
    +    -moz-transform:scale(1.15);
    +    -o-transform:scale(1.15);
    +    -ms-transform:scale(1.15);
    +    transform:scale(1.15);
    +}
    +
    +

    文字倒影应用:

    +
    +
    +
    +

    断章

    + 卞之琳 +
    +
    +

    你在桥上看风景

    +

    看风景的人在楼上看你

    +

    明月装饰了你的窗子

    +

    你装饰了别人的梦

    +
    +
    +
    +
    +h1,.content p{
    +    -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.2));
    +    line-height:1;
    +}
    +
    + +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-box-shadow-effect.html b/cnDocs/solutions/css3-box-shadow-effect.html new file mode 100644 index 000000000000..60c0455b52fd --- /dev/null +++ b/cnDocs/solutions/css3-box-shadow-effect.html @@ -0,0 +1,394 @@ + + + + +CSS3 阴影特效 + + + + + +
    +

    CSS3 阴影特效

    +

    CSS3 阴影实现的特炫效果,本页的示例中应用了CSS3渐变、CSS3转换与伪选择器等

    + +
    +
      +
    • +
    • +
    • +
    • +
    • +
    • +
    • 3D box & text!

    • +
    • Inset goodies!

    • +
    • +
    • +
    • +
      +
    • +
    • +
    +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + diff --git a/cnDocs/solutions/css3-box-shadow.html b/cnDocs/solutions/css3-box-shadow.html new file mode 100644 index 000000000000..61ceb2a7b38b --- /dev/null +++ b/cnDocs/solutions/css3-box-shadow.html @@ -0,0 +1,183 @@ + + + + +CSS3 box-shadow阴影 + + + + + +
    +

    box-shadow阴影

    +

    浏览器参照基准:IE9+, Firefox4+, Chrome5+, Safari5+, Opera10.53+

    +

    box-shadow可以设置6个值。其中4个可选;2个必须指定:分别是x轴偏移量和y轴偏移量,这2个值可以是正值,可以是负值,也可以是0,但不可以省略不写

    + +
    +

    外部阴影:

    +
    +
    +.box-shadow{
    +    box-shadow:3px 3px 10px 3px #ddd;
    +}
    +
    +
    + +

    内部阴影:

    +
    +
    +.box-shadow{
    +    box-shadow:3px 3px 10px 3px #ddd inset;
    +}
    +
    +
    + +

    无扩展(蔓延spread)阴影:

    +
    +
    +.box-shadow{
    +    box-shadow:3px 3px 10px #ddd;
    +}
    +
    +
    + +

    无模糊(blur)阴影:

    +
    +
    +.box-shadow{
    +    box-shadow:5px 5px #ddd;
    +}
    +
    +
    + +

    单边阴影:

    +
    +
    +.box-shadow{
    +    box-shadow:0 5px 5px #ddd;
    +}
    +把某个偏移值设置为0,这时阴影的效果就只是单边的
    +
    +
    + +

    全边阴影:

    +
    +
    +.box-shadow{
    +    box-shadow:0 0 10px #aaa inset;
    +}
    +
    +
    + +

    使用RGBA颜色(当然你也可以使用RGB,HSL,HSLA)的阴影:

    +
    +
    +.box-shadow{
    +    box-shadow:-5px -5px rgba(0,0,0,.1); /* 可控制透明度 */
    +}
    +
    +
    + +

    常规阴影:

    +
    +
    +.box-shadow{
    +    box-shadow:-5px -5px rgba(0,0,0,.1); /* 可控制透明度 */
    +}
    +
    +
    +
    +
    +
    +
    + +
    +

    凹陷阴影效果:

    +
    The cave box shadow demo
    +
    +

    CSS3将开启“少图”web新时代

    +

    利用CSS3,你的网站将能大幅度的减少功能及装饰性的图片,如特殊的按钮、倒影等等

    +
    +
    +
    +.shadow-cave{
    +    width:370px;
    +    margin:0;
    +    float:left;
    +    position:relative;
    +    box-shadow:0 10px 5px rgba(0,0,0,.3);
    +}
    +.shadow-cave:after{
    +    position:absolute;
    +    bottom:-29px;
    +    left:0;
    +    overflow:hidden;
    +    background:#fff;
    +    width:100%;
    +    height:15px;
    +    content:'';
    +    border-radius:50%;
    +    box-shadow:0 -10px 5px #fff;
    +}
    +.with-image{
    +    float:left;display:inline;margin-right:20px;width:auto;height:auto;border:1px solid #bbb;padding:10px; margin-bottom:30px;
    +}
    +
    + +

    box-shadow阴影的应用限制:

    +
      +
    • box-shadow内阴影无法遮住图片
    • +
    +
    +

    图片上无法实现box-shadow内阴影 外层盒子的内阴影也只能在图片的下面,无法遮住图片

    +
      +
    • +
    • +
    • +
    • +
    • +
    +

    所以如果想用图片内阴影,暂时只能用浮层定位图片上实现了

    +
    + +

    更多:阴影特效

    + +
    + + diff --git a/cnDocs/solutions/css3-icons.html b/cnDocs/solutions/css3-icons.html new file mode 100644 index 000000000000..19b5920a2357 --- /dev/null +++ b/cnDocs/solutions/css3-icons.html @@ -0,0 +1,232 @@ + + + + +CSS3 制作iphone的message图标 + + + + + +
    +

    CSS3 制作iphone的message图标

    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + Message +
    +
    +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-light-animation.html b/cnDocs/solutions/css3-light-animation.html new file mode 100644 index 000000000000..3e224edf9233 --- /dev/null +++ b/cnDocs/solutions/css3-light-animation.html @@ -0,0 +1,100 @@ + + + + +CSS3 光影动画 + + + + + +
    +

    光影动画 (CSS3)

    +

    :hover时在图片或某容器上方实现一道光影划过。

    + +
    +

    鼠标 hover,光影划过 效果摘自百度音乐

    +
      +
    • +
    • +
    • +
    • +
        + +
    +
    +.light-box li{position:relative;width:90px;height:90px;overflow:hidden}
    +
    +.light {
    +    position: absolute;
    +    left: -100px;
    +    top: 0;
    +    width: 90px;
    +    height: 90px;
    +    background-image: -webkit-linear-gradient(0deg,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0));
    +    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    +    -webkit-transform: skewx(-25deg);
    +    -moz-transform: skewx(-25deg);
    +    -o-transform: skewx(-25deg);
    +    transform: skewx(-25deg);
    +    -webkit-transition: 0s;
    +    -moz-transition: 0s;
    +    -o-transition: 0s;
    +    transition: 0s;
    +}
    +a.cover:hover .light{
    +    left: 120px;
    +    -webkit-transition: 0.5s;
    +    -moz-transition: 0.5s;
    +    -o-transition: 0.5s;
    +    transition: 0.5s;
    +}
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-m.html b/cnDocs/solutions/css3-m.html new file mode 100644 index 000000000000..1a877fa576b1 --- /dev/null +++ b/cnDocs/solutions/css3-m.html @@ -0,0 +1,37 @@ + + + + +CSS3 + + + + + +
    +

    这是模版

    +

    浏览器参照基准:IE5.5+, Firefox4+, Chrome5+, Safari5+, Opera10.53+

    +

    解决方案描述

    + +
    + 这是案例展示 + +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + + + diff --git a/cnDocs/solutions/css3-nth-child(n).html b/cnDocs/solutions/css3-nth-child(n).html new file mode 100644 index 000000000000..fe00208f3e1f --- /dev/null +++ b/cnDocs/solutions/css3-nth-child(n).html @@ -0,0 +1,258 @@ + + + + +CSS3 :nth-child(n) + + + + + +
    +

    CSS3 :nth-child(n)

    +

    浏览器参照基准:IE9+, Firefox4+, Chrome5+, Safari5+, Opera10.53+

    +

    语法:E:nth-child(n){ sRules } 匹配父元素索引为n的子元素E

    +

    :nth-child(n) 让你匹配到父元素的任一子元素:

    +

    解决方案描述

    + +
    +
      +
    • 如果我是红色,说明选择到了我,你的浏览器还颇为先进
    • +
    • 落后的浏览器
    • +
    • 落后的浏览器
    • +
    • 落后的浏览器
    • +
    +
    +.list li:nth-child(1){
    +    color:#f00;
    +}
    +
    +

    除lte IE8浏览器外,你都能看到第一个li被匹配到,且文本为红色;

    +
    +

    重点:匹配到的是父元素的子元素:

    +
    +<div class="demo">
    +    </h3>选取 .demo 第一个子元素 p </h3>
    +    <p>如果你以为我会被选中变红,那你就猜错了</p>
    +    <p>落后的浏览器</p>
    +    <p>落后的浏览器...
    +</div>
    +
    +.demo p:nth-child(1){
    +    color:#f00;
    +}
    +
    +上述代码是不是让你感觉第一p元素会被匹配到?如果你真这么想,那你就真的错了,这里没有任何一个元素会被匹配到。
    +将其改为 .demo p:nth-child(2) 你会发现第一个p才被选中变红,why? 
    +
    +

    我们把p tag从选择器中去除,你会发现第一个p同样被选中变红。貌似这个才是能符合我们正常思维的,因为第1个p是 .demo 的第二个子元素;也就是说在本 DEMO 中 .demo p:nth-child(2).demo :nth-child(2) 是等价的;

    +

    你觉得这难理解么?

    +

    CSS选择器是从右到左查询的,我猜你已经知道了这个。E:nth-child(n) 表示的是匹配父元素第2个子元素,如果第2个子元素正好是E,则被匹配到;

    +

    上例中的 .demo :nth-child(2) 表示直接选择 .demo 第2个子元素,不论这个子元素是任何标签,都将被匹配到;(加了p后,就是匹配第二个元素且为p标签)

    + +

    :nth-child(n) 实现奇偶间隔背景色效果

    +
    +
      +
    • CSS3伪类 :nth-child(n) 实现的奇偶间隔背景色效果
    • +
    • CSS3伪类 :nth-child(n) 实现的奇偶间隔背景色效果
    • +
    • CSS3伪类 :nth-child(n) 实现的奇偶间隔背景色效果
    • +
    • CSS3伪类 :nth-child(n) 实现的奇偶间隔背景色效果
    • +
    • CSS3伪类 :nth-child(n) 实现的奇偶间隔背景色效果
    • +
    +
    +
    +.list2{
    +    padding:1px;
    +    border:1px solid #ddd;
    +}
    +.list2 li{
    +    padding:5px 8px;
    +    background-color:#ddd;
    +}
    +.list2 li:nth-child(2n){
    +    background-color:#bbb;
    +}
    +你也可以使用odd(奇数),even(偶数)列进行设置,如.list2 li:nth-child(even)。
    +
    + +

    确实,:nth-child(n),这个 n 不仅可以试一个具体的数字索引,也可以作为一个乘法的因子,比如本例中的 2n 不论这个 n 是多少,始终代表是的一个偶数,所以实现奇偶间隔真是轻而易举;

    + +

    也可以 n+1 这样子,你是不是会更兴奋?下面的例子你可以看到 n+1 的使用场景。

    +
    +

    我想每个显示4个方块,并且每列的背景色都不相同?

    +
      +
    • 1
    • +
    • 2
    • +
    • 3
    • +
    • 4
    • +
    • 5
    • +
    • 6
    • +
    • 7
    • +
    • 8
    • +
    • 9
    • +
    • 10
    • +
    • 11
    • +
    • 12
    • +
    • 13
    • +
    • 14
    • +
    • 15
    • +
    • 16
    • +
    +
    +
    +.square li{
    +    float:left;
    +    width:90px;
    +    height:90px;
    +    margin:1px 0 0 1px;
    +    line-height:90px;
    +    text-align:center;
    +}
    +.square li:nth-child(4n+1){
    +    clear:left;
    +    background-color:#999;
    +}
    +.square li:nth-child(4n+2){
    +    background-color:#aaa;
    +}
    +.square li:nth-child(4n+3){
    +    background-color:#ccc;
    +}
    +.square li:nth-child(4n+4){
    +    background-color:#eee;
    +}
    +
    +

    相信你能拓展更多的使用场景和好玩的实例,Good Luck!

    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-point.html b/cnDocs/solutions/css3-point.html new file mode 100644 index 000000000000..9a33a669e8e8 --- /dev/null +++ b/cnDocs/solutions/css3-point.html @@ -0,0 +1,519 @@ + + + + +CSS3 换位幻灯片 + + + + + +
    +

    CSS3 换位幻灯片

    +

    这是一款比较奇特的css3做品,点击图片,图片就会交换位置,并且伴随着打乱,效果绚丽。也许你认为应用了js,但是没有!

    + +
    +
    + + + + + + + + + + + + + + + + + +
      +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    +
    + +
    +
    +如果图片采用等比例的,那么就不必应用clip属性,效果将会更流畅。
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-stroke-gradient-text.html b/cnDocs/solutions/css3-stroke-gradient-text.html new file mode 100644 index 000000000000..7de1eff4a394 --- /dev/null +++ b/cnDocs/solutions/css3-stroke-gradient-text.html @@ -0,0 +1,130 @@ + + + + +CSS3 渐变字特效 + + + + + + +
    +

    CSS3 渐变字特效

    +

    CSS3 渐变填充文字特效

    + +
    +
    +

    Holy Fetchamoly !

    +

    hover over us!

    +

    Sweet Molasses

    +
    +
    +
    +.box h1,.box h2,.box h3{text-align:center;font-size:64pt;font-weight:bold;}
    +.demo h3{
    +    font-family: 'Bubblegum Sans',Arial;
    +}
    +.box span,.box h3{
    +    cursor:pointer;
    +    -webkit-transition-property: background;
    +    -webkit-transition-duration: 3s;
    +    -webkit-transition-timing-function: ease-out;
    +    color:#222;
    +    text-shadow:0px 0px 5px white;
    +    z-index:3;
    +    background: -webkit-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
    +    -webkit-text-stroke: 5px rgba(255,255,255,.01);
    +    -webkit-background-clip: text;
    +}
    +.box span:hover{
    +    -webkit-transition-property: background;
    +    -webkit-transition-duration: 2s;
    +    -webkit-transition-timing-function: ease-out;
    +    background: -webkit-linear-gradient(right,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
    +    background-position:100px;
    +    -webkit-background-clip: text;
    +}
    +.demo h2{
    +    margin-top:.25em;
    +    text-align:center;
    +    font-size:64pt;
    +    -webkit-transition-property: background;
    +    -webkit-transition-duration: 3s;
    +    -webkit-transition-timing-function: ease-out;
    +    content:'studentwebhosting.com';
    +    -webkit-text-stroke: 3px rgba(255,255,255,1);
    +    background: -webkit-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
    +    -webkit-background-clip: text;
    +    color:transparent;
    +}
    +.demo h2:hover{
    +    -webkit-transition-property: background;
    +    -webkit-transition-duration: 2s;
    +    -webkit-transition-timing-function: ease-out;
    +    cursor:pointer;
    +    -webkit-text-stroke: 3px rgba(255,255,255,1);
    +    background: -webkit-linear-gradient(left,  rgba(255,0,0,1) 0%,rgba(255,255,0,1) 19%,rgba(0,255,0,1) 38%,rgba(0,255,255,1) 51%,rgba(0,0,255,1) 67%,rgba(255,0,255,1) 83%,rgba(255,0,0,1) 99%); /* Chrome10+,Safari5.1+ */
    +    -webkit-background-clip: text;
    +    color:transparent;
    +    background-position:-500px;
    +}
    +.demo h3{
    +    font-family: 'Bubblegum Sans',Arial;
    +}
    +
    +

    问题及注意事项:

    +

    实践出真知 CSS3 Gradient Filled Text Strokes & CSS3 Strokes On Gradient Filled Text!

    + +
    + + diff --git a/cnDocs/solutions/css3-text-fill-color.html b/cnDocs/solutions/css3-text-fill-color.html new file mode 100644 index 000000000000..c6bef80856c1 --- /dev/null +++ b/cnDocs/solutions/css3-text-fill-color.html @@ -0,0 +1,100 @@ + + + + +CSS3 text-fill-color 文字填充色 + + + + + +
    +

    text-fill-color 文字填充色

    +

    浏览器参照基准:Webkit Only

    +

    text-fill-color 会覆盖color所定义的字体颜色 无视先后顺序

    +
    +

    如果你的浏览器支持text-fill-color,将看到我是红色

    +
    +
    +.text-fill-color{
    +    -webkit-text-fill-color:#f00;
    +    color:#000;
    +}
    +在webkit下你将看到红色的文字
    +
    +

    text-fill-color 打造镂空文字:

    +
    +
    +

    未定义text-stroke-color的文字

    +
    +
    +
    +.text-fill-color2{
    +    -webkit-text-fill-color:transparent;
    +    -webkit-text-stroke:1px #000;
    +}
    +
    +

    text-stroke-color 透明值让文字更柔和:

    +
    +

    效果1:

    +
    +

    Gradient图像填充的文字

    +
    +

    效果2:

    +
    +

    Gradient图像填充的文字

    +
    +
    +
    +.text-fill-color3{
    +    background-image:-webkit-linear-gradient(#eee,#000);
    +    -webkit-background-clip:text;
    +    -webkit-text-fill-color:transparent;
    +}
    +.text-fill-color4{
    +    background-image:-webkit-linear-gradient(#eee,#000);
    +    -webkit-background-clip:text;
    +    -webkit-text-fill-color:transparent;
    +    -webkit-text-stroke:1px transparent;
    +}
    +对比你会发现效果2中的文字比效果1更柔和一点
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-text-shadow.html b/cnDocs/solutions/css3-text-shadow.html new file mode 100644 index 000000000000..f4ef0d6e7f32 --- /dev/null +++ b/cnDocs/solutions/css3-text-shadow.html @@ -0,0 +1,146 @@ + + + + +CSS3 文字阴影 + + + + + +
    +

    CSS3 文字阴影

    +

    浏览器参照基准:IE10+, Firefox3.6+, Chrome5+, Safari5+, Opera11.50+

    +

    语法:box-reflect:none | [ <length>{2,3} && <color>? ][ , <length>{2,3} && <color>? ]*
    +    text-shadow有3个length参数,第1个表示水平偏移,第2个表示垂直偏移,第3个表示模糊(可选),color 是设置阴影的颜色 +

    +
    +

    文字阴影示例:

    +

    如果你的浏览器支持text-shadow,你将看到本段文字有1层阴影

    + +
    +
    +text-shadow:2px 2px 0 #ccc;
    +
    + +
    +

    柔和一点的文字阴影:

    +

    如果你的浏览器支持text-shadow,你将看到本段文字有1层阴影

    +
    +
    +text-shadow:2px 2px 5px #888;
    +
    + +
    +

    多重阴影:

    +

    如果你的浏览器支持text-shadow,你将看到本段文字有2层阴影

    +
    +
    +text-shadow:1px 1px #fff,2px 2px 2px rgba(0,0,0,.3);
    +
    +

    常见文字阴影效果

    +
    +

    text-shadow

    +
      +
    1. The Shadow Text
    2. +
    3. The Shadow Text
    4. +
    5. The Shadow Text
    6. +
    7. The Shadow Text
    8. +
    +
    +
    +li:nth-child(1){background:#aaa;color:#eee;text-shadow:1px 1px 0 rgba(0,0,0,.8);}
    +li:nth-child(2){color:#eee;text-shadow:1px 1px 5px rgba(0,0,0,.8);}
    +li:nth-child(3){color:#999;text-shadow:1px 1px 0 rgba(255,255,255,.8),2px 2px 3px rgba(0,0,0,.5);}
    +li:nth-child(4){background:#333;text-shadow:0px 2px 3px #666;}
    +
    + +
    +

    火焰文字效果:

    +

    FIRE TEXT

    +
    +
    +.fire-text{
    +    margin-top:10px;
    +    font:bold 100px/1.5 arial,sans-serif;
    +    text-shadow:0 0 5px #fff,
    +                0 0 20px #fefcc9,
    +                10px -10px 30px #feec85,
    +                -20px -20px 40px #ffae34,
    +                20px -40px 50px #ec760c,
    +                -20px -60px 60px #cd4606,
    +                0 -80px 70px #973716,
    +                10px -90px 80px #451b0e;
    +}
    +
    + +
    +

    霓虹文字效果:

    +

    NEON TEXT

    +
    +
    +.neon-text{
    +    font-family:georgia,sans-serif;
    +    text-shadow:0 0 10px #fff,
    +                0 0 20px #fff,
    +                0 0 30px #fff,
    +                0 0 40px #ff00de,
    +                0 0 70px #ff00de,
    +                0 0 80px #ff00de,
    +                0 0 100px #ff00de,
    +                0 0 150px #ff00de;
    +}
    +
    + +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-text-stroke.html b/cnDocs/solutions/css3-text-stroke.html new file mode 100644 index 000000000000..f2d975b8b7ec --- /dev/null +++ b/cnDocs/solutions/css3-text-stroke.html @@ -0,0 +1,87 @@ + + + + +CSS3 + + + + + +
    +

    这是模版

    +

    浏览器参照基准:Webkit Only

    +

    语法:text-stroke:<text-stroke-width> <text-stroke-color>

    + +
    +

    红色描边的文字

    + +
    +
    +.text-stroke{
    +    -webkit-text-stroke:1px #f00;
    +}
    +text-stroke是复合属性,可以分拆为text-stroke-width和text-stroke-color两个属性
    +
    + +
    +

    这是描了1像素的文字

    +
    +
    +.box{
    +    color:#555;
    +    -webkit-text-stroke:1px #f00;
    +    -webkit-animation:cliptext 7.5s linear infinite;
    +    font-size:80px;
    +}
    +@-webkit-keyframes cliptext{
    +    0%{-webkit-text-stroke:1px #c00;}
    +    25%{-webkit-text-stroke:1px #ff0;}
    +    50%{-webkit-text-stroke:1px #090;}
    +    75%{-webkit-text-stroke:1px #00f;}
    +    100%{-webkit-text-stroke:1px #93c;}
    +}
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + + + diff --git a/cnDocs/solutions/css3-transform-effect.html b/cnDocs/solutions/css3-transform-effect.html new file mode 100644 index 000000000000..90ee5ffd2e18 --- /dev/null +++ b/cnDocs/solutions/css3-transform-effect.html @@ -0,0 +1,98 @@ + + + + +CSS3 transition 动画效果 + + + + + +
    +

    CSS3 transition 动画效果

    +

    利用css巧妙的实现超炫的动画效果

    + +
    +
      +
    • +
    • +
    • +
    • +
    • +
    +
      +
    • Chrome
    • +
    • FoxFire
    • +
    • IE
    • +
    • Opera
    • +
    • Google+
    • +
    • FaceBook
    • +
    + +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/css3-wall.html b/cnDocs/solutions/css3-wall.html new file mode 100644 index 000000000000..90738e54dc3f --- /dev/null +++ b/cnDocs/solutions/css3-wall.html @@ -0,0 +1,121 @@ + + + + +CSS3 绘制砖墙 + + + + + +
    +

    CSS3 绘制砖墙 没有用任何图片

    +

    CSS3 绘制砖墙,虽然没有什么创新,但是你要是想做出这个效果,也是要花费很多时间的。这css3产生的效果,会让你眼球一亮,效果怎么和ue做出来的图片一样呢?但他确实没有用到图画。只是应用了radial-gradient,linear-gradient,怎么样下了一跳吧。

    +

    不要再说css3没什么,也不要说说他不神奇,因为神奇是你创造出来的。

    + +
    +
    +

    ANOTHER BRICK
    IN
    THE WALL

    +
    +
    +
    +.wall {width:600px; height:300px; margin:20px auto; font-family: 'Shadows Into Light', cursive; text-align:center; color:#000;
    +    background-image:
    +    -webkit-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0,0,0,0.8) 100%),
    +    -webkit-linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px),
    +    -webkit-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    +    -webkit-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%),
    +    -webkit-linear-gradient(left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px),
    +    -webkit-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    +    -webkit-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%);
    +    background-image:
    +    -moz-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0,0,0,0.8) 100%),
    +    -moz-linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px),
    +    -moz-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    +    -moz-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%),
    +    -moz-linear-gradient(left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px),
    +    -moz-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    +    -moz-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%);
    +    background-image:
    +    -ms-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0,0,0,0.8) 100%),
    +    -ms-linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px),
    +    -ms-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    +    -ms-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%),
    +    -ms-linear-gradient(left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px),
    +    -ms-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    +    -ms-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%);
    +    background-image:
    +    -o-radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0,0,0,0.8) 100%),
    +    -o-linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px),
    +    -o-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    +    -o-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%),
    +    -o-linear-gradient(left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px),
    +    -o-linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    +    -o-linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%);
    +    background-image:
    +    radial-gradient(center center, ellipse farthest-corner, transparent 0%, transparent 10%, rgba(0,0,0,0.8) 100%),
    +    linear-gradient(top, #555 0%, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px),
    +    linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    +    linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%),
    +    linear-gradient(left, #555 0px, #555 1px, transparent 1px, transparent 14px, #555 14px, #555 16px, transparent 16px, transparent 29px, #555 29px, #555 30px),
    +    linear-gradient(45deg, #ddd 0%, #ddd 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),
    +    linear-gradient(45deg, #eee 0%, #eee 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%);
    +    background-position:0 0, 0 0, 13px 0, 28px 15px, 0 0, 0 0, 15px 15px;
    +    background-size:600px 300px, 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px, 30px 30px;
    +    background-repeat:repeat;
    +}
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/cursor/albumleftarrow.cur b/cnDocs/solutions/cursor/albumleftarrow.cur new file mode 100644 index 000000000000..255f1cb99802 Binary files /dev/null and b/cnDocs/solutions/cursor/albumleftarrow.cur differ diff --git a/cnDocs/solutions/cursor/albumrightarrow.cur b/cnDocs/solutions/cursor/albumrightarrow.cur new file mode 100644 index 000000000000..526179214a2e Binary files /dev/null and b/cnDocs/solutions/cursor/albumrightarrow.cur differ diff --git a/cnDocs/solutions/cursor/cursorbig.cur b/cnDocs/solutions/cursor/cursorbig.cur new file mode 100644 index 000000000000..8363be10b00a Binary files /dev/null and b/cnDocs/solutions/cursor/cursorbig.cur differ diff --git a/cnDocs/solutions/cursor/cursorsmall.cur b/cnDocs/solutions/cursor/cursorsmall.cur new file mode 100644 index 000000000000..ef03a85ac8d5 Binary files /dev/null and b/cnDocs/solutions/cursor/cursorsmall.cur differ diff --git a/cnDocs/solutions/cursor/green_next.cur b/cnDocs/solutions/cursor/green_next.cur new file mode 100644 index 000000000000..be5ef3025fed Binary files /dev/null and b/cnDocs/solutions/cursor/green_next.cur differ diff --git a/cnDocs/solutions/cursor/green_prev.cur b/cnDocs/solutions/cursor/green_prev.cur new file mode 100644 index 000000000000..0c8201d918fb Binary files /dev/null and b/cnDocs/solutions/cursor/green_prev.cur differ diff --git a/cnDocs/solutions/cursor/green_zoom.cur b/cnDocs/solutions/cursor/green_zoom.cur new file mode 100644 index 000000000000..fd87c24e642e Binary files /dev/null and b/cnDocs/solutions/cursor/green_zoom.cur differ diff --git a/cnDocs/solutions/cursor/left.cur b/cnDocs/solutions/cursor/left.cur new file mode 100644 index 000000000000..197dda1feb35 Binary files /dev/null and b/cnDocs/solutions/cursor/left.cur differ diff --git a/cnDocs/solutions/cursor/magnify.cur b/cnDocs/solutions/cursor/magnify.cur new file mode 100644 index 000000000000..6504baaa0613 Binary files /dev/null and b/cnDocs/solutions/cursor/magnify.cur differ diff --git a/cnDocs/solutions/cursor/next-a.cur b/cnDocs/solutions/cursor/next-a.cur new file mode 100644 index 000000000000..ab0de8902bf0 Binary files /dev/null and b/cnDocs/solutions/cursor/next-a.cur differ diff --git a/cnDocs/solutions/cursor/next.cur b/cnDocs/solutions/cursor/next.cur new file mode 100644 index 000000000000..6de5b70189eb Binary files /dev/null and b/cnDocs/solutions/cursor/next.cur differ diff --git a/cnDocs/solutions/cursor/pre-a.cur b/cnDocs/solutions/cursor/pre-a.cur new file mode 100644 index 000000000000..4f47134d3e51 Binary files /dev/null and b/cnDocs/solutions/cursor/pre-a.cur differ diff --git a/cnDocs/solutions/cursor/pre.cur b/cnDocs/solutions/cursor/pre.cur new file mode 100644 index 000000000000..f7da98feefa7 Binary files /dev/null and b/cnDocs/solutions/cursor/pre.cur differ diff --git a/cnDocs/solutions/cursor/right.cur b/cnDocs/solutions/cursor/right.cur new file mode 100644 index 000000000000..c40de7e715fa Binary files /dev/null and b/cnDocs/solutions/cursor/right.cur differ diff --git a/cnDocs/solutions/cursor/zoom.cur b/cnDocs/solutions/cursor/zoom.cur new file mode 100644 index 000000000000..a873e193b8cf Binary files /dev/null and b/cnDocs/solutions/cursor/zoom.cur differ diff --git a/cnDocs/solutions/cursor/zoomin.cur b/cnDocs/solutions/cursor/zoomin.cur new file mode 100644 index 000000000000..d76a390a4307 Binary files /dev/null and b/cnDocs/solutions/cursor/zoomin.cur differ diff --git a/cnDocs/solutions/custom-cursor.html b/cnDocs/solutions/custom-cursor.html new file mode 100644 index 000000000000..3eaf6f3545f8 --- /dev/null +++ b/cnDocs/solutions/custom-cursor.html @@ -0,0 +1,51 @@ + + + + +鼠标指针样式自定义控制 + + + + + +
    +

    鼠标指针样式自定义控制

    +

    cursor:设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

    +

    注意:使用自定义图像作为光标类型,IE, Opera只支持*.cur等特定的图片格式;Firefox, Chrome, Safari 既支持特定图片类型也支持常见的*.jpg, *.gif, *.jpeg等图片格式。cursor的属性值可以是一个序列——示例代码:

    + +
    +
    +
    向左走
    +
    向右走
    +
    + +
    +

    注意:此方法通用,但是你也许已经碰到问题了,示例中全兼容的效果,在你的实现中IE下无效了,怎么解决?

    +
    +
    +.box{cursor: url(cursor/zoom.cur), auto; }
    +.cursor_pre {cursor: url(cursor/pre.cur), auto;}
    +.cursor_next {cursor: url(cursor/next.cur), auto;}
    +
    +.cursor{ 
    +    cursor: url(example.svg#linkcursor),
    +            url(hyper.cur),
    +            url(hyper.png) 2 3,
    +            pointer;
    +}
    +
    +本例用来给所有的超链接定义光标类型,客户端如果不支持SVG类型的光标,则使用下个"hyper.cur";如果cur类型也不支持,则使用下个"hyper.png";依次类推。
    +
    +

    问题及注意事项:

    +

    IE下无效?此此自定义鼠标样式,IE下要起效需要将样式放到页面中的style里,否则无效。

    + +
    + + diff --git a/cnDocs/solutions/custom-file.html b/cnDocs/solutions/custom-file.html new file mode 100644 index 000000000000..9452c39629ad --- /dev/null +++ b/cnDocs/solutions/custom-file.html @@ -0,0 +1,63 @@ + + + + +自定义 input[type=file] 样式 + + + + + +
    +

    自定义 input[type=file] 样式

    +

    使用 透明 + 定位 的方法实现自定义 input[type=file] 样式。

    + +
    + + + + png | jpg | bmp +
    +
    +HTML:
    +<span class="as-file">
    +    <input type="button" value="点击选择图片" />
    +    <input type="file" exts="png|jpg|bmp" class="as-input-file" />
    +</span>
    +
    +CSS:
    +/* 基础样式 */
    +.as-file{
    +    position:relative;
    +    display:inline-block;
    +    *display:inline;
    +    *zoom:1;
    +    cursor:pointer;
    +    overflow:hidden;
    +    vertical-align:middle;
    +}
    +
    +/* 影响 .ui-input-file 的样式 */
    +.as-file .as-input-file{
    +    position:absolute;
    +    right:0;
    +    top:0;
    +    _font-size:100px; /* overwrite*/
    +    _font-size:12px;
    +    _zoom:10; /* overwrite */
    +    height:100%;
    +    _height:auto;
    +    opacity:0;
    +    filter:alpha(opacity=0);
    +    -ms-filter:"alpha(opacity=0)";
    +    cursor:pointer;
    +}
    +
    +

    问题及注意事项:

    +

    如上实例,通过在 button 上自定义样式实现视觉效果。

    + +
    + + diff --git a/cnDocs/solutions/detect-character.html b/cnDocs/solutions/detect-character.html new file mode 100644 index 000000000000..1996117188b4 --- /dev/null +++ b/cnDocs/solutions/detect-character.html @@ -0,0 +1,70 @@ + + + + +检测字符类型 + + + + + +
    +

    检测字符类型

    + +

    检测文字是否为中文

    +

    解决方案描述

    + +
    +

    是否为中文?

    + +

    +
    +
    +核心JS:
    +var isChinese = function(word) { return /[\u4E00-\uFA29]+|[\uE7C7-\uE7F3]+/.test(word) }
    +isChinese('汉'); // true
    +
    +本例实现:
    +<script>
    +var words = document.getElementById('words'),
    +    tips = document.getElementById('tips'),
    +    isChinese = function (word) {
    +        return /[\u4E00-\uFA29]+|[\uE7C7-\uE7F3]+/.test(word)
    +    }
    +
    +words.onkeyup = function () {
    +    var arr = [], msg = [],
    +        input = words.value
    +    for (var i = 0, len = input.length; i < len; i++) arr.push(input[i])
    +    for (var i = 0, len = arr.length; i < len; i++) {
    +        !isChinese(arr[i]) && msg.push((i + 1) + '<small>(' + arr[i] + ')</small>')
    +    }
    +    if (msg.length) tips.innerHTML = '第' + msg.join('、') + '个字不是中文';
    +}
    +</script>
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + diff --git a/cnDocs/solutions/divider.html b/cnDocs/solutions/divider.html new file mode 100644 index 000000000000..dbeaeaf8fd31 --- /dev/null +++ b/cnDocs/solutions/divider.html @@ -0,0 +1,132 @@ + + + + +分隔线 + + + + + +
    +

    分隔线

    +

    CSS巧妙实现分隔线的几种方法

    + +
    +

    小小分隔线 推荐第二种

    +
    +
    小小分隔线 单标签实现
    +
    小小分隔线 巧用色实现
    +
    小小分隔线 inline-block实现
    +
    小小分隔线 浮动来实现
    +
    ———————————小小分隔线 字符来实现————————————
    + +
    + +
    + +
    +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/double-border.html b/cnDocs/solutions/double-border.html new file mode 100644 index 000000000000..e65946ee9c72 --- /dev/null +++ b/cnDocs/solutions/double-border.html @@ -0,0 +1,159 @@ + + + + +double border双线框效果的2种实现方式 + + + + + +
    +

    double border双线框效果

    +

    双线框(border-style方式):border-style:double

    + +
    +

    现代浏览器均支持:

    +
    +
    +.double-border{
    +    border:3px double #000;
    +}
    +
    +
    +
    + +

    双线框(border-colors方式):border-colors/-moz-border-colors

    +
    +

    以下的不同双线框实现仅Firefox支持,其它浏览器暂不支持(不含渐变色的实现)

    +
    +
    +.double-border2{
    +    border-width:3px;
    +    border-style:solid;
    +    /* For Firefox3.6+ */
    +    -moz-border-top-colors:#000 #fff #000;
    +    -moz-border-right-colors:#000 #fff #000;
    +    -moz-border-bottom-colors:#000 #fff #000;
    +    -moz-border-left-colors:#000 #fff #000;
    +}
    +
    +
    +
    + +

    border-colors方式双线框的一些常规效果:

    +
    +

    Figure 2:

    +
    double border
    +

    Figure 3:

    +
    double border
    +

    Figure 4:

    +
    double border
    +

    Figure 5:

    +
    double border
    +

    Figure 6:

    +
    double border
    +

    Figure 7:

    +
    double border
    +
    +

    多边框:

    +

    利用 box-shadow 实现

    +
    Eh careful man, there's a beverage here eh!
    +
    +

    问题及注意事项:

    +

    实践出真知

    + + + + diff --git a/cnDocs/solutions/drop-shadow.html b/cnDocs/solutions/drop-shadow.html new file mode 100644 index 000000000000..b8ad2146b776 --- /dev/null +++ b/cnDocs/solutions/drop-shadow.html @@ -0,0 +1,82 @@ + + + + +跨浏览器投影 + + + + + +
    +

    跨浏览器投影

    +

    使用 CSS filter 实现像 CSS3 的 box-shadow 效果,使用控制不同方向的投影来消除 filter 实现投影有噪点的不足。

    + +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
    +
    +
    +.shadow{
    +    /* modern web browsers */ 
    +    -moz-box-shadow:1px 3px 12px #bbb;
    +    -webkit-box-shadow:1px 3px 12px #bbb;
    +    box-shadow:1px 3px 12px #bbb;
    +    
    +    /* 一定要设置background, 不然 ie 会显示在字体上 */
    +    background: #fff;
    +    
    +    /* gte=ie8 */
    +    -ms-filter:"progid:DXImageTransform.Microsoft.Glow(color=#aaaaaa,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";
    +    
    +    /* lte=ie7 */
    +    *filter: 
    +    progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7)
    +    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
    +    progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
    +    progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7);
    +}
    +
    +

    问题及注意事项:

    +

    注意:记得添加 background 属性,防止 IE 把投影转移到文字上

    +

    简单的阴影效果

    +
    +
    +
    +
    +
    +
    +.shadow-simple{
    +    float:left;
    +    margin-right:20px;
    +    background-color:#efefef;
    +}
    +.shadow-simple img{
    +    padding:4px;
    +    border:1px solid #cdcdcd;
    +    background-color:#fff;
    +    position:relative;
    +    top:-5px;
    +    left:-5px;
    +    vertical-align: top;/* 消除空白间隙 */
    +}
    +
    + + diff --git a/cnDocs/solutions/equal-height-layout.html b/cnDocs/solutions/equal-height-layout.html new file mode 100644 index 000000000000..b7443854ab5c --- /dev/null +++ b/cnDocs/solutions/equal-height-layout.html @@ -0,0 +1,80 @@ + + + + +等高布局 + + + + + +
    +

    等高布局

    +

    等高栏的容器添加 .equalheight-box 子元素添加 .equalheight-item 可以实现等高。

    + +
    +

    2 column width equal height

    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
    +
    + Just another column floated to right +
    +
    + + +

    3 column width equal height

    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
    +
    + Just another column floated to right +
    +
    +
    +
    +HTML:
    +<div class="equalheight-box"gt;
    +    <div class="equalheight-item fl">...</div>
    +    <div class="equalheight-item fl">...</div>
    +    <div class="equalheight-item fr">...</div>
    +</div><!-- //div .equalheight-box -->
    +
    +CSS:
    +/* 记得更改宽度,如果页面不是960px的话 */
    +.equalheight-box{
    +    /*width: 960px;  /* 需重设 */
    +    overflow: hidden;
    +} 
    +
    +/* 等高 */
    +.equalheight-item{
    +    margin-bottom: -9999px;
    +    padding-bottom: 9999px;
    +}
    +
    +

    问题及注意事项:

    +

    如上布局,当需要的时候,如果有n栏,那么,< n 的栏都用 .fl 让它 float:left;第n栏,也就是最近一栏使用 .fr 向右浮动。

    + +

    思考:如何实现多项(多列多行),同行等高,不同行自适应且等高于此行最高列?

    +
    + + + + + + diff --git a/cnDocs/solutions/flash.html b/cnDocs/solutions/flash.html new file mode 100644 index 000000000000..af1073eef9da --- /dev/null +++ b/cnDocs/solutions/flash.html @@ -0,0 +1,85 @@ + + + + +flash 兼容性问题 + + + + + +
    +

    flash 兼容性问题

    +
      +
    • flash 背景透明问题
    • +
    • flash 与div 的层级问题
    • +
    + +
    +

    flash背景透明

    +

    首先flash本身要透明,另外需要在<embed ***>标签中添加 wmode="transparent" 属性即可。

    +

    下面示例鼠标hover时背景变色,但flash是透明的。

    +
    + +
    + +
    +
    +<div class="flash">
    +    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="500" height="100">
    +    <param name="movie" value="img/flash.swf">
    +    <param name="quality" value="high">
    +    <param name="menu" value="false">
    +    <param name="wmode" value="transparent">
    +    <embed src="flash.swf" wmode="transparent" menu=" false"="" quality="high" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
    +    </object>
    +</div>
    +
    +标红为透明关键属性:
    +<param name="wmode" value="transparent"> 针对IE
    +<embed src="flash.swf" wmode="transparent" ... 针对firefox/chrome等
    +
    +

    flash 层级问题

    +

    FLASH总挡住DIV,用这个办法把它优先级放到最下边。

    +

    FLASH优先级比DIV高, 所以会挡住DIV的。

    +

    里加入这个参数,将FLASH置于底层。

    + +

    wmode的三个值解释:

    +
      +
    • "Window" 在 Web 页上用影片自己的矩形窗口来播放应用程序,并且始终位于最顶层。
    • +
    • "Opaque" 显示页面上位于它后面的内容。
    • +
    • "Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。
    • +
    + +

    问题及注意事项:

    +

    实践出真知

    + + + + + + + + diff --git a/cnDocs/solutions/float-center.html b/cnDocs/solutions/float-center.html new file mode 100644 index 000000000000..27e23afb766f --- /dev/null +++ b/cnDocs/solutions/float-center.html @@ -0,0 +1,120 @@ + + + + +跨浏览器实现float:center居中浮动 + + + + + +
    +

    float:center居中浮动

    +

    我们都知道 float:leftfloat:right,但是否想过 float:center 呢?居中浮动...

    +
    +

    跨浏览器实现float:center,No CSS hacks

    +
      +
    • 列表一,我是浮动的
    • +
    • 列表二
    • +
    • 列表三
    • +
    • 这里可能是N
    • +
    +
    +
    +.float-center{
    +    text-align:center;
    +    overflow:hidden;
    +}
    +.float-center ul{
    +    float:left;
    +    position:relative;
    +    left:50%;
    +}
    +.float-center li{
    +    position:relative;
    +    right:50%;
    +    float:left;
    +    margin:5px;
    +    padding:0 10px;
    +    border:2px solid #ffa500;
    +    line-height:2em;
    +    background:#fd537e;
    +    color:#fff;
    +}
    +
    +

    此方法实质是不确定宽度的块级元素的水平居中的解决方法三的应用。

    + +

    这里还有一个变通的方法 取消 float 属性后,再水平居中,实现视觉上的一致

    +

    外框加上 .center-box,子元素加上 .center-item,元素就可以自动根据父元素的宽度水平居中。

    +
    +
      +
    • item1
    • +
    • item2
    • +
    • item3
    • +
    +
    +
    +HTML:
    +<ul class="center-box clearfix">
    +    <li class="center-item">item1</li>
    +    <li class="center-item">item2</li>
    +    <li class="center-item">item3</li>
    +</ul>
    +
    +CSS:
    +/*
    +  @名称: float center 
    +  @用法:
    +    1. 外框加上 .center-box,子元素加上 .center-item,元素就可以自动根据父元素的宽度水平居中。
    +    2. 结构(例:3栏):别忘记给每个栏加宽度(如上)
    +*/
    +
    +.center-box{
    +    display:block;text-align:center;
    +    
    +    /* 解决间隙问题 */
    +    font-size:0;
    +}
    +.center-item{
    +    display:inline-block;*display:inline;*zoom:1;
    +    
    +    /* 解决不能水平对齐问题 */
    +    vertical-align:top;
    +    
    +    /* 解决间隙问题后遗症解决 */
    +    font-size:13px;
    +}
    +
    + +

    问题及注意事项:

    +

    此方法实质是不确定宽度的块级元素的水平居中的解决方法二的应用。

    + +
    + + diff --git a/cnDocs/solutions/font-face.html b/cnDocs/solutions/font-face.html new file mode 100644 index 000000000000..290819848255 --- /dev/null +++ b/cnDocs/solutions/font-face.html @@ -0,0 +1,154 @@ + + + + +@font-face + + + + + +
    +

    @font-face

    +

    @font-face是CSS3中的一个模块,他能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。
    也可以理解为@font-face主要是把自己定义的Web字体嵌入到你的网页中。

    + +
    +

    测试字体JennaSue

    + +
    ^Hi,I'm Alice.Just for fun,Oh yeah!
    + +

    浏览器兼容性测试通过:[IE6+|Firefox3.5+|Chrome4+|Safari3+|Opera10+|iOS Safari4.2+]

    +
    +
    +HTML:
    +<div class="as-fontface">^Hi,I'm Alice.Just for fun,Oh yeah!</div>
    +
    +CSS:
    +/**
    +  local('PC自带字体')
    +  url('字体服务器地址') format('[truetype|eot|woff|svg|etc.]帮助浏览器识别')
    +  可通过fontsquirrel提供的在线字体转换获取所需格式
    +*/
    +
    +/* 按兼容要求配置 src url */
    +@font-face {
    +    font-family: 'JennaSue'; /* 字体名,可自定义 */
    +    src: url('./font/JennaSue.eot'); /* fix ie9 */
    +    src: url('./font/JennaSue.eot?#iefix') format('eot'), /* ie4~ie8*/
    +         url('./font/JennaSue.ttf') format('truetype'); /* modern browser safari in iOS */
    +}
    +
    +/* 通过font-family引用 */
    +.as-fontface {
    +    font-family: 'JennaSue',Tahoma; /* 可设置替补字体 */
    +    font-size: 60px;
    +    line-height: 100px;
    +}
    +.complete{
    +    color: #888;
    +}
    +
    + +

    @font-face 扩展知识:

    +

    语法:

    +

    @font-face :{属性: 取值;}

    +

    取值:

    +
    +
    font-family:
    +
    设置文本的字体名称。
    +
    font-style:
    +
    设置文本样式。
    +
    font-variant:
    +
    设置文本是否大小写。
    +
    font-weight:
    +
    设置文本的粗细。
    +
    font-stretch:
    +
    设置文本是否横向的拉伸变形。
    +
    font-size:
    +
    设置文本字体大小。
    +
    src
    +
    设置自定义字体的相对路径或者绝对路径,注意,此属性只能在@font-face规则里使用。
    +
    +
    +@font-face {
    +    font-family: <YourWebFontName>;
    +    src: <source> [<format>][,<source> [<format>]]*;
    +    [font-weight: <weight>];
    +    [font-style: <style>];
    +}
    +
    +

    取值说明

    +
      +
    1. YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
    2. +
    3. source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;
    4. +
    5. format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;
    6. +
    7. weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。
    8. +
    + +

    兼容浏览器

    +

    +

    说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念:

    +

    一、TureTpe(.ttf)格式:

    +

    .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

    +

    二、OpenType(.otf)格式:

    +

    .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

    +

    三、Web Open Font Format(.woff)格式:

    +

    .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

    +

    四、Embedded Open Type(.eot)格式:

    +

    .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

    + 五、SVG(.svg)格式: +

    .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

    +

    这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

    +

    为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

    +
    +@font-face {
    +    font-family: 'YourWebFontName';
    +    src: url('YourWebFontName.eot?') format('eot');/*IE*/
    +    src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
    +}
    +
    +

    但为了让各多的浏览器支持,你也可以写成:

    +
    +@font-face {
    +    font-family: 'YourWebFontName';
    +    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    +    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    +         url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
    +         url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
    +         url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
    +   }
    +
    + + +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/font/JennaSue.eot b/cnDocs/solutions/font/JennaSue.eot new file mode 100644 index 000000000000..95e7a44c2019 Binary files /dev/null and b/cnDocs/solutions/font/JennaSue.eot differ diff --git a/cnDocs/solutions/font/JennaSue.ttf b/cnDocs/solutions/font/JennaSue.ttf new file mode 100644 index 000000000000..040a764a46dd Binary files /dev/null and b/cnDocs/solutions/font/JennaSue.ttf differ diff --git a/cnDocs/solutions/font/font-face-browers.jpg b/cnDocs/solutions/font/font-face-browers.jpg new file mode 100644 index 000000000000..4002ebacca7a Binary files /dev/null and b/cnDocs/solutions/font/font-face-browers.jpg differ diff --git a/cnDocs/solutions/forms.html b/cnDocs/solutions/forms.html new file mode 100644 index 000000000000..92382fe4edd4 --- /dev/null +++ b/cnDocs/solutions/forms.html @@ -0,0 +1,309 @@ + + + + +表单研究 + + + + + + + + +
    +

    表单研究

    +

    表单是一个大型网站必不可少的一部分,也是布局比较繁琐的一块区域,小小的表单又曾经让多少的人头大呢?

    +

    下面为大家准备的DPL,可以使你的表单元素和控件看上去非常好,没有任何多余的HTML,并会提供你需要的多种模式。使用简洁和可扩展的样式实现复杂的布局,使你可以方便的实现样式及绑定事件,你可以按照下面的内容一步步的去做。(注意:研究表单之前一定要先研究按钮)

    +

    四种表单布局

    +

    DPL 支持4种典型的表单布局:

    +
      +
    • 垂直表单 (默认)
    • +
    • 内联表单(Inline)
    • +
    • 搜索
    • +
    • 横向表单(Horizontal)
    • +
    +

    不同布局类型的表单需要修改一些标签,但是控件的行为是一致的。

    +

    控件的状态和其他

    +

    DPL 中包含你所希望的所有表单控件的样式,同时包含一系列的自定义组件,例如在input前面或者后面附加内容;支持复选框列表。

    +

    表单控件有各种状态:错误、警告和成功,除此之外还有当禁用控件时的不可用状态。

    + +

    四种类型的表单

    +

    DPL提供了简单的标签和样式来实现常见的四种表单。

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名称样式描述
    垂直表单 (默认).form-vertical (可选)层叠式,左对齐的块属性标签
    内联表单.form-inline居左的label和内联的元素组成的简洁的表单
    搜索表单.form-search精致的圆形边框搜索表单
    水平表单.form-horizontal居左但内容右对齐的label和控件在一行
    + +
    + + + + + + +
    +

    垂直表单(默认)

    +
    +
    + 表单标题 + + + 例如 块级的帮助文本。 + + +
    +
    + +
    + +

    搜索表单

    + + +
    + +

    内联表单

    +
    + + + + +
    + +
    + +

    水平表单

    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + +
    +
    +
    + +
    + +

    组合框 按钮紧邻输入框

    +
    + + +
    + +
    +

    垂直表单(默认)

    +
    +
    + 表单标题 + + + 例如 块级的帮助文本。 + + +
    +
    + +
    + +

    搜索表单

    + + +
    + +

    内联表单

    +
    + + + + +
    + +
    + +

    水平表单

    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + +
    +
    +
    + +
    + +

    组合框 按钮紧邻输入框

    +
    + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    *用户名:
    *性别: + + +
    *年龄: + + + + + +
    爱好: + + + + +
    *手机号:
    月收入:
    Email:
    留言:
    验证码: 换一张
    + +

    + + + + +

    + +

    + + + + + + + + + + + +

    + +

    综合应用

    +

    实现一个较为复杂的表单布局,这里应用一个dl横向排列的排版样式

    + + +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + + diff --git a/cnDocs/solutions/geolocation.html b/cnDocs/solutions/geolocation.html new file mode 100644 index 000000000000..649f9748c7fe --- /dev/null +++ b/cnDocs/solutions/geolocation.html @@ -0,0 +1,122 @@ + + + + +geolocation 地理定位 + + + + + +
    +

    geolocation 地理定位

    +

    用 js 的方式获取 geolocation。

    + +
    +

    获取地理位置:

    +
    +
    Loading…
    +
    + +
    +
    +使用方法:
    +// 获取数据成功时的回调:successCallback(coords),包含一个参数 coords {Array},经纬度
    +// 获取失败时的回调:errorCallback,包含一个参数 error {String}:错误消息
    +var geo = new Geo(successCallback, errorCallback);
    +
    +
    +// 实例化:
    +var geo = new Geo(function(coords){
    +    alert('Latitude: ' + coords.latitude + '\nLongitude: ' + coords.longitude);
    +}, function(error){
    +    alert('Error Message: ' + error);
    +});
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +

    知识扩展:

    + +
    + + + + + + + + diff --git a/cnDocs/solutions/geolocation.js b/cnDocs/solutions/geolocation.js new file mode 100644 index 000000000000..eba32030c5a9 --- /dev/null +++ b/cnDocs/solutions/geolocation.js @@ -0,0 +1,64 @@ +/* + * @Name: Geolocation + * @Overview: the javascript way to fetch the geolocation + * @Author: sofish Lin + */ + +// TODO: error handler for ie + +function Geo(successCallback, errorCallback) { + + var that = this, + + // native geolocation API + _w3cAPI = navigator.geolocation; + + // get ip-base geolocation + // fallback for the w3c way + function _ipBaseWay(){ + var that = this; + + var doc = document, + script = doc.createElement('script'); + + script.setAttribute('src','http://j.maxmind.com/app/geoip.js'); + doc.body.appendChild(script); + + script.attachEvent('onreadystatechange', function(){ + var target = window.event.srcElement; + if(/loaded|complete/.test(target.readyState)){ + var coords = { + latitude: geoip_latitude(), + longitude: geoip_longitude() + }; + return successCallback.call(that, coords); + } + }); + }; + + // fetch coords using w3c Geoloactions API + function _w3cWay (){ + var that = this; + + _w3cAPI.getCurrentPosition(function(position){ + successCallback.call(that, position.coords); + },function(error){ + var err; + switch (error.code) { + case error.PERMISSION_DENIED: + err = 'You did not share geolocation data!'; break; + case error.POSITION_UNAVAILABLE: + err = 'Could not detect current position!'; break; + case error.TIMEOUT: + err = 'Retrieving position timedout!'; break; + default: + err = 'Unknown error'; + }; + errorCallback.call(that, err); + }); + + }; + + // create the position + !!(_w3cAPI) ? _w3cWay() : _ipBaseWay(); +}; \ No newline at end of file diff --git a/cnDocs/solutions/ie-z-index-bug.html b/cnDocs/solutions/ie-z-index-bug.html new file mode 100644 index 000000000000..beeaa12ba49c --- /dev/null +++ b/cnDocs/solutions/ie-z-index-bug.html @@ -0,0 +1,100 @@ + + + + +IE z-index bug + + + + + +
    +

    IE z-index bug

    +

    两个元素的平等级别祖先元素z-index高的,显示于上面。俗称:后台硬占据最高点。

    +

    在IE6/7浏览器中,定位元素的 z-index 层级是相对于各自的父级容器,所以会导致 z-index 出现 错误的表现 如下。

    +
    +
    +

    #yellow p
    应该是在上面的

    +
    +
    #green
    IE6/7显示在上面,实际上应该在下面
    +
    +
    +HTML:
    +<div id="yellow">
    +    <p>#yellow p<br>应该是在上面的</p>
    +</div>
    +<div id="green">#green<br>IE6/7显示在上面,实际上应该在下面</div>
    +
    +CSS:
    +#yellow{position:relative;top:40px;}
    +#yellow p, #green{width:200px;height:200px;background-color:#9c0;;}
    +#yellow p{position:absolute;background-color:#FF0;z-index:100000;}
    +#green{position:absolute;top:20px;left:150px;z-index:10;}
    +
    +

    这是个拼爹的时代,在IE6/7下很好的体现了这点...囧

    +

    层级高低不仅要看本身,还要看自己的父元素是否给力:父元素的 position 属性为 relative或absolute 时,子元素的 absolute 属性是相对于父元素而言的。而在IE6下的层级的表现有时候不是看子元素的 z-index 多高,而要看它们的父元素的 z-index 谁高谁低。

    +

    也可以这样理解,子元素层级再高也高不过父级的同辈元素(可以高过自己的父辈元素)。

    +

    下面再看一个更详细的例子

    +
    +
    +
    20
    +
    10
    +
    +
    +
    2
    +
    1
    +
    +
    +
    +<div style="position:absolute; background:lightgrey;" class="parent">
    +    <div style="position:absolute;z-index:20;background:darkgray;" class="sub">20</div>
    +    <div style="position:absolute;z-index:10;background:dimgray;" class="sub lt">10</div>
    +</div>
    +<div style="position:absolute;left:80px;top:100px;background:black;" class="parent">
    +    <div style="position:absolute;z-index:2;background:darkgray;" class="sub">2</div>
    +    <div style="position:absolute;z-index:1;background:dimgray;" class="sub lt">1</div>
    +</div>
    +
    + +

    各浏览器下的结果汇总如下:

    + + + + + + + + + + + + + +
    IE6 IE7 IE8(Q)IE8(S) Firefox Safari Chrome
    +

    注:Q代表Quriks Mode,即混杂模式。

    + +

    问题及注意事项:

    +

    在制作当前浮动层覆盖父级同辈元素时,可在 :hover 时,提升当前元素父层的层级。

    + + diff --git a/cnDocs/solutions/iframe-test-content.html b/cnDocs/solutions/iframe-test-content.html new file mode 100644 index 000000000000..ecbadd38e870 --- /dev/null +++ b/cnDocs/solutions/iframe-test-content.html @@ -0,0 +1,14 @@ + + + + +iframe实现半透明测试页面 + + + +

    我其实是一个iframe里的测试内容,你会发现除了内容,我整个都变得透明了

    + + + diff --git a/cnDocs/solutions/iframe.html b/cnDocs/solutions/iframe.html new file mode 100644 index 000000000000..2907ef70e48c --- /dev/null +++ b/cnDocs/solutions/iframe.html @@ -0,0 +1,100 @@ + + + + +iframe 透明 + + + + + +
    +

    iframe 兼容性解决方案

    +
      +
    • 让iframe的背景透明内容不透明
    • +
    • 在父层控制iframe内body的边距为0
    • +
    + +

    如何让iframe的背景透明内容不透明?

    +

    关于flash的透明,可参考flash.html

    +
    +

    iframe背景透明

    + +
    给iframe标记加上allowtransparency属性并设置为true即可以让iframe在IE下透明
    +
    +
    +<iframe src="iframe-test-content.html" allowtransparency="true"></iframe>
    +
    +iframe{
    +    position:relative;
    +    z-index:3;
    +    width:420px;
    +    height:120px;
    +    color:#fff;
    +}
    +
    +

    在父层控制iframe内body的边距为0

    +

    经常在页面中使用iframe引入 百度地图/Google地图,对于远程的页面无法重设其body的边距,导致实现引用盒子之间的间隙问题,如下:

    +
    +

    问题解决前:

    +
    + + +
    + +

    问题解决后:

    +
    + + +
    +

    iframe 标签添加上 marginheight="0" marginwidth="0" 属性即可

    +
    +
    +<iframe src="iframe-test-content.html" allowtransparency="true"></iframe>
    +
    +iframe{
    +    position:relative;
    +    z-index:3;
    +    width:420px;
    +    height:120px;
    +    color:#fff;
    +}
    +
    +

    关于 iframe 自适应高度的问题

    +

    引用不定高度的iframe页面时,会遇到iframe自适应高度的问题,解决方法可参考iframe-auto

    + +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + + + diff --git a/cnDocs/solutions/images/3-leopards.jpg b/cnDocs/solutions/images/3-leopards.jpg new file mode 100644 index 000000000000..fb8a8234ed3f Binary files /dev/null and b/cnDocs/solutions/images/3-leopards.jpg differ diff --git a/cnDocs/solutions/images/beiying.jpg b/cnDocs/solutions/images/beiying.jpg new file mode 100644 index 000000000000..68a39668dc1a Binary files /dev/null and b/cnDocs/solutions/images/beiying.jpg differ diff --git a/cnDocs/solutions/images/column_bg.png b/cnDocs/solutions/images/column_bg.png new file mode 100644 index 000000000000..7158cd6eb4ab Binary files /dev/null and b/cnDocs/solutions/images/column_bg.png differ diff --git a/cnDocs/solutions/images/girl.jpg b/cnDocs/solutions/images/girl.jpg new file mode 100644 index 000000000000..e5154d03c702 Binary files /dev/null and b/cnDocs/solutions/images/girl.jpg differ diff --git a/cnDocs/solutions/images/girl2.jpg b/cnDocs/solutions/images/girl2.jpg new file mode 100644 index 000000000000..c1f37967de1e Binary files /dev/null and b/cnDocs/solutions/images/girl2.jpg differ diff --git a/cnDocs/solutions/images/girl3.jpg b/cnDocs/solutions/images/girl3.jpg new file mode 100644 index 000000000000..154b77db062a Binary files /dev/null and b/cnDocs/solutions/images/girl3.jpg differ diff --git a/cnDocs/solutions/images/girl_400x500_1.jpg b/cnDocs/solutions/images/girl_400x500_1.jpg new file mode 100644 index 000000000000..b339cd603620 Binary files /dev/null and b/cnDocs/solutions/images/girl_400x500_1.jpg differ diff --git a/cnDocs/solutions/images/girl_400x500_2.jpg b/cnDocs/solutions/images/girl_400x500_2.jpg new file mode 100644 index 000000000000..6c04f0c67c53 Binary files /dev/null and b/cnDocs/solutions/images/girl_400x500_2.jpg differ diff --git a/cnDocs/solutions/images/girl_400x500_3.jpg b/cnDocs/solutions/images/girl_400x500_3.jpg new file mode 100644 index 000000000000..44ad5fcabc2b Binary files /dev/null and b/cnDocs/solutions/images/girl_400x500_3.jpg differ diff --git a/cnDocs/solutions/images/girl_400x500_4.jpg b/cnDocs/solutions/images/girl_400x500_4.jpg new file mode 100644 index 000000000000..1fbc9abf2880 Binary files /dev/null and b/cnDocs/solutions/images/girl_400x500_4.jpg differ diff --git a/cnDocs/solutions/images/girl_400x500_5.jpg b/cnDocs/solutions/images/girl_400x500_5.jpg new file mode 100644 index 000000000000..0173f97d4d20 Binary files /dev/null and b/cnDocs/solutions/images/girl_400x500_5.jpg differ diff --git a/cnDocs/solutions/images/girl_400x500_6.jpg b/cnDocs/solutions/images/girl_400x500_6.jpg new file mode 100644 index 000000000000..ea81bca12ae7 Binary files /dev/null and b/cnDocs/solutions/images/girl_400x500_6.jpg differ diff --git a/cnDocs/solutions/images/low_contrast_linen.png b/cnDocs/solutions/images/low_contrast_linen.png new file mode 100644 index 000000000000..17b491efffd1 Binary files /dev/null and b/cnDocs/solutions/images/low_contrast_linen.png differ diff --git a/cnDocs/solutions/images/m1.jpg b/cnDocs/solutions/images/m1.jpg new file mode 100644 index 000000000000..f4919aa0ad29 Binary files /dev/null and b/cnDocs/solutions/images/m1.jpg differ diff --git a/cnDocs/solutions/images/m2.jpg b/cnDocs/solutions/images/m2.jpg new file mode 100644 index 000000000000..e57635e782b5 Binary files /dev/null and b/cnDocs/solutions/images/m2.jpg differ diff --git a/cnDocs/solutions/images/m3.jpg b/cnDocs/solutions/images/m3.jpg new file mode 100644 index 000000000000..de1b4ab0c161 Binary files /dev/null and b/cnDocs/solutions/images/m3.jpg differ diff --git a/cnDocs/solutions/images/m4.jpg b/cnDocs/solutions/images/m4.jpg new file mode 100644 index 000000000000..d833dc45d144 Binary files /dev/null and b/cnDocs/solutions/images/m4.jpg differ diff --git a/cnDocs/solutions/images/m5.jpg b/cnDocs/solutions/images/m5.jpg new file mode 100644 index 000000000000..a87ad7e23988 Binary files /dev/null and b/cnDocs/solutions/images/m5.jpg differ diff --git a/cnDocs/solutions/images/mask_text_bg.png b/cnDocs/solutions/images/mask_text_bg.png new file mode 100644 index 000000000000..eadab470add8 Binary files /dev/null and b/cnDocs/solutions/images/mask_text_bg.png differ diff --git a/cnDocs/solutions/images/mborder.png b/cnDocs/solutions/images/mborder.png new file mode 100644 index 000000000000..965696a739f4 Binary files /dev/null and b/cnDocs/solutions/images/mborder.png differ diff --git a/cnDocs/solutions/images/mini-loading.gif b/cnDocs/solutions/images/mini-loading.gif new file mode 100644 index 000000000000..3c3d1246119d Binary files /dev/null and b/cnDocs/solutions/images/mini-loading.gif differ diff --git a/cnDocs/solutions/images/pencil.jpg b/cnDocs/solutions/images/pencil.jpg new file mode 100644 index 000000000000..1b4c45a1ffc1 Binary files /dev/null and b/cnDocs/solutions/images/pencil.jpg differ diff --git a/cnDocs/solutions/images/pic1.jpg b/cnDocs/solutions/images/pic1.jpg new file mode 100644 index 000000000000..d8118a508582 Binary files /dev/null and b/cnDocs/solutions/images/pic1.jpg differ diff --git a/cnDocs/solutions/images/pic2.jpg b/cnDocs/solutions/images/pic2.jpg new file mode 100644 index 000000000000..c3852e09c6e8 Binary files /dev/null and b/cnDocs/solutions/images/pic2.jpg differ diff --git a/cnDocs/solutions/images/pic3.jpg b/cnDocs/solutions/images/pic3.jpg new file mode 100644 index 000000000000..440b9372345e Binary files /dev/null and b/cnDocs/solutions/images/pic3.jpg differ diff --git a/cnDocs/solutions/images/shahuhu.jpg b/cnDocs/solutions/images/shahuhu.jpg new file mode 100644 index 000000000000..e2bdcd43bc6d Binary files /dev/null and b/cnDocs/solutions/images/shahuhu.jpg differ diff --git a/cnDocs/solutions/images/vector_bg-x.png b/cnDocs/solutions/images/vector_bg-x.png new file mode 100644 index 000000000000..1c5e34f0e17a Binary files /dev/null and b/cnDocs/solutions/images/vector_bg-x.png differ diff --git a/cnDocs/solutions/images/vector_logo.png b/cnDocs/solutions/images/vector_logo.png new file mode 100644 index 000000000000..07e36c81ed87 Binary files /dev/null and b/cnDocs/solutions/images/vector_logo.png differ diff --git a/cnDocs/solutions/ime-disabled.html b/cnDocs/solutions/ime-disabled.html new file mode 100644 index 000000000000..d742dc7e74f7 --- /dev/null +++ b/cnDocs/solutions/ime-disabled.html @@ -0,0 +1,43 @@ + + + + +禁用中文输入 + + + + + +
    +

    强制非中文输入法

    +

    禁用中文输入,应用在非中文输入的地方,让用户不需要切换输入法,提升体验等

    + +
    +

    +

    +

    +
    +
    +<input type="text" placeholder="未禁用中文">
    +<type="text" placeholder="禁用中文输入法" class="ime-disabled">
    +<input type="password" placeholder="默认已经禁用中文输入法">
    +
    +/*
    +  @ 名称: 禁用中文输入法
    +  @ 用法: 
    +    在需要禁用的地方添加: .ime-disabled;
    +*/
    +
    +.ime-disabled{
    +    ime-mode:disabled!important;
    +}
    +
    +

    问题及注意事项:

    +
      +
    • 在 chrome 和 safari 浏览器下,该解决方案失效。
    • +
    • 密码框默认状态已经无法启用中文输入法,不必此设置。
    • +
    +
    + + diff --git a/cnDocs/solutions/img/alert.png b/cnDocs/solutions/img/alert.png new file mode 100644 index 000000000000..7f2e8c27be61 Binary files /dev/null and b/cnDocs/solutions/img/alert.png differ diff --git a/cnDocs/solutions/img/background-clip.jpg b/cnDocs/solutions/img/background-clip.jpg new file mode 100644 index 000000000000..df1b43852ef4 Binary files /dev/null and b/cnDocs/solutions/img/background-clip.jpg differ diff --git a/cnDocs/solutions/img/background-origin.jpg b/cnDocs/solutions/img/background-origin.jpg new file mode 100644 index 000000000000..94f004b9180c Binary files /dev/null and b/cnDocs/solutions/img/background-origin.jpg differ diff --git a/cnDocs/solutions/img/background-size.png b/cnDocs/solutions/img/background-size.png new file mode 100644 index 000000000000..a9767c78fcc5 Binary files /dev/null and b/cnDocs/solutions/img/background-size.png differ diff --git a/cnDocs/solutions/img/border-colors.png b/cnDocs/solutions/img/border-colors.png new file mode 100644 index 000000000000..31e48bedd8d5 Binary files /dev/null and b/cnDocs/solutions/img/border-colors.png differ diff --git a/cnDocs/solutions/img/border.png b/cnDocs/solutions/img/border.png new file mode 100644 index 000000000000..8cec0f33833f Binary files /dev/null and b/cnDocs/solutions/img/border.png differ diff --git a/cnDocs/solutions/img/box-reflect.jpg b/cnDocs/solutions/img/box-reflect.jpg new file mode 100644 index 000000000000..ca024fa5360f Binary files /dev/null and b/cnDocs/solutions/img/box-reflect.jpg differ diff --git a/cnDocs/solutions/img/box-shadow.png b/cnDocs/solutions/img/box-shadow.png new file mode 100644 index 000000000000..9bf73f7b33be Binary files /dev/null and b/cnDocs/solutions/img/box-shadow.png differ diff --git a/cnDocs/solutions/img/button.png b/cnDocs/solutions/img/button.png new file mode 100644 index 000000000000..5fee3a9297a2 Binary files /dev/null and b/cnDocs/solutions/img/button.png differ diff --git a/cnDocs/solutions/img/buttons.png b/cnDocs/solutions/img/buttons.png new file mode 100644 index 000000000000..c09654110728 Binary files /dev/null and b/cnDocs/solutions/img/buttons.png differ diff --git a/cnDocs/solutions/img/center-middle.png b/cnDocs/solutions/img/center-middle.png new file mode 100644 index 000000000000..a13034631ed3 Binary files /dev/null and b/cnDocs/solutions/img/center-middle.png differ diff --git a/cnDocs/solutions/img/clear-float.png b/cnDocs/solutions/img/clear-float.png new file mode 100644 index 000000000000..db0ee494eb5d Binary files /dev/null and b/cnDocs/solutions/img/clear-float.png differ diff --git a/cnDocs/solutions/img/clipboard.png b/cnDocs/solutions/img/clipboard.png new file mode 100644 index 000000000000..92f3209709ec Binary files /dev/null and b/cnDocs/solutions/img/clipboard.png differ diff --git a/cnDocs/solutions/img/css3-box-shadow.jpg b/cnDocs/solutions/img/css3-box-shadow.jpg new file mode 100644 index 000000000000..6f0838ab12c0 Binary files /dev/null and b/cnDocs/solutions/img/css3-box-shadow.jpg differ diff --git a/cnDocs/solutions/img/css3-stroke-gradient-text.jpg b/cnDocs/solutions/img/css3-stroke-gradient-text.jpg new file mode 100644 index 000000000000..72866dd683b7 Binary files /dev/null and b/cnDocs/solutions/img/css3-stroke-gradient-text.jpg differ diff --git a/cnDocs/solutions/img/custom-cursor.jpg b/cnDocs/solutions/img/custom-cursor.jpg new file mode 100644 index 000000000000..fdcdd87e947b Binary files /dev/null and b/cnDocs/solutions/img/custom-cursor.jpg differ diff --git a/cnDocs/solutions/img/default.png b/cnDocs/solutions/img/default.png new file mode 100644 index 000000000000..f97851409e8e Binary files /dev/null and b/cnDocs/solutions/img/default.png differ diff --git a/cnDocs/solutions/img/default.psd b/cnDocs/solutions/img/default.psd new file mode 100644 index 000000000000..addda2461c86 Binary files /dev/null and b/cnDocs/solutions/img/default.psd differ diff --git a/cnDocs/solutions/img/double-border.png b/cnDocs/solutions/img/double-border.png new file mode 100644 index 000000000000..2d316ddf5939 Binary files /dev/null and b/cnDocs/solutions/img/double-border.png differ diff --git a/cnDocs/solutions/img/favicon.ico b/cnDocs/solutions/img/favicon.ico new file mode 100644 index 000000000000..aa9ce930bc8f Binary files /dev/null and b/cnDocs/solutions/img/favicon.ico differ diff --git a/cnDocs/solutions/img/flash.png b/cnDocs/solutions/img/flash.png new file mode 100644 index 000000000000..ff875fa68777 Binary files /dev/null and b/cnDocs/solutions/img/flash.png differ diff --git a/cnDocs/solutions/img/flash.swf b/cnDocs/solutions/img/flash.swf new file mode 100644 index 000000000000..5f688b0e23ae Binary files /dev/null and b/cnDocs/solutions/img/flash.swf differ diff --git a/cnDocs/solutions/img/float-center.png b/cnDocs/solutions/img/float-center.png new file mode 100644 index 000000000000..38aa610664e4 Binary files /dev/null and b/cnDocs/solutions/img/float-center.png differ diff --git a/cnDocs/solutions/img/font-face.jpg b/cnDocs/solutions/img/font-face.jpg new file mode 100644 index 000000000000..90d84ede73b1 Binary files /dev/null and b/cnDocs/solutions/img/font-face.jpg differ diff --git a/cnDocs/solutions/img/forms.png b/cnDocs/solutions/img/forms.png new file mode 100644 index 000000000000..90330f8dc57b Binary files /dev/null and b/cnDocs/solutions/img/forms.png differ diff --git a/cnDocs/solutions/img/icon-alert.png b/cnDocs/solutions/img/icon-alert.png new file mode 100644 index 000000000000..da157c97c7ec Binary files /dev/null and b/cnDocs/solutions/img/icon-alert.png differ diff --git a/cnDocs/solutions/img/icon-alert.psd b/cnDocs/solutions/img/icon-alert.psd new file mode 100644 index 000000000000..f73e7317e7be Binary files /dev/null and b/cnDocs/solutions/img/icon-alert.psd differ diff --git a/cnDocs/solutions/img/iframe-transparent.png b/cnDocs/solutions/img/iframe-transparent.png new file mode 100644 index 000000000000..a90b464e1040 Binary files /dev/null and b/cnDocs/solutions/img/iframe-transparent.png differ diff --git a/cnDocs/solutions/img/iframe.png b/cnDocs/solutions/img/iframe.png new file mode 100644 index 000000000000..8e623f96e4b0 Binary files /dev/null and b/cnDocs/solutions/img/iframe.png differ diff --git a/cnDocs/solutions/img/ime.png b/cnDocs/solutions/img/ime.png new file mode 100644 index 000000000000..7a0c746d859e Binary files /dev/null and b/cnDocs/solutions/img/ime.png differ diff --git a/cnDocs/solutions/img/info-icon.png b/cnDocs/solutions/img/info-icon.png new file mode 100644 index 000000000000..3f2518ce9ee6 Binary files /dev/null and b/cnDocs/solutions/img/info-icon.png differ diff --git a/cnDocs/solutions/img/layout.png b/cnDocs/solutions/img/layout.png new file mode 100644 index 000000000000..81b2b1a47649 Binary files /dev/null and b/cnDocs/solutions/img/layout.png differ diff --git a/cnDocs/solutions/img/light.png b/cnDocs/solutions/img/light.png new file mode 100644 index 000000000000..475439402af6 Binary files /dev/null and b/cnDocs/solutions/img/light.png differ diff --git a/cnDocs/solutions/img/linear-gradient.png b/cnDocs/solutions/img/linear-gradient.png new file mode 100644 index 000000000000..04d80ced7bfa Binary files /dev/null and b/cnDocs/solutions/img/linear-gradient.png differ diff --git a/cnDocs/solutions/img/localStorage.png b/cnDocs/solutions/img/localStorage.png new file mode 100644 index 000000000000..e40722d01b68 Binary files /dev/null and b/cnDocs/solutions/img/localStorage.png differ diff --git a/cnDocs/solutions/img/margin-usage.png b/cnDocs/solutions/img/margin-usage.png new file mode 100644 index 000000000000..781d997cc45d Binary files /dev/null and b/cnDocs/solutions/img/margin-usage.png differ diff --git a/cnDocs/solutions/img/min-max.png b/cnDocs/solutions/img/min-max.png new file mode 100644 index 000000000000..b2c23593ebeb Binary files /dev/null and b/cnDocs/solutions/img/min-max.png differ diff --git a/cnDocs/solutions/img/nth-child(n).png b/cnDocs/solutions/img/nth-child(n).png new file mode 100644 index 000000000000..361e6b711cca Binary files /dev/null and b/cnDocs/solutions/img/nth-child(n).png differ diff --git a/cnDocs/solutions/img/outline.png b/cnDocs/solutions/img/outline.png new file mode 100644 index 000000000000..6af21b0a54fb Binary files /dev/null and b/cnDocs/solutions/img/outline.png differ diff --git a/cnDocs/solutions/img/pages.png b/cnDocs/solutions/img/pages.png new file mode 100644 index 000000000000..1ea5430e58d1 Binary files /dev/null and b/cnDocs/solutions/img/pages.png differ diff --git a/cnDocs/solutions/img/placeholder.png b/cnDocs/solutions/img/placeholder.png new file mode 100644 index 000000000000..9798ed037dd2 Binary files /dev/null and b/cnDocs/solutions/img/placeholder.png differ diff --git a/cnDocs/solutions/img/png24.png b/cnDocs/solutions/img/png24.png new file mode 100644 index 000000000000..5963a64cd446 Binary files /dev/null and b/cnDocs/solutions/img/png24.png differ diff --git a/cnDocs/solutions/img/png8_aphla.png b/cnDocs/solutions/img/png8_aphla.png new file mode 100644 index 000000000000..ddd06778a53a Binary files /dev/null and b/cnDocs/solutions/img/png8_aphla.png differ diff --git a/cnDocs/solutions/img/pngfix.png b/cnDocs/solutions/img/pngfix.png new file mode 100644 index 000000000000..427141f67423 Binary files /dev/null and b/cnDocs/solutions/img/pngfix.png differ diff --git a/cnDocs/solutions/img/position-fixed.png b/cnDocs/solutions/img/position-fixed.png new file mode 100644 index 000000000000..0416a16786db Binary files /dev/null and b/cnDocs/solutions/img/position-fixed.png differ diff --git a/cnDocs/solutions/img/print.jpg b/cnDocs/solutions/img/print.jpg new file mode 100644 index 000000000000..3bdd1e50b7db Binary files /dev/null and b/cnDocs/solutions/img/print.jpg differ diff --git a/cnDocs/solutions/img/printer.png b/cnDocs/solutions/img/printer.png new file mode 100644 index 000000000000..d77290006653 Binary files /dev/null and b/cnDocs/solutions/img/printer.png differ diff --git a/cnDocs/solutions/img/prompt.png b/cnDocs/solutions/img/prompt.png new file mode 100644 index 000000000000..8043fd1a8358 Binary files /dev/null and b/cnDocs/solutions/img/prompt.png differ diff --git a/cnDocs/solutions/img/radius-1px-box.png b/cnDocs/solutions/img/radius-1px-box.png new file mode 100644 index 000000000000..f85075f26ae8 Binary files /dev/null and b/cnDocs/solutions/img/radius-1px-box.png differ diff --git a/cnDocs/solutions/img/rgba-opacity.png b/cnDocs/solutions/img/rgba-opacity.png new file mode 100644 index 000000000000..a53edf12413b Binary files /dev/null and b/cnDocs/solutions/img/rgba-opacity.png differ diff --git a/cnDocs/solutions/img/rotate.png b/cnDocs/solutions/img/rotate.png new file mode 100644 index 000000000000..784f69b79e1e Binary files /dev/null and b/cnDocs/solutions/img/rotate.png differ diff --git a/cnDocs/solutions/img/select-mask.png b/cnDocs/solutions/img/select-mask.png new file mode 100644 index 000000000000..b6c40e8a7d92 Binary files /dev/null and b/cnDocs/solutions/img/select-mask.png differ diff --git a/cnDocs/solutions/img/table.png b/cnDocs/solutions/img/table.png new file mode 100644 index 000000000000..27e9e04551fb Binary files /dev/null and b/cnDocs/solutions/img/table.png differ diff --git a/cnDocs/solutions/img/tables.png b/cnDocs/solutions/img/tables.png new file mode 100644 index 000000000000..32b14c8c1c6e Binary files /dev/null and b/cnDocs/solutions/img/tables.png differ diff --git a/cnDocs/solutions/img/text-align-justify.png b/cnDocs/solutions/img/text-align-justify.png new file mode 100644 index 000000000000..f6c5889f6e5f Binary files /dev/null and b/cnDocs/solutions/img/text-align-justify.png differ diff --git a/cnDocs/solutions/img/text-fill-color.jpg b/cnDocs/solutions/img/text-fill-color.jpg new file mode 100644 index 000000000000..53f426372c32 Binary files /dev/null and b/cnDocs/solutions/img/text-fill-color.jpg differ diff --git a/cnDocs/solutions/img/text-fill-color.png b/cnDocs/solutions/img/text-fill-color.png new file mode 100644 index 000000000000..f715adaf9286 Binary files /dev/null and b/cnDocs/solutions/img/text-fill-color.png differ diff --git a/cnDocs/solutions/img/text-shadow.png b/cnDocs/solutions/img/text-shadow.png new file mode 100644 index 000000000000..8b7fdca3bcf7 Binary files /dev/null and b/cnDocs/solutions/img/text-shadow.png differ diff --git a/cnDocs/solutions/img/text-stroke.png b/cnDocs/solutions/img/text-stroke.png new file mode 100644 index 000000000000..5df2f8a3c6ba Binary files /dev/null and b/cnDocs/solutions/img/text-stroke.png differ diff --git a/cnDocs/solutions/img/textarea.png b/cnDocs/solutions/img/textarea.png new file mode 100644 index 000000000000..5bf711836513 Binary files /dev/null and b/cnDocs/solutions/img/textarea.png differ diff --git a/cnDocs/solutions/img/tooltip.png b/cnDocs/solutions/img/tooltip.png new file mode 100644 index 000000000000..fd3d93970aa0 Binary files /dev/null and b/cnDocs/solutions/img/tooltip.png differ diff --git a/cnDocs/solutions/img/two-layout.png b/cnDocs/solutions/img/two-layout.png new file mode 100644 index 000000000000..814d75c49831 Binary files /dev/null and b/cnDocs/solutions/img/two-layout.png differ diff --git a/cnDocs/solutions/img/typo.png b/cnDocs/solutions/img/typo.png new file mode 100644 index 000000000000..19a04ad8f7e9 Binary files /dev/null and b/cnDocs/solutions/img/typo.png differ diff --git a/cnDocs/solutions/img/upload.png b/cnDocs/solutions/img/upload.png new file mode 100644 index 000000000000..0de37164d28d Binary files /dev/null and b/cnDocs/solutions/img/upload.png differ diff --git a/cnDocs/solutions/img/vertical-text.png b/cnDocs/solutions/img/vertical-text.png new file mode 100644 index 000000000000..4cb0824ee1aa Binary files /dev/null and b/cnDocs/solutions/img/vertical-text.png differ diff --git a/cnDocs/solutions/img/white-space.png b/cnDocs/solutions/img/white-space.png new file mode 100644 index 000000000000..9c7666f93439 Binary files /dev/null and b/cnDocs/solutions/img/white-space.png differ diff --git a/cnDocs/solutions/img/z-index-ie67.png b/cnDocs/solutions/img/z-index-ie67.png new file mode 100644 index 000000000000..a2ba7bd71db6 Binary files /dev/null and b/cnDocs/solutions/img/z-index-ie67.png differ diff --git a/cnDocs/solutions/img/z-index-s.png b/cnDocs/solutions/img/z-index-s.png new file mode 100644 index 000000000000..fa16fb486cc8 Binary files /dev/null and b/cnDocs/solutions/img/z-index-s.png differ diff --git a/cnDocs/solutions/img/z-index.png b/cnDocs/solutions/img/z-index.png new file mode 100644 index 000000000000..43fba8b9a240 Binary files /dev/null and b/cnDocs/solutions/img/z-index.png differ diff --git a/cnDocs/solutions/js/placeholder.js b/cnDocs/solutions/js/placeholder.js new file mode 100644 index 000000000000..0ac16b25c185 --- /dev/null +++ b/cnDocs/solutions/js/placeholder.js @@ -0,0 +1,60 @@ +/*! http://www.tcreator.info/cnbootstrap/cndocs/solutions/placeholder.html/placeholder v1.0 by @sofish */ +// placeholder ������չ ԭ��JS��չ���� +window.onload = function(){ + var doc = document, + inputs = doc.getElementsByTagName('input'), + + // ��� placeholder ֧�� + supportPlaceholder = 'placeholder' in doc.createElement('input'), + supportPlaceholdertextarea = 'placeholder' in doc.createElement('textarea'), + +/* + * ���� placeholder + * @param {ELEMENT} input ����� input ���� + * @return {VOID} + * @author: sofish Lin http://sofish.de + */ + placeholder = function(input){ + var text = input.getAttribute('placeholder'), + defaultValue = input.defaultValue; + if(input.value=="" || input.value==text){ + // ����һ���� placeholder + // ��Ҫ css ��ϣ��� JS ������ style ����̫�� + input.value=text; + // input.style.color = 'gray'; + input.className = 'placeholder'; + } + + // �۽�ȥ���� placeholder + input.onfocus = function(){ + if(input.value === text){ + this.value = ''; + // this.style.color = ''; + input.className = ''; + } + } + + // ��ʧ��ֵΪ��ʱ������ placeholder ��ֵ + input.onblur = function(){ + if(input.value === ''){ + // input.style.color = 'gray'; + input.className = 'placeholder'; + this.value = text; + } + } + input.onkeydown = function(){ + this.style.color = ''; + } + }; + + if(!supportPlaceholder){ + for(var i = 0, len = inputs.length; i < len; i++){ + var input = inputs[i], text = input.getAttribute('placeholder'); + + // �� input[type=text] ���� placeholder ֵ��Ϊ����ִ�� + if(input.type === 'text' && text){ + placeholder(input); + } + } + } +}; diff --git a/cnDocs/solutions/linear-gradient.html b/cnDocs/solutions/linear-gradient.html new file mode 100644 index 000000000000..9ad74db485f5 --- /dev/null +++ b/cnDocs/solutions/linear-gradient.html @@ -0,0 +1,199 @@ + + + + +跨浏览器线性渐变 + + + + + +
    +

    跨浏览器线性渐变

    +

    代码不好看,但兼容所有A-Grade浏览器

    + + +
    +

    + + button + +

    +
    +
    + 花开了,会有凋谢的一天;星星是璀璨的,也会有消失光芒的一天。这个地球,太阳,这个银河系,甚至连整个宇宙,都有死亡的时候。人的一生和这些相比,不过是一眨眼那么短暂而已。就在那样一个瞬间,人们诞生、欢笑、流泪、战斗、受伤、欢喜、悲伤……憎恨某人,爱上某人,一切的一切,都只是刹那间的邂逅。终究将归入死的永眠。 +
    +
    + + +
    test
    +
    test2
    +
    test3
    +
    test4
    +
    +
    +.linearbox{
    +    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dddddd));
    +    background: -moz-linear-gradient(top,  #fff,  #dddddd);
    +    background: -ms-linear-gradient(top, #ffffff,  #e3e3e3);
    +    background: -o-linear-gradient(top, #fff, #dddddd);
    +    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd');
    +    background: linear-gradient( #fff, #dddddd);
    +    /* 原 background: linear-gradient(top, #fff, #dddddd);的写法(添加top)不被浏览器支持 */
    +}
    +
    +.test{
    +    background:-moz-linear-gradient(#fff,#333);
    +    background:-webkit-gradient(linear,center top,center bottom,from(#fff),to(#333));
    +    background:-webkit-linear-gradient(#fff,#333);
    +    background:-o-linear-gradient(#fff,#333);
    +    background:-ms-linear-gradient(#fff,#333);
    +    background:linear-gradient(#fff,#333);
    +}
    +
    +.test2{
    +    background:-moz-linear-gradient(#000,#f00 50%,#090);
    +    background:-webkit-gradient(linear,center top,center bottom,from(#000),color-stop(.5,#f00),to(#090));
    +    background:-webkit-linear-gradient(#000,#f00 50%,#090);
    +    background:-o-linear-gradient(#000,#f00 50%,#090);
    +    background:-ms-linear-gradient(#000,#f00 50%,#090);
    +    background:linear-gradient(#000,#f00 50%,#090);
    +}
    +
    +.test3{
    +    background:-moz-linear-gradient(left center,#000 20%,#f00 50%,#090 80%);
    +    background:-webkit-gradient(linear,left center,right center,color-stop(.2,#000),color-stop(.5,#f00),color-stop(.8,#090));
    +    background:-webkit-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
    +    background:-o-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
    +    background:-ms-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
    +    background:linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
    +}
    +
    +.test4{
    +    background:-moz-linear-gradient(45deg,#000,#f00 50%,#090);
    +    background:-webkit-gradient(linear,left bottom,right top,from(#000),color-stop(.5,#f00),to(#090));
    +    background:-webkit-linear-gradient(45deg,#000,#f00 50%,#090);
    +    background:-o-linear-gradient(45deg,#000,#f00 50%,#090);
    +    background:-ms-linear-gradient(45deg,#000,#f00 50%,#090);
    +    background:linear-gradient(45deg,#000,#f00 50%,#090);
    +}
    +
    +
    +
    + +

    问题及注意事项:

    +
      +
    • 没有现成的 class 提供样式 | 记得 ie 的 color 要写全6位,不然显示不正常
    • +
    • Sass版中使用: @include background(linear-gradient(top, #fff, #dddddd)); Demo
    • +
    • Demo 引用了1px圆角,在实际项目中只能使用二梯度二色线性渐变,多梯度渐变请暂时不要使用。 + +
    • +
    + +

    A-Grade是什么?

    +

    A级浏览器A-Grade browsers是YUI对浏览器的一个等级划分。

    +
      +
    • A级浏览器是完整支持并测试过的,所有的Yahoo应用程序都要保证能在这些浏览器上工作。
    • +
    • X浏览器是Yahoo已知的A级浏览器,但尚未有能力对其充分测试,或一个以前未曾出现过的新浏览器。给X级浏览器提供的内容是和A级一样的,希望他们能处理好这些比较高级(复杂)的内容。
    • +
    • C浏览器通常称作”不好”的浏览器,他们不支持哪些运行Yahoo应用程序必须的特性,给这些浏览器提供的功能性应用程序内容应该不包含JavaScript,因为Yahoo的应用程序都是完全分离的(即在不含JavaScript的情形下仍能工作)。
    • +
    +

    关于浏览器等级划分,查看Yahoo Yui 官网信息

    + +
    + + + + + + diff --git a/cnDocs/solutions/localStorage.html b/cnDocs/solutions/localStorage.html new file mode 100644 index 000000000000..66a37d2a7898 --- /dev/null +++ b/cnDocs/solutions/localStorage.html @@ -0,0 +1,391 @@ + + + + +跨浏览器文本存储 localStorage + + + + + +
    +

    跨浏览器文本存储 localStorage

    +

    用法:与 HTML5 的 localStorage 一致

    + +

    浏览器本地存储测试Demo1:实现计数器

    +
    +

    + +

    +
    +
    +<script>
    +localStorage.lastname="Smith";
    +document.write(localStorage.lastname);
    +if (localStorage.pagecount){
    +    localStorage.pagecount=Number(localStorage.pagecount) +1;
    +}else{
    +    localStorage.pagecount=1;
    +};
    +document.write(" Visits: " + localStorage.pagecount + " time(s).");
    +</script>
    +
    +

    刷新页面会看到计数器在增长。(放在域名下才起效,localhost也可以)
    + 请关闭浏览器窗口,然后再试一次,计数器会继续计数。
    + localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

    +

    在客户端存储数据

    +

    HTML5 提供了两种在客户端存储数据的新方法:

    +
      +
    • localStorage - 没有时间限制的数据存储
    • +
    • sessionStorage - 针对一个 session 的数据存储
    • +
    +

    之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

    +

    在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

    +

    对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

    +

    HTML5 使用 JavaScript 来存储和访问数据。

    + +

    浏览器本地存储测试Demo2:暂有问题,请移步Demo3

    +
    +

    Press the SUBMIT button to store the value,
    + or press the RESTORE button to restore the stored value,
    + and press the CLEAR button to clear the localStorage data. +

    +

    + + + + + +

    此处暂未设置函数调用,功能暂不可用,效果实质同Demo3.

    +
    +
    +<script>
    +//demo2 by sofish
    +typeof window.localStorage == 'undefined' && ~function () {
    +    
    +    var localStorage = window.localStorage = {},
    +        prefix = 'data-userdata',
    +        doc = document,
    +        attrSrc = doc.body,
    +        
    +        // save attributeNames to <body>'s `data-userdata` attribute
    +        mark = function (key, isRemove, temp, reg) {
    +            
    +            attrSrc.load(prefix);
    +            temp = attrSrc.getAttribute(prefix) || '';
    +            reg = RegExp('\\b' + key + '\\b,?', 'i');
    +            
    +            var hasKey = reg.test(temp) ? 1 : 0;
    +            
    +            temp = isRemove ? temp.replace(reg, '') : hasKey ? temp : temp === '' ? key : temp.split(',').concat(key).join(',');
    +            
    +            alert(temp);
    +            
    +            attrSrc.setAttribute(prefix, temp);
    +            attrSrc.save(prefix);
    +        
    +        };
    +    
    +    // add IE behavior support
    +    attrSrc.addBehavior('#default#userData');
    +    
    +    localStorage.getItem = function (key) {
    +        attrSrc.load(key);
    +        return attrSrc.getAttribute(key);
    +    };
    +    
    +    localStorage.setItem = function (key, value) {
    +        attrSrc.setAttribute(key, value);
    +        attrSrc.save(key);
    +        mark(key);
    +    };
    +    
    +    localStorage.removeItem = function (key) {
    +        attrSrc.removeAttribute(key);
    +        attrSrc.save(key);
    +        mark(key, 1);
    +    };
    +    
    +    // clear all attributes on <body> tag that using for textStorage 
    +    // and clearing them from the 
    +    // 'data-userdata' attribute's value of <body> tag
    +    localStorage.clear = function () {
    +        
    +        attrSrc.load(prefix);
    +        
    +        var attrs = attrSrc.getAttribute(prefix).split(','),
    +            len = attrs.length;
    +        
    +        if (attrs[0] === '') return;
    +        
    +        for (var i = 0; i < len; i++) {
    +            attrSrc.removeAttribute(attrs[i]);
    +            attrSrc.save(attrs[i]);
    +        };
    +        
    +        attrSrc.setAttribute(prefix, '');
    +        attrSrc.save(prefix);
    +    
    +    };
    +    
    +}();
    +</script>
    +
    +

    问题及注意事项:

    +

    放在域名下才起效,localhost也可以

    +
      +
    • 获取 key 的值:localStorage.getItem('key');
    • +
    • 设定一个 key 的值:localStorage.setItem('key', 'value');
    • +
    • 删除一个存储的文本:localStorage.removeItem('key');
    • +
    +

    原理:

    +

    在支持 localStorage 的浏览器中直接使用 localStroage 的 API, 在不支持的 IE6 ~ IE7 中使用 USERDATA 来实现。具体参见源代码。

    +

    更多详情:HTML5 LocalStorage 本地存储

    + +

    浏览器本地存储测试Demo3:

    +
    +

    + + + + +

    + +
    +
    +<script>
    +//demo3 by Martin Angelov
    +var Storage = function(win, doc){
    +    var hasSupport = true,
    +        store = win.localStorage,
    +        STORE_NAME = 'localstorage',
    +        obj,
    +        support = function (){ return hasSupport },
    +        error = function(){ throw new Error("don't support localStorage") };
    +        
    +    if (store && store.getItem){
    +        obj = {
    +            set : function(key, value){
    +                return store.setItem(key, value);
    +            },
    +            get : function(key){
    +                return store.getItem(key);
    +            },
    +            del : function(key){
    +                return store.removeItem(key);
    +            }
    +        };
    +    }else{
    +        store = doc.documentElement;
    +        try{
    +            store.addBehavior('#default#userdata');
    +            store.save(STORE_NAME);
    +        }catch(e){
    +            hasSupport = false;
    +        }
    +        if (hasSupport){
    +            obj = {
    +                set : function(key, value){
    +                    store.setAttribute(key, value);
    +                    store.save(STORE_NAME);
    +                },
    +                get : function(key){
    +                    store.load(STORE_NAME);
    +                    return store.getAttribute(key);
    +                },
    +                del : function(key){
    +                    store.removeAttribute(key);
    +                    store.save(STORE_NAME);
    +                }
    +            };
    +        	
    +        }
    +    }
    +    if (!obj){
    +        obj = {
    +            set:error,
    +            get:error,
    +            del:error
    +        };
    +    }
    +    obj.support = support;
    +    return obj;
    +}(window, document);
    +
    +/* example */
    +function load(){
    +    document.getElementById('txt').value = Storage.get('text');
    +}
    +function save(){
    +    var data = document.getElementById('txt').value;
    +    Storage.set('text', data);
    +}
    +function del(){
    +    Storage.del('text');
    +}
    +</script>
    +
    +
    + + + + + + + + diff --git a/cnDocs/solutions/m.html b/cnDocs/solutions/m.html new file mode 100644 index 000000000000..8a0c562f5b67 --- /dev/null +++ b/cnDocs/solutions/m.html @@ -0,0 +1,36 @@ + + + + +解决方案标题 + + + + + +
    +

    这是模版

    +

    解决方案描述

    + +
    + 这是案例展示 + +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + + + diff --git a/cnDocs/solutions/margin-usage.html b/cnDocs/solutions/margin-usage.html new file mode 100644 index 000000000000..d22a76de0b90 --- /dev/null +++ b/cnDocs/solutions/margin-usage.html @@ -0,0 +1,71 @@ + + + + +妙用margin负边距 + + + + + + +
    +

    妙用margin负边距

    +

    使用好margin负边距,可以巧妙的实现布局效果;全兼容,无烦恼

    + +
    +
    + +
    +
    +

    构思一下上面的效果图,怎么布局实现方便?

    +
    + 效果展示如上: + +
    +
    +核心代码:
    +
    +/* 左侧非对称平铺 */
    +#header,.topbg{background:url(images/bg-x.png) left 0 repeat-x;}
    +#header{ border-top:1px solid #ce1526;height:33px; border-bottom:1px solid #343434;position: relative;}
    +.topbg{ height:50px; width:50%; position:absolute;top:0; margin-left:-480px; z-index:5;}
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + diff --git a/cnDocs/solutions/mfile.html b/cnDocs/solutions/mfile.html new file mode 100644 index 000000000000..09ab822fc232 --- /dev/null +++ b/cnDocs/solutions/mfile.html @@ -0,0 +1,36 @@ + + + + +解决方案标题 + + + + + +
    +

    这是模版

    +

    解决方案描述

    + +
    + 这是案例展示 + +
    +
    +
    +
    +

    问题及注意事项:

    +

    这是描述

    + +
    + + + + + + diff --git a/cnDocs/solutions/min-max.html b/cnDocs/solutions/min-max.html new file mode 100644 index 000000000000..4c8c49de81e7 --- /dev/null +++ b/cnDocs/solutions/min-max.html @@ -0,0 +1,50 @@ + + + + +IE6 min/max height/width + + + + + +
    +

    IE6 min/max height/width

    +

    方法:这个东西还是用JS解决吧,除 min-height,CSS 方法还不是那靠谱:

    + +
    +
    +

    花开了,会有凋谢的一天;星星是璀璨的,也会有消失光芒的一天。这个地球,太阳,这个银河系,甚至连整个宇宙,都有死亡的时候。人的一生和这些相比,不过是一眨眼那么短暂而已。就在那样一个瞬间,人们诞生、欢笑、流泪、战斗、受伤、欢喜、悲伤……憎恨某人,爱上某人,一切的一切,都只是刹那间的邂逅。终究将归入死的永眠。 +

    +
    +
    +/* min-height */
    +.min-height:200px;height:auto;
    +_height:200px; /* hack for ie6 */
    +
    +// max-height
    +function setMaxHeight(elementId, height){
    +    var container = document.getElementById(elementId);
    +    container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
    +}
    +
    +// min Width
    +function setMinWidth(elementId, width){
    +    var container = document.getElementById(elementId);
    +    container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
    +} 
    +
    +// max Width
    +function setMaxWidth(elementId, width){
    +    var container = document.getElementById(elementId);
    +    container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
    +} 
    +
    +

    问题及注意事项:

    +

    同方法描述

    + +
    + + diff --git a/cnDocs/solutions/pages.html b/cnDocs/solutions/pages.html new file mode 100644 index 000000000000..f8bf763a283a --- /dev/null +++ b/cnDocs/solutions/pages.html @@ -0,0 +1,136 @@ + + + + +页码组件 + + + + + + +
    +

    页码组件

    +

    常用页面组件样式

    + +
    + +

    分页组件

    +

    此分页组件在驴妈妈已开发页码代码基础上优化,实现了两种需求的样式,默认为玫红色

    + + + + + + + + + +

    升级版

    +

    此设置默认为橙色,文字右对齐

    +
    +
    上一页1下一页
    +
    + + + + +
    +
    上一页1下一页
    +
    + + + +
    +
    +<div class="pages rosestyle">
    +    <div class="Pages">
    +        <span class="PrevPage">上一页</span>
    +        <span class="PageSel">1</span>
    +        <span class="NextPage">下一页</span>
    +    </div>
    +</div>
    +
    +<div class="pages orangestyle">
    +    <div class="Pages">
    +        <a class="PrevPage" href="#">上一页</a>
    +        <a href="#">1</agt;<span class="PageSel">2</span>
    +        <a href="#">3</a>
    +        <a href="#">4</a>
    +        <a href="#">5</a>
    +        <a href="#">6</a>
    +        <span class="PageMore">...</span>
    +        <a href="#">20</a>
    +        <a class="NextPage" href="#">下一页</a>
    +    </div>
    +</div>
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/placeholder.html b/cnDocs/solutions/placeholder.html new file mode 100644 index 000000000000..014c5a8a429f --- /dev/null +++ b/cnDocs/solutions/placeholder.html @@ -0,0 +1,258 @@ + + + + +跨浏览器 HTML5 Placeholder + + + + + + + +
    +

    跨浏览器 HTML5 Placeholder

    +

    跟 HTML5 的使用方法一样。在 input 中添加属性 placeholder:(摘自sofish的AliceUI项目)

    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +   + +
    +
    +

    +

    关于placeholder文字的颜色

    +

    火狐和webkit内核浏览器可以直接通过css来控制,分别为:-moz-placeholder和::-webkit-input-placeholder,调用这个js之后,会给不支持placeholder的加上placeholder这个class,所以整合起来就是:

    +
    +Css Code
    +:-moz-placeholder,
    +::-webkit-input-placeholder {
    +  color: #bfbfbf;
    +}
    +.placeholder{
    +	color: #bfbfbf;
    +}
    +:-webkit-autofill {
    +    background:#fff;
    +}
    +
    +
    +

    注:请注意不要把这两个样式写在一起,如果集体声明ie8,9将不能正确解析.placeholder的样式。有点奇怪

    +
    +
    + + + +
    +
    +<input placeholder="提示文字">
    +<input type="text" placeholder="邮箱/手机号/用户名">
    +<input type="password" placeholder="请输入密码">
    +
    +JavaScript辅助:
    +<script>
    +// placeholder 功能扩展
    +window.onload = function(){
    +    var doc = document,
    +    inputs = doc.getElementsByTagName('input'),
    +	
    +    // 检测 placeholder 支持
    +    supportPlaceholder = 'placeholder' in doc.createElement('input'),
    +    supportPlaceholdertextarea = 'placeholder' in doc.createElement('textarea'),
    +	
    +/* 
    + * 创建 placeholder
    + * @param {ELEMENT} input 传入的 input 对象
    + * @return {VOID}
    + * @author: sofish Lin http://sofish.de
    + */
    +    placeholder = function(input){
    +        var text = input.getAttribute('placeholder'),
    +            defaultValue = input.defaultValue;
    +        if(input.value=="" || input.value==text){
    +            // 制作一个假 placeholder
    +            // 需要 css 配合,在 JS 中设置 style 并不太好
    +            input.value=text;
    +            // input.style.color = 'gray';
    +            input.className = 'placeholder';
    +        }
    +        
    +        // 聚焦去掉假 placeholder
    +        input.onfocus = function(){
    +            if(input.value === text){
    +                this.value = '';
    +                // this.style.color = '';
    +                input.className = '';
    +            }
    +        }
    +        
    +        // 当失焦值为空时,补回 placeholder 的值
    +        input.onblur = function(){
    +            if(input.value === ''){
    +                // input.style.color = 'gray';
    +                input.className = 'placeholder';
    +                this.value = text;
    +            }
    +        }
    +        input.onkeydown = function(){
    +            this.style.color = '';
    +        }
    +    };
    +	
    +    if(!supportPlaceholder){
    +    	for(var i = 0, len = inputs.length; i < len; i++){
    +    	    var input = inputs[i], text = input.getAttribute('placeholder');
    +    	    
    +    	    // 当 input[type=text] 并且 placeholder 值不为空是执行
    +    	    if(input.type === 'text' && text){
    +    	    	placeholder(input);
    +    	    }
    +    	}    
    +    }
    +};
    +
    +</script>
    +
    +

    问题及注意事项:

    +

    对不支持 placeholder 属性的浏览器通过JS进行辅助支持。

    +

    注:Sass版中,提供了 placeholder($color) mixin,方便设置placeholder的文本色

    +
    + + + + + diff --git a/cnDocs/solutions/plugin.css b/cnDocs/solutions/plugin.css new file mode 100644 index 000000000000..6506a16e06d2 --- /dev/null +++ b/cnDocs/solutions/plugin.css @@ -0,0 +1,593 @@ +@charset "utf-8"; +/*! + * plugin style +**/ + + +/* ------------------------------------------------------------ + ui-components v1.0 + Create: 2012-09-14 + Last Updated: 2013-01-18 + Author: Cloudyan + Contact: qqGroup:187260298 1395093509@qq.com + Description: 包含最常用且基本的组件(不要轻易修改此样式表中的样式,详询Author) +------------------------------------------------------------ */ + + +/* 四种常用css注释 + * 比较复杂的组件-变化组合较多,需要详细说明 + * 一般组件比较简单,只需简单说明 + * 简单组件但代码比较多,需要清晰划分css区块 + * 简单注释,只需功能性描述 + */ + + +/** + * @name : alert + * @explain : 操作提示 + * @type : 基类 .alert + * @dependent : 无 + * @author : Cloudyan + * @version : 1.0 + * @html : + +
    + +
    +
    提示标题
    +
    提示描述
    +
    + 按钮 + 链接 +
    +
    +
    + */ + +/** + * @name: UI CSS Framework 1.0 + * @author: Oricode UI + * @description: UI 组件描述 + */ + +/* Misc visuals-其他视觉效果 +----------------------------------*/ + +/* Corner radius-圆角 */ + + +/* 常用css注释举例结束 + ************************** + ********* end ********** + ************************** + */ + +/* (页面html说明举例)搜索页面主体内容 + * 边栏盒模型aside-box 单独定义盒子请附加具体的盒子名称,样式在自定义class名下定义 + * 如有边框添加class="lv-bd" + * 尽量保持结构设计上的统一,保持页面中的注释风格,示例如下: + * 注释开始 + * 注释结束 + */ + + + + + + +/** + * @name: UI CSS Framework 1.0 + * @author: Oricode Group + * @description: UI 组件描述 + */ + + +/** + * @name : mini-tips ===tips alert msg- + * @explain : 操作提示 + * @type : 基类 .tips .alert + * @expand : 扩展 -info -success -error -warning -help -stop -wait === message danger + * @dependent : Oricode + * @author : Cloudyan + * @version : 1.0 + * @html : + + + +
    + + 安全提醒:自行编辑,非系统消息 +
    + +
    + +

    Binggo!操作状态提醒!

    +

    您现在可以去畅游网络了。

    +
    + +
    + + +
    +
    提示标题
    +
    提示描述
    +
    + 按钮 + 链接 +
    +
    +
    + + */ +.mtips,.tips-ico,span.tips,.alert-ico{display:inline-block;*display:inline;*zoom:1;} +.mtips,.tips-ico,.alert-ico{ background:url(img/icon-alert.png) -1000px -1000px no-repeat; } + +/* tips */ +.mtips,.tips .tips-ico{ width:14px; height:14px; margin-right:5px; background-position:0 -34px} +.tips .tips-ico {float:left;} +.tips{ margin:0; background:#f9f9f9;border:1px solid #d4d4d4;padding:8px 10px; line-height:14px;} +.tips-info .tips-ico,.tips-ico-info{ background-position:0 -34px} +.tips-warning .tips-ico,.tips-ico-warning{ background-position:-14px -34px} +.tips-error .tips-ico,.tips-ico-error{background-position:-28px -34px} +.tips-success .tips-ico,.tips-ico-success{ background-position:-42px -34px} +.tips-help .tips-ico,.tips-ico-help{ background-position:-56px -34px} +.tips-stop .tips-ico,.tips-ico-stop{ background-position:-70px -34px} +.tips-wait .tips-ico,.tips-ico-wait{ background-position:-84px -34px} + +.tips-info{background:#e5f5ff;border:1px solid #c9d5e2} +.tips-warning{background:#ffffe0;border:1px solid #ff8801} +.tips-error{background:#fff2f2;border:1px solid #f44} +.tips-success{background:#f1ffe2;border:1px solid #7dc25e} +.tips-help{background:#e5f5ff;border:1px solid #c9d5e2} +.tips-stop{background:#fceee8;border:1px solid #f6c8b5} +.tips-wait{background:#e5f5ff;border:1px solid #c9d5e2} + +.tips-arrowup{display:inline-block;height:10px;left:40px;margin-left:-8px;position:absolute;text-indent:-9999em;width:16px;z-index:1;top:-9px;_top:-8px} +.tips-arrowup-message{background-position:-194px -39px} +.tips-arrowup-warning{background-position:-211px -39px} + +/* mini-tips */ +.mtips{ border:none;width:14px; height:14px;} + +/* alert */ +.alert .alert-ico{ width:32px; height:32px; float:left; margin:0 0 0 -45px; background-position:0 -34px} +.alert{ background:#f9f9f9;border:1px solid #d4d4d4; padding:20px 30px 20px 65px;} +.alert .alert-title{ font-size:14px; font-weight:bold;} +.alert .alert-title,.alert .alert-line,.alert p{ margin:0} +.alert-info .alert-ico{ background-position:0 0} +.alert-warning .alert-ico{ background-position:-32px 0} +.alert-error .alert-ico{background-position:-64px 0} +.alert-success .alert-ico{ background-position:-96px 0} +.alert-help .alert-ico{ background-position:-128px 0} +.alert-stop .alert-ico{ background-position:-160px 0} +.alert-wait .alert-ico{ background-position:-192px 0} + +.alert-info{background:#e5f5ff;border:1px solid #c9d5e2} +.alert-warning{background:#ffffe0;border:1px solid #ff8801} +.alert-error{background:#fff2f2;border:1px solid #f44} +.alert-success{background:#f1ffe2;border:1px solid #7dc25e} +.alert-help{background:#e5f5ff;border:1px solid #c9d5e2} +.alert-stop{background:#fceee8;border:1px solid #f6c8b5} +.alert-wait{background:#e5f5ff;border:1px solid #c9d5e2} + +.alert-title{ font-size:14px; font-weight:bold} +.alert-line{ font-size:12px; line-height:22px;} + +button.close {padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;} +.alert .close{position:relative; width:24px; height:24px;top:-18px;right:-28px;line-height:22px;} + + +/** + * @name : Autocomplete Plugin + * @explain : 自动完成插件 + * @type : 基类 .auto >> auto-big auto-list + * @dependent : 无 + * @author : Cloudyan + * @version : 1.0 + * @html : + + */ +.auto{font:12px/22px \5b8b\4f53,Tahoma,Arial; width:277px; overflow:hidden;border:1px solid #dbdbdb;background: #fff; +box-shadow:2px 2px 2px 0 rgba(102,102,102,0.2);} +.auto a{color:#333; text-decoration:none} +.auto a:hover{ color:#e08; text-decoration:underline} +.auto-line{color:#888; font-size:12px;font-weight:normal; margin:0;} +.auto-title{color:#999; font-size:12px; font-weight: normal; border-bottom:1px dotted #dbdbdb} +.auto-box{ padding:5px 10px;} +.auto-mini .auto-box{ padding:0;} +.auto-mini a{ padding:0 10px;} +.a2row,.a3row,.a4row,.a5row{ overflow:hidden;*zoom:1; margin-right:-2px; padding-top:2px; margin-bottom:10px;} +.a2row li,.a3row li,.a4row li,.a5row li{ float:left; display:inline;overflow:hidden;} +.a2row li{ width:49.5%}.a3row li{ width:33.25%}.a4row li{ width:24.9%}.a5row li{ width:19.9%} +.auto a{ display:block; white-space:nowrap;overflow:hidden; text-align:left;} +.a2row a,.a3row a{margin-right:10px;text-overflow:ellipsis;} +.auto-mini a{text-overflow:ellipsis;color:#333;} +.auto-mini a:hover{ background:#ff9cc0;color:#fff; text-decoration:none} + +.auto-big{ width:355px;} +.auto-middle{width:277px;} +.auto-small{ width:235px;} +.auto-mini{ width:137px;} + + + + +/* pages页码小组件 + * 样式默认玫红色(可缺省rosestyle) + * 可组合样式orangestyle橙色 + * @html +
    + 1 + 2 + 3 + ... + 下一页 +
    + +// 升级版 +
    + 上一页 + 1 + 2 + 3 + 4 + 5 + 6 + ... + 16 + 下一页 +
    + */ +.pages{margin:10px 0 0;text-align:right;} +.pages a,.pages span{display:inline-block;zoom:1;*display:inline;margin-left:5px;padding:3px 9px; line-height:18px;} +.pages a{border:1px solid #ddd;color:#333;background:#fff;} +.pages .PageSel,.rosestyle .PageSel{font-weight:bold;border:1px solid #df1a7a;color:#fff;background:#df1a7a;} +.pages a:hover,.rosestyle a:hover{ border-color:#df1a7a;color:#df1a7a; text-decoration:none} +.orangestyle .PageSel{font-weight:bold;border:1px solid #f80;color:#fff;background:#f80;} +.orangestyle a:hover{ border-color:#f80;color:#f80; text-decoration:none} + +/* Pages页码控制 默认橙色 */ +.pages{margin:10px 0 0;text-align:right;} +.Pages a,.Pages span{display:inline-block;zoom:1;*display:inline;margin-left:5px;padding:0 9px; height:25px; line-height:25px;} +.Pages a{border:1px solid #ddd;color:#333; color:#07c;background:#fff;} +.Pages .PageSel,.orangestyle .PageSel{font-weight:bold;color:#fff;border:1px solid #f80;background:#f80;} +.Pages a:hover,.orangestyle a:hover{ text-decoration:none;border-color:#f80;color:#f80;} + +.Pages .PrevPage,.Pages .NextPage{ width:55px; padding:0; height:25px;/* color:#07c;*/ line-height:24px; background:url(http://pic.lvmama.com/img/new_v/newBtn_bg.gif) 1000px 1000px no-repeat} +.Pages .PrevPage{ background-position:0 -1817px; text-align:right; padding-right:10px;} +.Pages .NextPage{ background-position:-144px -1817px; text-align:left; padding-left:10px;} +.Pages span.PrevPage,.Pages span.NextPage{color:#ccc;border:1px solid #ddd;} +.Pages span.PrevPage{ background-position:0 -1776px;} +.Pages span.NextPage{ background-position:-144px -1776px;} +.rosestyle .PageSel{border:1px solid #df1a7a;background:#df1a7a;} +.rosestyle a:hover{ border-color:#df1a7a;color:#df1a7a;} +.orangestyle .PageSel{border:1px solid #f80;background:#f80;} +.orangestyle a:hover{ border-color:#f80;color:#f80;} + + +/** + * @name : table + * @explain : 表格 + * @type : 基类 .table table-bordered table-full table-striped table-hover + * @expand :扩展 table-border(与table-bordered相同,但不含圆角) table-info table-layout ptable ui-table + * @dependent : 无 + * @author : Cloudyan + * @version : 1.0 + * @html : + + */ + +table { + max-width: 100%; + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; +} + +.table { + width: 100%; + margin-bottom: 20px; +} + +.table th, +.table td { + padding: 8px; + line-height: 20px; + text-align: left; + vertical-align: top; + border-top: 1px solid #dddddd; +} + +.table th { + font-weight: bold; +} + +.table thead th { + vertical-align: bottom; +} + +.table caption + thead tr:first-child th, +.table caption + thead tr:first-child td, +.table colgroup + thead tr:first-child th, +.table colgroup + thead tr:first-child td, +.table thead:first-child tr:first-child th, +.table thead:first-child tr:first-child td { + border-top: 0; +} + +.table tbody + tbody { + border-top: 2px solid #dddddd; +} + +.table .table { + background-color: #ffffff; +} + +.table-condensed th, +.table-condensed td { + padding: 4px 5px; +} + +.table-bordered { + border: 1px solid #dddddd; + border-collapse: separate; + *border-collapse: collapse; + border-left: 0; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.table-bordered th, +.table-bordered td { + border-left: 1px solid #dddddd; +} + +.table-bordered caption + thead tr:first-child th, +.table-bordered caption + tbody tr:first-child th, +.table-bordered caption + tbody tr:first-child td, +.table-bordered colgroup + thead tr:first-child th, +.table-bordered colgroup + tbody tr:first-child th, +.table-bordered colgroup + tbody tr:first-child td, +.table-bordered thead:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child td { + border-top: 0; +} + +.table-bordered thead:first-child tr:first-child > th:first-child, +.table-bordered tbody:first-child tr:first-child > td:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; +} + +.table-bordered thead:first-child tr:first-child > th:last-child, +.table-bordered tbody:first-child tr:first-child > td:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; +} + +.table-bordered thead:last-child tr:last-child > th:first-child, +.table-bordered tbody:last-child tr:last-child > td:first-child, +.table-bordered tfoot:last-child tr:last-child > td:first-child { + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; +} + +.table-bordered thead:last-child tr:last-child > th:last-child, +.table-bordered tbody:last-child tr:last-child > td:last-child, +.table-bordered tfoot:last-child tr:last-child > td:last-child { + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; +} + +.table-bordered tfoot + tbody:last-child tr:last-child td:first-child { + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; +} + +.table-bordered tfoot + tbody:last-child tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; +} + +.table-bordered caption + thead tr:first-child th:first-child, +.table-bordered caption + tbody tr:first-child td:first-child, +.table-bordered colgroup + thead tr:first-child th:first-child, +.table-bordered colgroup + tbody tr:first-child td:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; +} + +.table-bordered caption + thead tr:first-child th:last-child, +.table-bordered caption + tbody tr:first-child td:last-child, +.table-bordered colgroup + thead tr:first-child th:last-child, +.table-bordered colgroup + tbody tr:first-child td:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; +} + +.table-striped tbody > tr:nth-child(odd) > td, +.table-striped tbody > tr:nth-child(odd) > th { + background-color: #f9f9f9; +} + +.table-hover tbody tr:hover td { + background-color: #f5f5f5; +} + +table td[class*="span"], +table th[class*="span"], +.row-fluid table td[class*="span"], +.row-fluid table th[class*="span"] { + display: table-cell; + float: none; + margin-left: 0; +} + +.table td.span1, +.table th.span1 { + float: none; + width: 44px; + margin-left: 0; +} + +.table td.span2, +.table th.span2 { + float: none; + width: 124px; + margin-left: 0; +} + +.table td.span3, +.table th.span3 { + float: none; + width: 204px; + margin-left: 0; +} + +.table td.span4, +.table th.span4 { + float: none; + width: 284px; + margin-left: 0; +} + +.table td.span5, +.table th.span5 { + float: none; + width: 364px; + margin-left: 0; +} + +.table td.span6, +.table th.span6 { + float: none; + width: 444px; + margin-left: 0; +} + +.table td.span7, +.table th.span7 { + float: none; + width: 524px; + margin-left: 0; +} + +.table td.span8, +.table th.span8 { + float: none; + width: 604px; + margin-left: 0; +} + +.table td.span9, +.table th.span9 { + float: none; + width: 684px; + margin-left: 0; +} + +.table td.span10, +.table th.span10 { + float: none; + width: 764px; + margin-left: 0; +} + +.table td.span11, +.table th.span11 { + float: none; + width: 844px; + margin-left: 0; +} + +.table td.span12, +.table th.span12 { + float: none; + width: 924px; + margin-left: 0; +} + +.table tbody tr.success td { + background-color: #dff0d8; +} + +.table tbody tr.error td { + background-color: #f2dede; +} + +.table tbody tr.warning td { + background-color: #fcf8e3; +} + +.table tbody tr.info td { + background-color: #d9edf7; +} + +.table-hover tbody tr.success:hover td { + background-color: #d0e9c6; +} + +.table-hover tbody tr.error:hover td { + background-color: #ebcccc; +} + +.table-hover tbody tr.warning:hover td { + background-color: #faf2cc; +} + +.table-hover tbody tr.info:hover td { + background-color: #c4e3f3; +} + +/* 表格扩展 */ + +table th, +table td { + padding:4px 5px; + line-height: 20px; +} + +table th { + font-weight: bold; +} +table td { + text-align: left; +} +.table-full { + width: 100%; +} + +.table-border th, +.table-border td{ + border:1px solid #ccc; +} + +table.table-info{border:1px solid #888;border-collapse:collapse;margin-bottom:1em} +table.table-info pre{background-color:transparent;margin:0;padding:0;width:auto;} +table.table-info th,table.table-info td{padding:5px 15px 5px 10px;text-align:left;} +table.table-info th{background-color:#ccc;border: 1px solid #888;vertical-align: baseline;} +table.table-info td{background-color:#efefef;border:1px solid #aaa;vertical-align:text-top;} +table.table-info p{margin:0 0 2px;} +table.table-info ul,table.table-info li{list-style-type:none;margin:0;padding:0;} +table.table-info td em{color:#00F;font-weight:normal;} +table.table-info .table_value{color: #0F93D2;} +/*table.table-info tr:hover td{ background-color:#f5f5f5}*/ + +/* 布局表格 */ +.table-layout{} +.table-layout th,.table-layout td{padding: 5px 10px;text-align:left;} +.table-layout .label,.table-layout .f_label{text-align:right;padding-right:0;} +.f_label{background: #e2eaf4;} + + + diff --git a/cnDocs/solutions/pngfix.html b/cnDocs/solutions/pngfix.html new file mode 100644 index 000000000000..22ef76cf3dcc --- /dev/null +++ b/cnDocs/solutions/pngfix.html @@ -0,0 +1,159 @@ + + + + +IE6 PNG24 半透明 + + + + + +
    +

    IE6 PNG24 图片半透明

    +

    方法一:CSS 滤镜

    +

    +
    +
    + png8 aphla +
    +
    +
    +.pngfix{
    +    background:#555 url(./img/png8_aphla.png) no-repeat 0 0;
    +    _background:#555 none;
    +    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./img/png8_aphla.png', sizingMethod='scale');
    +    
    +    width:150px;height:150px;line-height:30px;text-align:center;font-size:20px;color:#fff;
    +}
    +
    +

    问题及注意事项:

    +
      +
    • 使用了scale, 这个会适应元素宽度,所以需要设置固定的高度或宽度
    • +
    • filter是应该避免的,所以避免index transparent外的 PNG 透明元素
    • +
    • IE6 默认支持index transparent 的 PNG
    • +
    • src的路径相对于当前文档来说的,不过,我们一般用绝对路径,就没什么问题了
    • +
    +

    语法:

    +
    +filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
    +
    +

    属性:

    +
      +
    • enabled: 可选项。布尔值(Boolean)。设置或检索滤镜是否激活
    • +
    • true : 默认值。滤镜激活
    • +
    • false:滤镜被禁止
    • +
    • sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式
    • +
    • crop: 剪切图片以适应对象尺寸
    • +
    • image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸
    • +
    • scale: 缩放图片以适应对象的尺寸边界
    • +
    • src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用
    • +
    +

    特性:

    +
      +
    • Enabled: 可读写。布尔值(Boolean)。参阅 enabled 属性
    • +
    • sizingMethod: 可读写。字符串(String)。参阅 sizingMethod 属性
    • +
    • src: 可读写。字符串(String)。参阅 src 属性
    • +
    +

    说明:

    +

    在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说,你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

    + + +

    方法二:DD_belatedPNG 插件

    +

    推荐使用 DD_belatedPNG,只需要一个理由,就是它支持背景重定位 background-position 和平铺 background-repeat 属性,这是其他js插件不具备的,同时 DD_belatedPNG 还支持 a:hover 属性以及 <img>

    +
    + +

    这是png24图片

    +
    +
    +<img class="ie6png" src="img/pngfix.png" width="300" height="225">
    +
    +
    +
    +

    这是png24背景,且横向平铺了

    +
    +
    +<div class="test ie6png"></div>
    +
    + +

    关于IE6使用DD_belatedPNG存在的问题:

    +
      +
    1. 页面是用iframe载入的 。页面里面的用DD_belatedPNG, 在ie6下会出现空白一大片,但是是占位的。
    2. +
    3. 页面中的png图片有版本号,在ie6会出现不透明情况。
    4. +
    5. 做滑动门背景图是png 需要透明,在ie6下hover会出现背景跑到屏幕左上角。
    6. +
    7. a用absolute 背景用png ,在ie6 hover效果同上(这个问题是根据记忆,没有具体写demo去测试)
    8. +
    9. <li><a href=""><img src="***.png"/></a></li> li只是浮动,ie6图片会跑到屏幕左上角。
    10. +
    11. IE6刷新完,png背景图老是在左上角闪一下?
    12. +
    +

    注意:此方法若已执行,之后延迟加载的或加载完毕后重新操作src赋值的png24图片将不会进行fix处理!

    +

    其实1,3,4,5是同一个问题,查看DD_belatedPNG代码可知:

    +
    +giveLayout: function (el) {
    +    el.style.zoom = 1;
    +    if (el.currentStyle.position == 'static') {
    +        el.style.position = 'relative'
    +    };
    +}
    +
    +

    看了这个代码发现,只要position没有设置,那么 DD_belatedPNG 就会把 position 设置为 relative。

    +

    可以加个判断如下修复:

    +
    +giveLayout: function (el) {
    +        el.style.zoom = 1;
    +        if (el.currentStyle.position == 'static') {
    +        var tags=el.nodeName.toLowerCase();
    +        if(tags!='html' && tags!='a'&& tags!='img'){
    +            el.style.position = 'relative'
    +        };
    +    }
    +}
    +
    +

    这样修改就没问题了,接着我们再看问题 2

    +

    页面中的png图片有版本号,在ie6会出现不透明情况。

    +

    DD_belatedPNG 中对判断是img的代码如下:

    +
    +if (el.nodeName == 'IMG') {
    +    if(el.src.toLowerCase().search(/\.png$/) != -1) {
    +        el.isImg = true;
    +        el.style.visibility = 'hidden';
    +    }
    +    ...
    +}
    +
    +

    这段只是匹配了这张图片是不是png,但是如果图片加了版本号例如:logo.png?v=1321303913 这样的图片在ie6下就不会透明,可如下修改:

    +
    +if (el.nodeName == 'IMG') {
    +    if(/\.png(?:\W|$)/.test(el.src.toLowerCase())) {
    +        el.isImg = true;
    +        el.style.visibility = 'hidden';
    +    }
    +    ...
    +}
    +
    +

    刷新完,png背景图在左上角闪一下?

    +

    给容器加个定位

    +

    童鞋说这个js的性能很低,这个问题我没有办法解决,我发现这个js里面用了很多的addRule()这个函数,我搜索下了这个函数,很多说法,是用了这个之后cup直线上升,我也没有找到可以替代的方法。

    +

    如果可以转换思路,就尽量不要如此处理,使用 GIF 或其他方式替代。

    +

    PS:这样不停的兼容,只会延长IE6的寿命,大家应该一起努力,放弃IE6。

    + +

    下面也许是最好的解决办法:

    +

    针对支持的浏览器使用png24格式的背景图片,但是针对IE6使用_background设置稍微差一点的png8格式,虽然效果差了一些,但是不会出现很大的问题。

    +
    + + + + + + diff --git a/cnDocs/solutions/position-fixed.html b/cnDocs/solutions/position-fixed.html new file mode 100644 index 000000000000..7a452c41c4fe --- /dev/null +++ b/cnDocs/solutions/position-fixed.html @@ -0,0 +1,92 @@ + + + + +跨浏览器 position:fixed + + + + + +
    +

    跨浏览器 position:fixed

    +

    此方法针对IE6使用css表达式实现,会影响IE6的性能,慎用。

    + +
    +
    + The block is fixed at the right-top side by apply an attribute class="fixed fixed-top fixed-right". +
    +
    + The block is fixed at the right-bottom side by apply an attribute class="fixed fixed-left fixed-bottom". +
    +

    实现fixed的Demo不在此区域内了,请看 右上角、左下角

    +
    +
    +.fixed-top 相当于正常的 position:fixed; top:0; 
    +.fixed-bottom 相当于正常的 position:fixed;bottom:0px;
    +.fixed-left 相当于正常的 position:fixed;left:0px;
    +.fixed-right 相当于正常的 position:fixed;right:0;
    +
    +详细:
    +.fixed{
    +    position:fixed;
    +}
    +
    +/* 相当于正常的 position:fixed; top:0;  */
    +.fixed-top {
    +    bottom:auto;
    +    top:0;
    +    _bottom:auto;
    +    _top:expression(eval(document.documentElement.scrollTop));
    +}
    +
    +/* 相当于正常的 position:fixed;bottom:0px; */
    +.fixed-bottom {
    +    bottom:0;
    +    top:auto;
    +    _bottom:auto;
    +    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    +}
    +
    +/* 相当于正常的 position:fixed;left:0px; */
    +.fixed-left {
    +    left:0;
    +    _position:absolute;
    +    right:auto;
    +    _left:expression(eval(document.documentElement.scrollLeft));
    +}
    +
    +/* 相当于正常的 position:fixed;right:0; */
    +.fixed-right {
    +    right:0;
    +    left:auto;
    +    _right:auto;
    +    _left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));
    +}
    +
    +/* 当不是 https 时,可以把 # 换成 about:blank 以提升效率 */
    +html,html body {
    +    _background-image:url('about:blank');
    +    _background-attachment:fixed;
    +}
    +
    +/* hack for ie6 */
    +.fixed-top,.fixed-right,.fixed-bottom,.fixed-left {
    +    _position:absolute;
    +}
    +
    +

    问题及注意事项:

    +
      +
    • 如果需要多个方向的固定位置,比如 top + right,需要加两个 class
    • +
    • 如果加了.fixed-top, 那么就别给这个元素加 top 属性的值
    • +
    • 为了不出现异常,这个只作为套用。比如要top:30px 的时候,请在 .fixed-top 的子元素内设置
    • +
    • 由于我们有打包,所以,改solution是可以的,但这是强烈不推荐的,因为不利于维护
    • +
    +
    + + diff --git a/cnDocs/solutions/position.html b/cnDocs/solutions/position.html new file mode 100644 index 000000000000..251a69e50882 --- /dev/null +++ b/cnDocs/solutions/position.html @@ -0,0 +1,30 @@ + + + + +CSS绝对定位水平居中 + + + + + +
    +

    CSS绝对定位水平居中

    +

    针对固定宽度实现绝对的水平居中,针对固定高度实现垂直居中。

    + +
    +
    +
    + +
    + +

    问题及注意事项:

    +

    不支持位置宽/高的居中

    + +
    + + diff --git a/cnDocs/solutions/print.html b/cnDocs/solutions/print.html new file mode 100644 index 000000000000..4910429135ed --- /dev/null +++ b/cnDocs/solutions/print.html @@ -0,0 +1,87 @@ + + + + +打印预览 + + + + + +
    + +

    网页打印

    +

    正常情况下的打印是使用 window.print(); 直接整页打印,但如果需要打印网页中定义的部分内容,则可使用如下的方法:

    + + +

    关于局部打印

    +

    1、在页面的代码头部处加入JavaScript:

    +

    以下是代码片段:

    + +
    +// JS 实现简单的页面局部打印 
    +<script> 
    +function doPrint() {  
    +    bdhtml=window.document.body.innerHTML;
    +    sprnstr="<!--startprint-->"; 
    +    eprnstr="<!--endprint-->"; 
    +    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); 
    +    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); 
    +    window.document.body.innerHTML=prnhtml; 
    +    window.print();
    +}  
    +</script> 
    +
    +亦可以添加变量,同页面多次区别使用:
    +<script> 
    +function preview(oper) {
    +    if (oper < 10) {
    +        bdhtml=window.document.body.innerHTML;      //获取当前页的html代码
    +        sprnstr="<!--startprint"+oper+"-->";	//设置打印开始区域
    +        eprnstr="<!--endprint"+oper+"-->";	//设置打印结束区域
    +        prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18);   //从开始代码向后取html
    +        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));  //从结束代码向前取html
    +        window.document.body.innerHTML=prnhtml;
    +        window.print();
    +        window.document.body.innerHTML=bdhtml;
    +    } else {
    +        window.print();
    +    }
    +}
    +</script> 
    +使用很简单 将页面内要打印的内容加入中间 <!--startprint1--> 内容 <!--endprint1-->
    +再加个打印按纽 onclick=preview(1);
    +
    + +

    2、在需要打印的页面正文前后加上 <!--startprint--><!--endprint--> 标识。

    +

    也就是在需要用户打印保存的正文所对应的html处附加上。同时,如果采用小偷程序获得远程数据并需打印,可将此等数据置于该定义标签之内即可。

    + +

    3、截取内容部分已完成,现在加个“打印”的链接:

    +

    以下是代码片段:局部打印

    +

    <a href="javascript:void(0);" onClick="doPrint()">局部打印</a>

    + +

    当然你也可以使用 print.css 来做打印样式,通过css 控制在打印媒体中的页面表现样式!

    + + +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + diff --git a/cnDocs/solutions/remove-outline.html b/cnDocs/solutions/remove-outline.html new file mode 100644 index 000000000000..b070edb808a2 --- /dev/null +++ b/cnDocs/solutions/remove-outline.html @@ -0,0 +1,141 @@ + + + + +去除超链接、按钮、热点链接等虚线框 + + + + + +
    +

    去除链接、按钮虚线框 | remove outline

    +

    去除虚线框的一些说明:

    +
    +/*
    + * 注意:由于我们的demo页面采用的noreset.css重置样式包含对虚线框的重置(代码如下)---点击时没有虚线框,但是聚焦状态是有的
    + * 故本页面注释了noreset样式的引用,方便测试虚线框的情况!
    + */
    +
    +/*
    + * Addresses `outline` inconsistency between Chrome and other browsers.
    + */
    +
    +a:focus {
    +    outline: thin dotted;
    +}
    +
    +/*
    + * Improves readability when focused and also mouse hovered in all browsers.
    + */
    +
    +a:active,
    +a:hover {
    +    outline: 0;
    +}
    +
    +

    从网页的易用性来考虑,链接的 outline 不要去除,推荐使用如上方法。简单列举为什么不要去除虚线框:

    +
      +
    • 虚线框(outline)给键盘导航带来便利
    • +
    • 导致更加糟糕的用户体验(令 JavsScript 的onfocus事件无用武之地)
    • +
    • 可替代的选择方案(设置焦点被触发时,链接背景为红色等)
    • +
    +

    查看详细分析:页面的易用性:为什么不推荐去掉链接周围的虚线框

    + +

    如果虚线框形状极其丑陋,严重影响外观、视觉效果,可以参考以下方法:

    +
    +

    未去掉虚线框 Chrome/Safari 浏览器默认没有虚线框

    +

    去掉所有情况下的虚线

    +

    IE6: A outline:hidefocus

    +

    Firefox:

    +

    +

    +
    + +
    +<a href="#" hidefocus="true">A outline:hidefocus</a>
    +
    +/* hack for Firefox */
    +input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner{    
    +    border : 0px; 
    +}
    +
    +/* 不要随便去掉虚线框 */
    +input[type=submit]:focus, input[type=button]:focus{      
    +    outline : none;  
    +}
    +
    +

    问题及注意事项:

    +

    IE 需要在标签中添加 hidefocus 属性,值可以为空,如:<input href="#" hidefocus value="确定" type="button" /><a /> 标签同理。

    + +

    关于潜规则、关于BUG

    +

    我能在用 TAB 键的时候不去掉虚线框吗?为什么我的 input 在 firefox 下没有成功去除虚线框?这些问题被提出的时候,困扰着不少人。因为这里面有潜规则。总结一下,看这个表:

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + 去除的方式 + 生效的浏览器
    + outline:none + IE8 | Firefox | Webkit |Opera
    + hidefocus + IE
    + :focus{outline:none;} + IE8 | Firefox | Webkit | Opera
    + :active{outline:none;} + 同上,但在tab的时候,IE将保留虚线框
    + ::-moz-focus-inner{outline:none;} + Firefox 存着bug,input 须要去这个伪状态下的边框
    +

    更多:详见去除虚线框介绍

    +

    也可以用js这样添加

    +
    +/* 去除虚线(部分元素) */
    +$(".no_focus").bind("focus",function(){
    +    //if(document.all){ //针对IE
    +    if(this.blur){
    +        this.blur(); //常用于幻灯的数字按钮
    +    };
    +});
    +
    +

    问题

    +
      +
    • IE下使用
    • +
    • 关于热点链接的虚线框
    • +
    + +
    + + + diff --git a/cnDocs/solutions/rgba-opacity.html b/cnDocs/solutions/rgba-opacity.html new file mode 100644 index 000000000000..b42c04d42edc --- /dev/null +++ b/cnDocs/solutions/rgba-opacity.html @@ -0,0 +1,324 @@ + + + + +RGBA 与 背景透明、flash透明、iframe透明 + + + + + +
    +

    RGBA 与 背景透明、flash透明

    +

    RGBA-浏览器参照基准:IE9+, Firefox3.6+, Chrome5+, Safari5+, Opera10.53+

    +

    语法:rgba(0-255,0-255,0-255,0-1)

    + +
    +

    HEX颜色中的黑色:

    +
    background-color:#000000;
    +

    RGB颜色中的黑色:

    +
    background-color:rgb(0,0,0);
    +

    RGB颜色+opacity透明度(50%透明度的黑色):

    +
    background-color:rgb(0,0,0);
    +opacity:.5;
    +

    RGBA颜色(50%透明度的黑色):

    +
    background-color:rgba(0,0,0,.5);
    +
    +

    背景透明-浏览器参照基准:IE, Firefox3.6+, Chrome5+, Safari5+, Opera10.53+

    +
    +

    效果演示:error

    +
    这是一个不成功的背景透明内容不透明效果,你会看到背景及内容两者都透明了
    +
    将内容和背景分别放到不同的层,然后将背景设置成透明,两者就互不相关了
    + +

    效果演示:success

    +
    +
    这是一个在所有主流浏览器下都可以看到的背景透明,内容不透明的效果
    +
    将内容和背景分别放到不同的层,然后将背景设置成透明,两者就互不相关了
    + +

    效果演示:RGBA

    +
    这是一个用RGBA实现的背景透明内容不透明的效果
    +
    直接用RGBA值作为背景色
    +
    +
    +.opacity{
    +    position:relative;
    +    z-index:3;
    +    width:380px;
    +    height:80px;
    +    padding:20px;
    +    background-color:#000;
    +    color:#fff;
    +    filter:alpha(opacity=60); /* For IE */
    +    opacity:.6;
    +}
    +
    +.opacity-text{
    +    position:relative;
    +    z-index:3;
    +    width:380px;
    +    height:80px;
    +    padding:20px;
    +    color:#fff;
    +    margin-top:-120px;
    +}
    +.text{
    +    position:relative;
    +    z-index:1;
    +    width:320px;
    +    height:20px;
    +    margin:-110px 0 0 10px;
    +    padding:50px;
    +    background:#f00;
    +}
    +
    +.rgba-opacity{
    +    position:relative;
    +    z-index:3;
    +    width:380px;
    +    height:80px;
    +    padding:20px;
    +    background-color:rgba(0,0,0,.7);
    +    color:#fff;
    +}
    +
    +

    最新式的半透明效果实现

    +

    推荐的半透明实现方法,简单易用!

    + +
    +.text-cover { 
    +    display: block;
    +    width: 100%;
    +    height: 100%;
    +    position: relative;
    +    overflow: hidden;
    +}
    +.text-cover i {
    +    position: absolute;
    +    bottom: 0;
    +    left: 0;
    +    display: block;
    +    width: 100%;
    +    height: 30px;
    +    line-height: 30px;
    +    overflow: hidden;
    +    color: #fff;
    +    font-style: normal;
    +    text-indent: 10px;
    +    /* 此种缩进实现边距,针对单行文本甚是有效,多行则不行,可通过 padding: 0 10px 来设置,
    +    注意右侧文本不要贴边,如此100%的宽度会溢出,需在父层设置 overflow: hidden; */
    +    
    +    /* 半透明核心代码 */
    +    background-color: rgba(0, 0, 0, 0.5);
    +    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000);
    +    /* 此处的 */
    +}
    +
    +说明:#88000000 的前两位数字控制透明度,取值16进制从00 -> FF(越小越透明),00表示完全透明,FF就是全不透明,后面六位是色值。
    +
    + +

    知识扩展:

    +

    DXImageTransform.Microsoft.gradient 滤镜里的 startColorstr 参数值是 #AARRGGBB 形式的, 其中的AA是代表不透明度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的 RRGGBB 就是颜色的十六进制代码。

    +

    举例如:background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六制呢的方法如下:先计算#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4C。

    + +

    常用透明度对用关系:

    +

    + .0(00) .1(19) .05(0C) .15(26)
    + .2(33) .3(4C) .25(3F) .35(59)
    + .4(66) .5(7F) .45(72) .55(8C)
    + .6(99) .7(B2) .65(A5) .75(BF)
    + .8(CC) .9(E5) .85(D8) .95(F2) +

    +
    +

    显示隐藏有透明度变化时,IE8-下的滤镜透明有时出问题(待进一步研究),设置时间为0可解决

    +
    +

    全兼容半透明测试,五种颜色及透明度。设置背景图片作为陪衬对比,增强浏览效果。

    + + + + + + 颜色:白
    透明度:.8 #CC
    + 颜色:黑
    透明度:.5 #7F
    + 颜色:红
    透明度:.4 #66
    + 颜色:绿
    透明度:.3 #4C
    + 颜色:蓝
    透明度:.2 #33
    +
    +
    +
    +.box1 { background-color: rgba(255, 255, 255, .8); 
    +filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF); }
    +.box2 { background-color: rgba(  0,   0,   0, .5); 
    +filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000); color: #fff;}
    +.box3 { background-color: rgba(255,   0,   0, .4); 
    +filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#66FF0000, endColorstr=#66FF0000); }
    +.box4 { background-color: rgba(  0, 255,   0, .3); 
    +filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#4C00FF00, endColorstr=#4C00FF00); }
    +.box5 { background-color: rgba(  0,   0, 255, .2); 
    +filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#330000FF, endColorstr=#330000FF); }
    +
    +针对Win7下的IEtester中IE6不透明,可在滤镜前单独设置 _background 色,如下:
    +.box5 { 
    +    background-color: rgba(  0,   0, 255, .2); 
    +    _background: #00f;
    +    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#330000ff, endColorstr=#330000ff);
    +}
    +但事实上,原生的IE6是支持的,无需单独设置 _background 色。
    +
    + +

    问题及注意事项:

    +

    今天(2014-01-06)注意到一个问题,IE中使用如上滤镜方法,若有显示隐藏的交互时,不能有渐变透明度的变化,即透明度变化时间大于0,有时出问题,可能是页面比较大的情况下。做测试如上:

    +
    + + + + diff --git a/cnDocs/solutions/rotate.html b/cnDocs/solutions/rotate.html new file mode 100644 index 000000000000..b2d40034dc96 --- /dev/null +++ b/cnDocs/solutions/rotate.html @@ -0,0 +1,57 @@ + + + + +跨浏览器翻转 + + + + + +
    +

    跨浏览器翻转

    +

    使用 CSS filter 实现 CSS3 的 transform 一样效果

    + +
    +

    + 顺时针转一下 + 顺时针转一下 + 逆时针转一下 + 这个没有转 +

    +
    +
    +HTML:
    +<span class="as-rotate as-rotate-90">顺时针转一下</span>
    +<span class="as-rotate as-rotate-90cw">顺时针转一下</span>
    +<span class="as-rotate as-rotate-90ccw">逆时针转一下</span>
    +
    +CSS:
    +/* 顺时针 */
    +.as-rotate-90cw, .as-rotate-90{
    +    -webkit-transform: rotate(90deg);   
    +    -moz-transform: rotate(90deg);  
    +    -o-transform: rotate(90deg);
    +    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  
    +    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";  
    +    transform: rotate(90deg);
    +}
    +
    +/* 逆时针 */
    +.as-rotate-90ccw{
    +    -webkit-transform: rotate(-90deg);
    +    -moz-transform: rotate(-90deg);
    +    -o-transform: rotae(-90deg);
    +    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  
    +    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; 
    +    transform: rotate(-90deg);
    +}
    +
    +

    问题及注意事项:

    +

    注意: rotate 所占空间与未 rotate 前一样

    + +
    + + diff --git a/cnDocs/solutions/select-mask.html b/cnDocs/solutions/select-mask.html new file mode 100644 index 000000000000..ab6a9337916d --- /dev/null +++ b/cnDocs/solutions/select-mask.html @@ -0,0 +1,76 @@ + + + + +select 遮盖问题 + + + + + +
    +

    IE6 select 浮层遮盖

    +

    浮层被 select 穿透,是最常见的 z-index bug。用法:

    + +
    +
    + +
    + + + 内容 +
    +
    + 内容 + + 内容 +
    + 内容 + +
    + 内容
    + 内容
    + 内容
    + 内容
    + +
    +
    +
    +
    +HTML:
    +<div class="as-selectmask" style="background:#FF3366;">
    +    内容<br/>
    +<!--[if lt IE 7]><iframe src="javascript:'';"></iframe><![endif]-->
    +</div>
    +
    +CSS:
    +.as-selectmask {
    +    position: absolute;
    +    left:0;
    +    top:0;
    +    z-index: 10;
    +    overflow: hidden;
    +    width: 33em;
    +}
    +.as-selectmask iframe {
    +    position: absolute;
    +    top: 0; 
    +    left: 0; 
    +    z-index: -1;
    +    border:none;
    +    filter: mask();
    +    width: 3000px; /* for any big value */
    +    height: 3000px /* for any big value */
    +}
    +
    +

    问题及注意事项:

    +

    请注意,即使使用这种方法,半透明div下,select 会被彻底隐藏。这个问题还是没办法解决。

    + +
    + + diff --git a/cnDocs/solutions/solution.css b/cnDocs/solutions/solution.css new file mode 100644 index 000000000000..6c7cc82d9f24 --- /dev/null +++ b/cnDocs/solutions/solution.css @@ -0,0 +1,639 @@ +@charset "utf-8"; +/*! + * solution style +**/ +.fl{float:left}.fr{float:right}.fl,.fr{display:inline} +.wrap,.bc{margin-left:auto; margin-right:auto}.tc{text-align:center} +.hor li{float:left;display:inline;} +.wrap{ width:980px;} +small{ font-weight:normal} +.none,.none li{margin:0;padding:0;list-style-type:none} +.a2row,.a3row,.a4row,.a5row{ overflow:hidden;*zoom:1; margin-right:-2px; padding-top:2px; margin-bottom:10px;} +.a2row li,.a3row li,.a4row li,.a5row li{ float:left; display:inline;} +.a2row li{ width:49.5%}.a3row li{ width:33.25%}.a4row li{ width:24.9%}.a5row li{ width:19.9%} +.auto a{ display:block; white-space:nowrap;overflow:hidden; text-align:left;} +.a2row a,.a3row a{margin-right:10px;text-overflow:ellipsis;} +body .hide{display:none;} +/* 测试使用 */ +/* Base class */ +#guide{width:300px;padding:10px 15px 10px 10px;background:#eee;border:1px solid #bbb;position:fixed;right:10px;top:18px; z-index:100;} +#shortcut li{color:#888;padding:2px 0;font:italic 14px/1.4 Courier, 'Courier New';} +#shortcut a{color:#464646;font-style:normal;text-shadow:1px 1px 2px #fff;} +#shortcut ul{ padding-left:1.2em} +.note{font-size:13px;color:#555} +.note strong:first-child{color:red} +.browser{padding:5px 10px;background:#eee;} +h1,h2,h3{/*padding-top:0.5em;*/line-height:1.2} +h4{margin-bottom:1em} +body > h1:first-child{padding-top:0;} +body{padding-bottom:30px;} +.red{color:#f00} +.topic,.notopic{ + -moz-transition: all .5s ease-in-out; + -webkit-transition: all .5s ease-in-out; + -o-transition: all .5s ease-in-out; + -ms-transition: all .5s ease-in-out; + transition: all .5s ease-in-out; +} +.topic{ + display:inline-block; + padding:1px 5px; + border-radius:8px 3px; + background-color:#00599B; + color:#fff; + text-shadow:0 0 5px rgba(253,179,3,.5); +} +.topic:hover{ + border-radius:3px 8px; + box-shadow:0 0 5px rgba(0,0,0,.4); + background-color:#0090D2; + text-decoration:none; +} +.notopic,.notopic:hover{ + background-color:#ddd; + color:#aaa; + text-shadow:0 0 5px rgba(0,0,0,.1); + cursor:default; +} + +/* Code examples +-------------------------------------------------- */ +.demo { + position: relative; + z-index:0; + margin: 15px 0; + padding: 40px 20px 20px; + *padding-top: 19px; + background: #eee; + border: 1px solid #ddd; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + /* overflow:hidden; */ +} +.demo + .demo{margin-top:-15px;} +.demo p:first-child,.demo h2:first-child,.demo h3:first-child,.demo h4:first-child{margin-top:0;} + +/* Echo out a label for the example */ +.demo:after { + content: "Example"; + position: absolute; + top: -1px; + left: -1px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + background-color: #f5f5f5; + border: 1px solid #ddd; + color: #9da0a4; + -webkit-border-radius: 4px 0 4px 0; + -moz-border-radius: 4px 0 4px 0; + border-radius: 4px 0 4px 0; +} +.plugin,.white-demo{background:#fff} +.dark-demo{background: url(images/low_contrast_linen.png) !important;} +.dark-demo::after{background-color: #666;border: 1px solid #888;color: #fff;} +.black-demo{background:#000 !important;color:#fff} +.black-demo::after{background-color: #333;border: 1px solid #666;color: #fff;} + + +.demo + .prettyprint { + margin-top: -20px; + padding-top: 15px; +} + +/* Tweak examples +------------------------- */ +.demo > p:last-child { + margin-bottom: 0; +} +.demo .table, +.demo .progress, +.demo .well, +.demo .alert, +.demo .hero-unit, +.demo .pagination, +.demo .navbar, +.demo > .nav, +.demo blockquote { + margin-bottom: 5px; +} +.demo .pagination { + margin-top: 0; +} +/* Code pre */ + +code, +pre { + padding: 0 3px 2px; + font-family: Monaco, Menlo, Consolas, "Courier New", monospace; + font-size: 12px; + color: #333333; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +code { + padding: 2px 4px; + color: #d14; + white-space: nowrap; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} + +pre { + display: block; + padding: 9.5px; + margin:5px 0 10px; + font-size: 13px; + line-height: 20px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +pre.prettyprint { + margin-bottom: 20px; +} + +pre code { + padding: 0; + color: inherit; + white-space: pre; + white-space: pre-wrap; + background-color: transparent; + border: 0; +} +pre.inblock{border:none;margin:0;padding:0;background:none} +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} + +/* Quotes for two levels of nested quotations */ +q { + quotes: '“' '”' '‘' '’'; +} + /* extra content definitions for pre-2011 WebKit */ +q:before { + content: '“'; + content: open-quote; +} +q:after { + content: '”'; + content: close-quote; +} +q q:before { + content: '‘'; + content: open-quote; +} +q q:after { + content: '’'; + content: close-quote; +} + /* q in blockquote */ +blockquote q:before { + content: '‘'; + content: open-quote; +} +blockquote q:after { + content: '’'; + content: close-quote; +} +blockquote q q:before { + content: '“'; + content: open-quote; +} +blockquote q q:after { + content: '”'; + content: close-quote; +} +/* hanging opening quote */ +blockquote:before { + display: block; + height: 0; + content: "“"; + margin-left: -.65em; font: italic 400%/1 Cochin,Georgia,"Times New Roman", serif; + color: #999; +} +blockquote{white-space:pre-wrap;word-wrap:break-word;font-size:12px;display:block;line-height:1.6em;margin:0.45em 0 0.45em 2em;} +blockquote{background:#F4F5F7;white-space:normal;min-width:574px;padding:8px 6px 8px 40px;border:1px dashed #ccc;} +blockquote p{margin:5px 0} +table.info{border: 1px solid #888;border-collapse:collapse;font-family:Arial,Helvetica;margin-bottom:1em} +table.info pre{background-color:transparent;margin:0;padding:0;width:auto;} +table.info th{background-color:#CCC;border: 1px solid #888;padding:5px 15px 5px 10px;text-align:left;vertical-align: baseline;} +table.info td{background-color:#EFEFEF;border:1px solid #AAA;padding:5px 15px 5px 10px;vertical-align:text-top;} +table.info p{margin:0 0 2px;} +table.info ul,table.info li{list-style-type:none;margin:0;padding:0;} +table.info td em{color:#00F;font-weight:normal;} +table.info .table_value{color: #0F93D2;} + +dt,dd{margin-bottom:5px;} +dt{font-weight:bold;margin-top:10px;}dd{margin-left:0} +p.line,.dl-line{padding-left:2em;} +.dl-line {*zoom: 1;} +.dl-line dt{float:left;margin:0;} +.dl-line dd{margin:0;} + + +body { + margin: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 20px; + color: #333333; + background-color: #ffffff; +} + + +/* 垂直居中 */ +.middle-item,.middle-full{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;} +.middle-full{height:100%;width:0;overflow:hidden;font-size:0;} + + +/* + @ 名称: 解决 + + 标签同理。 +*/ + + +/* hack for Firefox */ +input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner{ + border : 0px; +} + +/* 不要随便去掉虚线框 */ +input[type=submit]:focus, input[type=button]:focus{ + outline : none; +} + + + + + +/* + @ 名称: 翻转90度 + @ 用法: 添加 .as-rotate, 默认为顺时针旋转90度, 逆时针翻转需添加 .as-rotate-90ccw + @ 用法: + 默认: 顺时针转一下 + 顺时针转一下 + 逆时针转一下 + +*/ + +.as-rotate{ + *zoom:1; +} + +/* for inline elements */ +span.as-rotate, em.as-rotate, cite.as-rotate, strong.as-rotate, abbr.as-rotate, li.as-rotate{ + display:inline-block; +} + + +/* 顺时针 */ +.as-rotate-90cw, .as-rotate-90{ + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; + transform: rotate(90deg); +} + +/* 逆时针 */ +.as-rotate-90ccw{ + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotae(-90deg); + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; + transform: rotate(-90deg); +} + + + + + +/* + @ 名称: position:fixed + @ 用法:添加class + @ 注意: + * 如果需要多个方向的固定位置,比如 top + right,需要加两个 class + * 如果加了.fixed-top, 那么就别给这个元素加 top 属性的值 + * 为了不出现异常,这个只作为套用。比如要top:30px 的时候,请在 .fixed-top 的子元素内设置 + * 由于我们有打包,所以,改solution是可以的,但这是强烈不推荐的,因为不利于维护 +*/ + +.fixed{ + position:fixed; +} + +/* 相当于正常的 position:fixed; top:0; */ +.fixed-top { + bottom:auto; + top:0; + _bottom:auto; + _top:expression(eval(document.documentElement.scrollTop)); +} + +/* 相当于正常的 position:fixed;bottom:0px; */ +.fixed-bottom { + bottom:0; + top:auto; + _bottom:auto; + _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); +} + +/* 相当于正常的 position:fixed;left:0px; */ +.fixed-left { + left:0; + _position:absolute; + right:auto; + _left:expression(eval(document.documentElement.scrollLeft)); +} + +/* 相当于正常的 position:fixed;right:0; */ +.fixed-right { + right:0; + left:auto; + _right:auto; + _left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)); +} + +/* 当不是 https 时,可以把 # 换成 about:blank 以提升效率 */ +html,html body { + _background-image:url('about:blank'); + _background-attachment:fixed; +} + +/* hack for ie6 */ +.fixed-top,.fixed-right,.fixed-bottom,.fixed-left { + _position:absolute; +} + + + +/* + @ 名称: 1像素圆角 + @ 描述: 需要自己设置宽度,或者高度,否则会随内容自适应 + @ 用法: + 最外层:.as-rc + 内容层:.as-rc-cnt + 鼠标经过:.as-rc-hover +*/ + +/* base */ +.as-rc{ + display:inline-block;vertical-align: middle; + border-left:1px solid #ddd;border-right:1px solid #ddd; /* 可重设 */ +} + +/* + 不要直接给 BOTTON | INPUT[type=submit[button]] 添加边框 + 这会引发 IE 的 1px 的黑边 bug + Note: 一般不要把 input 作为.as-rc-cnt 层 + */ +.as-rc-cnt{ + float:left;position: relative; + border-top: 1px solid #ddd;border-bottom:1px solid #ddd; /* 可重设 */ + margin:-1px 0; +} + +/* HACK for ie6 7 */ +div.as-rc, p.as-rc, h2.as-rc, h3.as-rc, h4.as-rc, h5.as-rc, h6.as-rc, ul.as-rc, ol.as-rc{ + *display: inline; +} + +/* 鼠标经过 */ +.as-rc-hover, .as-rc-hover .as-rc-cnt, .as-rc:hover, .as-rc:hover .as-rc-cnt{ + border-color: #aaa; /* 可重设 */ + text-decoration: none; +} + + +/* + @ 名称: 禁用中文输入法 + @ 用法: + 在需要禁用的地方添加: .ime-disabled; +*/ + +.ime-disabled{ + ime-mode:disabled!important; +} + + + +/* + @ 名称: 强制换行 + @ 用法: + * 一般块级元素用:.as-wrap + * table标签中需添加:.as-wrap-table + @ 例子: +

    +
    +*/ + +/* 一般 block-level 元素 */ +.as-wrap, .as-wrap td, .as-wrap th{ + word-wrap:break-word;word-break:break-all; +} + +/* table */ +.as-wrap-table{ + table-layout:fixed; +} + + + +/* + @名称: float center + @用法: + 1. 外框加上 .center-box,子元素加上 .center-item,元素就可以自动根据父元素的宽度水平居中。 + 2. 结构(例:3栏):别忘记给每个栏加宽度 +
      +
    • item1
    • +
    • item2
    • +
    • item3
    • +
    + +*/ + +.center-box{ + display:block;text-align:center; + + /* 解决间隙问题 */ + font-size:0; +} +.center-item{ + display:inline-block;*display:inline;*zoom:1; + + /* 解决不能水平对齐问题 */ + vertical-align:top; + + /* 解决间隙问题后遗症解决 */ + font-size:13px; +} + + + + + + +/* + @名称: 等高栏 + @用法: + - 等高栏的容器添加 .equalheight-box + - 子元素添加 .equalheight-item 可以实现等高 + + 1.布局 + 当需要的时候,如果有n栏,那么,< n 的栏都用 .fl 让它float left;第n栏,也就是最近一栏使用 .fr向右浮动 + + 2.等高栏 + 在需要等高的栏中,都添加.sl-equalheight 来让他们等高 + + 3.结构(例:3栏):别忘记给每个栏加宽度 +
    +
    ...
    +
    ...
    +
    ...
    +
    + +*/ + +/* 记得更改宽度,如果页面不是960px的话 */ +.equalheight-box{ + /*width: 960px; /* 需重设 */ + overflow: hidden; +} + +/* 等高 */ +.equalheight-item{ + margin-bottom: -9999px; + padding-bottom: 9999px; +} + + + + + + + +/* + @ 名称: 投影 | drop shadow + @ 用法: 添加 .shadow + @ 实例: + +
    + +
    + +*/ + +.shadow{ + /* modern web browsers */ + -moz-box-shadow:1px 3px 12px #bbb; + -webkit-box-shadow:1px 3px 12px #bbb; + box-shadow:1px 3px 12px #bbb; + + /* 一定要设置background, 不然 ie 会显示在字体上 */ + background: #fff; + + /* gte=ie8 */ + -ms-filter:"progid:DXImageTransform.Microsoft.Glow(color=#aaaaaa,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)"; + + /* lte=ie7 */ + *filter: + progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=7) + progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) + progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) + progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=7); +} + + + + + +/* + @ 名称: 自定义 input[type=file] + @ 用法: 添加 class .as-file + @ 例子: + + + + +*/ + +/* 基础样式 */ +.as-file{ + position:relative; + display:inline-block; + *display:inline; + *zoom:1; + cursor:pointer; + overflow:hidden; + vertical-align:middle; +} + +/* 影响 .ui-input-file 的样式 */ +.as-file .as-input-file{ + position:absolute; + right:0; + top:0; + _font-size:100px; /* overwrite*/ + _font-size:12px; + _zoom:10; /* overwrite */ + height:100%; + _height:auto; + opacity:0; + filter:alpha(opacity=0); + -ms-filter:"alpha(opacity=0)"; + cursor:pointer; +} diff --git a/cnDocs/solutions/tables.html b/cnDocs/solutions/tables.html new file mode 100644 index 000000000000..f6140c8671fd --- /dev/null +++ b/cnDocs/solutions/tables.html @@ -0,0 +1,318 @@ + + + + +表格研究 + + + + + + +
    +

    表格研究

    +

    表格仍然是网页布局中不可或缺的部分,表格数据最佳选择就是使用表格来制作,表格在这方面有得天独厚的优势,这是其他标签所不能比拟的。

    +

    下面对表格进行深入研究,制定适用于我们的表格样式,并内置样式表中,避免重复开发定义,以提升效率。为了避免与BT中定义的表格样式发生冲突,保留BT的表格样式 .table-***,针对我们新定义的表格样式,使用其他的名称,如下:

    +

    按最常见需求进行研究

    +
      +
    • 默认表格及BT表格(.table table-striped table-bordered table-hover等)
    • +
    • 内置经典表格(边框表格 table-border 信息表格 table-info 全宽表格 table-full
    • +
    • 定制的表格(布局表格 table-layout 订单/产品表格 table-order 复杂订单列表 table-xorder
    • +
    • 其他扩展定制(定制原型 xtable .***-table
    • +
    +

    借鉴Button的实现,需要的表格不需要组合太多的class实现(默认,某一特色效果级别,定制级别)

    +

    下面是将要实现最基本需求的表格:组合表格命名使用class="table-***",定制表格使用class="***-table"

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名称样式描述 此表为.table-info
    默认表格没有任何其他样式,仅是行和列,无边框
    单边表格.table仅使用一组横向边线
    简单信息表.table-info存放一般表格信息
    有边框的表格.table-border添加外边框
    有:hover的表格.table-hover添加悬停/滑过(hover)状态
    奇偶相间的表格.table-striped行间添加奇偶背景色 (1, 3, 5, etc)
    100%宽度表格.table-full100%宽度
    + + + + + + + + + + + + + + +
    名称默认表格
    样式
    描述没有任何其他样式,仅是行和列,无边框
    +
    +

    这里将放置复选选项,在下面的区域展示各种样式组合的效果展示!

    +

    基础表格

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    名称需求描述
    默认表格适用于表格布局没有任何其他样式,仅是行和列,布局紧凑
    基本表格(行)适用于表格布局行列表行间只有水平的线
    普通表格承载表格数据表格边框及自适应的布局,承载多样的表格式数据,并添加悬停/滑过(hover)状态等
    产品列表表格适用于订单列表比较复杂的表格,承载订单列表等复杂表格
    其他定制表格扩展的表格扩展其他更完善的功能:行间添加奇偶背景色 (1, 3, 5, etc)标准浏览器支持等
    + +

    布局表格 .table-layout

    + + + + + + + + + + + +
    表格布局承载布局元素这是一种常用的布局方式
    布局样式表单,信息展示等两列方便对齐,如:左侧右对齐,右侧左对齐且水平对齐
    + + + + + + + + + +
    用户名:
    密码:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    *产品名称:产品ID:lv123456
    *签证有效期:*送签类型: + +
    *销售价:是否附加: +    + +
    *结算价:产品编号: + +
    市场价:材料截止收取提前: + +
    币种:所属公司: +
    关联供应商:产品经理:
    结算对象:
    预订须知: + +
    +

    定制表格 产品列表订单等

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    产品名称金额(元)订单状态合同状态 操作 其它操作
    订单号:195770365703415 下单时间:2012-07-15 22:31 支付方式:在线支付
    + 三亚蜈支洲岛、天涯海角、扬帆海钓美食海景双飞5日游三三亚蜈支洲岛扬帆海钓美食海景双飞5日游亚蜈支洲岛天涯海角扬帆海钓美食海景双飞5日游
    + 自助游天下,就找驴妈妈 +
    111等待支付未签约立即支付
    订单号:195770365703415 下单时间:2012-07-15 22:31 支付方式:在线支付
    +

    三亚蜈支洲岛、天涯海角、扬帆海钓美食海景双飞5日游三三亚蜈支洲岛扬帆海钓美食海景双飞5日游亚蜈支洲岛天涯海角扬帆海钓美食海景双飞5日游

    +

    自助游天下,就找驴妈妈

    +
    111交易完成已签约点评
    + + + + +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/text-align-justify.html b/cnDocs/solutions/text-align-justify.html new file mode 100644 index 000000000000..ff8baf1bc60a --- /dev/null +++ b/cnDocs/solutions/text-align-justify.html @@ -0,0 +1,275 @@ + + + + +Web 文本两端对齐 + + + + + +
    +

    Web 文本两端对齐

    +

    浏览器参照基准:IE5.5+, Firefox4+, Chrome5+, Safari5+, Opera10.53+

    +

    两端对齐方案基于 text-align:justify 及 text-align-last:justify 实现

    + +
    +

    综合兼容实现

    +

    世 界 末 日 2012

    +

    把 钱 都 花 了 ?

    +

    末 日 没 来

    +

    傻 了 吧

    +
    +
    +/* justify for All */
    +.text-justify p{
    +    text-align:justify;
    +    text-align-last:justify;
    +}
    +.single-line-justify p{
    +    height:24px;
    +}
    +.single-line-justify p:after{
    +    display:inline-block;
    +    content:'';
    +    overflow:hidden;
    +    width:100%;
    +    height:0;
    +}
    +
    +注意:这里使用了:after属性,p标签自适应高度时出现底部多一空白行高度,针对此问题,对飘零雾雨的方法进行下变更会应用更方便,对单行文本和多行文本进行区分处理,如下:
    +默认支持多行文本两端对齐,需添加 .text-justify 样式;
    +支持单行文本两端对齐,需再添加 .single-line-justify 样式,对了,还要单独设置下高度哦!
    +
    + +
    +

    Only IE

    +

    世 界 末 日 2012

    +

    把 钱 都 花 了 ?

    +

    末 日 没 来

    +

    傻 了 吧

    +
    +
    +/* Only for IE */
    +.justify-for-ie p{
    +    text-align:justify;
    +}
    +.single-line-justify p{
    +    text-align-last:justify;
    +    /* 此不能作为两端对齐默认属性,会对多行文本最后一行造成影响,故改为只在单行文本时使用 */
    +}
    +justify最先是作为IE私有属性实现(也许是由于office吧,IE对文本的排版设置特别强悍,还有文本纵向排列属性呢,只不过其他浏览器都不支持,以至于文本纵排全兼容最好用其他方法)
    +
    + +
    +

    Only Firefox

    +

    世 界 末 日 2012

    +

    把 钱 都 花 了 ?

    +

    末 日 没 来

    +

    傻 了 吧

    +
    +
    +/* Only for Firefox */
    +.justify-for-firefox p{
    +    text-align:justify;
    +    -moz-text-align-last:justify;
    +}
    +
    +text-align-last 在Firefox12-17下仍处理实验支持阶段,需加前缀 -moz-
    +
    + +
    +

    Chrome, Safari, Opera下的两端对齐

    +

    世 界 末 日 2012

    +

    把 钱 都 花 了 ?

    +

    末 日 没 来

    +

    傻 了 吧

    +
    +
    +/* Chrome, Safari, Opera下的两端对齐 */
    +.justify-for-webkit-presto p{
    +    text-align:justify;
    +}
    +.single-line-justify p{
    +    height:24px;
    +}
    +.single-line-justify p:after{
    +    display:inline-block;
    +    content:'';
    +    overflow:hidden;
    +    width:100%;
    +    height:0;
    +}
    +
    +Chrome23, Safari5.1.7, Opera12.11 不支持 text-align-last, 但支持 text-align 的 jsutify,所以这里可以变通实现单行文本两端对齐对齐,我们知道text-align:justify 不处理块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行的两端对齐,但会处理除此之外的其它行,所以只需要将这里的单行变成多行即可,那么我们可以使用伪对象的方式派生出新行,这样不需要额外处理html代码,然后再将派生出的新行隐藏
    +
    +这里飘零雾雨的:after方法主要解决单行文本两端对齐问题,对于多行文本无此问题,无需设置即可!
    +
    + +
    +

    中英文 多行|单行文本两端对齐效果

    +
      +
    • +

      This is the effect of the English text:
      + Start:
      + W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy.
      + End.

      +

      Effect of a single line of text

      +
    • +
    • +

      这是中文文字的效果:
      + 测试文字内容区开始:
      + cnBootstrap 项目是基于 Twitter Bootstrap 开发的前端框架,集成了 aliceui 兼容解决方案(包括但不限于aliceui)亦将我所了解的前端技巧也整合进了解决方案,现仍在完善中... 本项目在CC BY 3.0协议下开源,您可以随意使用本项目代码,更多详情请访问前端兼容解决方案
      + 测试文字内容区结束

      +

      标点/空格测试
      + cnBootstrap项目是基于Twitter Bootstrap开发的前端框架,集成了... 此处会避免标点符号居行首,所以...

      +
      +

      单 行 文 本 效 果

      +
    • +
    +

    注意:针对中文的单行文本两端对齐(英文单词已经有空格了),文字间必须要加空格两端对齐才有效果,不然无效!
    + text-justify:inter-ideograph;属性时IE hack,在IE下不管中英文、不管是不是最后一行、不管中文间有没有加空格都将全变为文本两端对齐的效果,不推荐使用。 +

    +

    由于字体在各个浏览器下还是有些微差异的,所以文本两端对齐的应用在各浏览器下效果并不一致,请重视空格/标点符号的影响,需适当手工调整。

    +

    其他常见场景

    +
    +
    + 表单 +
      +
    • + +
      + + +
      +
    • +
    • + +
      + + +
      +
    • +
    • + +
      + + +
      +
    • +
    • + +
      + + +
      +
    • +
    +
    +
    +
    + +
    +
    +由于所有浏览器都支持 text-align 的 justify 属性值,但不全支持 text-align-last,我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容(IE7及以下浏览器不支持伪对象,使用text-align-last处理),置于第二行并将其隐藏,这时第一行文本(即要对齐的那个单行文本)可使用text-align:justify来对齐,所以Firefox也无需使用-moz-text-align-last了,因为也使用了text-align:justify
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + diff --git a/cnDocs/solutions/textarea.html b/cnDocs/solutions/textarea.html new file mode 100644 index 000000000000..5b7514976f20 --- /dev/null +++ b/cnDocs/solutions/textarea.html @@ -0,0 +1,86 @@ + + + + +textarea 自适应高度 + + + + + +
    +

    textarea 自适应高度

    +

    实现高度自适应,默认一定高度,过高出现滚动条,常用在模拟selectbox,文本域等情况下:

    + +
    + + +
    +

    autobox

    +

    这是测试文本,你可以多复制几遍,超过文本域宽度时即自动出现滚动条。

    +
    + +
    +

    autobox

    +

    这是测试文本,你可以多复制几遍,超过文本域宽度时即自动出现滚动条。

    +

    这是测试文本,你可以多复制几遍,超过文本域宽度时即自动出现滚动条。

    +

    这是测试文本,你可以多复制几遍,超过文本域宽度时即自动出现滚动条。

    +
    + +
    +
    +var $scollBox = $('.box-scroll');
    +//pc端有弹窗滚动时禁用body滚动
    +$scollBox.on('mousewheel DOMMouseScroll', function (e) {
    +    var type = e.type;
    +    if (type == 'DOMMouseScroll' || type == 'mousewheel') {
    +        var delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0);
    +    }
    +    // var e0 = e.originalEvent,
    +    //     delta = e0.wheelDelta || -e0.detail;
    +    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    +    e.preventDefault();
    +});
    +//移动端实现,要借鉴iScroll那个组件
    +$scollBox.on('touchmove', function (e) {
    +});
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + + + diff --git a/cnDocs/solutions/todo.html b/cnDocs/solutions/todo.html new file mode 100644 index 000000000000..75cc415d2194 --- /dev/null +++ b/cnDocs/solutions/todo.html @@ -0,0 +1,48 @@ + + + + +解决方案标题 + + + + + +
    + +

    这是模版

    +

    解决方案描述

    + +
    +
    +
    +
    +
    +
    +
    + 这是案例展示 +
    +
    +
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + + + diff --git a/cnDocs/solutions/tooltip.html b/cnDocs/solutions/tooltip.html new file mode 100644 index 000000000000..beff7f5d5a27 --- /dev/null +++ b/cnDocs/solutions/tooltip.html @@ -0,0 +1,79 @@ + + + + +工具提醒 + + + + + + +
    +

    工具提醒

    +

    + +
    +
    日历优惠活动提醒
    + +
    + + 奖金折扣101元 + + 早订优惠 + + 多订优惠积分抵扣 +
    +
    +<div class="calendar" tip-content='今天预订11.03日产品,可同时享受以下优惠:<br>早订早惠:成人价,每份最大优惠50元。<br>多订多惠:成人价,预订满N份(含)以上,每份最大优惠50元。'>日历</div>
    +	
    +<a class="discount" tip-title="提醒标题" tip-content='提醒内容'><i>奖金折扣</i>101元</a>
    +<i class="icon-tag2" tip-content='提醒内容'>早订优惠</i>
    +<i class="icon-tag2" tip-content='提醒内容'>多订优惠</i>
    +<i class="icon-tag2" tip-content='提醒内容'>积分抵扣</i>
    +
    +<script src="http://pic.lvmama.com/min/index.php?f=js/new_v/jquery-1.7.2.min.js,/js/ui/lvmamaUI/lvmamaUI.js"></script>
    +$(function(){
    +	$('.calendar').ui('lvtip',{
    +	  templete : 2,
    +	  place: 'bottom-left',
    +	  offsetX: 0,
    +	  event : "live"
    +    });
    +	$('a[class=discount]').ui('lvtip',{
    +	  place: 'bottom'
    +    });
    +	$('i.icon-tag2').ui('lvtip',{
    +	  place: 'bottom'
    +    });
    +
    +});
    +
    +

    问题及注意事项:

    +

    实践出真知

    + +
    + + + + + + diff --git a/cnDocs/solutions/tpl.html b/cnDocs/solutions/tpl.html new file mode 100644 index 000000000000..9f62e518b286 --- /dev/null +++ b/cnDocs/solutions/tpl.html @@ -0,0 +1,354 @@ + + + + +Components Template + + + + + +
    +

    TPL 组件模板

    + + +
    +
      + +
    + 返回顶部 +
    + +
    +
    +
    +<!-- 横向列表 -->
    +<ul class="hor pro-list">
    +    <li><a href="#">列表项</a></li>
    +    <li><a href="#">列表项</a></li>
    +    <li><a href="#">列表项</a></li>
    +</ul>
    +
    +<!-- 竖向列表 -->
    +<ul class="ver pro-list">
    +    <li><a href="#">列表项</a></li>
    +    <li><a href="#">列表项</a></li>
    +    <li><a href="#">列表项</a></li>
    +</ul>
    +
    + +
    +

    下拉菜单(.dropdown)

    适用于各处下拉菜单,二级或三级导航等

    +<div class="dropdown"> + <a class="brand" href="#">下拉菜单</a> + <ul class="dropdown-menu" role="menu"> + <a href="#">使用LESS</a> + <a href="#">编译发布</a> + <a href="#">静态资源</a> + <a href="#">例子</a> + </ul> +</div> <!-- .dropdown --> +
    + +
    +

    导航(.navbar)

    扩展.sidebar .well>.nav+.nav-list,应用于边栏等各处导航

    +<div class="navbar"> + <div class="navbar-inner"> + <h2 class="element-invisible">导航描述</h2> + <a rel="home" class="brand" href="#">项目名称</a> + <ul class="nav" role="navigation"> + <li class="active"><a href="#">首页</a></li> + <li><a href="#">概述<i></i></a> + <li><a href="#">框架</a></li> + <li><a href="#">基础CSS</a></li> + <li><a href="#">组件</a></li> + <li><a href="#">JavaScript插件</a></li> + <li><a href="#">定制</a></li> + <li class="divider-vertical"></li> + <li class="dropdown"> + <a href="#">项目管理<i></i></a> + <ul class="dropdown-menu"> + <li><a href="#">使用LESS</a></li> + <li><a href="#">编译发布</a></li> + <li><a href="#">静态资源</a></li> + <li><a href="#">例子</a></li> + </ul> + </li> + <li class="dropdown"> + <a href="#">研究探索<i></i></a> + <ul class="dropdown-menu"> + <li><a href="#">Bugs && Fixed</a></li> + <li><a href="#">项目</a></li> + <li><a href="#">前端规范</a></li> + <li><a href="#">解决方案</a></li> + <li><a href="#">TPL模板</a></li> + <li><a href="#">更新日志</a></li> + </ul> + </li> + </ul> + </div> +</div> <!-- //.navbar --> + +<nav class="navbar"> + <div class="navbar-inner"> + <h2 class="element-invisible">主导航</h2> + <ul class="nav" role="navigation"> + <li class="nav-item nav-item-selected"><a href="#">首页</a></li> + <li class="nav-item nav-item-current"> + <a href="#">前端开发<i></i></a> + <ul class="sub-nav"> + <li class="nav-item"><a href="#">前端bugs汇总</a></li> + <li class="nav-item"><a href="#">HTML/CSS</a></li> + <li class="nav-item"><a href="#">设计路上</a></li> + <li class="nav-item"><a href="#">JavaScript</a></li> + <li class="nav-item"><a href="#">技巧资源</a></li> + </ul> + </li> + <li class="nav-item"><a href="#">名企招聘</a></li> + <li class="nav-item"> + <a href="#">分享<i></i></a> + <ul class="sub-nav"> + <li class="nav-item"><a href="#">常用代码</a></li> + <li class="nav-item"><a href="#">WordPress</a></li> + <li class="nav-item"><a href="#">Other</a></li> + </ul> + </li> + </ul> + </nav> +</nav> <!-- //.navbar --> +
    + +
    +

    标题(.ui-title)

    +<div class="ui-title fn-clear"> + <h2 class="ui-title-cnt fn-left">标题</h2> + <div class="ui-title-subcnt fn-left"> + <!-- 标题中的其他内容 --> + </div> +</div> <!-- .ui-title --> + +<!-- 如果标题没有其他内容,直接这样写 --> +<h2 class="ui-title">标题</h2> +
    + +
    +

    步骤(.step-box)

    +<div class="step-box"> + <ol class="hor"> + <li class="step-item step-item-first"> + 第一步 + </li> + <li class="step-item"> + 第二步 + </li> + <li class="step-item step-item-current"> + 当前操作 + </li> + <li class="step-item step-item-last"> + 最后一步 + </li> + </ol> +</div> <!-- //.step-box --> + +<div class="step-box step3"> +<!-- 当前步骤标识 --> + <ol class="hor"> + <li class="step-item1"> + 第一步 + </li> + <li class="step-item2"> + 第二步 + </li> + <li class="step-item3"> + 第三步 + </li> + <li class="step-item4"> + 最后一步 + </li> + </ol> +</div> <!-- //.step-box --> +
    + +
    +

    重复元素(.repeater)

    +<ul class="repeater"> + <li class="repeater-item repeater-item-current">内容</li> + <li class="repeater-item">内容</li> + <li class="repeater-item">内容</li> + <li class="repeater-item">内容</li> + <li class="repeater-item">内容</li> + <li class="repeater-item">内容</li> + <li class="repeater-item">内容</li> +</ul> <!-- //.repeater --> +
    + +
    +

    分页(.pages)

    + +<div class="pages orangestyle"> + <div class="Pages"> + <a class="PrevPage" href="#">上一页</a> + <a href="#">1</a> + <span class="PageSel">2</span> + <a href="#">3</a> + <a href="#">4</a> + <a href="#">5</a> + <a href="#">6</a> + <span class="PageMore">...</span> + <a href="#">20</a> + <a class="NextPage" href="#">下一页</a> + </div> +</div> <!-- //.pages --> + +<div class="pages"> + <span class="page-item page-item-info">共41条记录,共5页</span> + <a href="#" class="page-item page-item-first">首页</a> + <a href="#" class="page-item page-item-prev">上一页</a> + <span href="#" class="page-item page-item-current">1</span> + <a href="#" class="page-item">2</a> + <a href="#" class="page-item">3</a> + <span class="page-item">...</span> + <a href="#" class="page-item">40</a> + <a href="#" class="page-item">41</a> + <a href="#" class="page-item page-item-next">下一页</a> + <a href="#" class="page-item page-item-last">尾页</a> +</div> <!-- //.pages --> +
    + +
    +

    表格(.table)

    +<table class="table"> + <thead> + <tr> + <th>名称</th> + <th>样式</th> + <th>描述一般表格为.table</th> + </tr> + </thead> + <tbody> + <tr> + <td>默认表格</td> + <td>无</td> + <td>没有任何其他样式,仅是行和列,无边框</td> + </tr> + <tr> + <td>单边表格</td> + <td>.table</td> + <td>仅使用一组横向边线</td> + </tr> + <tr> + <td>简单信息表</td> + <td>.table-info</td> + <td>存放一般表格信息</td> + </tr> + </tbody> +</table> <!-- //.table --> +
    + +
    +

    按钮(.ui-button)

    +<button class="btn">按钮</button> +<button class="btn btn-primary">按钮</button> +<button class="btn btn-info">按钮</button> +<button class="btn btn-success">按钮</button> +<button class="btn btn-warning">按钮</button> +<button class="btn btn-danger">按钮</button> +<button class="btn btn-inverse">按钮</button> +<button class="btn btn-link">按钮</button> +<button class="btn btn-large">按钮</button> +<button class="btn btn-small">按钮</button> +<button class="btn btn-mini">按钮</button> +<button class="btn btn-block">按钮</button> +<button class="btn disabled">按钮</button> +<button class="btn"><i class="icon-*">/i>按钮</button> +
    + + +
    +

    表单项(.input .label)

    +<label> + <input type="text" placeholder="文字提示"> +</label> +<label> + <input type="password" placeholder="文字提示"> +</label> +<label> + <input type="radio"> 单选项 +</label> +<label> + <input type="checkbox"> 复选项 +</label> +<textarea rows="3" class="textarea"></textarea> 多行文本域 +
    + +
    +

    表单(.form)

    +<form name="" class="form" method="post" action="#"> + +</form> + +
    + +
    +

    提示信息(.alert|.message)

    + +
    + +
    +

    TAB选项卡(.tab)

    + + +
    + + + +
    +

    悬浮提醒(.tooltip)

    +<div class="tooltip"> + <div class="tooltip-outer"> + <div class="tooltip-shadow"></div> + <div class="tooltip-inner"> + <div class="tooltip-title">提示标题</div> + <div class="tooltip-content">提示内容</div> + </div> + <span class="tooltip-arrow"></span> +</div> <!-- //.tooltip --> +
    + + + +

    问题及注意事项:

    +

    + +
    + + + + diff --git a/cnDocs/solutions/two-layout.html b/cnDocs/solutions/two-layout.html new file mode 100644 index 000000000000..a9c12a7b51e6 --- /dev/null +++ b/cnDocs/solutions/two-layout.html @@ -0,0 +1,213 @@ + + + + +经典自适应两列布局 + + + + + +
    +

    经典自适应两列布局 一列定宽、一列自适应宽度

    +

    要求:实现以下网页布局

    + +

    以上实现后再考虑下面的内容:

    +
    +

    以上布局,如果要求右侧宽度自适应且优先显示呢,你能写出几种方法?

    +

    如果要求两列高度自适应对齐,你怎么实现?

    +
    +

    如果是你,你会怎么实现?你能写出几种方法?要考虑兼容主流浏览器哦!

    +

    当时面试的时候,关于自动宽度当时拿不准两个属性,width:100%和width:auto(平时不怎么用这两个属性),实在没办法,就用绝对定 位,定位四个方向可以做到自动宽度(实际在此例中定位两个属性也OK),第二种方法写的是可以通过css表达式实现自动宽度(当然自动宽度可以实现,但这个方法岁也能实现,但是根本不可取,即使不知道别的方法,也别说这个方法了),面试结果第一种需要修复IE6下的bug(最多只支持两个方向的绝对定位)需要引入一个js,第二种css表达式性能实在太差,就这样我就被否定掉了……

    +

    唉,有点郁闷啊,所以回来就总结了以下实现方法,给大家贴出来!和大家交流下,呵呵

    + +

    你可以仔细思考几分钟,尝试实现并测试一下,之后再看下面的参考......

    + +









































    + +

    你确定要开始看参考了?不再想一会儿...

    + +









































    +
    + +

    好吧,参考推荐开始:

    +

    第一种想法
    +应用绝对定位,限定于此laya盒模型中,兼容性好,可扩展性较好,易控性好,网页性能佳,是不错的解决办法
    + 综合推荐指数:★★★★

    +
    +
    +
    右侧自动宽度且优先显示
    +
    +
    左侧定宽
    +
    +

    第二种想法
    +应用浮动,利用margin的负属性实现,兼容性好,可扩展性好,易控性好,网页性能好,几乎最佳的解决办法(因为还没有发现更好的办法)
    + 此方法是年前在研究Wordpress默认主题的css写法时注意到margin的负值这样应用有很大的好处,以前在做绝对居中时经常会考虑使用margin的负边距,但应对携程笔试的时候确实没怎么细心思考 综合推荐指数:★★★★★

    +
    +
    +
    右侧自动宽度且优先显示
    +
    +
    左侧定宽
    +
    +

    第三种想法
    +仍然使用绝对定位,兼容性良好,可扩展性好,易控性好,网页性能良好,常用于后台管理界面的设计,操作界面平铺整个浏览器可变区域
    + 绝对定位可控制四个方向的定位,使结构比第一种绝对定位方法更易控制,且实现自动宽度,缺点是针对IE6需要引入一个修复Bug的js(IE6最多支持两个方向的绝对定位,在IE6将被淘汰的未来,这是一个不错的方法)
    + 综合推荐指数:★★★★

    +
    +
    右侧自动宽度且优先显示
    +
    左侧定宽
    +
    + + +

    第四种想法
    +使用最不推荐使用的CSS表达式同样可以实现,使用兼容性好,可扩展性好,易控性好,网页性能很差,强烈不推荐使用,可做了解
    + 偏偏起初我能确认的方法只有第三种和这一种(第五种我没研究过自然也写不出来,只是提了一下可以用),其他好的方法平时没试过,也无法说出口,当然我也知道这种不可取,平时我也不会去用,但当时无奈才充数算是一种方法
    + 事实上css表达式只能作为实现右侧自动宽度的一种替代方法,这个问题要求的布局仍然需要正规的方法写出来,这里就选用最简单的右浮动,不采用margin的负属性来实现

    + 综合推荐指数:强烈抵制,永远都不要使用

    +
    +

    这种方法我就不去研究了,也是极不推荐的,尽量不要用!详细原因可去百度!

    +

    其实第一眼看到要求自动适应宽度的时候,心里就有数了,觉得正规的方法应该有的,这必然跟那个width:100%;以及width:auto;有关系,可是我还真的没去研究过(之前测试过高度100%的各浏览器兼容性),没测试过的这怎么写啊,不确认通不通又没法调试,心里蹦出来的第一个想法就是绝对定位超强功能肯定能实现,就回答了这个,还有就是css表达式,宽度可运算得出,是变化的变化可以实现(事实上我也没写过,平时哪怕使用js也不会使用css表达式,它导致鼠标的每一次滚动会引起浏览器上万次的运算,性能实在不敢恭维,只是知道它可以做到)

    +
    +

    第五种想法
    +使用CSS3新属性支持多列布局,因为兼容性的问题,所以未作研究,刚见到时也算是一种方法的了,可是现在研究了一番,实现不了,没法控制单列样式,按说这老外制定css3应该考虑到这种情况,每个单列都可以单独定义设置的啊,至少目前没有发现此实现的方法,此法优点可扩展性好,易控性好,网页性能好,但兼容性太差,不支持占国内最大市场主流的IE浏览器IE6/7/8/9,十分不可取,但这是发展方向,需要了解,之前做过一个报纸站,二十几个页面,考虑一番,多列实现还是用内联样式实现比较容易维护!
    + 综合推荐指数:无(实现不了上述要求)

    +
    当春风再一次吹拂她的脸庞时,那场让她刻骨铭心的失恋已在煦风轻扬的季节淡去了。她一点点地恢复,仿佛重生一般,花儿般的笑颜又重新浮上了她的脸庞。而他,看到她康复的样子,高兴极了,但他却不会讲什么,依旧如故,默默地陪在她身旁。他爱她,就包括爱她的一切缺点。这样做,他并不觉得有失尊严。他认为既然爱了,就应该无怨无悔。而她,觉得开始有点喜欢上了他,有些依赖他。但她认为,离爱还很遥远。
    + 转眼她和他都要毕业了,她甚至没有征求他的意见,就直接去了北方的一座城市,而他,却追随着她也到了这里。本来,在南方那座城市,他的家人早已给他联系好了一家不错的公司,但他连想都没想就拒绝了。她和他分别进了不同的公司。同在一个陌生的城市打工,难免心神俱疲,这个时候,她就很想找一个依靠,给她一点家的温暖。明明知道他一直愿意做她的依靠,可她却不愿意把自己的一生交付于他,因为她觉得自己一直不爱他,不爱,又如何依靠,再说,他也不能提供给她想像中的生活。 +
    右侧自动宽度且优先显示
    +
    左侧定宽
    +
    +

    大前端的实现方法
    +应用浮动,同第二种方法,使用margin的负属性实现,css的设置有点不同,习惯不一样而已,应算同一种方法,兼容性好,可扩展性好,易控性好,网页性能好,几乎最佳的解决办法
    + 此方法是来自大前端的页面布局,不过他的页面是右侧固定,左侧自动宽度,这里我们尝试下方向反过来(当然当宽度变得过小时还会变换新的效果,要学习的话可以去研究下) 综合推荐指数:★★★★★

    +
    +
    +
    右侧自动宽度且优先显示
    +
    +
    左侧定宽
    +
    +

    第六种想法
    +这应该算是一种演变,使用背景图片平铺,兼容性良,可扩展较好,易控性好,网页性能好,也是不错的实现方法
    + 此方法是在开发两列布局网站时想出来的,当时为了应付中间的一条隔线,又同时好几个页面在用这个属性,要100%的高度,不能放在左边框设置,也不能放在右边框,最好的就是放在父级目录设置,下面看实现 综合推荐指数:★★★★

    +
    +
    +
    左侧定宽 +

    这种知识表面看着像做出了盒子/界限分割一样,实际上是一种假象,这是背景表现的视觉效果

    +

    +
    右侧自动宽度且优先显示,缺点:右侧优先显示时会出现IE6/7下Bug,且应用环境有要求,只能实现视觉上一致;优点:轻松实现左右两列自动对齐
    +
    +
    +

    小结:汇总一下上面的方法,一共应该是四种方法(css表达式不算),就做参考使用吧,要在复杂的布局中使用,还是选五星级的好啊,呵呵

    +

    评断以上实现方法优劣的参数说明:

    +
      +
    • 兼容性:兼容市场主流浏览器;
    • +
    • 可扩展性:对于未来可能扩展的内容或变化的支持;
    • +
    • 易控性:是否便于精确调节与控制;
    • +
    • 页面性能:网页性能表现
    • +
    +

    再补充一个方法——第七种想法
    +在观察朋友网三列布局时,发现其中间列巧妙的通过此种方法实现 综合推荐指数:★★★★★

    +
    +
    左侧定宽,左浮动
    +
    右侧自适应,overflow:hidden
    这也许是最简单的办法了,唯一的限制是设置了overflow:hidden,导致超出此盒子的布局会被隐藏。
    + 还有个问题,这里无法全兼容使用等高布局(margin-bottom:-1000px;padding-bottom:1000px;)这个属性,在IE6/7下,清除浮动时margin-bottom失效。所以这个不适用等高布局,除非仅右侧高度较大的情况。
    +
    +
    + + +
    +

    扩展的问题,思考一下:

    +
      +
    • 除了以上实现的方法,还有其他实现方式么,写出来...
    • +
    • 如果是三列布局,实现中间列自适应并优先加载呢?
    • +
    • 上述各类方法实现等高布局时各有什么优劣?注意事项呢?
    • +
    + +

    其他测试:三列布局实现

    +

    现有并列的三列布局结构,从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 Html 结构的情况下用CSS实现:ABC,CBA,BAC 三种布局及在CBA排列下使B宽度自适应(三列总宽度100%),不能使用针对浏览器的CSS Hack。

    + +

    三列布局实现ABC中间列自适应宽度的方法总结:

    +
      +
    • 第一种方法:定位
    • +
    • 第二种方法:两边浮动,中间不浮动,第三个通过设置显示在第一列即可,如margin-top:负值
    • +
    • 第三种:全浮动,通过设置中间列的负边距实现同一行排列
    • + + +
    +
    + +
    +

    如果你有什么想法,可以在此处写出来:

    +
    +
    + + + + + + + + diff --git a/cnDocs/solutions/typo-reset.html b/cnDocs/solutions/typo-reset.html new file mode 100644 index 000000000000..b6072fb704ee --- /dev/null +++ b/cnDocs/solutions/typo-reset.html @@ -0,0 +1,73 @@ + + + + +中文排版 + + + + + +
    +

    中文网页重设与排版

    +

    目标:一致化浏览器排版效果,构建最适合中文阅读的网页排版。包括桌面和移动平台。

    +

    这是一个TYPO.CSS的开源项目,详情:TYPO.CSS

    +
    Alpha 中,各路牛人都来支持一下,加入开发啊!
    + +

    预览:typo.css

    + +

    一、目录结构

    + +
    .
    +├── README.md           --- 使用帮助
    +├── TODO.md             --- TODO-List
    +├── license.txt         --- 许可证
    +├── typo.css            --- 将应用于你的项目
    +└── typo.html           --- Demo/预览
    +
    + +

    二、TYPO.CSS 的设计和使用

    + +

    建议看源代码,特别是注释,需要认真看。typo.css 主要包括:

    + +

    1、一般 reset.css 所需的内容

    + +

    目前的设计是这样的,尽量保持完整的 reset,比如让 ul/ol 无样式并且无多余的 padding/margin,这是必须的,因为一个网可能需要很多自定义的的内容,在实践中我们并不希望像 ul/ol 有样式,这样我们得用优先级去覆盖,这是非常麻烦的事。所以 typo.css 并不像 normalize.css,后者给每一个元素都预先定义了样式,这样在自定义的时候将是非常痛苦的。要大保持干净的所有元素一致化的 reset 才是最佳实践。

    + +

    为什么不是 Han 这个项目?

    + +

    2、class="typo" 阅读内容排版

    + +

    在文章/文档阅读的页面,需添加 .typo 这个 class,这样 table/ol/ul 等都会有预定的样式,让你的排版像 http://typo.sofish.de 一样,让用户阅读起来更舒服。

    + +

    3、增加类:

    + +

    主要是一些需要中文日常排版需要的元素和语文对应样式的增强,目前包括:

    + +

    (1) 专名号:使用标签 <u> 或者 .typo-u
    + (2) 着重号:使用 class .typo-em
    + (3) 首字下沉:使用 class .typo-first
    + (4) 清理浮动:与一般 reset.css 保持一致 .clearfix

    + +

    三、开源许可

    + +

    Sofish Lin: founder, creator of Alice CSS, a code writter, a semi-designer.
    Hotoo: developer, VIM guru, front-end web developer @ alipay.com

    + +

    基于 MIT License 开源,使用代码只需说明来源,或者引用 license.txt 即可。

    + +
    + 这是案例展示 + +
    +
    +
    +
    + +

    问题及注意事项:

    +

    这是描述

    + +
    + + diff --git a/cnDocs/solutions/typo.html b/cnDocs/solutions/typo.html new file mode 100644 index 000000000000..568c6818691e --- /dev/null +++ b/cnDocs/solutions/typo.html @@ -0,0 +1,73 @@ + + + + +中文排版 + + + + + +
    +

    中文网页重设与排版

    +

    目标:一致化浏览器排版效果,构建最适合中文阅读的网页排版。包括桌面和移动平台。

    +

    这是一个TYPO.CSS的开源项目,详情:TYPO.CSS

    +
    Alpha 中,各路牛人都来支持一下,加入开发啊!
    + +

    预览:typo.css

    + +

    一、目录结构

    + +
    .
    +├── README.md           --- 使用帮助
    +├── TODO.md             --- TODO-List
    +├── license.txt         --- 许可证
    +├── typo.css            --- 将应用于你的项目
    +└── typo.html           --- Demo/预览
    +
    + +

    二、TYPO.CSS 的设计和使用

    + +

    建议看源代码,特别是注释,需要认真看。typo.css 主要包括:

    + +

    1、一般 reset.css 所需的内容

    + +

    目前的设计是这样的,尽量保持完整的 reset,比如让 ul/ol 无样式并且无多余的 padding/margin,这是必须的,因为一个网可能需要很多自定义的的内容,在实践中我们并不希望像 ul/ol 有样式,这样我们得用优先级去覆盖,这是非常麻烦的事。所以 typo.css 并不像 normalize.css,后者给每一个元素都预先定义了样式,这样在自定义的时候将是非常痛苦的。要大保持干净的所有元素一致化的 reset 才是最佳实践。

    + +

    为什么不是 Han 这个项目?

    + +

    2、class="typo" 阅读内容排版

    + +

    在文章/文档阅读的页面,需添加 .typo 这个 class,这样 table/ol/ul 等都会有预定的样式,让你的排版像 http://typo.sofish.de 一样,让用户阅读起来更舒服。

    + +

    3、增加类:

    + +

    主要是一些需要中文日常排版需要的元素和语文对应样式的增强,目前包括:

    + +

    (1) 专名号:使用标签 <u> 或者 .typo-u
    + (2) 着重号:使用 class .typo-em
    + (3) 首字下沉:使用 class .typo-first
    + (4) 清理浮动:与一般 reset.css 保持一致 .clearfix

    + +

    三、开源许可

    + +

    Sofish Lin: founder, creator of Alice CSS, a code writter, a semi-designer.
    Hotoo: developer, VIM guru, front-end web developer @ alipay.com

    + +

    基于 MIT License 开源,使用代码只需说明来源,或者引用 license.txt 即可。

    + +
    + 这是案例展示 + +
    +
    +
    +
    + +

    问题及注意事项:

    +

    这是描述

    + +
    + + diff --git a/cnDocs/solutions/vertical-text.html b/cnDocs/solutions/vertical-text.html new file mode 100644 index 000000000000..f874dafa76b8 --- /dev/null +++ b/cnDocs/solutions/vertical-text.html @@ -0,0 +1,219 @@ + + + + +文字纵向排列 + + + + + +
    +

    文字纵向排列

    +

    这是cherry在uecss.com里总结的文字纵排列方法,开头一段话很特别,摘来给大家看下:

    +
    一次与携程网Lucky老师交流,才发现工作了三年的自己,其实功底一点都不扎实,所以从现在开始,认真恩考,认真总结,不但要知其然,更要知其所以然。再次感谢点醒执迷不悟的我的Lucky老师! +
    +

    由此我们可以推测出来携程网这次给cherry的面试题其中一道是:

    +

    关于文字纵向排列你能写出几种方法?
    考题背面扩展问题:纵向排列后,可否做到垂直居中呢?

    +
    之所以如此猜测,因为我也有次去携程面试的经历,全场笔试一张纸三个问题,纸张背面是扩展问法,在前面的基础上思考更进一步;
    我遇到的问题,发博文一篇:携程旅游网前端开发面试题,现已整合进前端解决方案,详见:自适应两列布局。 +
    +

    使文字纵排列的几种方法:与cherry的总结有改动

    +
      +
    1. <br> 标签
    2. +
    3. block每个字
    4. +
    5. 用 JavaScript
    6. +
    7. 限制Container容器宽度
    8. +
    9. 使用break-word;
    10. +
    11. 使用letter-spacing
    12. +
    13. Whitespace
    14. +
    +
    +

    <br> 标签

    +
    + 文
    + 字
    + 纵
    + 排
    +
    +
    +
    +<div class="box">
    +    文<br>
    +    字<br>
    +    纵<br>
    +    排<br>
    +</div>
    +这种方法最易想到,也最常用
    +
    +
    +

    block每个字

    +
    + + + + +
    +

    用 JavaScript

    +
    文字纵排
    +
    +
    +<div class="box block">
    +    <span>文</span>
    +    <span>字</span>
    +    <span>纵</span>
    +    <span>排</span>
    +</div>
    +这种方法的弊端是,需要手工录入标签
    +
    +<div id="J_vertext" class="box">文字纵排</div>
    +此种方法与前者原理一样,好处是用js代替手工添加span标签。
    +
    +var J_vertext=document.getElementById('J_vertext');
    +J_vertext.innerHTML='<span>'+J_vertext.innerHTML.split('').join('</span><span>')+'</span>';
    +
    +

    尽管如此,还是有一些弊端:

    +
      +
    • 当js失效的时候,会影响页面布局;
    • +
    • 当然完美的解决方法是,尽可能用css;
    • +
    + +
    +

    限制Container容器宽度

    +
    文字纵排
    +
    +
    +.vertext{
    +    width:20px;
    +    font-size:20px;
    +    word-wrap:break-word;
    +}
    +
    +word-wrap:break-word的一部分是CSS3规格,并不是在所有的浏览器兼容。
    +
    +

    如果把除第一个字母外的其它字母小写的话,就有点悲剧了,套用别人的一句话就是"it's too risky to play with pixel values.";

    +
    +

    使用break-word;

    +
    文字纵排
    +
    +
    +.vertext2{
    +    width:40px;
    +    font-size:40px;
    +    word-wrap:break-word;
    +    letter-spacing:20px;/* Set large letter-spacing as precaution */
    +}
    +
    +这种方法貌似很好,不过有用到一点css3了
    +
    +
    +

    使用letter-spacing

    +
    文字纵排
    +
    +
    +.vertext3{
    +    width: 1em;
    +    font-size: 40px;
    +    letter-spacing: 40px; /* arbitrary large letter-spacing for safety */
    +    background:#CCC;
    +}
    +
    +不很好,遇到标点标准浏览器需要和文字中间要加空格才能正常显示(默认标点不会显示在一行的开头),而IE直接无视标点符号了。
    +
    +
    +

    white-space:pre;

    +
    文 +字 +纵 +排 +
    + +
    +
    +.pre{
    +    white-space:pre; /* 或 pre-wrap */
    +}
    +
    +不爽的是,我们需要在编辑里所文字纵向排列,编辑控制很不方便
    +
    + +
    +

    文字纵向排列小实践,来首诗吧

    +
    +









    +

    +

    参差荇菜,左右流之

    +

    窈窕淑女,寤寐求之

    +

    求之不得 ,寤寐思服

    +

    悠哉悠哉,辗转反侧

    +

    参差荇菜,左右采之

    +

    窈窕淑女,琴瑟友之

    +

    参差荇菜,左右芼之

    +

    窈窕淑女,钟鼓乐之

    +

    + + + + + + +| +| +诗 +经

    +
    +

    存在的问题

    +
      +
    • IE下文字标点在一起letter-spacing方法直接无视标点符号了
    • +
    • pre方法调整显示高度非常不方便
    • +
    • letter-spacing属性设置不当,会导致选中状态遮住文字
    • +
    +

    最后小结:综上推荐使用<br>换行方法或限制容器宽度方法,简单便捷。

    +
    + +

    扩展:

    +

    纵向排列解决了,可否做到垂直居中呢?拭目以待!

    + +
    + + + + + + + diff --git a/cnDocs/solutions/white-space.html b/cnDocs/solutions/white-space.html new file mode 100644 index 000000000000..ff486c4d20ec --- /dev/null +++ b/cnDocs/solutions/white-space.html @@ -0,0 +1,156 @@ + + + + +强制换行-强制不换行与CSS省略号 + + + + + +
    +

    强制换行、强制不换行、CSS省略号

    +

    强制换行用法:

    +

    属性:强制换行:word-wrap:break-word; word-break:break-all; white-space:pre-wrap;
    +    强制不换行:overflow:hidden; width:300px; white-space:nowrap; text-overflow: ellipsis;

    +

    white-space 属性详解

    +
      +
    • normal: 默认处理方式。
    • +
    • pre: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
    • +
    • nowrap: 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。
    • +
    • pre-wrap: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
    • +
    • pre-line: 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。
    • +
    + +

    使用组合属性

    +
      +
    • 一般块级元素用:.as-wrap
    • +
    • table标签中需添加:.as-wrap-table
    • +
    + +
    +
    +

    一般块元素换行:

    +

    + http://google.com/abcdefghijklmnopqrstuvwxyz 000_^_^_000_(^o^)_000 abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789 + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +

    一般块元素不换行:

    +

    + http://google.com/abcdefghijklmnopqrstuvwxyz 000_^_^_000_(^o^)_000 abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789 + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

    +
    + + + + + + + + +

    换行的 table:

    + http://google.com/abcdefghijklmnopqrstuvwxyz 000_^_^_000_(^o^)_000 abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789 + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + http://google.com/abcdefghijklmnopqrstuvwxyz 000_^_^_000_(^o^)_000 abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789 + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
    + + + + + + + + + +

    未换行的 table:

    + http://google.com/abcdefghijklmnopqrstuvwxyz 000_^_^_000_(^o^)_000 abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789 + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + + http://google.com/abcdefghijklmnopqrstuvwxyz 000_^_^_000_(^o^)_000 abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789 + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +
    + + +
    +
    +/*
    +  @ 名称: 强制换行
    +  @ 用法: 
    +    * 一般块级元素用:.as-wrap
    +    * table标签中需添加:.as-wrap-table
    +  @ 例子: 
    +    <p class="as-wrap">…</p>
    +    <table class="as-wrap as-wrap-table"></table>
    +*/
    +
    +/* 一般 block-level 元素 */
    +.as-wrap, .as-wrap td, .as-wrap th{
    +    word-wrap:break-word;word-break:break-all;
    +}
    +
    +/* table */
    +.as-wrap-table{
    +    table-layout:fixed;
    +}
    +
    + +

    省略号 单行文本解决方案

    +

    解决方案描述

    + +
    +

    单行文本,如果这里字太多了就会显示省略号省略号啊!

    +
    +

    如果父层有宽度,这里不设置宽度,IE6不行,其他浏览器都OK

    +
    +
    +
    +.ellipsis{
    +    width: 300px; /*设置宽度*/
    +    white-space: nowrap; /*设置不折行*/
    +    overflow: hidden; /*设置超过的隐藏*/
    +    text-overflow: ellipsis; /*这就是省略号喽*/
    +}
    +
    +/* 测试 */
    +.box{width:300px;}
    +.box p{
    +    white-space: nowrap;
    +    overflow: hidden;
    +    text-overflow: ellipsis;
    +}
    +如果仅依赖父层的宽度自适应,内层不设置宽度,仅IE6不支持,其他浏览器都OK,内层设置width:100%;可以解决此问题。
    +
    + +

    问题及注意事项:

    +

    如上代码设置,都是必选项,每个属性都不可缺少,且仅适用于单行文本。

    + +

    省略号 多行文本解决方案

    + + +

    问题及注意事项:

    +

    实践出真知

    + + + + +
    + + diff --git a/cnDocs/standard.php b/cnDocs/standard.php new file mode 100644 index 000000000000..a1f841c07760 --- /dev/null +++ b/cnDocs/standard.php @@ -0,0 +1,1016 @@ + + + + + + +
    +
    +

    前端规范文档

    +

    前端开发团队遵循和约定的代码书写规范,旨在提高代码的规范性和可维护性。

    +
    +
    + + +
    + + +
    + +
    + + + + +
    + +

    规范说明

    +

    此规范为参考规范,不全是硬性要求,部分硬性约定见 文档结构 & 书写规范,统一团队编码规范和风格。让所有代码都是有规可循的,并且能够得到沉淀,减少重复劳动。

    +

    首先规划统一风格的文档结构,包括但不限于HTML、CSS、JS,文档更统一且简洁明了!

    +

    统一风格的命名规范,语义清晰,可读性高

    +

    严谨的编码风格,消除潜在代码缺陷

    +
    大家一起完善。
    +
    + + +
    + +

    网站系统

    +
    +cnBootstrap/  pro即具体项目名称
    +├── css/
    +│   ├── /reset.css     ├── core.css
    +│   ├── /common.css    │
    +│   ├── pro-common.css │
    +│   ├── pro-custom.css
    +├── js/
    +│   ├── /common.js
    +│   ├── pro-custom.js
    +├── img/
    +│   ├── combo.png
    +│   ├── pro-png24.png
    +└── README.md
    +
    +

    专题页面

    +
    +zt/  pro即专题简述名称
    +├── css/
    +│   ├── /reset.css     ├── zt_style.css
    +│   ├── /common.css    │
    +│   ├── zt_style.css   │
    +├── js/
    +│   ├── /common.js
    +│   ├── pro-custom.js
    +├── img/
    +│   ├── combo.png
    +│   ├── pro-png24.png
    +└── README.md
    +
    +
    + + +
    + +
    * 第一行统一使用HTML5标准:<!DOCTYPE html>
    +

    HTML5 头部声明简单有效,故在每个HTML页面强制执行此标准模式。

    +
    +<!DOCTYPE html>
    +<html>
    +<head>
    +<meta charset="utf-8" />
    +<title>your title</title>
    +<link rel="stylesheet" href="css_example_url" />
    +<script src="http://code.jquery.com/jquery-latest.js"></script>
    +</head>
    +<body>
    +...
    +</body>
    +</html>
    +
    + +
    Meta 的使用:(需根据具体项目选择)参考 cool-head
    + + +
      +
    • <img> 标签默认缺省格式:<img src="xxx.png" alt="缺省时文字" /> 避免出现 src="" 问题
    • +
    • <a> 标签缺省格式:<a href="###" title="链接名称">xxx</> 注:target="_blank" 根据需求决定
    • +
    • 标签预留链接占位符使用 ###,参见: a标签占位符问题
    • +
    • 所有标签需要符合XHTML标准闭合
    • +
    • 一律统一标签结尾斜杠的书写形式:<br /> <hr /> 注意之间空格
    • +
    • 避免使用已过时标签,如:<b> <u> <i> 而用 <strong> <em> 等代替
    • +
    • 使用 data-xxx 来添加自定义数据,如:<input data-xxx="yyy"/>
    • +
    • 避免使用 style="xxx:xxx;" 的内联样式表
    • +
    • 特殊符号使用参考 HTML 符号实体
    • +
    + +
    HTML 细化规范
    +
      +
    • HTML head 部分的结构参看:cool-head (摘取必要内容即可)
    • +
    • css 文件置于都 头部
    • +
    • jQueryGoogle Analytics 引用置于 头部
    • +
    • 其他效果 js统计代码 文件置于 尾部
    • +
    • HTML 代码尽量过一遍 HTML5 验证
    • +
    • HTML 占位图片使用 temp.im & placehold.us 图片服务
    • +
    + +
    书写规范
    +
      +
    • 使用四个空格的 soft-tabs 缩进
    • +
    • body 里应每层嵌套元素缩进一次(4个空格)
    • +
    • 请务必实用双引号,而非单引号
    • +
    • 不要自闭元素包括一个斜线
    • +
    + +

    错误示例:

    +
    +<!DOCTYPE html>
    +<html>
    +<head>
    +<title>Page title</title>
    +</head>
    +<body>
    +<img src='images/company-logo.png' alt='Company' />
    +<h1 class='hello-world'>Hello, world!</h1>
    +</body>
    +</html>
    +
    +

    正确示例:

    +
    +<!DOCTYPE html>
    +<html>
    +<head>
    +<title>Page title</title>
    +</head>
    +<body>
    +    <img src='images/company-logo.png' alt='Company' />
    +    <h1 class='hello-world'>Hello, world!</h1>
    +</body>
    +</html>
    +
    + +

    HTML5 doctype

    +

    在每个浏览器可以用这个简单的DOCTYPE,故在每个HTML页面开始强制执行的标准模式。

    + +
    <!DOCTYPE html>
    + +

    实用大于语义

    +

    努力保持HTML的标准和语义,但不要牺牲实用性。用最少的复杂度尽可能少的标签实现需求。

    + +

    属性顺序

    +

    HTML 属性应该遵循特定的顺序,以便能更易阅读代码。

    + +
      +
    • class
    • +
    • id
    • +
    • data-*
    • +
    • for|type|href
    • +
    + +

    比如你的代码看起来应该像这样:

    +
    +<a class="" id="" data-modal="" href="">链接示例</a>
    +
    + + +
    + + + + +
    + +
      +
    1. 文件和目录名只能包含 [a-z\d-],并以英文字母开头
    2. +
    3. 首选合适的英文单词
    4. +
    5. data api 命名为小写并用连字符,如 data-trigger-type
    6. +
    7. 事件名为驼峰,如 .trigger('itemSelected')
    8. +
    9. 符合规范 +
        +
      • 常量全大写 UPPERCASE_WORD
      • +
      • 变量驼峰 camelName
      • +
      • 类名驼峰,并且首字母要大写 CamelName
      • +
      +
    10. +
    + +
    + + +
    + +

    下面内容对前端文档结构进行了规范约束,并作为硬性约定。

    +

    HTML 规范

    + + +

    CSS

    +
    + + + + + +
    + +

    分工安排

    +
    + + + +
    + +

    注释规范

    +
    + + +
    + + +

    外部CSS引用,必须使用如下格式( rel 在前,href 在后,无 type="text/css" 及 charset ):

    +
    <link rel="stylesheet" href="http://pic.lvmama.com/styles/v3/combo.css" >
    +

    CSS 注意事项

    +
      +
    • 无特殊说明,编码统一为utf-8;
    • +
    • 防止文件合并及编码转换时造成问题,请将样式中文字体名字改成对应的英文名字(unicode码),如:宋体( \5b8b\4f53)微软雅黑(”Microsoft YaHei”,”\5FAE\8F6F\96C5\9ED1″);
    • +
    • 书写代码前,考虑并提高样式重复使用率;
    • +
    • 禁止使用 expression 表达式;
    • +
    • 禁止滥用 !important
    • +
    • 能缩写的尽量缩写,如 padding:5px 0 0 5px;
    • +
    • 层级(z-index)必须清晰明确,适当划分组件层级范围,禁止层级间盲目攀比;
    • +
    • 为方便组件模块化和提高弹性,正常情况下,为避免外边界冲突,组件不应设置外边界,外边界用组合css方式实现,如:m10{margin:10px}mt10{margin-top:10px}等;
    • +
    • 必须为大区块&重要模块的样式添加注释,小区块适量注释;
    • +
    • 正式发布前应进行压缩,压缩后文件的命名应添加”.min”后缀;
    • +
    • 代码缩进与格式:请参照以下 CSS 书写规范;
    • +
    + +

    CSS 书写规范

    +

    以下书写规范针对组件开发使用,非组件书写格式建议使用单行式排版。

    +
      +
    • 使用四个空格的 soft-tabs 缩进
    • +
    • 写组选择器时,保持选择器各占一行
    • +
    • 在属性块的左 “{” 前应该有一个空格
    • +
    • 关闭属性块的右 “}” 要新起一行
    • +
    • 每个属性的 “:” 后包含一个空格
    • +
    • 每个属性应该自己独占一行
    • +
    • 分割选择器的 “,” 后应该包含一个空格
    • +
    • Don't include spaces after commas in RGB or RGBa colors, and don't preface values with a leading zero
    • +
    • 小写所有16进制值, 例如, #fff 而非 #FFF
    • +
    • 使用简写16进制值, 例如, #fff 而非 #ffffff
    • +
    • 选择器中引用属性值, 例如, input[type="text"] +
    • +
    • 避免0值设置单位, 例如, margin: 0; 而非 margin: 0px;
    • +
    + +

    错误示例:

    +
    +.selector, .selector-secondary, .selector[type=text] {
    +    padding:15px;
    +    margin:0px 0px 15px;
    +    background-color:rgba(0, 0, 0, 0.5);
    +    box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF
    +}
    +
    + +

    正确示例:

    +
    +.selector,
    +.selector-secondary,
    +.selector[type="text"] {
    +    padding: 15px;
    +    margin: 0 0 15px;
    +    background-color: rgba(0,0,0,.5);
    +    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
    +}
    +
    + + +

    常见的CSS术语,请参见 syntax section of the Cascading Style Sheets article on Wikipedia.

    + +

    属性顺序

    + +
    +.declaration-order {
    +    /* Positioning 定位 */
    +    position: absolute;
    +    top: 0;
    +    right: 0;
    +    bottom: 0;
    +    left: 0;
    +    z-index: 100;
    +    
    +    /* Box-model 盒模型 */
    +    display: block;
    +    float: right;
    +    width: 100px;
    +    height: 100px;
    +    
    +    /* Typography 排版 */
    +    font: normal 13px "Helvetica Neue", sans-serif;
    +    line-height: 1.5
    +    color: #333;
    +    text-align: center;
    +    
    +    /* Visual 视觉 */
    +    background-color: #f5f5f5;
    +    border: 1px solid #e5e5e5;
    +    border-radius: 3px;
    +    
    +    /* Misc 其他 */
    +    opacity: 1;
    +}
    +
    + +

    相关属性应放在一起,将定位与盒模型属性写在最前面,其次是排版和视觉效果的属性。

    +

    关于属性顺序的完整列表,请参考 Recess.

    + +

    格式化例外

    +

    某些情况下,这是有道理的,稍微偏离默认的 语法.

    + +

    前缀属性

    +

    当使用供应商前缀的属性时,每个属性缩进到vlaue值垂直对齐的位置,方便多行编辑。

    + +
    +/* Corner radius-圆角 */
    +.selector {
    +  -webkit-border-radius: 3px;
    +     -moz-border-radius: 3px;
    +          border-radius: 3px;
    +}
    +
    + +

    注:-khtml-border-radius: 3px; 是苹果的那个浏览器的,现在使用 -webkit-

    +

    在 Textmate、Sublime Text 2 以及 notepad++等工具中, 都支持多行编辑。

    + +

    单一属性的书写规则

    +

    在有些情况下,每个样式只有一个属性,考虑到可读性及更快地编辑删除等,保持同一行书写。

    + +
    +.span1 { width: 60px; }
    +.span2 { width: 140px; }
    +.span3 { width: 220px; }
    +
    +.sprite {
    +    display: inline-block;
    +    width: 16px;
    +    height: 15px;
    +    background-image: url(../img/sprite.png);
    +}
    +.icon           { background-position: 0 0; }
    +.icon-home      { background-position: 0 -20px; }
    +.icon-account   { background-position: 0 -40px; }
    +
    + +

    可读性

    +

    代码是由人来书写和维护的。确保你的代码有很好的注释描述,以便他人使用。

    + +

    注释

    +

    好的代码都有一个良好的代码注释而不仅仅是一个类名

    + +

    Bad example:

    +
    +/* Modal header */
    +.modal-header {
    +  ...
    +}
    +
    + +

    Good example:

    +
    +/* Wrapping element for .modal-title and .modal-close */
    +.modal-header {
    +  ...
    +}
    +
    + +

    类名与命名

    +
      +
    • 保持类名使用小写字母或连接符 (不要使用下划线或驼峰命名法)
    • +
    • 避免使用随意的首字符命名法
    • +
    • 保持命名尽可能短并简洁
    • +
    • 使用有意义的命名;使用结构化或目的性的意义名称
    • +
    • 根据最近的父组件基类作为命名前缀
    • +
    • 为JavaScript预留钩子的命名,请以 JS_ 起始,比如:JS_ui-tab, JS_slidebox;或者使用 data-* 挂钩JS功能
    • +
    + +

    Bad example:

    +
    +.t { ... }
    +.red { ... }
    +.header { ... }
    +
    + +

    Good example:

    +
    +.tweet { ... }
    +.important { ... }
    +.tweet-header { ... }
    +
    + +

    选择器

    +
      +
    • 在通用的元素标签中使用类
    • +
    • 要保持尽量简短,并限制每个选择器最多三个class
    • +
    • 必要时使用最近的父类 (如,在不使用前缀类时)
    • +
    + +

    Bad example:

    +
    +span { ... }
    +.page-container #stream .stream-item .tweet .tweet-header .username { ... }
    +.avatar { ... }
    +
    + +

    Good example:

    +
    +.avatar { ... }
    +.tweet-header .username { ... }
    +.tweet .avatar { ... }
    +
    + +

    组织

    +
      +
    • 组织代码段的组成部分
    • +
    • 指定一个一致的注释层次结构
    • +
    • 如果使用多个css文件,则按组件进行划分
    • +
    +
    + + + + + +
    + +

    关于Hack: 在firefox写完,IE有问题?还是其他浏览器也出现了。你知道IE Hack 能解决。我想,你也可能知道,用其他方法也能绕过。建议少用Hack。

    +
    + + +
    + +

    规则:

    +

    1. 可读性强,见名知义。
    + 1. 尽量不与 jQuery 社区已有的习惯冲突。
    + 1. 尽量写全。不用缩写,除非是下面列表中约定的。

    +

    大家一起来,逐步完善。

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    常用词 说明
    options 表示配置,与 jQuery 社区保持一致,不要用 config, opts 等
    active 表示当前,不要用 current 等
    index 表示索引,不要用 idx 等
    trigger 触点元素
    triggerType 触发类型、方式
    context 表示传入的 this 对象
    object 推荐写全,不推荐简写为 o, obj 等
    element 推荐写全,不推荐简写为 el, elem 等
    length 不要写成 len, l
    prev previous 的缩写
    constructor 不能写成 ctor
    easing 表示动画平滑函数
    min minimize 的缩写
    max maximize 的缩写
    DOM 不要写成 dom, Dom
    .tpl 使用 tpl 后缀表示模版
    btn button 的缩写
    +
    + + +
    + +

    JavaScript 生成标记

    +

    使用JavaScript生成标记,会使内容更难找到,更难编辑且性能更低。切记不要这样做。

    + +
    强调! 需要通过 jslint,查看下面的具体编码风格。
    +

    首先必须通过

    arale/tools/gjslint
    普通模式校验。 通不过的,不允许提交到 Git 库。

    + +
    + +
      +
    • JS 换行缩进:采用 4 空格
    • +
    • 结束行需添加分号; +
    • +
    • jQuery变量要求首字符为 $, 私有变量:首字符为 _; 尽量避免全局变量.
    • +
    • 避免使用 eval(),setTimeOut使用调用函数,考虑重绘,回流 操作对页面影响 参看:reflows,repaints +
    • +
    • JS调试使用 console.log()console.dir() 进行,避免使用弹出框,线上版需要注释所有调试代码
    • +
    • JS压缩混淆工具: JS Compressor 如果使用了压缩,需要留 name-src.js 在同路径供今后修改使用
    • +
    +
    +

    下面是一些常用注意点:

    + +

    编码

    + +

    统一用 utf-8

    + +

    长度

    + +

    长度不超过 80 个字符。别小看这一条规则,如果严格去遵循,你会发现代码变清晰了。而且,你一定能做到的。

    + +

    参考:

    + +
      +
    1. pep8 为 79 个字符
    2. +
    3. npm 为 80 个字符
    4. +
    5. google 为 80 个字符
    6. +

    缩进

    + +

    缩进使用 2个 或 4个 空格,组件内保持统一,不混用。禁用 tab。

    + +

    参考:

    + +
      +
    1. npm 为 2 空格
    2. +
    3. pep8 为 4 空格
    4. +
    5. google 为 2 空格( gjslint 没规定)
    6. +
    7. 大部分前端工程师习惯 4 空格
    8. +
    +

    Vim 设置 tab 为 4 空格:

    + +
    +set tabstop=4
    +set shiftwidth=4
    +set expandtab
    +
    + +

    花括号

    + +

    花括号不换行

    + +

    +
    +if (foo) {
    +}
    +
    + +

    +
    +if (foo)
    +{
    +}
    +
    + +

    不允许一行判断,一律换行

    + +

    +
    +if (foo) return;
    +
    + +

    命名约定

    + +
      +
    1. 常量 UPPERCASE_WORD
    2. +
    3. 变量 camelName
    4. +
    5. 类名 CamelName
    6. +
    + +

    空格

    +

    操作符之间需要空格

    + +

    +
    +var x = y + z
    +
    + +

    +
    +var x=y+z
    +
    + +

    只空一格

    + +

    +
    +{
    +	a: 'short',
    +	looooongname: 'long'
    +}
    +
    + +

    +
    +{
    +	a           : 'short',
    +	looooongname: 'long'
    +}
    +
    + +

    逗号与换行

    +

    建议用自然人的处理方法

    + +
    +{
    +   a: 'a',
    +   b: 'b',
    +   c: 'c'
    +}
    +
    + +

    不建议使用 npm 风格的逗号与换行,即

    + +
    {
    +   a: 'a'
    +  ,b: 'b'
    +  ,c: 'c'
    +}
    +
    + +

    变量声明

    +

    首先,**变量在使用前必须声明**。

    +

    对于单 var 模式和多 var 模式,不做强行约定,但同一个文件里,风格必须一致。

    + + +
    + +
    + +

    总原则

    + +
      +
    1. As short as possible(如无必要,勿增注释)。尽量提高代码本身的清晰性、可读性。
    2. +
    3. As long as necessary(如有必要,尽量详尽)。合理的注释、空行排版等,可以让代码更易阅读、更具美感。
    4. +
    + +

    总之,注释的目的是:提高代码的可读性,从而提高代码的可维护性。

    + +

    什么时候需要添加注释

    + +
      +
    1. 某段代码的写法,需要注释说明 why 时:

      +
      +// Using loop is more efficient than `rest = slice.call(arguments, 1)`.
      +for (i = 1, len = arguments.length; i < len; i++) {
      +rest[i - 1] = arguments[i];
      +}
      +
    2. +
    3. 添加上注释,能让代码结构更清晰时:

      + +
      +init: function(selector, context, rootjQuery) {
      +var match, elem, ret, doc;
      +
      +// Handle $(""), $(null), or $(undefined)
      +if ( !selector ) {
      +    ...
      +}
      +
      +// Handle $(DOMElement)
      +if ( selector.nodeType ) {
      +    ...
      +}
      +
      +// The body element only exists once, optimize finding it
      +if ( typeof selector === "string" ) {
      +    ...
      + }
      +}
      +
    4. +
    5. 有借鉴第三方代码,需要说明时:

      +
      +// Inspired by https://github.com/jquery/jquery/blob/master/src/core.js
      +function ready() {
      +...
      +}
      +
    6. +
    + +

    文件起始处的约定

    + +

    每个源码文件的开头,保留为空:

    + +
    +define(function(require, exports, module) {
    +    // 源代码
    +});
    + +

    注意点:

    + +
      +
    1. 文件头不添加作者信息,是因为更推崇团队和社区参与。author 和 contributors 信息,在 GitHub 上可以清晰看出来。(注意:该条规范,仅适用于 Arale 组件。对于业务代码,请添加上作者信息,以便在出问题时,快速找到负责人。)
    2. +
    3. 文件最后空一行,可以保证在 combo 合并后,源码的层次清晰。
    4. +
    + +

    注释书写规范

    + +
      +
    1. 源码中的注释,推荐用英文。
    2. +
    3. 含有中文时,标点符号用中文全角。
    4. +
    5. 中英文夹杂时,英文与中文之间要用一个空格分开。
    6. +
    7. 注释标识符与注释内容要用一个空格分开:// 注释/* 注释 */
    8. +
    + +

    JSDoc 注释

    + +
      +
    • 不推荐 JSDoc 式注释,推荐 Backbone 风格的注释。
    • +
    • API 请通过 README 等文档表达清楚。
    • +
    • 不写 JSDoc 类文档,可以让开发者在写代码时更专注于写代码,在写文档时则更专注于写文档。让工作解藕,更专注。
    • +
    + +
    + + +
    + +

    参考JSON Style Guide翻译,原版:Google JSON Style Guide

    +
    + + + + +
    + +

    基本书写规范

    + +
      +
    1. 尽量用中文,力求简洁清晰。(注:源码中的注释,可用英文。)
    2. +
    3. 含有中文的段落,标点符号必须用中文全角。
    4. +
    5. 中英文混杂时,中文与英文之间,要保持一个空格。
    6. +
    + +

    README.md 书写规范

    + +

    每个组件目录下,必须有该文件,用来描述组件的基本情况,模板如下:

    + +
    +# 模块名称
    +
    +该模块的概要介绍。
    +
    +---
    +
    +## 模块依赖
    +
    +* seajs
    +
    +## 使用说明
    +
    +如何使用该模块,可以根据组件的具体特征,合理组织。
    +需要提供 API 说明,如有继承父类的参数也需要说明。
    +
    + + +

    上面两部分是必须的,可以根据实际情况,加入其他部分。

    +

    关于Markdown的使用可以参考:Markdown 中文基础教程文档

    +

    参考范例:lib/class/README.md

    + +

    HISTORY.md 书写规范

    + +

    有正式版本更新的组件,必须要有该文件,用来描述版本变更情况,模板如下:

    + +
    +### 1.1.0
    +
    +* [bug fix] #18 修复了 XXX 问题
    +* [bug fix] #29 修复了 YYY 问题
    +* [feature] #12 增加了 ZZZ 功能
    +* [improve] #23 优化了 BBB 代码
    +
    +### 1.0.0
    +
    +* 第一个发布版本
    +
    +
    + + + +
    + +

    文件命名

    + +

    文件内容

    + +

    example 应该尽可能展现所有功能,至少包含如下内容:

    + +
      +
    • 效果展示,如果是组件则需要展示交互效果
    • +
    • 代码片段,实现此效果的代码
    • +
    • 描述,做一个简要说明
    • +
    • 适用无线的组件 example 需要考虑手机用户的访问
    • +
    +
    + + + + + +
    + +
      +
    1. 历史记录文件放在模块根目录下,文件名为 HISTORY.md

    2. +
    3. 书写格式参照 https://raw.github.com/aralejs/autocomplete/master/HISTORY.md

    4. +
    5. 一切有价值的修改必须忠实地记录在文件中,推荐表明对应的 issue 地址。

    6. +
    7. +

      Arale 模块的修改类型共有五项:

      + +
        +
      • +new 新增的属性、功能、方法、特性等等。
      • +
      • +fixed 修复 bug 和影响使用的性能问题等。
      • +
      • +imporved 接口增强、健壮性和性能提升、代码优化等。
      • +
      • +changed 涉及到兼容性变化的改动。
      • +
      • +unresoloved 已知的但本版本暂未修复的问题。
      • +
      +
    8. +
    9. 要在 aralejs.org/xxx/history.html 展现出图片标签的效果,需要按下列格式书写修改记录。

    10. +
    + +
    +`tag:new` 增加 duration 参数。
    +`tag:changed` 删除 duration 参数。
    +
    + +

    效果预览

    + +

    http://aralejs.org/autocomplete/history.html

    +
    + + + + + + + + + +
    + +

    EDM制作规范

    +
    + + + +

    相关讨论

    + + + + +
    + +
      +
    • CSS 只可使用 内联样式表 ,如:style="margin:0;"
    • +
    • 设计之初遵循: 图上无文本,文本后无底纹 的规则
    • +
    • 使用 MailChimp HTML Email CSS Fix 参看下文链接
    • +
    • 引入 CSS Reset for HTML Email 参看下文链接
    • +
    • 使用 Table 布局而非 DIV
    • +
    • 所有图片使用 IMG 标签,如:<img style="style="display:block" "src="" />
    • +
    • 可以适当使用占位符 spacer.gif
    • +
    • 多用 <br /> 换行而非 <p>
    • +
    • 整体最佳宽度为:550-600px
    • +
    • 不使用 Javascript
    • +
    • 正式发送给用户之前,多次测试
    • +
    +

    更多细节参考下面链接:
    12 Killer Tips and Tricks for Building HTML Email

    +
    + +
    +
    + +
    + + + + \ No newline at end of file diff --git a/cnDocs/templates/footer.php b/cnDocs/templates/footer.php new file mode 100644 index 000000000000..d157ffe6d8f9 --- /dev/null +++ b/cnDocs/templates/footer.php @@ -0,0 +1,26 @@ + + + + + + + diff --git a/cnDocs/templates/header.php b/cnDocs/templates/header.php new file mode 100644 index 000000000000..b741346e4a6f --- /dev/null +++ b/cnDocs/templates/header.php @@ -0,0 +1,76 @@ + + + + +<?php echo $title; ?> · Oricode - cnBootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cnDocs/templates/layout.mustache b/cnDocs/templates/layout.mustache new file mode 100644 index 000000000000..deaec189ad10 --- /dev/null +++ b/cnDocs/templates/layout.mustache @@ -0,0 +1,149 @@ + + + + + {{title}} + + + + + + + + + + + + + + + + + + + + + {{#production}} + + {{/production}} + + + + + + + +{{>body}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {{#production}} + + + {{/production}} + + + diff --git a/cnDocs/templates/meta.php b/cnDocs/templates/meta.php new file mode 100644 index 000000000000..46d5aca1d1df --- /dev/null +++ b/cnDocs/templates/meta.php @@ -0,0 +1,42 @@ + + + + +<?php echo $title; ?> + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/cnDocs/templates/pages/base-css.mustache b/cnDocs/templates/pages/base-css.mustache new file mode 100644 index 000000000000..e0a0280687d0 --- /dev/null +++ b/cnDocs/templates/pages/base-css.mustache @@ -0,0 +1,2005 @@ + +
    +
    +

    {{_i}}Base CSS{{/i}}

    +

    {{_i}}Fundamental HTML elements styled and enhanced with extensible classes.{{/i}}

    +
    +
    + + +
    + + +
    + +
    + + + + +
    + + + {{! Headings }} +

    {{_i}}Headings{{/i}}

    +

    {{_i}}All HTML headings, <h1> through <h6> are available.{{/i}}

    +
    +

    h1. {{_i}}Heading 1{{/i}}

    +

    h2. {{_i}}Heading 2{{/i}}

    +

    h3. {{_i}}Heading 3{{/i}}

    +

    h4. {{_i}}Heading 4{{/i}}

    +
    h5. {{_i}}Heading 5{{/i}}
    +
    h6. {{_i}}Heading 6{{/i}}
    +
    + + {{! Body copy }} +

    {{_i}}Body copy{{/i}}

    +

    {{_i}}Bootstrap's global default font-size is 14px, with a line-height of 20px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).{{/i}}

    +
    +

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

    +

    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

    +

    Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

    +
    +
    <p>...</p>
    + + {{! Body copy .lead }} +

    {{_i}}Lead body copy{{/i}}

    +

    {{_i}}Make a paragraph stand out by adding .lead.{{/i}}

    +
    +

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

    +
    +
    <p class="lead">...</p>
    + + {{! Using LESS }} +

    {{_i}}Built with Less{{/i}}

    +

    {{_i}}The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.{{/i}}

    + + +
    + + + {{! Emphasis }} +

    {{_i}}Emphasis{{/i}}

    +

    {{_i}}Make use of HTML's default emphasis tags with lightweight styles.{{/i}}

    + +

    <small>

    +

    {{_i}}For de-emphasizing inline or blocks of text, use the small tag.{{/i}}

    +
    +

    This line of text is meant to be treated as fine print.

    +
    +
    +<p>
    +  <small>This line of text is meant to be treated as fine print.</small>
    +</p>
    +
    + +

    {{_i}}Bold{{/i}}

    +

    {{_i}}For emphasizing a snippet of text with a heavier font-weight.{{/i}}

    +
    +

    The following snippet of text is rendered as bold text.

    +
    +
    <strong>rendered as bold text</strong>
    + +

    {{_i}}Italics{{/i}}

    +

    {{_i}}For emphasizing a snippet of text with italics.{{/i}}

    +
    +

    The following snippet of text is rendered as italicized text.

    +
    +
    <em>rendered as italicized text</em>
    + +

    {{_i}}Heads up!{{/i}} {{_i}}Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.{{/i}}

    + +

    {{_i}}Emphasis classes{{/i}}

    +

    {{_i}}Convey meaning through color with a handful of emphasis utility classes.{{/i}}

    +
    +

    Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

    +

    Etiam porta sem malesuada magna mollis euismod.

    +

    Donec ullamcorper nulla non metus auctor fringilla.

    +

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

    +

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

    +
    +
    +<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    +<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    +<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
    +<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
    +<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    +
    + + +
    + + + {{! Abbreviations }} +

    {{_i}}Abbreviations{{/i}}

    +

    {{_i}}Stylized implemenation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.{{/i}}

    + +

    <abbr>

    +

    {{_i}}For expanded text on long hover of an abbreviation, include the title attribute.{{/i}}

    +
    +

    {{_i}}An abbreviation of the word attribute is attr.{{/i}}

    +
    +
    <abbr title="attribute">attr</abbr>
    + +

    <abbr class="initialism">

    +

    {{_i}}Add .initialism to an abbreviation for a slightly smaller font-size.{{/i}}

    +
    +

    {{_i}}HTML is the best thing since sliced bread.{{/i}}

    +
    +
    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
    + + +
    + + + {{! Addresses }} +

    {{_i}}Addresses{{/i}}

    +

    {{_i}}Present contact information for the nearest ancestor or the entire body of work.{{/i}}

    + +

    <address>

    +

    {{_i}}Preserve formatting by ending all lines with <br>.{{/i}}

    +
    +
    + Twitter, Inc.
    + 795 Folsom Ave, Suite 600
    + San Francisco, CA 94107
    + P: (123) 456-7890 +
    +
    + {{_i}}Full Name{{/i}}
    + {{_i}}first.last@gmail.com{{/i}} +
    +
    +
    +<address>
    +  <strong>Twitter, Inc.</strong><br>
    +  795 Folsom Ave, Suite 600<br>
    +  San Francisco, CA 94107<br>
    +  <abbr title="Phone">P:</abbr> (123) 456-7890
    +</address>
    +
    +<address>
    +  <strong>{{_i}}Full Name{{/i}}</strong><br>
    +  <a href="mailto:#">{{_i}}first.last@gmail.com{{/i}}</a>
    +</address>
    +
    + + +
    + + + {{! Blockquotes }} +

    {{_i}}Blockquotes{{/i}}

    +

    {{_i}}For quoting blocks of content from another source within your document.{{/i}}

    + +

    {{_i}}Default blockquote{{/i}}

    +

    {{_i}}Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.{{/i}}

    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    +
    +
    +
    +<blockquote>
    +  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    +</blockquote>
    +
    + +

    {{_i}}Blockquote options{{/i}}

    +

    {{_i}}Style and content changes for simple variations on a standard blockquote.{{/i}}

    + +

    {{_i}}Naming a source{{/i}}

    +

    {{_i}}Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.{{/i}}

    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    + {{_i}}Someone famous in Source Title{{/i}} +
    +
    +
    +<blockquote>
    +  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    +  <small>{{_i}}Someone famous <cite title="Source Title">Source Title</cite>{{/i}}</small>
    +</blockquote>
    +
    + +

    {{_i}}Alternate displays{{/i}}

    +

    {{_i}}Use .pull-right for a floated, right-aligned blockquote.{{/i}}

    +
    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    + {{_i}}Someone famous in Source Title{{/i}} +
    +
    +
    +<blockquote class="pull-right">
    +  ...
    +</blockquote>
    +
    + + +
    + + + +

    {{_i}}Lists{{/i}}

    + +

    {{_i}}Unordered{{/i}}

    +

    {{_i}}A list of items in which the order does not explicitly matter.{{/i}}

    +
    +
      +
    • Lorem ipsum dolor sit amet
    • +
    • Consectetur adipiscing elit
    • +
    • Integer molestie lorem at massa
    • +
    • Facilisis in pretium nisl aliquet
    • +
    • Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
      • +
      • Purus sodales ultricies
      • +
      • Vestibulum laoreet porttitor sem
      • +
      • Ac tristique libero volutpat at
      • +
      +
    • +
    • Faucibus porta lacus fringilla vel
    • +
    • Aenean sit amet erat nunc
    • +
    • Eget porttitor lorem
    • +
    +
    +
    +<ul>
    +  <li>...</li>
    +</ul>
    +
    + +

    {{_i}}Ordered{{/i}}

    +

    {{_i}}A list of items in which the order does explicitly matter.{{/i}}

    +
    +
      +
    1. Lorem ipsum dolor sit amet
    2. +
    3. Consectetur adipiscing elit
    4. +
    5. Integer molestie lorem at massa
    6. +
    7. Facilisis in pretium nisl aliquet
    8. +
    9. Nulla volutpat aliquam velit
    10. +
    11. Faucibus porta lacus fringilla vel
    12. +
    13. Aenean sit amet erat nunc
    14. +
    15. Eget porttitor lorem
    16. +
    +
    +
    +<ol>
    +  <li>...</li>
    +</ol>
    +
    + +

    {{_i}}Unstyled{{/i}}

    +

    {{_i}}A list of items with no list-style or additional left padding.{{/i}}

    +
    +
      +
    • Lorem ipsum dolor sit amet
    • +
    • Consectetur adipiscing elit
    • +
    • Integer molestie lorem at massa
    • +
    • Facilisis in pretium nisl aliquet
    • +
    • Nulla volutpat aliquam velit +
        +
      • Phasellus iaculis neque
      • +
      • Purus sodales ultricies
      • +
      • Vestibulum laoreet porttitor sem
      • +
      • Ac tristique libero volutpat at
      • +
      +
    • +
    • Faucibus porta lacus fringilla vel
    • +
    • Aenean sit amet erat nunc
    • +
    • Eget porttitor lorem
    • +
    +
    +
    +<ul class="unstyled">
    +  <li>...</li>
    +</ul>
    +
    + +

    {{_i}}Description{{/i}}

    +

    {{_i}}A list of terms with their associated descriptions.{{/i}}

    +
    +
    +
    {{_i}}Description lists{{/i}}
    +
    {{_i}}A description list is perfect for defining terms.{{/i}}
    +
    Euismod
    +
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    +
    Donec id elit non mi porta gravida at eget metus.
    +
    Malesuada porta
    +
    Etiam porta sem malesuada magna mollis euismod.
    +
    +
    +
    +<dl>
    +  <dt>...</dt>
    +  <dd>...</dd>
    +</dl>
    +
    + +

    {{_i}}Horizontal description{{/i}}

    +

    {{_i}}Make terms and descriptions in <dl> line up side-by-side.{{/i}}

    +
    +
    +
    {{_i}}Description lists{{/i}}
    +
    {{_i}}A description list is perfect for defining terms.{{/i}}
    +
    Euismod
    +
    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
    +
    Donec id elit non mi porta gravida at eget metus.
    +
    Malesuada porta
    +
    Etiam porta sem malesuada magna mollis euismod.
    +
    Felis euismod semper eget lacinia
    +
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    +
    +
    +
    +<dl class="dl-horizontal">
    +  <dt>...</dt>
    +  <dd>...</dd>
    +</dl>
    +
    +

    + {{_i}}Heads up!{{/i}} + {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.{{/i}} +

    +
    + + + + +
    + + +

    Inline

    +

    Wrap inline snippets of code with <code>.

    +
    + For example, <section> should be wrapped as inline. +
    +
    +{{_i}}For example, <code><section></code> should be wrapped as inline.{{/i}}
    +
    + +

    Basic block

    +

    {{_i}}Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.{{/i}}

    +
    +
    <p>{{_i}}Sample text here...{{/i}}</p>
    +
    +
    +<pre>
    +  &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
    +</pre>
    +
    +

    {{_i}}Heads up!{{/i}} {{_i}}Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

    +

    {{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}

    +
    + + + + +
    + + +

    {{_i}}Default styles{{/i}}

    +

    {{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
    1MarkOtto@mdo
    2JacobThornton@fat
    3Larrythe Bird@twitter
    +
    {{! /example }} +
    +<table class="table">
    +  …
    +</table>
    +
    + + +
    + + +

    {{_i}}Optional classes{{/i}}

    +

    {{_i}}Add any of the following classes to the .table base class.{{/i}}

    + +

    {{_i}}.table-striped{{/i}}

    +

    {{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
    1MarkOtto@mdo
    2JacobThornton@fat
    3Larrythe Bird@twitter
    +
    {{! /example }} +
    +<table class="table table-striped">
    +  …
    +</table>
    +
    + +

    {{_i}}.table-bordered{{/i}}

    +

    {{_i}}Add borders and rounded corners to the table.{{/i}}

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
    1MarkOtto@mdo
    MarkOtto@TwBootstrap
    2JacobThornton@fat
    3Larry the Bird@twitter
    +
    {{! /example }} +
    +<table class="table table-bordered">
    +  …
    +</table>
    +
    + +

    {{_i}}.table-hover{{/i}}

    +

    {{_i}}Enable a hover state on table rows within a <tbody>.{{/i}}

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
    1MarkOtto@mdo
    2JacobThornton@fat
    3Larry the Bird@twitter
    +
    {{! /example }} +
    +<table class="table table-hover">
    +  …
    +</table>
    +
    + +

    {{_i}}.table-condensed{{/i}}

    +

    {{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
    1MarkOtto@mdo
    2JacobThornton@fat
    3Larry the Bird@twitter
    +
    {{! /example }} +
    +<table class="table table-condensed">
    +  …
    +</table>
    +
    + + +
    + + +

    {{_i}}Optional row classes{{/i}}

    +

    {{_i}}Use contextual classes to color table rows.{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Class{{/i}}{{_i}}Description{{/i}}
    + .success + {{_i}}Indicates a successful or positive action.{{/i}}
    + .error + {{_i}}Indicates a dangerous or potentially negative action.{{/i}}
    + .warning + {{_i}}Indicates a warning that might need attention.{{/i}}
    + .info + {{_i}}Used as an alternative to the default styles.{{/i}}
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    #{{_i}}Product{{/i}}{{_i}}Payment Taken{{/i}}{{_i}}Status{{/i}}
    1TB - Monthly01/04/2012Approved
    2TB - Monthly02/04/2012Declined
    3TB - Monthly03/04/2012Pending
    4TB - Monthly04/04/2012Call in to confirm
    +
    {{! /example }} +
    +...
    +  <tr class="success">
    +    <td>1</td>
    +    <td>TB - Monthly</td>
    +    <td>01/04/2012</td>
    +    <td>Approved</td>
    +  </tr>
    +...
    +
    + + +
    + + +

    {{_i}}Supported table markup{{/i}}

    +

    {{_i}}List of supported table HTML elements and how they should be used.{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Tag{{/i}}{{_i}}Description{{/i}}
    + <table> + + {{_i}}Wrapping element for displaying data in a tabular format{{/i}} +
    + <thead> + + {{_i}}Container element for table header rows (<tr>) to label table columns{{/i}} +
    + <tbody> + + {{_i}}Container element for table rows (<tr>) in the body of the table{{/i}} +
    + <tr> + + {{_i}}Container element for a set of table cells (<td> or <th>) that appears on a single row{{/i}} +
    + <td> + + {{_i}}Default table cell{{/i}} +
    + <th> + + {{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}
    + {{_i}}Must be used within a <thead>{{/i}} +
    + <caption> + + {{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}} +
    +
    +<table>
    +  <caption>...</caption>
    +  <thead>
    +    <tr>
    +      <th>...</th>
    +      <th>...</th>
    +    </tr>
    +  </thead>
    +  <tbody>
    +    <tr>
    +      <td>...</td>
    +      <td>...</td>
    +    </tr>
    +  </tbody>
    +</table>
    +
    + +
    + + + + +
    + + +

    {{_i}}Default styles{{/i}}

    +

    {{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

    +
    +
    + Legend + + + {{_i}}Example block-level help text here.{{/i}} + + +
    +
    {{! /example }} +
    +<form>
    +  <fieldset>
    +    <legend>{{_i}}Legend{{/i}}</legend>
    +    <label>{{_i}}Label name{{/i}}</label>
    +    <input type="text" placeholder="{{_i}}Type something…{{/i}}">
    +    <span class="help-block">Example block-level help text here.</span>
    +    <label class="checkbox">
    +      <input type="checkbox"> {{_i}}Check me out{{/i}}
    +    </label>
    +    <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
    +  </fieldset>
    +</form>
    +
    + + +
    + + +

    {{_i}}Optional layouts{{/i}}

    +

    {{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}

    + +

    {{_i}}Search form{{/i}}

    +

    {{_i}}Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.{{/i}}

    + {{! /example }} +
    +<form class="form-search">
    +  <input type="text" class="input-medium search-query">
    +  <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
    +</form>
    +
    + +

    {{_i}}Inline form{{/i}}

    +

    {{_i}}Add .form-inline for left-aligned labels and inline-block controls for a compact layout.{{/i}}

    +
    + + + + +
    {{! /example }} +
    +<form class="form-inline">
    +  <input type="text" class="input-small" placeholder="{{_i}}Email{{/i}}">
    +  <input type="password" class="input-small" placeholder="{{_i}}Password{{/i}}">
    +  <label class="checkbox">
    +    <input type="checkbox"> {{_i}}Remember me{{/i}}
    +  </label>
    +  <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
    +</form>
    +
    + +

    {{_i}}Horizontal form{{/i}}

    +

    {{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}

    +
      +
    • {{_i}}Add .form-horizontal to the form{{/i}}
    • +
    • {{_i}}Wrap labels and controls in .control-group{{/i}}
    • +
    • {{_i}}Add .control-label to the label{{/i}}
    • +
    • {{_i}}Wrap any associated controls in .controls for proper alignment{{/i}}
    • +
    +
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    + + +
    +
    +
    +
    +<form class="form-horizontal">
    +  <div class="control-group">
    +    <label class="control-label" for="inputEmail">{{_i}}Email{{/i}}</label>
    +    <div class="controls">
    +      <input type="text" id="inputEmail" placeholder="{{_i}}Email{{/i}}">
    +    </div>
    +  </div>
    +  <div class="control-group">
    +    <label class="control-label" for="inputPassword">{{_i}}Password{{/i}}</label>
    +    <div class="controls">
    +      <input type="password" id="inputPassword" placeholder="{{_i}}Password{{/i}}">
    +    </div>
    +  </div>
    +  <div class="control-group">
    +    <div class="controls">
    +      <label class="checkbox">
    +        <input type="checkbox"> {{_i}}Remember me{{/i}}
    +      </label>
    +      <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
    +    </div>
    +  </div>
    +</form>
    +
    + + +
    + + +

    {{_i}}Supported form controls{{/i}}

    +

    {{_i}}Examples of standard form controls supported in an example form layout.{{/i}}

    + +

    {{_i}}Inputs{{/i}}

    +

    {{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}

    +

    {{_i}}Requires the use of a specified type at all times.{{/i}}

    +
    + +
    +
    +<input type="text" placeholder="Text input">
    +
    + +

    {{_i}}Textarea{{/i}}

    +

    {{_i}}Form control which supports multiple lines of text. Change rows attribute as necessary.{{/i}}

    +
    + +
    +
    +<textarea rows="3"></textarea>
    +
    + +

    {{_i}}Checkboxes and radios{{/i}}

    +

    {{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}

    +

    {{_i}}Default (stacked){{/i}}

    +
    + +
    + + +
    +
    +<label class="checkbox">
    +  <input type="checkbox" value="">
    +  {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
    +</label>
    +
    +<label class="radio">
    +  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    +  {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
    +</label>
    +<label class="radio">
    +  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    +  {{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
    +</label>
    +
    + +

    {{_i}}Inline checkboxes{{/i}}

    +

    {{_i}}Add the .inline class to a series of checkboxes or radios for controls appear on the same line.{{/i}}

    +
    + + + +
    +
    +<label class="checkbox inline">
    +  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    +</label>
    +<label class="checkbox inline">
    +  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    +</label>
    +<label class="checkbox inline">
    +  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
    +</label>
    +
    + +

    {{_i}}Selects{{/i}}

    +

    {{_i}}Use the default option or specify a multiple="multiple" to show multiple options at once.{{/i}}

    +
    + +
    + +
    +
    +<select>
    +  <option>1</option>
    +  <option>2</option>
    +  <option>3</option>
    +  <option>4</option>
    +  <option>5</option>
    +</select>
    +
    +<select multiple="multiple">
    +  <option>1</option>
    +  <option>2</option>
    +  <option>3</option>
    +  <option>4</option>
    +  <option>5</option>
    +</select>
    +
    + + +
    + + +

    {{_i}}Extending form controls{{/i}}

    +

    {{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}

    + +

    {{_i}}Prepended and appended inputs{{/i}}

    +

    {{_i}}Add text or buttons before or after any text-based input. Do note that select elements are not supported here.{{/i}}

    + +

    {{_i}}Default options{{/i}}

    +

    {{_i}}Wrap an .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

    +
    +
    + @ + +
    +
    +
    + + .00 +
    +
    +
    +<div class="input-prepend">
    +  <span class="add-on">@</span>
    +  <input class="span2" id="prependedInput" type="text" placeholder="{{_i}}Username{{/i}}">
    +</div>
    +<div class="input-append">
    +  <input class="span2" id="appendedInput" type="text">
    +  <span class="add-on">.00</span>
    +</div>
    +
    + +

    {{_i}}Combined{{/i}}

    +

    {{_i}}Use both classes and two instances of .add-on to prepend and append an input.{{/i}}

    +
    +
    + $ + + .00 +
    +
    +
    +<div class="input-prepend input-append">
    +  <span class="add-on">$</span>
    +  <input class="span2" id="appendedPrependedInput" type="text">
    +  <span class="add-on">.00</span>
    +</div>
    +
    + +

    {{_i}}Buttons instead of text{{/i}}

    +

    {{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

    +
    +
    + + +
    +
    +
    +<div class="input-append">
    +  <input class="span2" id="appendedInputButton" type="text">
    +  <button class="btn" type="button">Go!</button>
    +</div>
    +
    +
    +
    + + + +
    +
    +
    +<div class="input-append">
    +  <input class="span2" id="appendedInputButtons" type="text">
    +  <button class="btn" type="button">Search</button>
    +  <button class="btn" type="button">Options</button>
    +</div>
    +
    + +

    {{_i}}Button dropdowns{{/i}}

    +

    {{_i}}{{/i}}

    +
    + +
    +
    +<div class="input-append">
    +  <input class="span2" id="appendedDropdownButton" type="text">
    +  <div class="btn-group">
    +    <button class="btn dropdown-toggle" data-toggle="dropdown">
    +      {{_i}}Action{{/i}}
    +      <span class="caret"></span>
    +    </button>
    +    <ul class="dropdown-menu">
    +      ...
    +    </ul>
    +  </div>
    +</div>
    +
    + +
    + +
    +
    +<div class="input-prepend">
    +  <div class="btn-group">
    +    <button class="btn dropdown-toggle" data-toggle="dropdown">
    +      {{_i}}Action{{/i}}
    +      <span class="caret"></span>
    +    </button>
    +    <ul class="dropdown-menu">
    +      ...
    +    </ul>
    +  </div>
    +  <input class="span2" id="prependedDropdownButton" type="text">
    +</div>
    +
    + +
    + +
    +
    +<div class="input-prepend input-append">
    +  <div class="btn-group">
    +    <button class="btn dropdown-toggle" data-toggle="dropdown">
    +      {{_i}}Action{{/i}}
    +      <span class="caret"></span>
    +    </button>
    +    <ul class="dropdown-menu">
    +      ...
    +    </ul>
    +  </div>
    +  <input class="span2" id="appendedPrependedDropdownButton" type="text">
    +  <div class="btn-group">
    +    <button class="btn dropdown-toggle" data-toggle="dropdown">
    +      {{_i}}Action{{/i}}
    +      <span class="caret"></span>
    +    </button>
    +    <ul class="dropdown-menu">
    +      ...
    +    </ul>
    +  </div>
    +</div>
    +
    + +

    {{_i}}Search form{{/i}}

    + {{! /example }} +
    +<form class="form-search">
    +  <div class="input-append">
    +    <input type="text" class="span2 search-query">
    +    <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
    +  </div>
    +  <div class="input-prepend">
    +    <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
    +    <input type="text" class="span2 search-query">
    +  </div>
    +</form>
    +
    + +

    {{_i}}Control sizing{{/i}}

    +

    {{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

    + +

    {{_i}}Block level inputs{{/i}}

    +

    {{_i}}Make any <input> or <textarea> element behave like a block level element.{{/i}}

    +
    +
    + +
    +
    +
    +<input class="input-block-level" type="text" placeholder=".input-block-level">
    +
    + +

    {{_i}}Relative sizing{{/i}}

    +
    +
    + + + + + + +
    +
    +
    +<input class="input-mini" type="text" placeholder=".input-mini">
    +<input class="input-small" type="text" placeholder=".input-small">
    +<input class="input-medium" type="text" placeholder=".input-medium">
    +<input class="input-large" type="text" placeholder=".input-large">
    +<input class="input-xlarge" type="text" placeholder=".input-xlarge">
    +<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
    +
    +

    + {{_i}}Heads up!{{/i}} In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input. +

    + +

    {{_i}}Grid sizing{{/i}}

    +

    {{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

    +
    +
    + + + + + + +
    +
    +
    +<input class="span1" type="text" placeholder=".span1">
    +<input class="span2" type="text" placeholder=".span2">
    +<input class="span3" type="text" placeholder=".span3">
    +<select class="span1">
    +  ...
    +</select>
    +<select class="span2">
    +  ...
    +</select>
    +<select class="span3">
    +  ...
    +</select>
    +
    + +

    {{_i}}For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}

    +
    +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +<div class="controls">
    +  <input class="span5" type="text" placeholder=".span5">
    +</div>
    +<div class="controls controls-row">
    +  <input class="span4" type="text" placeholder=".span4">
    +  <input class="span1" type="text" placeholder=".span1">
    +</div>
    +...
    +
    + +

    {{_i}}Uneditable inputs{{/i}}

    +

    {{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}

    +
    + Some value here +
    +
    +<span class="input-xlarge uneditable-input">Some value here</span>
    +
    + +

    {{_i}}Form actions{{/i}}

    +

    {{_i}}End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.{{/i}}

    +
    +
    + + +
    +
    +
    +<div class="form-actions">
    +  <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
    +  <button type="button" class="btn">{{_i}}Cancel{{/i}}</button>
    +</div>
    +
    + +

    {{_i}}Help text{{/i}}

    +

    {{_i}}Inline and block level support for help text that appears around form controls.{{/i}}

    +

    {{_i}}Inline help{{/i}}

    +
    + Inline help text +
    +
    +<input type="text"><span class="help-inline">Inline help text</span>
    +
    + +

    {{_i}}Block help{{/i}}

    +
    + + A longer block of help text that breaks onto a new line and may extend beyond one line. +
    +
    +<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
    +
    + + +
    + + +

    {{_i}}Form control states{{/i}}

    +

    {{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}

    + +

    {{_i}}Input focus{{/i}}

    +

    {{_i}}We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.{{/i}}

    +
    + +
    +
    +<input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
    +
    + +

    {{_i}}Disabled inputs{{/i}}

    +

    {{_i}}Add the disabled attribute on an input to prevent user input and trigger a slightly different look.{{/i}}

    +
    + +
    +
    +<input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here...{{/i}}" disabled>
    +
    + +

    {{_i}}Validation states{{/i}}

    +

    {{_i}}Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}

    + +
    +
    + +
    + + {{_i}}Something may have gone wrong{{/i}} +
    +
    +
    + +
    + + {{_i}}Please correct the error{{/i}} +
    +
    +
    + +
    + + {{_i}}Username is taken{{/i}} +
    +
    +
    + +
    + + {{_i}}Woohoo!{{/i}} +
    +
    +
    +
    +<div class="control-group warning">
    +  <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
    +  <div class="controls">
    +    <input type="text" id="inputWarning">
    +    <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
    +  </div>
    +</div>
    +<div class="control-group error">
    +  <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
    +  <div class="controls">
    +    <input type="text" id="inputError">
    +    <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
    +  </div>
    +</div>
    +<div class="control-group success">
    +  <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
    +  <div class="controls">
    +    <input type="text" id="inputSuccess">
    +    <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
    +  </div>
    +</div>
    +
    + +
    + + + + +
    + + +

    Default buttons

    +

    {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Button{{/i}}{{_i}}class=""{{/i}}{{_i}}Description{{/i}}
    btn{{_i}}Standard gray button with gradient{{/i}}
    btn btn-primary{{_i}}Provides extra visual weight and identifies the primary action in a set of buttons{{/i}}
    btn btn-info{{_i}}Used as an alternative to the default styles{{/i}}
    btn btn-success{{_i}}Indicates a successful or positive action{{/i}}
    btn btn-warning{{_i}}Indicates caution should be taken with this action{{/i}}
    btn btn-danger{{_i}}Indicates a dangerous or potentially negative action{{/i}}
    btn btn-inverse{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
    btn btn-link{{_i}}Deemphasize a button by making it look like a link while maintaining button behavior{{/i}}
    + +

    {{_i}}Cross browser compatibility{{/i}}

    +

    {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

    + + +

    {{_i}}Button sizes{{/i}}

    +

    {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.{{/i}}

    +
    +

    + + +

    +

    + + +

    +

    + + +

    +

    + + +

    +
    +
    +<p>
    +  <button class="btn btn-large btn-primary" type="button">{{_i}}Large button{{/i}}</button>
    +  <button class="btn btn-large" type="button">{{_i}}Large button{{/i}}</button>
    +</p>
    +<p>
    +  <button class="btn btn-primary" type="button">{{_i}}Default button{{/i}}</button>
    +  <button class="btn" type="button">{{_i}}Default button{{/i}}</button>
    +</p>
    +<p>
    +  <button class="btn btn-small btn-primary" type="button">{{_i}}Small button{{/i}}</button>
    +  <button class="btn btn-small" type="button">{{_i}}Small button{{/i}}</button>
    +</p>
    +<p>
    +  <button class="btn btn-mini btn-primary" type="button">{{_i}}Mini button{{/i}}</button>
    +  <button class="btn btn-mini" type="button">{{_i}}Mini button{{/i}}</button>
    +</p>
    +
    +

    {{_i}}Create block level buttons—those that span the full width of a parent— by adding .btn-block.{{/i}}

    +
    +
    + + +
    +
    +
    +<button class="btn btn-large btn-block btn-primary" type="button">{{_i}}Block level button{{/i}}</button>
    +<button class="btn btn-large btn-block" type="button">{{_i}}Block level button{{/i}}</button>
    +
    + + +

    {{_i}}Disabled state{{/i}}

    +

    {{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}

    + +

    Anchor element

    +

    {{_i}}Add the .disabled class to <a> buttons.{{/i}}

    +

    + {{_i}}Primary link{{/i}} + {{_i}}Link{{/i}} +

    +
    +<a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
    +<a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
    +
    +

    + {{_i}}Heads up!{{/i}} + {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.{{/i}} +

    + +

    Button element

    +

    {{_i}}Add the disabled attribute to <button> buttons.{{/i}}

    +

    + + +

    +
    +<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
    +<button type="button" class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
    +
    + + +

    {{_i}}One class, multiple tags{{/i}}

    +

    {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

    +
    + {{_i}}Link{{/i}} + + + +
    +
    +<a class="btn" href="">{{_i}}Link{{/i}}</a>
    +<button class="btn" type="submit">{{_i}}Button{{/i}}</button>
    +<input class="btn" type="button" value="{{_i}}Input{{/i}}">
    +<input class="btn" type="submit" value="{{_i}}Submit{{/i}}">
    +
    +

    {{_i}}As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}

    + +
    + + + + +
    + + +

    {{_i}}Add classes to an <img> element to easily style images in any project.{{/i}}

    +
    + + + +
    +
    +<img src="..." class="img-rounded">
    +<img src="..." class="img-circle">
    +<img src="..." class="img-polaroid">
    +
    +

    {{_i}}Heads up!{{/i}} {{_i}}.img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.{{/i}}

    + + +
    + + + + +
    + + +

    {{_i}}Icon glyphs{{/i}}

    +

    {{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

    +
      +
    • icon-glass
    • +
    • icon-music
    • +
    • icon-search
    • +
    • icon-envelope
    • +
    • icon-heart
    • +
    • icon-star
    • +
    • icon-star-empty
    • +
    • icon-user
    • +
    • icon-film
    • +
    • icon-th-large
    • +
    • icon-th
    • +
    • icon-th-list
    • +
    • icon-ok
    • +
    • icon-remove
    • +
    • icon-zoom-in
    • +
    • icon-zoom-out
    • +
    • icon-off
    • +
    • icon-signal
    • +
    • icon-cog
    • +
    • icon-trash
    • +
    • icon-home
    • +
    • icon-file
    • +
    • icon-time
    • +
    • icon-road
    • +
    • icon-download-alt
    • +
    • icon-download
    • +
    • icon-upload
    • +
    • icon-inbox
    • + +
    • icon-play-circle
    • +
    • icon-repeat
    • +
    • icon-refresh
    • +
    • icon-list-alt
    • +
    • icon-lock
    • +
    • icon-flag
    • +
    • icon-headphones
    • +
    • icon-volume-off
    • +
    • icon-volume-down
    • +
    • icon-volume-up
    • +
    • icon-qrcode
    • +
    • icon-barcode
    • +
    • icon-tag
    • +
    • icon-tags
    • +
    • icon-book
    • +
    • icon-bookmark
    • +
    • icon-print
    • +
    • icon-camera
    • +
    • icon-font
    • +
    • icon-bold
    • +
    • icon-italic
    • +
    • icon-text-height
    • +
    • icon-text-width
    • +
    • icon-align-left
    • +
    • icon-align-center
    • +
    • icon-align-right
    • +
    • icon-align-justify
    • +
    • icon-list
    • + +
    • icon-indent-left
    • +
    • icon-indent-right
    • +
    • icon-facetime-video
    • +
    • icon-picture
    • +
    • icon-pencil
    • +
    • icon-map-marker
    • +
    • icon-adjust
    • +
    • icon-tint
    • +
    • icon-edit
    • +
    • icon-share
    • +
    • icon-check
    • +
    • icon-move
    • +
    • icon-step-backward
    • +
    • icon-fast-backward
    • +
    • icon-backward
    • +
    • icon-play
    • +
    • icon-pause
    • +
    • icon-stop
    • +
    • icon-forward
    • +
    • icon-fast-forward
    • +
    • icon-step-forward
    • +
    • icon-eject
    • +
    • icon-chevron-left
    • +
    • icon-chevron-right
    • +
    • icon-plus-sign
    • +
    • icon-minus-sign
    • +
    • icon-remove-sign
    • +
    • icon-ok-sign
    • + +
    • icon-question-sign
    • +
    • icon-info-sign
    • +
    • icon-screenshot
    • +
    • icon-remove-circle
    • +
    • icon-ok-circle
    • +
    • icon-ban-circle
    • +
    • icon-arrow-left
    • +
    • icon-arrow-right
    • +
    • icon-arrow-up
    • +
    • icon-arrow-down
    • +
    • icon-share-alt
    • +
    • icon-resize-full
    • +
    • icon-resize-small
    • +
    • icon-plus
    • +
    • icon-minus
    • +
    • icon-asterisk
    • +
    • icon-exclamation-sign
    • +
    • icon-gift
    • +
    • icon-leaf
    • +
    • icon-fire
    • +
    • icon-eye-open
    • +
    • icon-eye-close
    • +
    • icon-warning-sign
    • +
    • icon-plane
    • +
    • icon-calendar
    • +
    • icon-random
    • +
    • icon-comment
    • +
    • icon-magnet
    • + +
    • icon-chevron-up
    • +
    • icon-chevron-down
    • +
    • icon-retweet
    • +
    • icon-shopping-cart
    • +
    • icon-folder-close
    • +
    • icon-folder-open
    • +
    • icon-resize-vertical
    • +
    • icon-resize-horizontal
    • +
    • icon-hdd
    • +
    • icon-bullhorn
    • +
    • icon-bell
    • +
    • icon-certificate
    • +
    • icon-thumbs-up
    • +
    • icon-thumbs-down
    • +
    • icon-hand-right
    • +
    • icon-hand-left
    • +
    • icon-hand-up
    • +
    • icon-hand-down
    • +
    • icon-circle-arrow-right
    • +
    • icon-circle-arrow-left
    • +
    • icon-circle-arrow-up
    • +
    • icon-circle-arrow-down
    • +
    • icon-globe
    • +
    • icon-wrench
    • +
    • icon-tasks
    • +
    • icon-filter
    • +
    • icon-briefcase
    • +
    • icon-fullscreen
    • +
    + +

    Glyphicons attribution

    +

    {{_i}}Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.{{/i}}

    + + +
    + + +

    {{_i}}How to use{{/i}}

    +

    {{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

    +
    +<i class="icon-search"></i>
    +
    +

    {{_i}}There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.{{/i}}

    +
    +<i class="icon-search icon-white"></i>
    +
    +

    + {{_i}}Heads up!{{/i}} + {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}} +

    + + +
    + + +

    {{_i}}Icon examples{{/i}}

    +

    {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

    + +

    {{_i}}Buttons{{/i}}

    + +
    {{_i}}Button group in a button toolbar{{/i}}
    +
    +
    +
    + + + + +
    +
    +
    {{! /bs-docs-example }} +
    +<div class="btn-toolbar">
    +  <div class="btn-group">
    +
    +    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    +    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    +    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    +    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
    +  </div>
    +</div>
    +
    + +
    {{_i}}Dropdown in a button group{{/i}}
    + {{! /bs-docs-example }} +
    +<div class="btn-group">
    +  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> {{_i}}User{{/i}}</a>
    +  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
    +  <ul class="dropdown-menu">
    +    <li><a href="#"><i class="icon-pencil"></i> {{_i}}Edit{{/i}}</a></li>
    +    <li><a href="#"><i class="icon-trash"></i> {{_i}}Delete{{/i}}</a></li>
    +    <li><a href="#"><i class="icon-ban-circle"></i> {{_i}}Ban{{/i}}</a></li>
    +    <li class="divider"></li>
    +    <li><a href="#"><i class="i"></i> {{_i}}Make admin{{/i}}</a></li>
    +  </ul>
    +</div>
    +
    + +
    {{_i}}Small button{{/i}}
    +
    + +
    {{! /bs-docs-example }} +
    +<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
    +
    + + +

    {{_i}}Navigation{{/i}}

    + {{! /bs-docs-example }} +
    +<ul class="nav nav-list">
    +  <li class="active"><a href="#"><i class="icon-home icon-white"></i> {{_i}}Home{{/i}}</a></li>
    +  <li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
    +  <li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
    +  <li><a href="#"><i class="i"></i> {{_i}}Misc{{/i}}</a></li>
    +</ul>
    +
    + +

    {{_i}}Form fields{{/i}}

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +<div class="control-group">
    +  <label class="control-label" for="inputIcon">{{_i}}Email address{{/i}}</label>
    +  <div class="controls">
    +    <div class="input-prepend">
    +      <span class="add-on"><i class="icon-envelope"></i></span>
    +      <input class="span2" id="inputIcon" type="text">
    +    </div>
    +  </div>
    +</div>
    +
    + +
    + + + +
    {{! /span9 }} +
    {{! row}} + +
    {{! /.container }} diff --git a/cnDocs/templates/pages/components.mustache b/cnDocs/templates/pages/components.mustache new file mode 100644 index 000000000000..3c024451c215 --- /dev/null +++ b/cnDocs/templates/pages/components.mustache @@ -0,0 +1,2482 @@ + +
    +
    +

    {{_i}}Components{{/i}}

    +

    {{_i}}Dozens of reusable components built to provide navigation, alerts, popovers, and more.{{/i}}

    +
    +
    + + +
    + + +
    + +
    + + + + + + + + + + +
    + + +

    {{_i}}Examples{{/i}}

    +

    {{_i}}Two basic options, along with two more specific variations.{{/i}}

    + +

    {{_i}}Single button group{{/i}}

    +

    {{_i}}Wrap a series of buttons with .btn in .btn-group.{{/i}}

    +
    +
    + + + +
    +
    +
    +<div class="btn-group">
    +  <button class="btn">1</button>
    +  <button class="btn">2</button>
    +  <button class="btn">3</button>
    +</div>
    +
    + +

    {{_i}}Multiple button groups{{/i}}

    +

    {{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}

    +
    +
    +
    + + + + +
    +
    + + + +
    +
    + +
    +
    +
    +
    +<div class="btn-toolbar">
    +  <div class="btn-group">
    +    ...
    +  </div>
    +</div>
    +
    + +

    {{_i}}Vertical button groups{{/i}}

    +

    {{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}

    +
    +
    + + + + +
    +
    +
    +<div class="btn-group btn-group-vertical">
    +  ...
    +</div>
    +
    + + +
    + + +

    {{_i}}Checkbox and radio flavors{{/i}}

    +

    {{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the JavaScript docs for that.{{/i}}

    + +

    {{_i}}Dropdowns in button groups{{/i}}

    +

    {{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}

    +
    + + + + +
    + + + +

    {{_i}}Overview and examples{{/i}}

    +

    {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}

    + {{! /example }} +
    +<div class="btn-group">
    +  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    +    {{_i}}Action{{/i}}
    +    <span class="caret"></span>
    +  </a>
    +  <ul class="dropdown-menu">
    +    <!-- {{_i}}dropdown menu links{{/i}} -->
    +  </ul>
    +</div>
    +
    + +

    {{_i}}Works with all button sizes{{/i}}

    +

    {{_i}}Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.{{/i}}

    + {{! /example }} + +

    {{_i}}Requires JavaScript{{/i}}

    +

    {{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}

    +

    {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript.{{/i}}

    + + +
    + + +

    {{_i}}Split button dropdowns{{/i}}

    +

    {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}

    + {{! /example }} +
    +<div class="btn-group">
    +  <button class="btn">{{_i}}Action{{/i}}</button>
    +  <button class="btn dropdown-toggle" data-toggle="dropdown">
    +    <span class="caret"></span>
    +  </button>
    +  <ul class="dropdown-menu">
    +    <!-- {{_i}}dropdown menu links{{/i}} -->
    +  </ul>
    +</div>
    +
    + +

    {{_i}}Sizes{{/i}}

    +

    {{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}

    + {{! /example }} +
    +<div class="btn-group">
    +  <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
    +  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    +    <span class="caret"></span>
    +  </button>
    +  <ul class="dropdown-menu">
    +    <!-- {{_i}}dropdown menu links{{/i}} -->
    +  </ul>
    +</div>
    +
    + +

    {{_i}}Dropup menus{{/i}}

    +

    {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}

    + {{! /example }} +
    +<div class="btn-group dropup">
    +  <button class="btn">{{_i}}Dropup{{/i}}</button>
    +  <button class="btn dropdown-toggle" data-toggle="dropdown">
    +    <span class="caret"></span>
    +  </button>
    +  <ul class="dropdown-menu">
    +    <!-- {{_i}}dropdown menu links{{/i}} -->
    +  </ul>
    +</div>
    +
    + +
    + + + + + + + + + + + + + + + + + + + +
    + + +

    {{_i}}Standard pagination{{/i}}

    +

    {{_i}}Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}

    +
    + +
    +
    +<div class="pagination">
    +  <ul>
    +    <li><a href="#">Prev</a></li>
    +    <li><a href="#">1</a></li>
    +    <li><a href="#">2</a></li>
    +    <li><a href="#">3</a></li>
    +    <li><a href="#">4</a></li>
    +    <li><a href="#">Next</a></li>
    +  </ul>
    +</div>
    +
    + + +
    + + +

    {{_i}}Options{{/i}}

    + +

    {{_i}}Disabled and active states{{/i}}

    +

    {{_i}}Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.{{/i}}

    +
    + +
    +
    +<div class="pagination">
    +  <ul>
    +    <li class="disabled"><a href="#">Prev</a></li>
    +    <li class="active"><a href="#">1</a></li>
    +    ...
    +  </ul>
    +</div>
    +
    +

    {{_i}}You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.{{/i}}

    +
    +<div class="pagination">
    +  <ul>
    +    <li class="disabled"><span>Prev</span></li>
    +    <li class="active"><span>1</span></li>
    +    ...
    +  </ul>
    +</div>
    +
    + +

    {{_i}}Sizes{{/i}}

    +

    {{_i}}Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.{{/i}}

    +
    + + + + +
    +
    +<div class="pagination pagination-large">
    +  <ul>
    +    ...
    +  </ul>
    +</div>
    +<div class="pagination">
    +  <ul>
    +    ...
    +  </ul>
    +</div>
    +<div class="pagination pagination-small">
    +  <ul>
    +    ...
    +  </ul>
    +</div>
    +<div class="pagination pagination-mini">
    +  <ul>
    +    ...
    +  </ul>
    +</div>
    +
    + +

    {{_i}}Alignment{{/i}}

    +

    {{_i}}Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}

    +
    + +
    +
    +<div class="pagination pagination-centered">
    +  ...
    +</div>
    +
    +
    + +
    +
    +<div class="pagination pagination-right">
    +  ...
    +</div>
    +
    + + +
    + + +

    {{_i}}Pager{{/i}}

    +

    {{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}

    + +

    {{_i}}Default example{{/i}}

    +

    {{_i}}By default, the pager centers links.{{/i}}

    + +
    +<ul class="pager">
    +  <li><a href="#">{{_i}}Previous{{/i}}</a></li>
    +  <li><a href="#">{{_i}}Next{{/i}}</a></li>
    +</ul>
    +
    + +

    {{_i}}Aligned links{{/i}}

    +

    {{_i}}Alternatively, you can align each link to the sides:{{/i}}

    + +
    +<ul class="pager">
    +  <li class="previous">
    +    <a href="#">{{_i}}&larr; Older{{/i}}</a>
    +  </li>
    +  <li class="next">
    +    <a href="#">{{_i}}Newer &rarr;{{/i}}</a>
    +  </li>
    +</ul>
    +
    + +

    {{_i}}Optional disabled state{{/i}}

    +

    {{_i}}Pager links also use the general .disabled utility class from the pagination.{{/i}}

    + +
    +<ul class="pager">
    +  <li class="previous disabled">
    +    <a href="#">{{_i}}&larr; Older{{/i}}</a>
    +  </li>
    +  ...
    +</ul>
    +
    + +
    + + + + +
    + +

    {{_i}}Labels{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Labels{{/i}}{{_i}}Markup{{/i}}
    + {{_i}}Default{{/i}} + + <span class="label">{{_i}}Default{{/i}}</span> +
    + {{_i}}Success{{/i}} + + <span class="label label-success">{{_i}}Success{{/i}}</span> +
    + {{_i}}Warning{{/i}} + + <span class="label label-warning">{{_i}}Warning{{/i}}</span> +
    + {{_i}}Important{{/i}} + + <span class="label label-important">{{_i}}Important{{/i}}</span> +
    + {{_i}}Info{{/i}} + + <span class="label label-info">{{_i}}Info{{/i}}</span> +
    + {{_i}}Inverse{{/i}} + + <span class="label label-inverse">{{_i}}Inverse{{/i}}</span> +
    + +

    {{_i}}Badges{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Name{{/i}}{{_i}}Example{{/i}}{{_i}}Markup{{/i}}
    + {{_i}}Default{{/i}} + + 1 + + <span class="badge">1</span> +
    + {{_i}}Success{{/i}} + + 2 + + <span class="badge badge-success">2</span> +
    + {{_i}}Warning{{/i}} + + 4 + + <span class="badge badge-warning">4</span> +
    + {{_i}}Important{{/i}} + + 6 + + <span class="badge badge-important">6</span> +
    + {{_i}}Info{{/i}} + + 8 + + <span class="badge badge-info">8</span> +
    + {{_i}}Inverse{{/i}} + + 10 + + <span class="badge badge-inverse">10</span> +
    + +
    + + + + +
    + + +

    {{_i}}Hero unit{{/i}}

    +

    {{_i}}A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.{{/i}}

    +
    +
    +

    {{_i}}Hello, world!{{/i}}

    +

    {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}

    +

    {{_i}}Learn more{{/i}}

    +
    +
    +
    +<div class="hero-unit">
    +  <h1>{{_i}}Heading{{/i}}</h1>
    +  <p>{{_i}}Tagline{{/i}}</p>
    +  <p>
    +    <a class="btn btn-primary btn-large">
    +      {{_i}}Learn more{{/i}}
    +    </a>
    +  </p>
    +</div>
    +
    + +

    {{_i}}Page header{{/i}}

    +

    {{_i}}A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}

    +
    + +
    +
    +<div class="page-header">
    +  <h1>{{_i}}Example page header{{/i}} <small>{{_i}}Subtext for header{{/i}}</small></h1>
    +</div>
    +
    + +
    + + + + +
    + + +

    {{_i}}Default thumbnails{{/i}}

    +

    {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}

    +
    + +
    + +

    {{_i}}Highly customizable{{/i}}

    +

    {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}

    +
    +
      +
    • +
      + +
      +

      {{_i}}Thumbnail label{{/i}}

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      {{_i}}Action{{/i}} {{_i}}Action{{/i}}

      +
      +
      +
    • +
    • +
      + +
      +

      {{_i}}Thumbnail label{{/i}}

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      {{_i}}Action{{/i}} {{_i}}Action{{/i}}

      +
      +
      +
    • +
    • +
      + +
      +

      {{_i}}Thumbnail label{{/i}}

      +

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      +

      {{_i}}Action{{/i}} {{_i}}Action{{/i}}

      +
      +
      +
    • +
    +
    + +

    {{_i}}Why use thumbnails{{/i}}

    +

    {{_i}}Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.{{/i}}

    + +

    {{_i}}Simple, flexible markup{{/i}}

    +

    {{_i}}Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.{{/i}}

    + +

    {{_i}}Uses grid column sizes{{/i}}

    +

    {{_i}}Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.{{/i}}

    + +

    {{_i}}Markup{{/i}}

    +

    {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}

    +
    +<ul class="thumbnails">
    +  <li class="span4">
    +    <a href="#" class="thumbnail">
    +      <img src="http://placehold.it/300x200" alt="">
    +    </a>
    +  </li>
    +  ...
    +</ul>
    +
    +

    {{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:{{/i}}

    +
    +<ul class="thumbnails">
    +  <li class="span4">
    +    <div class="thumbnail">
    +      <img src="http://placehold.it/300x200" alt="">
    +      <h3>{{_i}}Thumbnail label{{/i}}</h3>
    +      <p>{{_i}}Thumbnail caption...{{/i}}</p>
    +    </div>
    +  </li>
    +  ...
    +</ul>
    +
    + +

    {{_i}}More examples{{/i}}

    +

    {{_i}}Explore all your options with the various grid classes available to you. You can also mix and match different sizes.{{/i}}

    + + +
    + + + + + +
    + + +

    {{_i}}Default alert{{/i}}

    +

    {{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}

    +
    +
    + + {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} +
    +
    +
    +<div class="alert">
    +  <button type="button" class="close" data-dismiss="alert">×</button>
    +  <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
    +</div>
    +
    + +

    {{_i}}Dismiss buttons{{/i}}

    +

    {{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}

    +
    <a href="#" class="close" data-dismiss="alert">×</a>
    +

    {{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}

    +
    <button type="button" class="close" data-dismiss="alert">×</button>
    + +

    {{_i}}Dismiss alerts via JavaScript{{/i}}

    +

    {{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}

    + + +
    + + +

    {{_i}}Options{{/i}}

    +

    {{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}

    +
    +
    + +

    {{_i}}Warning!{{/i}}

    +

    {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

    +
    +
    +
    +<div class="alert alert-block">
    +  <button type="button" class="close" data-dismiss="alert">×</button>
    +  <h4>{{_i}}Warning!{{/i}}</h4>
    +  {{_i}}Best check yo self, you're not...{{/i}}
    +</div>
    +
    + + +
    + + +

    {{_i}}Contextual alternatives{{/i}}

    +

    {{_i}}Add optional classes to change an alert's connotation.{{/i}}

    + +

    {{_i}}Error or danger{{/i}}

    +
    +
    + + {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}} +
    +
    +
    +<div class="alert alert-error">
    +  ...
    +</div>
    +
    + +

    {{_i}}Success{{/i}}

    +
    +
    + + {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}} +
    +
    +
    +<div class="alert alert-success">
    +  ...
    +</div>
    +
    + +

    {{_i}}Information{{/i}}

    +
    +
    + + {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}} +
    +
    +
    +<div class="alert alert-info">
    +  ...
    +</div>
    +
    + +
    + + + + + +
    + + +

    {{_i}}Examples and markup{{/i}}

    + +

    {{_i}}Basic{{/i}}

    +

    {{_i}}Default progress bar with a vertical gradient.{{/i}}

    +
    +
    +
    +
    +
    +
    +<div class="progress">
    +  <div class="bar" style="width: 60%;"></div>
    +</div>
    +
    + +

    {{_i}}Striped{{/i}}

    +

    {{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}

    +
    +
    +
    +
    +
    +
    +<div class="progress progress-striped">
    +  <div class="bar" style="width: 20%;"></div>
    +</div>
    +
    + +

    {{_i}}Animated{{/i}}

    +

    {{_i}}Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.{{/i}}

    +
    +
    +
    +
    +
    +
    +<div class="progress progress-striped active">
    +  <div class="bar" style="width: 40%;"></div>
    +</div>
    +
    + +

    Stacked

    +

    Place multiple bars into the same .progress to stack them.

    +
    +
    +
    +
    +
    +
    +
    +
    +<div class="progress">
    +  <div class="bar bar-success" style="width: 35%;"></div>
    +  <div class="bar bar-warning" style="width: 20%;"></div>
    +  <div class="bar bar-danger" style="width: 10%;"></div>
    +</div>
    +
    + + +
    + + +

    {{_i}}Options{{/i}}

    + +

    {{_i}}Additional colors{{/i}}

    +

    {{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +<div class="progress progress-info">
    +  <div class="bar" style="width: 20%"></div>
    +</div>
    +<div class="progress progress-success">
    +  <div class="bar" style="width: 40%"></div>
    +</div>
    +<div class="progress progress-warning">
    +  <div class="bar" style="width: 60%"></div>
    +</div>
    +<div class="progress progress-danger">
    +  <div class="bar" style="width: 80%"></div>
    +</div>
    +
    + +

    {{_i}}Striped bars{{/i}}

    +

    {{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}

    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +<div class="progress progress-info progress-striped">
    +  <div class="bar" style="width: 20%"></div>
    +</div>
    +<div class="progress progress-success progress-striped">
    +  <div class="bar" style="width: 40%"></div>
    +</div>
    +<div class="progress progress-warning progress-striped">
    +  <div class="bar" style="width: 60%"></div>
    +</div>
    +<div class="progress progress-danger progress-striped">
    +  <div class="bar" style="width: 80%"></div>
    +</div>
    +
    + + +
    + + +

    {{_i}}Browser support{{/i}}

    +

    {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}

    +

    {{_i}}Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.{{/i}}

    + +
    + + + + + +
    + +

    {{_i}}Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.{{/i}}

    + +

    {{_i}}Default example{{/i}}

    +

    {{_i}}The default media allow to float a media object (images, video, audio) to the left or right of a content block.{{/i}}

    +
    +
    + + + +
    +

    {{_i}}Media heading{{/i}}

    + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
    +
    +
    + + + +
    +

    {{_i}}Media heading{{/i}}

    + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
    + + + +
    +

    {{_i}}Media heading{{/i}}

    + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
    +
    +
    +
    +
    {{! /.bs-docs-example }} +
    +<div class="media">
    +  <a class="pull-left" href="#">
    +    <img class="media-object" src="http://placehold.it/64x64">
    +  </a>
    +  <div class="media-body">
    +    <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
    +    ...
    +
    +    <!-- Nested media object -->
    +    <div class="media">
    +      ...
    +    </div>
    +  </div>
    +</div>
    +
    + + +
    + + +

    {{_i}}Media list{{/i}}

    +

    {{_i}}With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).{{/i}}

    +
    +
      +
    • + + + +
      +

      {{_i}}Media heading{{/i}}

      +

      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

      + +
      + + + +
      +

      {{_i}}Nested media heading{{/i}}

      + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. + +
      + + + +
      +

      {{_i}}Nested media heading{{/i}}

      + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
      +
      +
      +
      + +
      + + + +
      +

      {{_i}}Nested media heading{{/i}}

      + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
      +
      +
      +
    • +
    • + + + +
      +

      {{_i}}Media heading{{/i}}

      + Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
      +
    • +
    +
    +
    +<ul class="media-list">
    +  <li class="media">
    +    <a class="pull-left" href="#">
    +      <img class="media-object" src="http://placehold.it/64x64">
    +    </a>
    +    <div class="media-body">
    +      <h4 class="media-heading">{{_i}}Media heading{{/i}}</h4>
    +      ...
    +
    +      <!-- Nested media object -->
    +      <div class="media">
    +        ...
    +     </div>
    +    </div>
    +  </li>
    +</ul>
    +
    + +
    + + + + + + +
    + + +

    {{_i}}Wells{{/i}}

    +

    {{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}

    +
    +
    + {{_i}}Look, I'm in a well!{{/i}} +
    +
    +
    +<div class="well">
    +  ...
    +</div>
    +
    +

    {{_i}}Optional classes{{/i}}

    +

    {{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}

    +
    +
    + {{_i}}Look, I'm in a well!{{/i}} +
    +
    +
    +<div class="well well-large">
    +  ...
    +</div>
    +
    +
    +
    + {{_i}}Look, I'm in a well!{{/i}} +
    +
    +
    +<div class="well well-small">
    +  ...
    +</div>
    +
    + +

    {{_i}}Close icon{{/i}}

    +

    {{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}

    +
    +

    +
    +
    <button class="close">&times;</button>
    +

    {{_i}}iOS devices require an href="#" for click events if you would rather use an anchor.{{/i}}

    +
    <a class="close" href="#">&times;</a>
    + +

    {{_i}}Helper classes{{/i}}

    +

    {{_i}}Simple, focused classes for small display or behavior tweaks.{{/i}}

    + +

    {{_i}}.pull-left{{/i}}

    +

    {{_i}}Float an element left{{/i}}

    +
    +class="pull-left"
    +
    +
    +.pull-left {
    +  float: left;
    +}
    +
    + +

    {{_i}}.pull-right{{/i}}

    +

    {{_i}}Float an element right{{/i}}

    +
    +class="pull-right"
    +
    +
    +.pull-right {
    +  float: right;
    +}
    +
    + +

    {{_i}}.muted{{/i}}

    +

    {{_i}}Change an element's color to #999{{/i}}

    +
    +class="muted"
    +
    +
    +.muted {
    +  color: #999;
    +}
    +
    + +

    {{_i}}.clearfix{{/i}}

    +

    {{_i}}Clear the float on any element{{/i}}

    +
    +class="clearfix"
    +
    +
    +.clearfix {
    +  *zoom: 1;
    +  &:before,
    +  &:after {
    +    display: table;
    +    content: "";
    +  }
    +  &:after {
    +    clear: both;
    +  }
    +}
    +
    + +
    + + + +
    {{! /span9 }} +
    {{! row}} + +
    {{! /.container }} diff --git a/cnDocs/templates/pages/customize.mustache b/cnDocs/templates/pages/customize.mustache new file mode 100644 index 000000000000..386f6930a3f5 --- /dev/null +++ b/cnDocs/templates/pages/customize.mustache @@ -0,0 +1,394 @@ + +
    +
    +

    {{_i}}Customize and download{{/i}}

    +

    {{_i}}Download Bootstrap or customize variables, components, JavaScript plugins, and more.{{/i}}

    +
    +
    + + +
    + + +
    + +
    + + + +
    +
    + +
    +
    +

    {{_i}}Scaffolding{{/i}}

    + + + + +

    {{_i}}Base CSS{{/i}}

    + + + + + + + +
    +
    +

    {{_i}}Components{{/i}}

    + + + + + + + + + + + +

    {{_i}}JS Components{{/i}}

    + + + + + + +
    +
    +

    {{_i}}Miscellaneous{{/i}}

    + + + + + +

    {{_i}}Responsive{{/i}}

    + + + + + +
    +
    +
    + +
    + +
    +
    + + + + + + + +
    +
    + + + + + + +
    +
    +

    {{_i}}Heads up!{{/i}}

    +

    {{_i}}All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of jQuery to be included.{{/i}}

    +
    +
    +
    + + +
    + +
    +
    +

    {{_i}}Scaffolding{{/i}}

    + + + + + +

    {{_i}}Links{{/i}}

    + + + + +

    {{_i}}Colors{{/i}}

    + + + + + + + + + + + + + + + +

    {{_i}}Sprites{{/i}}

    + + + + + +

    {{_i}}Grid system{{/i}}

    + + + + + + + + + + + + + + + +
    +
    + +

    {{_i}}Typography{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

    {{_i}}Tables{{/i}}

    + + + + + + + + + +

    {{_i}}Forms{{/i}}

    + + + + + + + + + + + + + + + + + +
    +
    + +

    {{_i}}Form states & alerts{{/i}}

    + + + + + + + + + + + + + + + + + +

    {{_i}}Navbar{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

    {{_i}}Dropdowns{{/i}}

    + + + + + + + + + + +
    +
    +
    + +
    + +
    + Customize and Download +

    {{_i}}What's included?{{/i}}

    +

    {{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}

    +
    +
    +
    + + + +
    {{! /span9 }} +
    {{! row}} + +
    {{! /.container }} diff --git a/cnDocs/templates/pages/extend.mustache b/cnDocs/templates/pages/extend.mustache new file mode 100644 index 000000000000..c1976427cf0d --- /dev/null +++ b/cnDocs/templates/pages/extend.mustache @@ -0,0 +1,169 @@ + +
    +
    +

    {{_i}}Extending Bootstrap{{/i}}

    +

    {{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}

    +
    +
    + +
    + + +
    + +
    + + + + +
    + + + LESS CSS +

    {{_i}}Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.{{/i}}

    + +

    {{_i}}Why LESS?{{/i}}

    +

    {{_i}}One of Bootstrap's creators wrote a quick blog post about this, summarized here:{{/i}}

    +
      +
    • {{_i}}Bootstrap compiles faster ~6x faster with Less compared to Sass{{/i}}
    • +
    • {{_i}}Less is written in JavaScript, making it easier to us to dive in and patch compared to Ruby with Sass.{{/i}}
    • +
    • {{_i}}Less is more; we want to feel like we're writing CSS and making Bootstrap approachable to all.{{/i}}
    • +
    + +

    {{_i}}What's included?{{/i}}

    +

    {{_i}}As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.{{/i}}

    + +

    {{_i}}Learn more{{/i}}

    +

    {{_i}}Visit the official website at http://lesscss.org to learn more.{{/i}}

    +
    + + + + +
    + + +

    {{_i}}Since our CSS is written with Less and utilizes variables and mixins, it needs to be compiled for final production implementation. Here's how.{{/i}}

    + +
    + {{_i}}Note: If you're submitting a pull request to GitHub with modified CSS, you must recompile the CSS via any of these methods.{{/i}} +
    + +

    {{_i}}Tools for compiling{{/i}}

    + +

    {{_i}}Node with makefile{{/i}}

    +

    {{_i}}Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:{{/i}}

    +
    $ npm install -g less jshint recess uglify-js
    +

    {{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}

    +

    {{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}

    + +

    {{_i}}Command line{{/i}}

    +

    {{_i}}Install the LESS command line tool via Node and run the following command:{{/i}}

    +
    $ lessc ./less/bootstrap.less > bootstrap.css
    +

    {{_i}}Be sure to include --compress in that command if you're trying to save some bytes!{{/i}}

    + +

    {{_i}}JavaScript{{/i}}

    +

    {{_i}}Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.{{/i}}

    +
    +<link rel="stylesheet/less" href="/path/to/bootstrap.less">
    +<script src="/path/to/less.js"></script>
    +
    +

    {{_i}}To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.{{/i}}

    + +

    {{_i}}Unofficial Mac app{{/i}}

    +

    {{_i}}The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file. If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.{{/i}}

    + +

    {{_i}}More apps{{/i}}

    +

    Crunch

    +

    {{_i}}Crunch is a great looking LESS editor and compiler built on Adobe Air.{{/i}}

    +

    CodeKit

    +

    {{_i}}Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.{{/i}}

    +

    Simpless

    +

    {{_i}}Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.{{/i}}

    + +
    + + + + +
    + +

    {{_i}}Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.{{/i}}

    + +

    {{_i}}Setup file structure{{/i}}

    +

    {{_i}}Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:{{/i}}

    +
    +   app/
    +       layouts/
    +       templates/
    +   public/
    +       css/
    +           bootstrap.min.css
    +       js/
    +           bootstrap.min.js
    +       img/
    +           glyphicons-halflings.png
    +           glyphicons-halflings-white.png
    +
    + +

    {{_i}}Utilize starter template{{/i}}

    +

    {{_i}}Copy the following base HTML to get started.{{/i}}

    +
    +<html>
    +  <head>
    +    <title>Bootstrap 101 Template</title>
    +    <!-- Bootstrap -->
    +    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    +  </head>
    +  <body>
    +    <h1>Hello, world!</h1>
    +    <!-- Bootstrap -->
    +    <script src="public/js/bootstrap.min.js"></script>
    +  </body>
    +</html>
    +
    + +

    {{_i}}Layer on custom code{{/i}}

    +

    {{_i}}Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.{{/i}}

    +
    +<html>
    +  <head>
    +    <title>Bootstrap 101 Template</title>
    +    <!-- Bootstrap -->
    +    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    +    <!-- Project -->
    +    <link href="public/css/application.css" rel="stylesheet">
    +  </head>
    +  <body>
    +    <h1>Hello, world!</h1>
    +    <!-- Bootstrap -->
    +    <script src="public/js/bootstrap.min.js"></script>
    +    <!-- Project -->
    +    <script src="public/js/application.js"></script>
    +  </body>
    +</html>
    +
    + +
    + +
    {{! /span9 }} +
    {{! row}} + +
    {{! /.container }} diff --git a/cnDocs/templates/pages/getting-started.mustache b/cnDocs/templates/pages/getting-started.mustache new file mode 100644 index 000000000000..2eec7ff7699a --- /dev/null +++ b/cnDocs/templates/pages/getting-started.mustache @@ -0,0 +1,247 @@ + +
    +
    +

    {{_i}}Getting started{{/i}}

    +

    {{_i}}Overview of the project, its contents, and how to get started with a simple template.{{/i}}

    +
    +
    + + +
    + + +
    + +
    + + + + +
    + +

    {{_i}}Before downloading, be sure to have a code editor (we recommend Sublime Text 2) and some working knowledge of HTML and CSS. We won't walk through the source files here, but they are available for download. We'll focus on getting started with the compiled Bootstrap files.{{/i}}

    + +
    +
    +

    {{_i}}Download compiled{{/i}}

    +

    {{_i}}Fastest way to get started: get the compiled and minified versions of our CSS, JS, and images. No docs or original source files.{{/i}}

    +

    {{_i}}Download Bootstrap{{/i}}

    +
    +
    +

    Download source

    +

    Get the original files for all CSS and JavaScript, along with a local copy of the docs by downloading the latest version directly from GitHub.

    +

    {{_i}}Download Bootstrap source{{/i}}

    +
    +
    +
    + + + + +
    + +

    {{_i}}Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.{{/i}}

    +

    {{_i}}Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You'll see something like this:{{/i}}

    +
    +  bootstrap/
    +  ├── css/
    +  │   ├── bootstrap.css
    +  │   ├── bootstrap.min.css
    +  ├── js/
    +  │   ├── bootstrap.js
    +  │   ├── bootstrap.min.js
    +  └── img/
    +      ├── glyphicons-halflings.png
    +      └── glyphicons-halflings-white.png
    +
    +

    {{_i}}This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). The image files are compressed using ImageOptim, a Mac app for compressing PNGs.{{/i}}

    +

    {{_i}}Please note that all JavaScript plugins require jQuery to be included.{{/i}}

    +
    + + + + +
    + +

    {{_i}}Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Bootstrap documentation.{{/i}}

    + +

    {{_i}}Docs sections{{/i}}

    +

    {{_i}}Scaffolding{{/i}}

    +

    {{_i}}Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.{{/i}}

    +

    {{_i}}Base CSS{{/i}}

    +

    {{_i}}Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.{{/i}}

    +

    {{_i}}Components{{/i}}

    +

    {{_i}}Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.{{/i}}

    +

    {{_i}}JavaScript plugins{{/i}}

    +

    {{_i}}Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.{{/i}}

    + +

    {{_i}}List of components{{/i}}

    +

    {{_i}}Together, the Components and JavaScript plugins sections provide the following interface elements:{{/i}}

    +
      +
    • {{_i}}Button groups{{/i}}
    • +
    • {{_i}}Button dropdowns{{/i}}
    • +
    • {{_i}}Navigational tabs, pills, and lists{{/i}}
    • +
    • {{_i}}Navbar{{/i}}
    • +
    • {{_i}}Labels{{/i}}
    • +
    • {{_i}}Badges{{/i}}
    • +
    • {{_i}}Page headers and hero unit{{/i}}
    • +
    • {{_i}}Thumbnails{{/i}}
    • +
    • {{_i}}Alerts{{/i}}
    • +
    • {{_i}}Progress bars{{/i}}
    • +
    • {{_i}}Modals{{/i}}
    • +
    • {{_i}}Dropdowns{{/i}}
    • +
    • {{_i}}Tooltips{{/i}}
    • +
    • {{_i}}Popovers{{/i}}
    • +
    • {{_i}}Accordion{{/i}}
    • +
    • {{_i}}Carousel{{/i}}
    • +
    • {{_i}}Typeahead{{/i}}
    • +
    +

    {{_i}}In future guides, we may walk through these components individually in more detail. Until then, look for each of these in the documentation for information on how to utilize and customize them.{{/i}}

    +
    + + + + +
    + +

    {{_i}}With a brief intro into the contents out of the way, we can focus on putting Bootstrap to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.{{/i}}

    +

    {{_i}}Now, here's a look at a typical HTML file:{{/i}}

    +
    +<!DOCTYPE html>
    +<html>
    +  <head>
    +    <title>Bootstrap 101 Template</title>
    +  </head>
    +  <body>
    +    <h1>Hello, world!</h1>
    +    <script src="http://code.jquery.com/jquery-latest.js"></script>
    +  </body>
    +</html>
    +
    +

    {{_i}}To make this a Bootstrapped template, just include the appropriate CSS and JS files:{{/i}}

    +
    +<!DOCTYPE html>
    +<html>
    +  <head>
    +    <title>Bootstrap 101 Template</title>
    +    <!-- Bootstrap -->
    +    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    +  </head>
    +  <body>
    +    <h1>Hello, world!</h1>
    +    <script src="http://code.jquery.com/jquery-latest.js"></script>
    +    <script src="js/bootstrap.min.js"></script>
    +  </body>
    +</html>
    +
    +

    {{_i}}And you're set! With those two files added, you can begin to develop any site or application with Bootstrap.{{/i}}

    +
    + + + + +
    + +

    {{_i}}Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}

    +
      +
    • + + + +

      {{_i}}Starter template{{/i}}

      +

      {{_i}}A barebones HTML document with all the Bootstrap CSS and JavaScript included.{{/i}}

      +
    • +
    • + + + +

      {{_i}}Basic marketing site{{/i}}

      +

      {{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}

      +
    • +
    • + + + +

      {{_i}}Fluid layout{{/i}}

      +

      {{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}

      +
    • + +
    • + + + +

      {{_i}}Narrow marketing{{/i}}

      +

      {{_i}}Slim, lightweight marketing template for small projects or teams.{{/i}}

      +
    • +
    • + + + +

      {{_i}}Sign in{{/i}}

      +

      {{_i}}Barebones sign in form with custom, larger form controls and a flexible layout.{{/i}}

      +
    • +
    • + + + +

      {{_i}}Sticky footer{{/i}}

      +

      {{_i}}Pin a fixed-height footer to the bottom of the user's viewport.{{/i}}

      +
    • + +
    • + + + +

      {{_i}}Carousel jumbotron{{/i}}

      +

      {{_i}}A more interactive riff on the basic marketing site featuring a prominent carousel.{{/i}}

      +
    • +
    +
    + + + + + +
    + +

    {{_i}}Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.{{/i}}

    + {{_i}}Visit the Bootstrap docs{{/i}} + {{_i}}Customize Bootstrap{{/i}} +
    + + + + +
    {{! /span9 }} +
    {{! row}} + +
    {{! /.container }} diff --git a/cnDocs/templates/pages/index.mustache b/cnDocs/templates/pages/index.mustache new file mode 100644 index 000000000000..ab3578fdbf2b --- /dev/null +++ b/cnDocs/templates/pages/index.mustache @@ -0,0 +1,100 @@ +
    +
    +

    {{_i}}Bootstrap{{/i}}

    +

    {{_i}}Sleek, intuitive, and powerful front-end framework for faster and easier web development.{{/i}}

    +

    + {{_i}}Download Bootstrap{{/i}} +

    + +
    +
    + +
    +
    + +
    +
    + +
    + +
    + +

    {{_i}}Introducing Bootstrap.{{/i}}

    + + +
    +
    + +

    {{_i}}By nerds, for nerds.{{/i}}

    +

    {{_i}}Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.{{/i}}

    +
    +
    + +

    {{_i}}Made for everyone.{{/i}}

    +

    {{_i}}Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.{{/i}}

    +
    +
    + +

    {{_i}}Packed with features.{{/i}}

    +

    {{_i}}A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.{{/i}}

    +
    +
    + +
    + +

    {{_i}}Built with Bootstrap.{{/i}}

    + +
    + +
    + +
    {{! /.marketing }} + +
    {{! /.container }} diff --git a/cnDocs/templates/pages/javascript.mustache b/cnDocs/templates/pages/javascript.mustache new file mode 100644 index 000000000000..72d1fc5bba3a --- /dev/null +++ b/cnDocs/templates/pages/javascript.mustache @@ -0,0 +1,1631 @@ + +
    +
    +

    {{_i}}JavaScript{{/i}}

    +

    {{_i}}Bring Bootstrap's components to life—now with 13 custom jQuery plugins.{{/i}} +

    +
    + +
    + + +
    + +
    + + + +
    + + +

    {{_i}}Individual or compiled{{/i}}

    +

    {{_i}}Plugins can be included individually (though some have required dependencies), or all at once. Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.{{/i}}

    + +

    {{_i}}Data attributes{{/i}}

    +

    {{_i}}You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.{{/i}}

    + +

    {{_i}}That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:{{/i}} +

    $('body').off('.data-api')
    + +

    {{_i}}Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:{{/i}}

    +
    $('body').off('.alert.data-api')
    + +

    {{_i}}Programmatic API{{/i}}

    +

    {{_i}}We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.{{/i}}

    +
    $(".btn.danger").button("toggle").addClass("fat")
    +

    {{_i}}All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):{{/i}}

    +
    +$("#myModal").modal()                       // initialized with defaults
    +$("#myModal").modal({ keyboard: false })   // initialized with no keyboard
    +$("#myModal").modal('show')                // initializes and invokes show immediately

    +
    +

    {{_i}}Each plugin also exposes its raw constructor on a `Constructor` property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').{{/i}}

    + +

    {{_i}}Events{{/i}}

    +

    {{_i}}Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.{{/i}}

    +

    {{_i}}All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.{{/i}}

    +
    +$('#myModal').on('show', function (e) {
    +    if (!data) return e.preventDefault() // stops modal from being shown
    +})
    +
    +
    + + + + +
    + +

    {{_i}}About transitions{{/i}}

    +

    {{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.{{/i}}

    +

    {{_i}}Use cases{{/i}}

    +

    {{_i}}A few examples of the transition plugin:{{/i}}

    +
      +
    • {{_i}}Sliding or fading in modals{{/i}}
    • +
    • {{_i}}Fading out tabs{{/i}}
    • +
    • {{_i}}Fading out alerts{{/i}}
    • +
    • {{_i}}Sliding carousel panes{{/i}}
    • +
    + + {{! Ideas: include docs for .fade.in, .slide.in, etc }} +
    + + + + +
    + + + +

    {{_i}}Examples{{/i}}

    +

    {{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}

    + +

    {{_i}}Static example{{/i}}

    +

    {{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}

    +
    + +
    {{! /example }} +
    +<div class="modal hide fade">
    +  <div class="modal-header">
    +    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    +    <h3>{{_i}}Modal header{{/i}}</h3>
    +  </div>
    +  <div class="modal-body">
    +    <p>{{_i}}One fine body…{{/i}}</p>
    +  </div>
    +  <div class="modal-footer">
    +    <a href="#" class="btn">{{_i}}Close{{/i}}</a>
    +    <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
    +  </div>
    +</div>
    +
    + +

    {{_i}}Live demo{{/i}}

    +

    {{_i}}Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}

    + + + {{! /example }} +
    +<!-- Button to trigger modal -->
    +<a href="#myModal" role="button" class="btn" data-toggle="modal">{{_i}}Launch demo modal{{/i}}</a>
    +
    +<!-- Modal -->
    +<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    +  <div class="modal-header">
    +    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    +    <h3 id="myModalLabel">Modal header</h3>
    +  </div>
    +  <div class="modal-body">
    +    <p>{{_i}}One fine body…{{/i}}</p>
    +  </div>
    +  <div class="modal-footer">
    +    <button class="btn" data-dismiss="modal" aria-hidden="true">{{_i}}Close{{/i}}</button>
    +    <button class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
    +  </div>
    +</div>
    +
    + + +
    + + +

    {{_i}}Usage{{/i}}

    + +

    {{_i}}Via data attributes{{/i}}

    +

    {{_i}}Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.{{/i}}

    +
    <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
    + +

    {{_i}}Via JavaScript{{/i}}

    +

    {{_i}}Call a modal with id myModal with a single line of JavaScript:{{/i}}

    +
    $('#myModal').modal(options)
    + +

    {{_i}}Options{{/i}}

    +

    {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
    {{_i}}backdrop{{/i}}{{_i}}boolean{{/i}}{{_i}}true{{/i}}{{_i}}Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.{{/i}}
    {{_i}}keyboard{{/i}}{{_i}}boolean{{/i}}{{_i}}true{{/i}}{{_i}}Closes the modal when escape key is pressed{{/i}}
    {{_i}}show{{/i}}{{_i}}boolean{{/i}}{{_i}}true{{/i}}{{_i}}Shows the modal when initialized.{{/i}}
    {{_i}}remote{{/i}}{{_i}}path{{/i}}{{_i}}false{{/i}}

    {{_i}}If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:{{/i}}

    +
    <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>
    + + Methods{{/i}} +

    .modal({{_i}}options{{/i}})

    +

    {{_i}}Activates your content as a modal. Accepts an optional options object.{{/i}}

    +
    +$('#myModal').modal({
    +  keyboard: false
    +})
    +
    +

    .modal('toggle')

    +

    {{_i}}Manually toggles a modal.{{/i}}

    +
    $('#myModal').modal('toggle')
    +

    .modal('show')

    +

    {{_i}}Manually opens a modal.{{/i}}

    +
    $('#myModal').modal('show')
    +

    .modal('hide')

    +

    {{_i}}Manually hides a modal.{{/i}}

    +
    $('#myModal').modal('hide')
    +

    {{_i}}Events{{/i}}

    +

    {{_i}}Bootstrap's modal class exposes a few events for hooking into modal functionality.{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Event{{/i}}{{_i}}Description{{/i}}
    {{_i}}show{{/i}}{{_i}}This event fires immediately when the show instance method is called.{{/i}}
    {{_i}}shown{{/i}}{{_i}}This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).{{/i}}
    {{_i}}hide{{/i}}{{_i}}This event is fired immediately when the hide instance method has been called.{{/i}}
    {{_i}}hidden{{/i}}{{_i}}This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).{{/i}}
    +
    +$('#myModal').on('hidden', function () {
    +  // {{_i}}do something…{{/i}}
    +})
    +
    +
    + + + + + + + + + +
    + + + +

    {{_i}}Example in navbar{{/i}}

    +

    {{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.{{/i}}

    +
    + +
    +

    @fat

    +

    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

    +

    @mdo

    +

    Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

    +

    one

    +

    Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

    +

    two

    +

    In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

    +

    three

    +

    Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

    +

    Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats. +

    +
    +
    {{! /example }} + + +
    + + +

    {{_i}}Usage{{/i}}

    + +

    {{_i}}Via data attributes{{/i}}

    +

    {{_i}}To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.{{/i}}

    +
    <body data-spy="scroll" data-target=".navbar">...</body>
    + +

    {{_i}}Via JavaScript{{/i}}

    +

    {{_i}}Call the scrollspy via JavaScript:{{/i}}

    +
    $('#navbar').scrollspy()
    + +
    + {{_i}}Heads up!{{/i}} + {{_i}}Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.{{/i}} +
    + +

    {{_i}}Methods{{/i}}

    +

    .scrollspy('refresh')

    +

    {{_i}}When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}

    +
    +$('[data-spy="scroll"]').each(function () {
    +  var $spy = $(this).scrollspy('refresh')
    +});
    +
    + +

    {{_i}}Options{{/i}}

    +

    {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".{{/i}}

    + + + + + + + + + + + + + + + + + +
    {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
    {{_i}}offset{{/i}}{{_i}}number{{/i}}{{_i}}10{{/i}}{{_i}}Pixels to offset from top when calculating position of scroll.{{/i}}
    + +

    {{_i}}Events{{/i}}

    + + + + + + + + + + + + + +
    {{_i}}Event{{/i}}{{_i}}Description{{/i}}
    {{_i}}activate{{/i}}{{_i}}This event fires whenever a new item becomes activated by the scrollspy.{{/i}}
    +
    + + + + +
    + + + +

    {{_i}}Example tabs{{/i}}

    +

    {{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}

    +
    + +
    +
    +

    Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

    +
    +
    +

    Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

    +
    + + +
    +
    {{! /example }} + + +
    + + +

    {{_i}}Usage{{/i}}

    +

    {{_i}}Enable tabbable tabs via JavaScript (each tab needs to be activated individually):{{/i}}

    +
    +$('#myTab a').click(function (e) {
    +  e.preventDefault();
    +  $(this).tab('show');
    +})
    +

    {{_i}}You can activate individual tabs in several ways:{{/i}}

    +
    +$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
    +$('#myTab a:first').tab('show'); // Select first tab
    +$('#myTab a:last').tab('show'); // Select last tab
    +$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
    +
    + +

    {{_i}}Markup{{/i}}

    +

    {{_i}}You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.{{/i}}

    +
    +<ul class="nav nav-tabs">
    +  <li><a href="#home" data-toggle="tab">{{_i}}Home{{/i}}</a></li>
    +  <li><a href="#profile" data-toggle="tab">{{_i}}Profile{{/i}}</a></li>
    +  <li><a href="#messages" data-toggle="tab">{{_i}}Messages{{/i}}</a></li>
    +  <li><a href="#settings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li>
    +</ul>
    + +

    {{_i}}Methods{{/i}}

    +

    $().tab

    +

    + {{_i}}Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.{{/i}} +

    +
    +<ul class="nav nav-tabs" id="myTab">
    +  <li class="active"><a href="#home">{{_i}}Home{{/i}}</a></li>
    +  <li><a href="#profile">{{_i}}Profile{{/i}}</a></li>
    +  <li><a href="#messages">{{_i}}Messages{{/i}}</a></li>
    +  <li><a href="#settings">{{_i}}Settings{{/i}}</a></li>
    +</ul>
    +
    +<div class="tab-content">
    +  <div class="tab-pane active" id="home">...</div>
    +  <div class="tab-pane" id="profile">...</div>
    +  <div class="tab-pane" id="messages">...</div>
    +  <div class="tab-pane" id="settings">...</div>
    +</div>
    +
    +<script>
    +  $(function () {
    +    $('#myTab a:last').tab('show');
    +  })
    +</script>
    +
    + +

    {{_i}}Events{{/i}}

    + + + + + + + + + + + + + + + + + +
    {{_i}}Event{{/i}}{{_i}}Description{{/i}}
    {{_i}}show{{/i}}{{_i}}This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
    {{_i}}shown{{/i}}{{_i}}This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.{{/i}}
    +
    +$('a[data-toggle="tab"]').on('shown', function (e) {
    +  e.target // activated tab
    +  e.relatedTarget // previous tab
    +})
    +
    +
    + + + +
    + + + +

    {{_i}}Examples{{/i}}

    +

    {{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}

    +

    {{_i}}Hover over the links below to see tooltips:{{/i}}

    +
    +

    {{_i}}Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.{{/i}} +

    +
    {{! /example }} + +

    {{_i}}Four directions{{/i}}

    + {{! /example }} + + +
    + + +

    {{_i}}Usage{{/i}}

    +

    {{_i}}Trigger the tooltip via JavaScript:{{/i}}

    +
    $('#example').tooltip({{_i}}options{{/i}})
    + +

    {{_i}}Options{{/i}}

    +

    {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
    {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
    {{_i}}html{{/i}}{{_i}}boolean{{/i}}false{{_i}}Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
    {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'top'{{_i}}how to position the tooltip{{/i}} - top | bottom | left | right
    {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}If a selector is provided, tooltip objects will be delegated to the specified targets.{{/i}}
    {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` tag isn't present{{/i}}
    {{_i}}trigger{{/i}}{{_i}}string{{/i}}'hover'{{_i}}how tooltip is triggered{{/i}} - click | hover | focus | manual
    {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 +

    {{_i}}delay showing and hiding the tooltip (ms) - does not apply to manual trigger type{{/i}}

    +

    {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

    +

    {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

    +
    +
    + {{_i}}Heads up!{{/i}} + {{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}} +
    + +

    {{_i}}Markup{{/i}}

    +

    {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

    +
    <a href="#" rel="tooltip" title="{{_i}}first tooltip{{/i}}">{{_i}}hover over me{{/i}}</a>
    + +

    {{_i}}Methods{{/i}}

    +

    $().tooltip({{_i}}options{{/i}})

    +

    {{_i}}Attaches a tooltip handler to an element collection.{{/i}}

    +

    .tooltip('show')

    +

    {{_i}}Reveals an element's tooltip.{{/i}}

    +
    $('#element').tooltip('show')
    +

    .tooltip('hide')

    +

    {{_i}}Hides an element's tooltip.{{/i}}

    +
    $('#element').tooltip('hide')
    +

    .tooltip('toggle')

    +

    {{_i}}Toggles an element's tooltip.{{/i}}

    +
    $('#element').tooltip('toggle')
    +

    .tooltip('destroy')

    +

    {{_i}}Hides and destroys an element's tooltip.{{/i}}

    +
    $('#element').tooltip('destroy')
    +
    + + + + +
    + + +

    {{_i}}Examples{{/i}}

    +

    {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. Requires Tooltip to be included.{{/i}}

    + +

    {{_i}}Static popover{{/i}}

    +

    {{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}

    +
    +
    +
    +

    Popover top

    +
    +

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    +
    +
    + +
    +
    +

    Popover right

    +
    +

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    +
    +
    + +
    +
    +

    Popover bottom

    +
    +

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    +
    +
    + +
    +
    +

    Popover left

    +
    +

    Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

    +
    +
    + +
    +
    +

    {{_i}}No markup shown as popovers are generated from JavaScript and content within a data attribute.{{/i}}

    + +

    Live demo

    + + +

    {{_i}}Four directions{{/i}}

    + {{! /example }} + + +
    + + +

    {{_i}}Usage{{/i}}

    +

    {{_i}}Enable popovers via JavaScript:{{/i}}

    +
    $('#example').popover({{_i}}options{{/i}})
    + +

    {{_i}}Options{{/i}}

    +

    {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
    {{_i}}animation{{/i}}{{_i}}boolean{{/i}}true{{_i}}apply a css fade transition to the tooltip{{/i}}
    {{_i}}html{{/i}}{{_i}}boolean{{/i}}false{{_i}}Insert html into the popover. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}
    {{_i}}placement{{/i}}{{_i}}string|function{{/i}}'right'{{_i}}how to position the popover{{/i}} - top | bottom | left | right
    {{_i}}selector{{/i}}{{_i}}string{{/i}}false{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}
    {{_i}}trigger{{/i}}{{_i}}string{{/i}}'click'{{_i}}how popover is triggered{{/i}} - click | hover | focus | manual
    {{_i}}title{{/i}}{{_i}}string | function{{/i}}''{{_i}}default title value if `title` attribute isn't present{{/i}}
    {{_i}}content{{/i}}{{_i}}string | function{{/i}}''{{_i}}default content value if `data-content` attribute isn't present{{/i}}
    {{_i}}delay{{/i}}{{_i}}number | object{{/i}}0 +

    {{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}

    +

    {{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}

    +

    {{_i}}Object structure is: delay: { show: 500, hide: 100 }{{/i}}

    +
    +
    + {{_i}}Heads up!{{/i}} + {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}} +
    + +

    {{_i}}Markup{{/i}}

    +

    {{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}

    + +

    {{_i}}Methods{{/i}}

    +

    $().popover({{_i}}options{{/i}})

    +

    {{_i}}Initializes popovers for an element collection.{{/i}}

    +

    .popover('show')

    +

    {{_i}}Reveals an elements popover.{{/i}}

    +
    $('#element').popover('show')
    +

    .popover('hide')

    +

    {{_i}}Hides an elements popover.{{/i}}

    +
    $('#element').popover('hide')
    +

    .popover('toggle')

    +

    {{_i}}Toggles an elements popover.{{/i}}

    +
    $('#element').popover('toggle')
    +

    .popover('destroy')

    +

    {{_i}}Hides and destroys an element's popover.{{/i}}

    +
    $('#element').popover('destroy')
    +
    + + + + +
    + + + +

    {{_i}}Example alerts{{/i}}

    +

    {{_i}}Add dismiss functionality to all alert messages with this plugin.{{/i}}

    +
    +
    + + {{_i}}Holy guacamole!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}} +
    +
    {{! /example }} + +
    +
    + +

    {{_i}}Oh snap! You got an error!{{/i}}

    +

    {{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}

    +

    + {{_i}}Take this action{{/i}} {{_i}}Or do this{{/i}} +

    +
    +
    {{! /example }} + + +
    + + +

    {{_i}}Usage{{/i}}

    +

    {{_i}}Enable dismissal of an alert via JavaScript:{{/i}}

    +
    $(".alert").alert()
    + +

    {{_i}}Markup{{/i}}

    +

    {{_i}}Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.{{/i}}

    +
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    + +

    {{_i}}Methods{{/i}}

    +

    $().alert()

    +

    {{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.{{/i}}

    +

    .alert('close')

    +

    {{_i}}Closes an alert.{{/i}}

    +
    $(".alert").alert('close')
    + + +

    {{_i}}Events{{/i}}

    +

    {{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}

    + + + + + + + + + + + + + + + + + +
    {{_i}}Event{{/i}}{{_i}}Description{{/i}}
    {{_i}}close{{/i}}{{_i}}This event fires immediately when the close instance method is called.{{/i}}
    {{_i}}closed{{/i}}{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}
    +
    +$('#my-alert').bind('closed', function () {
    +  // {{_i}}do something…{{/i}}
    +})
    +
    +
    + + + + +
    + + +

    {{_i}}Example uses{{/i}}

    +

    {{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}

    + +

    {{_i}}Stateful{{/i}}

    +

    {{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}

    +
    + +
    {{! /example }} +
    <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
    + +

    {{_i}}Single toggle{{/i}}

    +

    {{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}

    +
    + +
    {{! /example }} +
    <button type="button" class="btn" data-toggle="button">Single Toggle</button>
    + +

    {{_i}}Checkbox{{/i}}

    +

    {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}

    +
    +
    + + + +
    +
    {{! /example }} +
    +<div class="btn-group" data-toggle="buttons-checkbox">
    +  <button type="button" class="btn">Left</button>
    +  <button type="button" class="btn">Middle</button>
    +  <button type="button" class="btn">Right</button>
    +</div>
    +
    + +

    {{_i}}Radio{{/i}}

    +

    {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}

    +
    +
    + + + +
    +
    {{! /example }} +
    +<div class="btn-group" data-toggle="buttons-radio">
    +  <button type="button" class="btn">Left</button>
    +  <button type="button" class="btn">Middle</button>
    +  <button type="button" class="btn">Right</button>
    +</div>
    +
    + + +
    + + +

    {{_i}}Usage{{/i}}

    +

    {{_i}}Enable buttons via JavaScript:{{/i}}

    +
    $('.nav-tabs').button()
    + +

    {{_i}}Markup{{/i}}

    +

    {{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}

    + +

    {{_i}}Options{{/i}}

    +

    {{_i}}None{{/i}}

    + +

    {{_i}}Methods{{/i}}

    +

    $().button('toggle')

    +

    {{_i}}Toggles push state. Gives the button the appearance that it has been activated.{{/i}}

    +
    + {{_i}}Heads up!{{/i}} + {{_i}}You can enable auto toggling of a button by using the data-toggle attribute.{{/i}} +
    +
    <button type="button" class="btn" data-toggle="button" >…</button>
    +

    $().button('loading')

    +

    {{_i}}Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.{{/i}} +

    +
    <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
    +
    + {{_i}}Heads up!{{/i}} + {{_i}}Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".{{/i}} +
    +

    $().button('reset')

    +

    {{_i}}Resets button state - swaps text to original text.{{/i}}

    +

    $().button(string)

    +

    {{_i}}Resets button state - swaps text to any data defined text state.{{/i}}

    +
    <button type="button" class="btn" data-complete-text="finished!" >...</button>
    +<script>
    +  $('.btn').button('complete')
    +</script>
    +
    +
    + + + + +
    + + +

    {{_i}}About{{/i}}

    +

    {{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}

    +

    * {{_i}}Requires the Transitions plugin to be included.{{/i}}

    + +

    {{_i}}Example accordion{{/i}}

    +

    {{_i}}Using the collapse plugin, we built a simple accordion style widget:{{/i}}

    + +
    +
    +
    + +
    +
    + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
    +
    +
    +
    + +
    +
    + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
    +
    +
    +
    + +
    +
    + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. +
    +
    +
    +
    +
    {{! /example }} +
    +<div class="accordion" id="accordion2">
    +  <div class="accordion-group">
    +    <div class="accordion-heading">
    +      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
    +        {{_i}}Collapsible Group Item #1{{/i}}
    +      </a>
    +    </div>
    +    <div id="collapseOne" class="accordion-body collapse in">
    +      <div class="accordion-inner">
    +        Anim pariatur cliche...
    +      </div>
    +    </div>
    +  </div>
    +  <div class="accordion-group">
    +    <div class="accordion-heading">
    +      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
    +        {{_i}}Collapsible Group Item #2{{/i}}
    +      </a>
    +    </div>
    +    <div id="collapseTwo" class="accordion-body collapse">
    +      <div class="accordion-inner">
    +        Anim pariatur cliche...
    +      </div>
    +    </div>
    +  </div>
    +</div>
    +...
    +
    +

    {{_i}}You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.{{/i}}

    +
    +<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    +  {{_i}}simple collapsible{{/i}}
    +</button>
    +
    +<div id="demo" class="collapse in"> … </div>
    +
    + + +
    + + +

    {{_i}}Usage{{/i}}

    + +

    {{_i}}Via data attributes{{/i}}

    +

    {{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}

    +

    {{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}}

    + +

    {{_i}}Via JavaScript{{/i}}

    +

    {{_i}}Enable manually with:{{/i}}

    +
    $(".collapse").collapse()
    + +

    {{_i}}Options{{/i}}

    +

    {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
    {{_i}}parent{{/i}}{{_i}}selector{{/i}}false{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}
    {{_i}}toggle{{/i}}{{_i}}boolean{{/i}}true{{_i}}Toggles the collapsible element on invocation{{/i}}
    + + +

    {{_i}}Methods{{/i}}

    +

    .collapse({{_i}}options{{/i}})

    +

    {{_i}}Activates your content as a collapsible element. Accepts an optional options object.{{/i}} +

    +$('#myCollapsible').collapse({
    +  toggle: false
    +})
    +
    +

    .collapse('toggle')

    +

    {{_i}}Toggles a collapsible element to shown or hidden.{{/i}}

    +

    .collapse('show')

    +

    {{_i}}Shows a collapsible element.{{/i}}

    +

    .collapse('hide')

    +

    {{_i}}Hides a collapsible element.{{/i}}

    + +

    {{_i}}Events{{/i}}

    +

    {{_i}}Bootstrap's collapse class exposes a few events for hooking into collapse functionality.{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Event{{/i}}{{_i}}Description{{/i}}
    {{_i}}show{{/i}}{{_i}}This event fires immediately when the show instance method is called.{{/i}}
    {{_i}}shown{{/i}}{{_i}}This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).{{/i}}
    {{_i}}hide{{/i}} + {{_i}}This event is fired immediately when the hide method has been called.{{/i}} +
    {{_i}}hidden{{/i}}{{_i}}This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).{{/i}}
    +
    +$('#myCollapsible').on('hidden', function () {
    +  // {{_i}}do something…{{/i}}
    +})
    +
    + + + + + + + + + +
    + + + +

    {{_i}}Example{{/i}}

    +

    {{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}

    +
    + +
    {{! /example }} +
    <input type="text" data-provide="typeahead">
    + + +
    + + +

    {{_i}}Usage{{/i}}

    + +

    {{_i}}Via data attributes{{/i}}

    +

    {{_i}}Add data attributes to register an element with typeahead functionality as shown in the example above.{{/i}}

    + +

    {{_i}}Via JavaScript{{/i}}

    +

    {{_i}}Call the typeahead manually with:{{/i}}

    +
    $('.typeahead').typeahead()
    + +

    {{_i}}Options{{/i}}

    +

    {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
    {{_i}}source{{/i}}{{_i}}array, function{{/i}}[ ]{{_i}}The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.{{/i}}
    {{_i}}items{{/i}}{{_i}}number{{/i}}8{{_i}}The max number of items to display in the dropdown.{{/i}}
    {{_i}}minLength{{/i}}{{_i}}number{{/i}}{{_i}}1{{/i}}{{_i}}The minimum character length needed before triggering autocomplete suggestions{{/i}}
    {{_i}}matcher{{/i}}{{_i}}function{{/i}}{{_i}}case insensitive{{/i}}{{_i}}The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.{{/i}}
    {{_i}}sorter{{/i}}{{_i}}function{{/i}}{{_i}}exact match,
    case sensitive,
    case insensitive{{/i}}
    {{_i}}Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.{{/i}}
    {{_i}}updater{{/i}}{{_i}}function{{/i}}{{_i}}returns selected item{{/i}}{{_i}}The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.{{/i}}
    {{_i}}highlighter{{/i}}{{_i}}function{{/i}}{{_i}}highlights all default matches{{/i}}{{_i}}Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.{{/i}}
    + +

    {{_i}}Methods{{/i}}

    +

    .typeahead({{_i}}options{{/i}})

    +

    {{_i}}Initializes an input with a typeahead.{{/i}}

    +
    + + + + +
    + + +

    {{_i}}Example{{/i}}

    +

    {{_i}}The subnavigation on the left is a live demo of the affix plugin.{{/i}}

    + +
    + +

    {{_i}}Usage{{/i}}

    + +

    {{_i}}Via data attributes{{/i}}

    +

    {{_i}}To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.{{/i}}

    + +
    <div data-spy="affix" data-offset-top="200">...</div>
    + +
    + {{_i}}Heads up!{{/i}} + {{_i}}You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.{{/i}} +
    + +

    {{_i}}Via JavaScript{{/i}}

    +

    {{_i}}Call the affix plugin via JavaScript:{{/i}}

    +
    $('#navbar').affix()
    + +

    {{_i}}Methods{{/i}}

    +

    .affix('refresh')

    +

    {{_i}}When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:{{/i}}

    +
    +$('[data-spy="affix"]').each(function () {
    +  $(this).affix('refresh')
    +});
    +
    +

    {{_i}}Options{{/i}}

    +

    {{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".{{/i}}

    + + + + + + + + + + + + + + + + + +
    {{_i}}Name{{/i}}{{_i}}type{{/i}}{{_i}}default{{/i}}{{_i}}description{{/i}}
    {{_i}}offset{{/i}}{{_i}}number | function | object{{/i}}{{_i}}10{{/i}}{{_i}}Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object offset: { x: 10 }. Use a function when you need to dynamically provide an offset (useful for some responsive designs).{{/i}}
    +
    + + + +
    {{! /span9 }} +
    {{! row}} + +
    {{! /.container }} diff --git a/cnDocs/templates/pages/scaffolding.mustache b/cnDocs/templates/pages/scaffolding.mustache new file mode 100644 index 000000000000..85ae5ea0293d --- /dev/null +++ b/cnDocs/templates/pages/scaffolding.mustache @@ -0,0 +1,471 @@ + +
    +
    +

    {{_i}}Scaffolding{{/i}}

    +

    {{_i}}Bootstrap is built on responsive 12-column grids, layouts, and components.{{/i}}

    +
    +
    + +
    + + +
    + +
    + + + + +
    + + +

    {{_i}}Requires HTML5 doctype{{/i}}

    +

    {{_i}}Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.{{/i}}

    +
    +<!DOCTYPE html>
    +<html lang="en">
    +  ...
    +</html>
    +
    + +

    {{_i}}Typography and links{{/i}}

    +

    {{_i}}Bootstrap sets basic global display, typography, and link styles. Specifically, we:{{/i}}

    +
      +
    • {{_i}}Remove margin on the body{{/i}}
    • +
    • {{_i}}Set background-color: white; on the body{{/i}}
    • +
    • {{_i}}Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographic base{{/i}}
    • +
    • {{_i}}Set the global link color via @linkColor and apply link underlines only on :hover{{/i}}
    • +
    +

    {{_i}}These styles can be found within scaffolding.less.{{/i}}

    + +

    {{_i}}Reset via Normalize{{/i}}

    +

    {{_i}}With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, a project by Nicolas Gallagher that also powers the HTML5 Boilerplate. While we use much of Normalize within our reset.less, we have removed some elements specifically for Bootstrap.{{/i}}

    + +
    + + + + + +
    + + +

    {{_i}}Live grid example{{/i}}

    +

    {{_i}}The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.{{/i}}

    +
    +
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    +
    +
    2
    +
    3
    +
    4
    +
    +
    +
    4
    +
    5
    +
    +
    +
    9
    +
    +
    + +

    {{_i}}Basic grid HTML{{/i}}

    +

    {{_i}}For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).{{/i}}

    +
    +<div class="row">
    +  <div class="span4">...</div>
    +  <div class="span8">...</div>
    +</div>
    +
    +

    {{_i}}Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.{{/i}}

    + +

    {{_i}}Offsetting columns{{/i}}

    +

    {{_i}}Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.{{/i}}

    +
    +
    +
    4
    +
    3 offset 2
    +
    +
    +
    3 offset 1
    +
    3 offset 2
    +
    +
    +
    6 offset 3
    +
    +
    +
    +<div class="row">
    +  <div class="span4">...</div>
    +  <div class="span3 offset2">...</div>
    +</div>
    +
    + +

    {{_i}}Nesting columns{{/i}}

    +

    {{_i}}To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.{{/i}}

    +
    +
    + {{_i}}Level 1 column{{/i}} +
    +
    + {{_i}}Level 2{{/i}} +
    +
    + {{_i}}Level 2{{/i}} +
    +
    +
    +
    +
    +<div class="row">
    +  <div class="span9">
    +    {{_i}}Level 1 column{{/i}}
    +    <div class="row">
    +      <div class="span6">{{_i}}Level 2{{/i}}</div>
    +      <div class="span3">{{_i}}Level 2{{/i}}</div>
    +    </div>
    +  </div>
    +</div>
    +
    +
    + + + + +
    + + +

    {{_i}}Live fluid grid example{{/i}}

    +

    {{_i}}The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}

    +
    +
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    1
    +
    +
    +
    4
    +
    4
    +
    4
    +
    +
    +
    4
    +
    8
    +
    +
    +
    6
    +
    6
    +
    +
    +
    12
    +
    +
    + +

    {{_i}}Basic fluid grid HTML{{/i}}

    +

    {{_i}}Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.{{/i}}

    +
    +<div class="row-fluid">
    +  <div class="span4">...</div>
    +  <div class="span8">...</div>
    +</div>
    +
    + +

    {{_i}}Fluid offsetting{{/i}}

    +

    {{_i}}Operates the same way as the fixed grid system offsetting: add .offset* to any column to offset by that many columns.{{/i}}

    +
    +
    +
    4
    +
    4 offset 4
    +
    +
    +
    3 offset 3
    +
    3 offset 3
    +
    +
    +
    6 offset 6
    +
    +
    +
    +<div class="row-fluid">
    +  <div class="span4">...</div>
    +  <div class="span4 offset2">...</div>
    +</div>
    +
    + +

    {{_i}}Fluid nesting{{/i}}

    +

    {{_i}}Nesting with fluid grids is a bit different: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.{{/i}}

    +
    +
    + {{_i}}Fluid 12{{/i}} +
    +
    + {{_i}}Fluid 6{{/i}} +
    +
    + {{_i}}Fluid 6{{/i}} +
    +
    +
    +
    +
    +<div class="row-fluid">
    +  <div class="span12">
    +    {{_i}}Fluid 12{{/i}}
    +    <div class="row-fluid">
    +      <div class="span6">{{_i}}Fluid 6{{/i}}</div>
    +      <div class="span6">{{_i}}Fluid 6{{/i}}</div>
    +    </div>
    +  </div>
    +</div>
    +
    + +
    + + + + + +
    + + +

    {{_i}}Fixed layout{{/i}}

    +

    {{_i}}Provides a common fixed-width (and optionally responsive) layout with only <div class="container"> required.{{/i}}

    +
    +
    +
    +
    +<body>
    +  <div class="container">
    +    ...
    +  </div>
    +</body>
    +
    + +

    {{_i}}Fluid layout{{/i}}

    +

    {{_i}}Create a fluid, two-column page with <div class="container-fluid">—great for applications and docs.{{/i}}

    +
    +
    +
    +
    +
    +<div class="container-fluid">
    +  <div class="row-fluid">
    +    <div class="span2">
    +      <!--{{_i}}Sidebar content{{/i}}-->
    +    </div>
    +    <div class="span10">
    +      <!--{{_i}}Body content{{/i}}-->
    +    </div>
    +  </div>
    +</div>
    +
    +
    + + + + + +
    + + + {{! Enabling }} +

    {{_i}}Enabling responsive features{{/i}}

    +

    {{_i}}Turn on responsive CSS in your project by including the proper meta tag and additional stylesheet within the <head> of your document. If you've compiled Bootstrap from the Customize page, you need only include the meta tag.{{/i}}

    +
    +<meta name="viewport" content="width=device-width, initial-scale=1.0">
    +<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
    +
    +

    {{_i}}Heads up!{{/i}} {{_i}} Bootstrap doesn't include responsive features by default at this time as not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it as needed.{{/i}}

    + + {{! About }} +

    {{_i}}About responsive Bootstrap{{/i}}

    + Responsive devices +

    {{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}

    +
      +
    • {{_i}}Modify the width of column in our grid{{/i}}
    • +
    • {{_i}}Stack elements instead of float wherever necessary{{/i}}
    • +
    • {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
    • +
    +

    {{_i}}Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.{{/i}}

    + + {{! Supported }} +

    {{_i}}Supported devices{{/i}}

    +

    {{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Label{{/i}}{{_i}}Layout width{{/i}}{{_i}}Column width{{/i}}{{_i}}Gutter width{{/i}}
    {{_i}}Large display{{/i}}1200px and up70px30px
    {{_i}}Default{{/i}}980px and up60px20px
    {{_i}}Portrait tablets{{/i}}768px and above42px20px
    {{_i}}Phones to tablets{{/i}}767px and below{{_i}}Fluid columns, no fixed widths{{/i}}
    {{_i}}Phones{{/i}}480px and below{{_i}}Fluid columns, no fixed widths{{/i}}
    +
    +/* {{_i}}Large desktop{{/i}} */
    +@media (min-width: 1200px) { ... }
    +
    +/* {{_i}}Portrait tablet to landscape and desktop{{/i}} */
    +@media (min-width: 768px) and (max-width: 979px) { ... }
    +
    +/* {{_i}}Landscape phone to portrait tablet{{/i}} */
    +@media (max-width: 767px) { ... }
    +
    +/* {{_i}}Landscape phones and down{{/i}} */
    +@media (max-width: 480px) { ... }
    +
    + + + {{! Responsive utility classes }} +

    {{_i}}Responsive utility classes{{/i}}

    +

    {{_i}}For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect on a given media query layout (labeled by device). They can be found in responsive.less.{{/i}}

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{_i}}Class{{/i}}{{_i}}Phones 767px and below{{/i}}{{_i}}Tablets 979px to 768px{{/i}}{{_i}}Desktops Default{{/i}}
    .visible-phone{{_i}}Visible{{/i}}
    .visible-tablet{{_i}}Visible{{/i}}
    .visible-desktop{{_i}}Visible{{/i}}
    .hidden-phone{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
    .hidden-tablet{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
    .hidden-desktop{{_i}}Visible{{/i}}{{_i}}Visible{{/i}}
    + +

    {{_i}}When to use{{/i}}

    +

    {{_i}}Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities should not be used with tables, and as such are not supported.{{/i}}

    + +

    {{_i}}Responsive utilities test case{{/i}}

    +

    {{_i}}Resize your browser or load on different devices to test the above classes.{{/i}}

    +

    {{_i}}Visible on...{{/i}}

    +

    {{_i}}Green checkmarks indicate that class is visible in your current viewport.{{/i}}

    +
      +
    • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
    • +
    • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
    • +
    • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
    • +
    +

    {{_i}}Hidden on...{{/i}}

    +

    {{_i}}Here, green checkmarks indicate that class is hidden in your current viewport.{{/i}}

    +
      +
    • {{_i}}Phone{{/i}}✔ {{_i}}Phone{{/i}}
    • +
    • {{_i}}Tablet{{/i}}✔ {{_i}}Tablet{{/i}}
    • +
    • {{_i}}Desktop{{/i}}✔ {{_i}}Desktop{{/i}}
    • +
    + +
    + + + +
    {{! /span9 }} +
    {{! row}} + +
    {{! /.container }} diff --git a/cnDocs/test.html b/cnDocs/test.html new file mode 100644 index 000000000000..1980bd9961e7 --- /dev/null +++ b/cnDocs/test.html @@ -0,0 +1,350 @@ + + + + +Getting Started · Oricode - Twitter Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +

    概述

    +

    项目的概述、内容,以及如何开始使用一个简单的模板。

    +
    +
    + + +
    + + +
    + +
    + + + + +
    + +

    在下载之前,请你确保有一个代码编辑器(我们推荐 Sublime Text 2)并且准备了HTMl和CSS的相关知识。我们不能直接在这里修改源代码,但是提供它们的下载。现在我们就可以专注于编译Bootstrap文件了。

    + +
    +
    +

    下载编译

    +

    开始的最快方式: 包含编译后并且压缩过的CSS、JS以及图片。这里没有文档及原始文件。

    +

    下载 Bootstrap

    +
    +
    +

    下载源码

    +

    从GitHub上直接下载最新的版本,包含所有的CSS和JavaScript的原始文件,以及文档的本地副本。

    +

    下载 Bootstrap 源码

    +
    +
    +
    + + + + +
    + +

    你会发现下载文件对文档结构和内容都进行了逻辑划分,并提供编译版和压缩版。

    +

    下载完成后,解压文件夹便会看到Bootstrap的结构。你会看到下面的结构:

    +
    +bootstrap/
    +├── css/
    +│   ├── bootstrap.css
    +│   ├── bootstrap.min.css
    +├── js/
    +│   ├── bootstrap.js
    +│   ├── bootstrap.min.js
    +├── img/
    +│   ├── glyphicons-halflings.png
    +│   ├── glyphicons-halflings-white.png
    +└── README.md
    +
    +

    l这是最基本的Bootstrap结构:编译后的文件非常精简并使用在几乎所有的Web项目中。我们提供编译的CSS和Js(bootstrap.*)以及编译后压缩过的版本(bootstrap.min.*)。图片文件使用的是ImageOptim——一个专门压缩PNG图片的Mac应用。

    +

    请注意所有的JavaScript插件的使用都需要引用jQuery框架。

    +

    写在前面的话:

    +

    以上是bootstrap的结构,但是也许你不想一下子全部引用进来,比如bootstrap.css,那怎么办呢,所以你要去细分,让这个NB的项目具有更强的组合性,Bootstrap Customize做了这件事,但是具体如何去用该如何避免一些冲突,这里Bootstrap缺少了详尽的注释,类似于开发文档一样的,就像我之前整理的一份css reset文档,详尽描述了各种reset元素的取舍(以及为什么),这样一来就不仅仅是使用这么一个NB项目,而是知道这个项目为什么这么做,从底层的一个小小的代码就知道为什么,那对前端开发者来说绝对是福音啊!并且也要让bootstrap兼容IE6才行啊,进行细分再研究其中的相关取舍原因,这第一件事就是结构划分,下面看看规划样本(这里面甚多都是最基础的文件命名,为了避免引用中的冲突,可在文件前添加自定义前缀(ori-)以示同一系列结构文件,同时区别于其他文件结构)

    +

    这不是新作一个项目,而是研究Bootstrap为何如此设计,并引进新的技术到此中来!(也不你也想做整理一整套的网站架构所需的模块-html/css/js等一整套构造,便于管理和维护的,现在的bootstrap就是这么一套系统,现在我们做的就是去研究它使用它并完善它)

    +

    下面即是基于个人多方总结后的构想方案:

    +
    +Oricode/
    +├── css/
    +│   ├── reset.css     ├── core.css
    +│   ├── common.css    │
    +│   ├── pro-common.css│
    +│   ├── pro-custom.css
    +├── js/
    +│   ├── common.js
    +│   ├── pro-custom.js
    +├── img/
    +│   ├── combo.png
    +│   ├── pro-png24.png
    +└── README.md
    +
    +

    事实上在使用bootstrap这个框架的时候,仍然遇到不少阻碍,有时和现有网站结构极为不同,导致难以应用。现在我正在个人项目中极力推广这宗架构的使用,是Oricode的方式,这没有bootstrap勾画的更全面,但是结构更明晰机动性也更强了,全以项目为单位来构建,辅以项目名称前缀!通过在项目中的使用,由点及面的推广和使用bootstrap!

    +

    一个好的前端整理方案就是统一样式和自定义样式相分离的,经过和N多的系统相互杂糅,也不会出问题或者很小的问题干扰,这也是 Oricode 的初衷,有了经得起考验的基础代码,上层建筑才更牢固,开发人员也会说:“下面的代码写的那么精简,考虑那么全面,我怎么写也不能随便乱组合代码啊!”由于积极思想的作用,全局规划就起作用了!Oricode 就是为了做这事儿的!

    +
    + + + + +
    + +

    Bootstrap 内置了实现各类功能的 HTML, CSS 和 JS,并且它们被归纳到导航条上精简的几个类别下。

    + +

    文档部分

    +

    框架

    +

    设置了网页文档的重定义、背景、栅格系统以及两列简单布局的全局样式

    +

    基础CSS

    +

    常见的HTML元素,如排版、代码、表格、按钮的样式。此外还包含 Glyphicons ——一个完美的Icon小图标集。

    +

    组件

    +

    界面界面组件的基本样式,如切换标签、导航条、通知、页头等等。

    +

    JavaScript 插件

    +

    通用组件,如工具提醒、弹出提醒、对话框等等。

    + +

    组件列表

    +

    总之,组件JavaScript插件部分提供了以下界面元素:

    +
      +
    • 按钮组
    • +
    • 按钮下拉菜单
    • +
    • 导航选项卡、列表
    • +
    • 导航栏
    • +
    • 标签
    • +
    • 标识
    • +
    • 页头
    • +
    • 缩略图
    • +
    • 通知
    • +
    • 进度条
    • +
    • 对话框
    • +
    • 下拉列表
    • +
    • 工具提醒
    • +
    • 弹出提醒
    • +
    • 折叠
    • +
    • 轮播/跑马灯
    • +
    • 输入提醒
    • +
    +

    在未来的发展中,我们可能会对个别的组件实现更多的细节。在此之前,文档中仅仅介绍如何利用它们进行自定义设置。

    +
    + + + + +
    + +

    作为一个简短的文档介绍,我们可以集中精力去使用Bootstrap。要做到这一点,我们将利用一个基本的HTML模板,其中包括我们所需要的文件结构

    +

    现在,我们就来看一个典型的HTML文件

    +
    +<!DOCTYPE html>
    +<html>
    +<head>
    +<title>Bootstrap 101 Template</title>
    +</head>
    +<body>
    +<h1>Hello, world!</h1>
    +<script src="http://code.jquery.com/jquery-latest.js"></script>
    +</body>
    +</html>
    +
    +

    要使用这个 Bootstrap模版,只需要包含相应的CSS和JS文件:

    +
    +<!DOCTYPE html>
    +<html>
    +<head>
    +<title>Bootstrap 101 Template</title>
    +<!-- Bootstrap -->
    +<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    +</head>
    +<body>
    +<h1>Hello, world!</h1>
    +<script src="http://code.jquery.com/jquery-latest.js"></script>
    +<script src="js/bootstrap.min.js"></script>
    +</body>
    +</html>
    +
    +

    设置完毕! 引入这两个文件后,你就可以用Bootstrap开始开发任意网站或应用程序了。

    +
    + + + + +
    + +

    在基础模版上进行创新实现的一些布局示例。我们鼓励人们去创新这些示例而不是仅仅简单的使用这些例子或将其作为最终的效果来用。

    +
      +
    • + + + +

      入门模板

      +

      包含了Bootstrap所有的CSS和JS文件的标准HTML文档。

      +
    • +
    • + + + +

      基本的营销型网站

      +

      设置有一个主要显示区和三个次内容显示区。

      +
    • +
    • + + + +

      流体布局

      +

      使用新的响应式布局、流体栅格系统创建的一个无缝的流体布局。

      +
    • + +
    • + + + +

      小型营销

      +

      规模较小的项目或团队的营销模板。

      +
    • +
    • + + + +

      登陆界面

      +

      标准的登陆框且能更大灵活的控制布局。

      +
    • +
    • + + + +

      固定页脚

      +

      固定页脚始终位于浏览器窗口的最底部。

      +
    • + +
    • + + + +

      大屏幕轮播/旋转木马

      +

      更具交互性的基本营销网站,具有一个突出的轮播效果。

      +
    • +
    +
    + + + + + +
    + +

    去了解文档说明、实例以及代码片段,或者进行直接为即将开展的项目定制Bootstrap。

    + 访问Bootstrap文档 + 定制Bootstrap +
    + + + + +
    +
    + +
    + + + + + + + + + + + + + + + + + + + diff --git a/cnDocs/update-log.php b/cnDocs/update-log.php new file mode 100644 index 000000000000..7b14b33f6d38 --- /dev/null +++ b/cnDocs/update-log.php @@ -0,0 +1,76 @@ + + + + + + +
    +
    +

    升级计划

    +

    更新日志及计划列表

    +
    +
    + + +
    + + +
    + +
    + +
    + + +

    Doing list

    +

    menu for bugs lists of links. Made interactive with the bugs.

      +
    1. 详细划分结构
    2. +
    3. 增加Bugs and Fixed
    4. +
    + +

    合并项目

    +

    Some project joinin.

      +
    1. JavaScript-Load-Image
    2. +
    3. jQuery-File-Upload
    4. +
    5. Bootstrap-Image-Gallery
    6. +
    7. JavaScript-Templates
    8. +
    9. Chosen
    10. +
    11. HTML5 Boilerplate
    12. +
    13. +
    14. +
    15. +
    + +
    + +
    + +

    menu for bugs lists of links. Made interactive with the bugs.

    +
      +
    1. 研究使用SeaJS
    2. +
    3. Html模块化引入
    4. +
    5. js 模板artTemplate的使用
    6. +
    +
    + +
    +
    + +
    + + + + \ No newline at end of file diff --git a/docs/base-css.html b/docs/base-css.html index d1ca3fb8b13a..6d65ef3f7138 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -2188,7 +2188,7 @@

    Form fields

    - + diff --git a/docs/components.html b/docs/components.html index 7b960543b428..8f270a4ea568 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2599,7 +2599,7 @@

    .clearfix

    - + diff --git a/docs/customize.html b/docs/customize.html index a3c6ec688758..f66bad95e90d 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -487,7 +487,7 @@

    What's included?

    - + diff --git a/docs/extend.html b/docs/extend.html index 592812934491..303929f296dc 100644 --- a/docs/extend.html +++ b/docs/extend.html @@ -229,7 +229,7 @@

    Layer on custom code

    - + @@ -255,7 +255,7 @@

    Layer on custom code

    - + diff --git a/docs/getting-started.html b/docs/getting-started.html index c54da9a67f73..9a0d419076de 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -350,7 +350,7 @@

    What next?

    - + diff --git a/docs/index.html b/docs/index.html index 1040bcf6be31..2a406cfffdf8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -194,7 +194,7 @@

    Built with Bootstrap.

    - + diff --git a/docs/javascript.html b/docs/javascript.html index f4957d91cf9e..0e8c901b23b9 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1753,7 +1753,7 @@

    Options

    - + diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 87a9bb003157..1f70edd70615 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -575,7 +575,7 @@

    Hidden on...

    - + diff --git a/license.md b/license.md new file mode 100644 index 000000000000..a38b5fe45e26 --- /dev/null +++ b/license.md @@ -0,0 +1,7 @@ +# License Notes # + +本项目 cnBootstrap 的研究及知识扩展包括但不限于Bootstrap(简称BT)、YUI、AliceUI、W3C等众多开源项目(在此不一一列举),以BT为基础,进行其他知识及解决方案的整合完善,继承前者所使用的许可协议使用。 + +能力有限,无法完美整合,在能力范围内吸收借鉴,同时望各路牛人都来支持一下,加入开发! + +本项目基于 [MIT License](http://zh.wikipedia.org/wiki/MIT_License) 开源,可随意使用代码。当然为保持项目升级跟进,自行设置来源或者引用 [license.md](https://github.com/webcoding/cnBootstrap/blob/master/license.md) 。 diff --git a/module/53024116.jpg b/module/53024116.jpg new file mode 100644 index 000000000000..5bc7813deb28 Binary files /dev/null and b/module/53024116.jpg differ diff --git a/module/53026248.jpg b/module/53026248.jpg new file mode 100644 index 000000000000..44ae28c4263e Binary files /dev/null and b/module/53026248.jpg differ diff --git "a/module/CSS\347\273\235\345\257\271\345\256\232\344\275\215\346\260\264\345\271\263\345\261\205\344\270\255.html" "b/module/CSS\347\273\235\345\257\271\345\256\232\344\275\215\346\260\264\345\271\263\345\261\205\344\270\255.html" new file mode 100644 index 000000000000..b3e2d288cd48 --- /dev/null +++ "b/module/CSS\347\273\235\345\257\271\345\256\232\344\275\215\346\260\264\345\271\263\345\261\205\344\270\255.html" @@ -0,0 +1,19 @@ + + + + + + + +绝对定位水平居中 + + + +
    +
    + + diff --git a/module/IE6 position_fixed bug.html b/module/IE6 position_fixed bug.html new file mode 100644 index 000000000000..a5e7890ff5f6 --- /dev/null +++ b/module/IE6 position_fixed bug.html @@ -0,0 +1,58 @@ + + + + +IE6 position:fixed bug + + + + +
    +

    + IE6 position:fixed bug +

    + +
    + + diff --git "a/module/IE6-PNG24\350\203\214\346\231\257\351\200\217\346\230\216/DD_belatedPNG_0.0.8a-min.js" "b/module/IE6-PNG24\350\203\214\346\231\257\351\200\217\346\230\216/DD_belatedPNG_0.0.8a-min.js" new file mode 100644 index 000000000000..6062fb3c1c4c --- /dev/null +++ "b/module/IE6-PNG24\350\203\214\346\231\257\351\200\217\346\230\216/DD_belatedPNG_0.0.8a-min.js" @@ -0,0 +1,13 @@ +/** +* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML . +* Author: Drew Diller +* Email: drew.diller@gmail.com +* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/ +* Version: 0.0.8a +* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license +* +* Example usage: +* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector +* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement +**/ +var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}},createVmlStyleSheet:function(){var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");b.addRule(this.ns+"\\:shape","position:absolute;");b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute("media","print");document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns+"\\:*","{display: none !important;}");a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){var b,c,a;b=event.srcElement;if(!b.vmlInitiated){return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)}if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if(b.currentStyle.filter.search("lpha")!=-1){var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;bn.H){i.B=n.H}d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}else{d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f]=0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else{e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]++}return d[f]},fixPng:function(c){c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){return}c.isImg=false;if(c.nodeName=="IMG"){if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{return}}else{if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill:{}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)}}c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet(); \ No newline at end of file diff --git "a/module/IE6-PNG24\350\203\214\346\231\257\351\200\217\346\230\216/DD_belatedPNG_0.0.8a.js" "b/module/IE6-PNG24\350\203\214\346\231\257\351\200\217\346\230\216/DD_belatedPNG_0.0.8a.js" new file mode 100644 index 000000000000..248955b08efd --- /dev/null +++ "b/module/IE6-PNG24\350\203\214\346\231\257\351\200\217\346\230\216/DD_belatedPNG_0.0.8a.js" @@ -0,0 +1,289 @@ +/** +* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML . +* Author: Drew Diller +* Email: drew.diller@gmail.com +* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/ +* Version: 0.0.8a +* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license +* +* Example usage: +* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector +* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement +**/ + +/* +PLEASE READ: +Absolutely everything in this script is SILLY. I know this. IE's rendering of certain pixels doesn't make sense, so neither does this code! +*/ + +var DD_belatedPNG = { + ns: 'DD_belatedPNG', + imgSize: {}, + delay: 10, + nodesFixed: 0, + createVmlNameSpace: function () { /* enable VML */ + if (document.namespaces && !document.namespaces[this.ns]) { + document.namespaces.add(this.ns, 'urn:schemas-microsoft-com:vml'); + } + }, + createVmlStyleSheet: function () { /* style VML, enable behaviors */ + /* + Just in case lots of other developers have added + lots of other stylesheets using document.createStyleSheet + and hit the 31-limit mark, let's not use that method! + further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx + */ + var screenStyleSheet, printStyleSheet; + screenStyleSheet = document.createElement('style'); + screenStyleSheet.setAttribute('media', 'screen'); + document.documentElement.firstChild.insertBefore(screenStyleSheet, document.documentElement.firstChild.firstChild); + if (screenStyleSheet.styleSheet) { + screenStyleSheet = screenStyleSheet.styleSheet; + screenStyleSheet.addRule(this.ns + '\\:*', '{behavior:url(#default#VML)}'); + screenStyleSheet.addRule(this.ns + '\\:shape', 'position:absolute;'); + screenStyleSheet.addRule('img.' + this.ns + '_sizeFinder', 'behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;'); /* large negative top value for avoiding vertical scrollbars for large images, suggested by James O'Brien, http://www.thanatopsic.org/hendrik/ */ + this.screenStyleSheet = screenStyleSheet; + + /* Add a print-media stylesheet, for preventing VML artifacts from showing up in print (including preview). */ + /* Thanks to R�mi Pr�vost for automating this! */ + printStyleSheet = document.createElement('style'); + printStyleSheet.setAttribute('media', 'print'); + document.documentElement.firstChild.insertBefore(printStyleSheet, document.documentElement.firstChild.firstChild); + printStyleSheet = printStyleSheet.styleSheet; + printStyleSheet.addRule(this.ns + '\\:*', '{display: none !important;}'); + printStyleSheet.addRule('img.' + this.ns + '_sizeFinder', '{display: none !important;}'); + } + }, + readPropertyChange: function () { + var el, display, v; + el = event.srcElement; + if (!el.vmlInitiated) { + return; + } + if (event.propertyName.search('background') != -1 || event.propertyName.search('border') != -1) { + DD_belatedPNG.applyVML(el); + } + if (event.propertyName == 'style.display') { + display = (el.currentStyle.display == 'none') ? 'none' : 'block'; + for (v in el.vml) { + if (el.vml.hasOwnProperty(v)) { + el.vml[v].shape.style.display = display; + } + } + } + if (event.propertyName.search('filter') != -1) { + DD_belatedPNG.vmlOpacity(el); + } + }, + vmlOpacity: function (el) { + if (el.currentStyle.filter.search('lpha') != -1) { + var trans = el.currentStyle.filter; + trans = parseInt(trans.substring(trans.lastIndexOf('=')+1, trans.lastIndexOf(')')), 10)/100; + el.vml.color.shape.style.filter = el.currentStyle.filter; /* complete guesswork */ + el.vml.image.fill.opacity = trans; /* complete guesswork */ + } + }, + handlePseudoHover: function (el) { + setTimeout(function () { /* wouldn't work as intended without setTimeout */ + DD_belatedPNG.applyVML(el); + }, 1); + }, + /** + * This is the method to use in a document. + * @param {String} selector - REQUIRED - a CSS selector, such as '#doc .container' + **/ + fix: function (selector) { + if (this.screenStyleSheet) { + var selectors, i; + selectors = selector.split(','); /* multiple selectors supported, no need for multiple calls to this anymore */ + for (i=0; i size.H) { + c.B = size.H; + } + el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)'; + } + else { + el.vml.image.shape.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)'; + } + }, figurePercentage: function (bg, size, axis, position) { var horizontal, fraction; fraction = true; horizontal = (axis == 'X'); switch(position) { case 'left': case 'top': bg[axis] = 0; break; case 'center': bg[axis] = 0.5; break; case 'right': case 'bottom': bg[axis] = 1; break; default: if (position.search('%') != -1) { bg[axis] = parseInt(position, 10) / 100; } else { fraction = false; } } bg[axis] = Math.ceil( fraction ? ( (size[horizontal?'W': 'H'] * bg[axis]) - (size[horizontal?'w': 'h'] * bg[axis]) ) : parseInt(position, 10) ); if (bg[axis] % 2 === 0) { bg[axis]++; } return bg[axis]; }, + fixPng: function (el) { + el.style.behavior = 'none'; var lib, els, nodeStr, v, e; + if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR') { /* elements not supported yet */ + return; + } + el.isImg = false; + if (el.nodeName == 'IMG') { + if(el.src.toLowerCase().search(/\.png$/) != -1) { + el.isImg = true; + el.style.visibility = 'hidden'; + } + else { + return; + } + } + else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1) { + return; + } + lib = DD_belatedPNG; + el.vml = {color: {}, image: {}}; + els = {shape: {}, fill: {}}; + for (v in el.vml) { + if (el.vml.hasOwnProperty(v)) { + for (e in els) { + if (els.hasOwnProperty(e)) { + nodeStr = lib.ns + ':' + e; + el.vml[v][e] = document.createElement(nodeStr); + } + } + el.vml[v].shape.stroked = false; + el.vml[v].shape.appendChild(el.vml[v].fill); + el.parentNode.insertBefore(el.vml[v].shape, el); + } + } + el.vml.image.shape.fillcolor = 'none'; /* Don't show blank white shapeangle when waiting for image to load. */ + el.vml.image.fill.type = 'tile'; /* Makes image show up. */ + el.vml.color.fill.on = false; /* Actually going to apply vml element's style.backgroundColor, so hide the whiteness. */ + lib.attachHandlers(el); + lib.giveLayout(el); + lib.giveLayout(el.offsetParent); + el.vmlInitiated = true; + lib.applyVML(el); /* Render! */ + } +}; +try { + document.execCommand("BackgroundImageCache", false, true); /* TredoSoft Multiple IE doesn't like this, so try{} it */ +} catch(r) {} +DD_belatedPNG.createVmlNameSpace(); +DD_belatedPNG.createVmlStyleSheet(); \ No newline at end of file diff --git "a/module/IE6-PNG24\350\203\214\346\231\257\351\200\217\346\230\216/\350\257\264\346\230\216.txt" "b/module/IE6-PNG24\350\203\214\346\231\257\351\200\217\346\230\216/\350\257\264\346\230\216.txt" new file mode 100644 index 000000000000..cefa6a726f49 --- /dev/null +++ "b/module/IE6-PNG24\350\203\214\346\231\257\351\200\217\346\230\216/\350\257\264\346\230\216.txt" @@ -0,0 +1,23 @@ +��Ŀ��ַ��http://dillerdesign.com/experiment/DD_belatedPNG/ + +�����÷��� + + + +˵���� + \ No newline at end of file diff --git a/module/Logo.jpg b/module/Logo.jpg new file mode 100644 index 000000000000..1cda1f8bd5d0 Binary files /dev/null and b/module/Logo.jpg differ diff --git a/module/Pages/css.css b/module/Pages/css.css new file mode 100644 index 000000000000..bd9e3b765c8b --- /dev/null +++ b/module/Pages/css.css @@ -0,0 +1,261 @@ + + +404 Not Found + +

    Not Found

    +The requested URL /wp-content/uploads/htmldivcss/css.css was not found on this server. +
    +www.dedeadmin.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/module/Pages/images/pageimage1.gif b/module/Pages/images/pageimage1.gif new file mode 100644 index 000000000000..221bf66ba9d6 Binary files /dev/null and b/module/Pages/images/pageimage1.gif differ diff --git a/module/Pages/images/pageimage2.gif b/module/Pages/images/pageimage2.gif new file mode 100644 index 000000000000..f3a676463e2d Binary files /dev/null and b/module/Pages/images/pageimage2.gif differ diff --git a/module/Pages/pagecss.htm b/module/Pages/pagecss.htm new file mode 100644 index 000000000000..e79768627f15 Binary files /dev/null and b/module/Pages/pagecss.htm differ diff --git "a/module/a-hover\345\261\236\346\200\247\347\232\204\344\274\230\345\205\210\347\272\247\351\227\256\351\242\230.html" "b/module/a-hover\345\261\236\346\200\247\347\232\204\344\274\230\345\205\210\347\272\247\351\227\256\351\242\230.html" new file mode 100644 index 000000000000..6773028e77e7 --- /dev/null +++ "b/module/a-hover\345\261\236\346\200\247\347\232\204\344\274\230\345\205\210\347\272\247\351\227\256\351\242\230.html" @@ -0,0 +1,75 @@ + + + + + + +a:hover属性在IE6下的优先级异常问题 + + + +

    good

    + +

    good

    + +
    +

    good

    +
    + +
    +
    +

    good

    +
    +
    + + + \ No newline at end of file diff --git a/module/adblock.html b/module/adblock.html new file mode 100644 index 000000000000..e10184e101f5 --- /dev/null +++ b/module/adblock.html @@ -0,0 +1,26 @@ + + + + +adblock广告位 + + + + +
    + +
    +
    + +
    + + + diff --git a/module/autolazyIMG/grey.gif b/module/autolazyIMG/grey.gif new file mode 100644 index 000000000000..8d74456e3d3d Binary files /dev/null and b/module/autolazyIMG/grey.gif differ diff --git a/module/autolazyIMG/index.html b/module/autolazyIMG/index.html new file mode 100644 index 000000000000..d85e3611b4c5 --- /dev/null +++ b/module/autolazyIMG/index.html @@ -0,0 +1,88 @@ + + + + +图片自动缩放和延迟加载 + + + + + + +
      +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    + + diff --git "a/module/autolazyIMG/\345\244\215\344\273\266 (2) auto-lazyIMG.html" "b/module/autolazyIMG/\345\244\215\344\273\266 (2) auto-lazyIMG.html" new file mode 100644 index 000000000000..896a73c1f15a --- /dev/null +++ "b/module/autolazyIMG/\345\244\215\344\273\266 (2) auto-lazyIMG.html" @@ -0,0 +1,88 @@ + + + + +图片自动缩放和延迟加载 + + + + + + +
      +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    + + diff --git "a/module/autolazyIMG/\345\244\215\344\273\266 (3) auto-lazyIMG.html" "b/module/autolazyIMG/\345\244\215\344\273\266 (3) auto-lazyIMG.html" new file mode 100644 index 000000000000..dc094b8db8f3 --- /dev/null +++ "b/module/autolazyIMG/\345\244\215\344\273\266 (3) auto-lazyIMG.html" @@ -0,0 +1,88 @@ + + + + +图片自动缩放和延迟加载 + + + + + + +
      +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    + + diff --git "a/module/autolazyIMG/\345\244\215\344\273\266 auto-lazyIMG.html" "b/module/autolazyIMG/\345\244\215\344\273\266 auto-lazyIMG.html" new file mode 100644 index 000000000000..123a77fa9c3a --- /dev/null +++ "b/module/autolazyIMG/\345\244\215\344\273\266 auto-lazyIMG.html" @@ -0,0 +1,63 @@ + + + + +图片自动缩放和延迟加载 + + + + + + +
    +火狐下运行安好 +
      +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    • hello

    • +
    + + diff --git a/module/clear-float.html b/module/clear-float.html new file mode 100644 index 000000000000..8d2cde60a8bf --- /dev/null +++ b/module/clear-float.html @@ -0,0 +1,158 @@ + + + + +浮动元素margin-bottom在IE6和IE7下失效的解决办法 + + + + + + + + + + + +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    +
    +
    +
    +
    +
      +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    +
    +
    + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/module/clover_jellyfish_bottle.htm b/module/clover_jellyfish_bottle.htm new file mode 100644 index 000000000000..aad5e093ae2f --- /dev/null +++ b/module/clover_jellyfish_bottle.htm @@ -0,0 +1,389 @@ + + + + +无标题文档 + + + + +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + + +
    + +
    +
    +
    +
    +
    + + + + +
    + +
    +
    + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + + diff --git a/module/color.html b/module/color.html new file mode 100644 index 000000000000..f33945cc364e --- /dev/null +++ b/module/color.html @@ -0,0 +1,63 @@ + + + + +color简单颜色表 + + + + + +
    +
    +maroon #800000 +red #ff0000 +orange #ffA500 +yellow #ffff00 +olive #808000 +
    +
    +purple #800080 +fuchsia #ff00ff +white #ffffff +lime #00ff00 +green #008000 +
    +
    +navy #000080 +blue #0000ff +aqua #00ffff +teal #008080 +
    +
    +black #000000 +silver #c0c0c0 +gray #808080 +
    +
    + + diff --git a/module/cursor/albumleftarrow.cur b/module/cursor/albumleftarrow.cur new file mode 100644 index 000000000000..255f1cb99802 Binary files /dev/null and b/module/cursor/albumleftarrow.cur differ diff --git a/module/cursor/albumrightarrow.cur b/module/cursor/albumrightarrow.cur new file mode 100644 index 000000000000..526179214a2e Binary files /dev/null and b/module/cursor/albumrightarrow.cur differ diff --git a/module/cursor/cursorbig.cur b/module/cursor/cursorbig.cur new file mode 100644 index 000000000000..8363be10b00a Binary files /dev/null and b/module/cursor/cursorbig.cur differ diff --git a/module/cursor/cursorsmall.cur b/module/cursor/cursorsmall.cur new file mode 100644 index 000000000000..ef03a85ac8d5 Binary files /dev/null and b/module/cursor/cursorsmall.cur differ diff --git a/module/cursor/index.html b/module/cursor/index.html new file mode 100644 index 000000000000..be24a55489e5 --- /dev/null +++ b/module/cursor/index.html @@ -0,0 +1,37 @@ + + + + +鼠标指针样式自定义控制 + + + + + +
    + +
    +

    cursor:设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
    +注意:使用自定义图像作为光标类型,IE, Opera只支持*.cur等特定的图片格式;Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.jpg, *.gif, *.jpg等图片格式。 +cursor的属性值可以是一个序列 +示例代码:

    +
    +:link,:visited{ 
    +    cursor:url(example.svg#linkcursor),
    +            url(hyper.cur),
    +            url(hyper.png) 2 3,
    +            pointer;
    +}

    +本例用来给所有的超链接定义光标类型,客户端如果不支持SVG类型的光标,则使用下个"hyper.cur";如果cur类型也不支持,则使用下个"hyper.png";依次类推。 +

    + + diff --git a/module/cursor/left.cur b/module/cursor/left.cur new file mode 100644 index 000000000000..197dda1feb35 Binary files /dev/null and b/module/cursor/left.cur differ diff --git a/module/cursor/next-a.cur b/module/cursor/next-a.cur new file mode 100644 index 000000000000..ab0de8902bf0 Binary files /dev/null and b/module/cursor/next-a.cur differ diff --git a/module/cursor/next.cur b/module/cursor/next.cur new file mode 100644 index 000000000000..6de5b70189eb Binary files /dev/null and b/module/cursor/next.cur differ diff --git a/module/cursor/pre-a.cur b/module/cursor/pre-a.cur new file mode 100644 index 000000000000..4f47134d3e51 Binary files /dev/null and b/module/cursor/pre-a.cur differ diff --git a/module/cursor/pre.cur b/module/cursor/pre.cur new file mode 100644 index 000000000000..f7da98feefa7 Binary files /dev/null and b/module/cursor/pre.cur differ diff --git a/module/cursor/right.cur b/module/cursor/right.cur new file mode 100644 index 000000000000..c40de7e715fa Binary files /dev/null and b/module/cursor/right.cur differ diff --git a/module/cursor/zoom.cur b/module/cursor/zoom.cur new file mode 100644 index 000000000000..a873e193b8cf Binary files /dev/null and b/module/cursor/zoom.cur differ diff --git a/module/cursor/zoomin.cur b/module/cursor/zoomin.cur new file mode 100644 index 000000000000..d76a390a4307 Binary files /dev/null and b/module/cursor/zoomin.cur differ diff --git a/module/data/jquery-data-method/css/styles.css b/module/data/jquery-data-method/css/styles.css new file mode 100644 index 000000000000..fb78781f98f2 --- /dev/null +++ b/module/data/jquery-data-method/css/styles.css @@ -0,0 +1,151 @@ +*{ + margin:0; + padding:0; +} + +body{ + color:#777; + background-color:#fcfcfc; + font:15px Calibri,Arial,sans-serif; + border-top:5px solid #212121; +} + +/* Styling the test form */ + +form{ + width:600px; + margin:50px auto; +} + +fieldset{ + -moz-border-radius:6px; + -webkit-border-radius:6px; + border-radius:6px; + + border:1px solid #DDDDDD; + margin-bottom:20px; + padding:5px 25px 30px; + position:relative; +} + +#output{ + left:300px; + position:absolute; + top:0; + width:200px; +} + +pre{ + margin-top:5px; +} + +legend{ + font-size:18px; + padding:4px; + margin-left:-4px; +} + +input{ + border:1px solid #CCCCCC; + color:#888888; + font-size:14px; + padding:3px 4px; + width:180px; + outline:none; + resize:none; +} + +input[type=button]{ + background-color:#3293D0; + border:1px solid #227DB7; + color:#FFFFFF; + cursor:pointer; + font-size:11px; + margin:10px 8px 0 0; + + padding:5px 8px; + text-shadow:1px 1px 0 #227DB7; + width:auto; + + -moz-border-radius:6px; + -webkit-border-radius:6px; + border-radius:6px; +} + +input[type=button]:hover{ + background-color:#44a9e8; +} + +label{ + display:block; + font-size:12px; + padding:4px 0 2px; +} + +.note{ + font-size:14px; + margin:0 auto; + text-align:center; + width:400px; +} + +#footer{ + background-color:#212121; + position:fixed; + width:100%; + height:70px; + bottom:0; + left:0; +} + +a.tzine,a.tzine:visited{ + background:url("../img/tzine.png") no-repeat right top; + border:none; + color:#FCFCFC; + font-size:12px; + height:70px; + left:50%; + line-height:31px; + margin:23px 0 0 110px; + position:absolute; + top:0; + width:290px; +} + +.tri{ + border-color:transparent transparent #212121; + border-style:solid; + border-width:20px 17px; + height:0; + left:50%; + margin:-40px 0 0 -400px; + position:absolute; + top:0; + width:0; +} + +h1{ + font-size:20px; + font-weight:normal; + left:50%; + margin-left:-400px; + padding:25px 0; + position:absolute; + width:480px; + color:#FCFCFC; +} + +a, a:visited { + text-decoration:none; + outline:none; + border-bottom:1px dotted #97cae6; + color:#97cae6; +} + +a:hover{ + border-bottom:1px dashed transparent; +} + +.clear{ + clear:both; +} \ No newline at end of file diff --git a/module/data/jquery-data-method/img/tzine.png b/module/data/jquery-data-method/img/tzine.png new file mode 100644 index 000000000000..df4abaf944a7 Binary files /dev/null and b/module/data/jquery-data-method/img/tzine.png differ diff --git a/module/data/jquery-data-method/jquery-data-method.html b/module/data/jquery-data-method/jquery-data-method.html new file mode 100644 index 000000000000..76db62f67405 --- /dev/null +++ b/module/data/jquery-data-method/jquery-data-method.html @@ -0,0 +1,55 @@ + + + + +jQuery's Data Method – How and Why to Use It | Tutorialzine Demo + + + + + + +
    +
    + Form Fields + + + + + + + + + + + + +
    + +
    + Controls + + + + + +
    + +
    + +

    The myFormObj variable is linked to the form. Changes to the form fields affect the properties of the object and vice-versa.

    + + + + + + + + + + + diff --git a/module/data/jquery-data-method/js/jquery.datalink.js b/module/data/jquery-data-method/js/jquery.datalink.js new file mode 100644 index 000000000000..ab1f9450d9b2 --- /dev/null +++ b/module/data/jquery-data-method/js/jquery.datalink.js @@ -0,0 +1,241 @@ +/*! + * jQuery Data Link Plugin + * http://github.com/jquery/jquery-datalink + * + * Copyright Software Freedom Conservancy, Inc. + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + */ +(function($){ + +var oldcleandata = $.cleanData, + links = [], + fnSetters = { + val: "val", + html: "html", + text: "text" + }; + +function setValue(target, field, value) { + if ( target.nodeType ) { + var setter = fnSetters[ field ] || "attr"; + $(target)[setter](value); + } else { + $(target).data( field, value ); + } +} + +function getLinks(obj) { + var data = $.data( obj ), + cache, + fn = data._getLinks || (cache={s:[], t:[]}, data._getLinks = function() { return cache; }); + return fn(); +} + +function bind(obj, wrapped, handler) { + wrapped.bind( obj.nodeType ? "change" : "changeData", handler ); +} +function unbind(obj, wrapped, handler) { + wrapped.unbind( obj.nodeType ? "change" : "changeData", handler ); +} + +$.extend({ + cleanData: function( elems ) { + for ( var j, i = 0, elem; (elem = elems[i]) != null; i++ ) { + // remove any links with this element as the source + // or the target. + var links = $.data( elem, "_getLinks" ); + if ( links ) { + links = links(); + // links this element is the source of + var self = $(elem); + $.each(links.s, function() { + unbind( elem, self, this.handler ); + if ( this.handlerRev ) { + unbind( this.target, $(this.target), this.handlerRev ); + } + }); + // links this element is the target of + $.each(links.t, function() { + unbind( this.source, $(this.source), this.handler ); + if ( this.handlerRev ) { + unbind( elem, self, this.handlerRev ); + } + }); + links.s = []; + links.t = []; + } + } + oldcleandata( elems ); + }, + convertFn: { + "!": function(value) { + return !value; + } + } +}); + +function getMapping(ev, changed, newvalue, map, source, target) { + var target = ev.target, + isSetData = ev.type === "changeData", + mappedName, + convert; + name; + if ( isSetData ) { + name = changed; + if ( ev.namespace ) { + name += "." + ev.namespace; + } + } else { + name = (target.name || target.id); + } + + if ( !map ) { + mappedName = name; + } else { + var m = map[ name ]; + if ( !m ) { + return null; + } + mappedName = m.name; + convert = m.convert; + if ( typeof convert === "string" ) { + convert = $.convertFn[ convert ]; + } + } + return { + name: mappedName, + convert: convert, + value: isSetData ? newvalue : $(target).val() + }; +} + +$.extend($.fn, { + link: function(target, mapping) { + var self = this; + if ( !target ) { + return self; + } + function matchByName(name) { + var selector = "[name=" + name + "], [id=" + name +"]"; + // include elements in this set that match as well a child matches + return self.filter(selector).add(self.find(selector)); + } + if ( typeof target === "string" ) { + target = $( target, this.context || null )[ 0 ]; + } + var hasTwoWay = !mapping, + map, + mapRev, + handler = function(ev, changed, newvalue) { + // a dom element change event occurred, update the target + var m = getMapping( ev, changed, newvalue, map ); + if ( m ) { + var name = m.name, + value = m.value, + convert = m.convert; + if ( convert ) { + value = convert( value, ev.target, target ); + } + if ( value !== undefined ) { + setValue( target, name, value ); + } + } + }, + handlerRev = function(ev, changed, newvalue) { + // a change or changeData event occurred on the target, + // update the corresponding source elements + var m = getMapping( ev, changed, newvalue, mapRev ); + if ( m ) { + var name = m.name, + value = m.value, + convert = m.convert; + // find elements within the original selector + // that have the same name or id as the field that updated + matchByName(name).each(function() { + newvalue = value; + if ( convert ) { + newvalue = convert( newvalue, target, this ); + } + if ( newvalue !== undefined ) { + setValue( this, "val", newvalue ); + } + }); + } + + }; + if ( mapping ) { + $.each(mapping, function(n, v) { + var name = v, + convert, + convertBack, + twoWay; + if ( $.isPlainObject( v ) ) { + name = v.name || n; + convert = v.convert; + convertBack = v.convertBack; + twoWay = v.twoWay !== false; + hasTwoWay |= twoWay; + } else { + hasTwoWay = twoWay = true; + } + if ( twoWay ) { + mapRev = mapRev || {}; + mapRev[ n ] = { + name: name, + convert: convertBack + }; + } + map = map || {}; + map[ name ] = { name: n, convert: convert, twoWay: twoWay }; + }); + } + + // associate the link with each source and target so it can be + // removed automaticaly when _either_ side is removed. + self.each(function() { + bind( this, $(this), handler ); + var link = { + handler: handler, + handlerRev: hasTwoWay ? handlerRev : null, + target: target, + source: this + }; + getLinks( this ).s.push( link ); + if ( target.nodeType ) { + getLinks( target ).t.push( link ); + } + }); + if ( hasTwoWay ) { + bind( target, $(target), handlerRev ); + } + return self; + }, + unlink: function(target) { + this.each(function() { + var self = $(this), + links = getLinks( this ).s; + for (var i = links.length-1; i >= 0; i--) { + var link = links[ i ]; + if ( link.target === target ) { + // unbind the handlers + //wrapped.unbind( obj.nodeType ? "change" : "changeData", handler ); + unbind( this, self, link.handler ); + if ( link.handlerRev ) { + unbind( link.target, $(link.target), link.handlerRev ); + } + // remove from source links + links.splice( i, 1 ); + // remove from target links + var targetLinks = getLinks( link.target ).t, + index = $.inArray( link, targetLinks ); + if ( index !== -1 ) { + targetLinks.splice( index, 1 ); + } + } + } + }); + } +}); + +})(jQuery); diff --git a/module/data/jquery-data-method/js/script.js b/module/data/jquery-data-method/js/script.js new file mode 100644 index 000000000000..7bcdd8a9c420 --- /dev/null +++ b/module/data/jquery-data-method/js/script.js @@ -0,0 +1,37 @@ +$(document).ready(function(){ + + var myFormObj = {}; + + // We are linking the form fields to myFormObj and trigger + // the change event, so the data is updated initially. + + $('#originalForm').link(myFormObj).find('input[type=text]').trigger('change'); + + var buttons = $('#originalForm input[type=button]'); + + buttons.eq(0).click(function(){ + outputData('The myFormObj variable',myFormObj); + }); + + buttons.eq(1).click(function(){ + $(myFormObj).data("name","Homer"); + }); + + buttons.eq(2).click(function(){ + outputData('This button\'s HTML5 data attribute',$(this).data('someobj')); + }); + + function outputData(title,obj){ + try{ + $('#output').html('
    '+formatObject(obj)+'
    '); + } + catch(e){ + $('#output').html('The output cannot be displayed in your browser'); + } + } + + function formatObject(obj){ + return JSON.stringify(obj).replace(/,/g,',\n ').replace('{','{\n ').replace('}','\n}') + } + +}); \ No newline at end of file diff --git a/module/dialog.html b/module/dialog.html new file mode 100644 index 000000000000..cda40f4e77bc --- /dev/null +++ b/module/dialog.html @@ -0,0 +1,82 @@ + + + + +弹出框测试 + + + + +
    +
    +
    + × +
    + +

    您确定要删除吗?

    +

    删除后,信息将不可恢复!

    + +
    +
    + + + + + diff --git a/module/div width algorithm.html b/module/div width algorithm.html new file mode 100644 index 000000000000..7b2b505938a3 --- /dev/null +++ b/module/div width algorithm.html @@ -0,0 +1,41 @@ + + + + +div width algorithm + + + + + + + + +
    ahah +
    hah
    +
    hah
    +
    hah
    +
    ahha
    +
    + + diff --git "a/module/div+css\347\202\271\345\207\273\346\224\266\347\274\251\345\267\246\350\276\271\346\240\217/admin.js" "b/module/div+css\347\202\271\345\207\273\346\224\266\347\274\251\345\267\246\350\276\271\346\240\217/admin.js" new file mode 100644 index 000000000000..b28cc67bb3da --- /dev/null +++ "b/module/div+css\347\202\271\345\207\273\346\224\266\347\274\251\345\267\246\350\276\271\346\240\217/admin.js" @@ -0,0 +1,104 @@ +var status = 1; +var Menus = new DvMenuCls; + +document.onclick=Menus.Clear; +function switchSysBar(){ + var switchPoint=document.getElementById("switchPoint"); + var frmTitle=document.getElementById("frmTitle"); + if (1 == window.status){ + window.status = 0; + //alert(switchPoint); + + switchPoint.style.backgroundImage = 'url(images/left.gif)'; + frmTitle.style.display="none" + } + else{ + window.status = 1; + switchPoint.style.backgroundImage = 'url(images/right.gif)'; + frmTitle.style.display="" + } +} + +function DvMenuCls(){ + var MenuHides = new Array(); + this.Show = function(obj,depth){ + var childNode = this.GetChildNode(obj); + if (!childNode){return ;} + if (typeof(MenuHides[depth])=="object"){ + this.closediv(MenuHides[depth]); + MenuHides[depth] = ''; + }; + if (depth>0){ + if (childNode.parentNode.offsetWidth>0){ + childNode.style.left= childNode.parentNode.offsetWidth+'px'; + + }else{ + childNode.style.left='100px'; + }; + + childNode.style.top = '-2px'; + }; + + childNode.style.display ='none'; + MenuHides[depth]=childNode; + + }; + this.closediv = function(obj){ + if (typeof(obj)=="object"){ + if (obj.style.display!='none'){ + obj.style.display='none'; + } + } + } + this.Hide = function(depth){ + var i=0; + if (depth>0){ + i = depth + }; + while(MenuHides[i]!=null && MenuHides[i]!=''){ + this.closediv(MenuHides[i]); + MenuHides[i]=''; + i++; + }; + + }; + this.Clear = function(){ + for(var i=0;i + + + +div+css������������ + + + + +
    +
    ���
    +
    +
    �ұ�
    +
    + + \ No newline at end of file diff --git a/module/flash.html b/module/flash.html new file mode 100644 index 000000000000..0a6078e02d28 --- /dev/null +++ b/module/flash.html @@ -0,0 +1,20 @@ + + + + +ȫ������flash���� + + + +
    ȫ������flash����
    +
    + + + + + +
    + + + \ No newline at end of file diff --git a/module/float-margin-bottom.html b/module/float-margin-bottom.html new file mode 100644 index 000000000000..e76862005ee2 --- /dev/null +++ b/module/float-margin-bottom.html @@ -0,0 +1,48 @@ + + + + +浮动元素margin-bottom在IE6和IE7下失效的解决办法 + + + + +

    返回文章

    +

    浮动元素margin-bottom在IE6和IE7下失效的解决办法

    +

    Bug重现:

    +
    +
    +
    +
    +
    + + +

    解决办法:

    +
    +
    +
    +
    + +
    +
    + + + +

    平时常用的清除浮动clearfix方法,对此IE6、IE7下的浮动元素margin-bottom bug无效了,看来这个属性确实没有空标签清除法强悍啊:

    +
    +
    +
    +
    +
    + + + diff --git a/module/font_face.jpg b/module/font_face.jpg new file mode 100644 index 000000000000..31492b41c445 Binary files /dev/null and b/module/font_face.jpg differ diff --git a/module/haha/Content Overlay with CSS.html b/module/haha/Content Overlay with CSS.html new file mode 100644 index 000000000000..8e503324a662 --- /dev/null +++ b/module/haha/Content Overlay with CSS.html @@ -0,0 +1,44 @@ + + + + +Content Overlay with CSS + + + + +
    + +
    Here's what you have.
    + +
    Here's more of a description of what we have going on here.
    +
    + + + diff --git a/module/ie6-float-bug.html b/module/ie6-float-bug.html new file mode 100644 index 000000000000..708393b06d83 --- /dev/null +++ b/module/ie6-float-bug.html @@ -0,0 +1,101 @@ + + + + + 测试IE6的浮动元素对其他元素对齐的影响问题 + + + +

    测试IE6的浮动元素对其他元素对齐的影响问题

    + +
    +
    姓名:
    +
    王小二
    +
    王小二
    +
    王小二
    +
    +
    +
    姓名:
    +

    王小二

    +

    王小二

    +

    王小二

    +
    +
    +
    姓名:
    +
    苏梅岛机票税金(香港往返)
    +
    苏梅岛机票税金(香港往返)
    +
    苏梅岛机票税金(香港往返)
    +
    苏梅岛机票税金(香港往返)
    +
    +
    +
    姓名:
    +
    苏梅岛机票税金(香港往返)
    +
    苏梅岛机票税金(香港往返)
    +
    苏梅岛机票税金(香港往返)
    +
    苏梅岛机票税金(香港往返)
    +
    +
    +
    姓名:
    +
    苏梅岛机票税金(香港往返)
    +
    苏梅岛机票税金(香港往返)
    +
    苏梅岛机票税金(香港往返)
    +
    苏梅岛机票税金(香港往返)
    +
    +
    +
    姓名:
    +
    王小二
    +
    +
    +
    姓名:
    +
    王小二
    +
    王小二
    +
    王小二
    +
    + +
    +
    姓名:
    +
    +
    王小二
    +
    王小二
    +
    王小二
    +
    +
    + + + + \ No newline at end of file diff --git a/module/iepngfix/blank.gif b/module/iepngfix/blank.gif new file mode 100644 index 000000000000..75b945d25538 Binary files /dev/null and b/module/iepngfix/blank.gif differ diff --git a/module/iepngfix/checkerboard.gif b/module/iepngfix/checkerboard.gif new file mode 100644 index 000000000000..551c5b81543a Binary files /dev/null and b/module/iepngfix/checkerboard.gif differ diff --git a/module/iepngfix/helix.gif b/module/iepngfix/helix.gif new file mode 100644 index 000000000000..712831929de0 Binary files /dev/null and b/module/iepngfix/helix.gif differ diff --git a/module/iepngfix/iepngfix.htc b/module/iepngfix/iepngfix.htc new file mode 100644 index 000000000000..6423ad44aa20 --- /dev/null +++ b/module/iepngfix/iepngfix.htc @@ -0,0 +1,198 @@ + + + diff --git a/module/iepngfix/iepngfix.html b/module/iepngfix/iepngfix.html new file mode 100644 index 000000000000..8920f8615abb --- /dev/null +++ b/module/iepngfix/iepngfix.html @@ -0,0 +1,545 @@ + + + + + IE PNG Alpha Fix Demonstration + + + + + + + + + + + + + + + + + + + + + +
    + +

    Demo:

    + + + + +

    REGULAR IMAGE TAG

    + Opacity demo + +

    BACKGROUND IMAGE

    +
    + GIF + | + PNG 1 + | + PNG 2 + | + None +
    + Background Position + | + Height +
    + +

    IMAGE DROPSHADOW

    +

    (PNG background behind GIF/JPEG)

    + Helix + +

    INLINE LINK

    + + Here's some inline link text. + + +

    INPUT TYPE=IMAGE

    +
    +
    + +
    +
    + +

    CLASSNAME CHANGE

    +
    + +

    Self-test debugging:

    + Click here to test. + + +
    + + +

    What is this?

    +

    This is a IE5.5+ "behavior" that automatically adds near-native PNG support to +MSIE 5.5 and 6.0 without any changes to the HTML document itself. Supported features +include:

    +
      +
    • Automatic activation of transparency for PNGs in the page.
    • +
    • Support for <IMG SRC=""> elements.
    • +
    • Support for background PNG images (unlike many other scripts!)
    • +
    • Support for CSS1 background repeat and position (via optional add-on)
    • +
    • Background images can be defined inline or in external stylesheets.
    • +
    • Automatically handles changed SRC/background via normal JavaScript + (e.g. mouseover rollovers) -- no special coding needed.
    • +
    • Change support includes CSS 'className' changes on elements.
    • +
    • Incorporates automatic workaround for <a href=""> elements within + PNG-background elements.
    • +
    • Tiny script (for fast downloads).
    • +
    • Licensed under a Free Software license.
    • +
    + + +

    How To Use

    +

    Follow these simple steps to add this to your page:

    +
      +
    1. Copy and paste iepngfix.htc and blank.gif into + your website folder.
    2. +
    3. Copy and paste this into your website's CSS or HTML: +
      +
      + + <style type="text/css">
      + img, div { behavior: url(iepngfix.htc) }
      + </style> +
      +
      +
      + That CSS selector must include the tags/elements on which you want PNG + support -- basically, give it a comma-separated list of tags you use. + It must also include the correct path to the .HTC relative to the HTML + document location (not relative to the CSS document!). For instance, + yours may look like this: +
      +
      + + <style type="text/css">
      + img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
      + </style> +
      +
      +
      +
    4. +
    5. If your site uses subfolders, open the .HTC file in a text editor like + Windows Notepad and change the blankImg variable to include + a correct path to blank.gif like so: +
      +
      + + IEPNGFix.blankImg = '/images/blank.gif'; + +
      +
      + Again the path is relative to the HTML file. + Otherwise, you will see a "broken image" graphic!
    6. +
    7. If you want support for CSS1 background-repeat and background-position, + make sure you include the add-on .JS file in your <head>: +
      +
      + + <script type="text/javascript" src="iepngfix_tilebg.js"></script> + +
      +
      + Otherwise, background images will work but won't repeat or position. +
    8. +
    9. Sit back and enjoy! Perhaps consider making a + donation to support this script's + development if you like what you see, as I have spent hundreds of hours + developing, testing and supporting it :). Alternatively, I would certainly + appreciate a crediting link on your site back to mine!
    10. +
    + +

    If you are interested in more details or an alternative activation method +for the script that maintains CSS validation compatibility, see the source +code to this demonstration file.

    + +

    How to fix common problems

    +
    +
    I've pasted in the CSS but my PNGs aren't transparent!
    +
    Make sure you remember that the path to the HTC file is relative to the HTML + file, not the CSS file (like CSS background images are). If you want to test the + path, insert this: alert('This works!'); into the .HTC file.
    +
    It works offline but not online.
    +
    First try unzipping this default demonstration and uploading to your web + server as-is. If it doesn't work, you may have a MIME type problem. + You must ensure your server is sending the correct MIME type of "text/x-component" + for .HTC files. Try one of these two easy fixes: +
      +
    1. Upload the ".htaccess" file from within this script's download ZIP to your + webserver, which will make Apache send the correct MIME type.
    2. +
    3. Instead of calling "IEPNGFIX.HTC" from your CSS, upload IEPNGFIX.PHP to + the same folder and call that instead, which also sends the right MIME type.
    4. +
    +
    +
    My PNGs are transparent but have a funny border or red "X" icon.
    +
    Check that the blankImg variable is set correctly in the .HTC + file, again this should be relative to the HTML document containing the PNGs.
    +
    Images are distorted, or this script breaks my page layout.
    +
    When applied to images without set dimensions, this script will try and + "guess" the correct image size and apply that. If it gets it wrong, give + your images a definite width and height.
    +
    Links or form elements within a PNG'd element aren't clickable.
    +
    Due to an IE bug, if you are putting links within an element with a transparent + background, the element must not have a CSS relative/absolute position. + Otherwise the links will likely be un-clickable. The script will warn you with + a popup alert dialog if this occurs. There is an excellent article on + PNG filters + and links you might want to read if you are a CSS expert that contains + more info and workarounds.
    +
    It works, but breaks another application like Google Maps on my page.
    +
    You'll need to stop applying this behavior to the third-party element that + presumably contains its own PNG fix. Try making your CSS selector more specific, + or put a manual override for the element in your CSS like so: + * html div#map img { behavior: none; }
    +
    I have IE6 installed "alongside" IE7+, and this script fails.
    +
    Either try on a computer with IE6 installed system-wide, or make sure + that you copy the required DLLs into your IE6 folder. You will need + dxtrans.dll and dxtmsft.dll for filter support, + try Googling for them or finding them on your Windows install CD. + They must also be the "version 6" DLLs, not v7+, to work with IE6. + Note that I can't support your setup here, sorry!
    +
    I have lots of images and page loading is slow.
    +
    With a lot of images, it can certainly slow down your page! Make sure + that you apply the script as narrowly as possible. Consider applying only to + elements of a particular CLASS perhaps, rather than all tags. Also, make + sure that you are not trying to tile a 1x1px PNG background over a large + element, as this will bring the browser to its kness -- make your images a + little larger if you run into this :).
    +
    The browser is making hundreds of extra HTTP requests.
    +
    See this + MSDN HTC bug report for the details and a workaround. The same technique + might prove handy with the BLANK.GIF file too if that's your problem.
    +
    The MIME type and path are right, but the core script won't load online.
    +
    Check that your server isn't sending the HTC file GZIP-compressed. This + can break IE6, it seems.
    +
    It still won't go.
    +
    Try running the self-test at the bottom of the list of demo images. + If that throws any errors, you'll know where to start fixing!
    +
    + + +

    Limitations and known isses with the script

    +
      +
    • Padding and borders don't indent the PNG image and can sometimes contribute + to the distortion problem. An easy fix is to use 'margin' instead.
    • +
    • A:HOVER transparent images are not supported out of the box. If you want + this functionality, I recommend you download the excellent + Whatever:hover + script. This script will then enable :hover PNG background changes on all page + elements when both are applied to the page.
    • +
    • IE 4.0/5.0 are not supported. MSIE/Mac has native support for IMG SRC but + no background PNG support. The scripts does nothing in MSIE7 as it supports + PNGs natively.
    • +
    • Users can't right-click-save processed PNG images, they'll save the blank GIF + file if they try that. In some cases this might be a feature, not a bug...
    • +
    • The script detects the ".png" extension in image URLs. So if you have a CGI script that + generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG + files somewhere.
    • +
    • There may be about a short time as soon as the image loads when images are not + transparent, before the IE filter kicks in.
    • +
    + + +

    License:

    +
    +

    IE5.5+ PNG Alpha Fix

    +

    (c) 2004-2009 Angus Turnbull http://www.twinhelix.com

    +

    This is licensed under the GNU LGPL, + version 2.1 or later.

    +
    +

    If you want to link my site +or make a donation, you're more than welcome :).

    + + +

    Tech Specs

    +

    IE5.5+ includes support for a DirectX +AlphaImageLoader +filter, that can take an element on the page and insert a correctly-rendered PNG +image inbetween the element's content and background. This script automatically +scans all IMG SRCs and element backgroundImages for .PNG files, and if it finds +them, it removes the regular image and substitutes this filter in place. See the +source if you want, but I've coded it quite compactly to keep download time down +to a minimum (at the expense of comprehensibility, sorry!).

    + + +

    Changelog

    +
      +
    • v2.0 Alpha 4< +
        +
      • Made blankImg pathname relative to the HTC by default.
      • +
      • Added Macromedia rollover script compatibility.
      • +
      • Fix for tiled backgrounds in elements with padding.
      • +
      • Initially "display: none" PNG images now show once visible.
      • +
      • Documentation updates.
      • +
      +
    • +
    • v2.0 Alpha 3 +
        +
      • Changed activation method so inline LI elements etc. work OK.
      • +
      • Script now handles dynamic element width/height changes.
      • +
      • Added .update() method to the background tiler that will update all + elements on the page (called automatically on window resize).
      • +
      • Restored "scale" sizingMethod for IMG SRC elements.
      • +
      +
    • +
    • v2.0 Alpha 2 +
        +
      • Fixed issue with positioning non-repeated backgrounds.
      • +
      • Fixed typo in child-link-fix function.
      • +
      • Fixed background-position changing via className (so 'CSS sprites' + should now work).
      • +
      +
    • +
    • v2.0 Alpha 1 +
        +
      • Complete rewrite into an object-based pattern.
      • +
      • Support for CSS1 background repeat and position.
      • +
      • Performance improvements via toggling of the 'onpropertychange' hook.
      • +
      • Activation of the script via 'oncontentready'.
      • +
      • Slightly enhanced self-test mode.
      • +
      • Numerous other minor tweaks.
      • +
      +
    • +
    • v1.0 Final +
        +
      • Loosened IMG SRC matching regex slightly.
      • +
      • Script exits gracefully when IE filter isn't installed (e.g. IE on Linux).
      • +
      • Unclickable child fix now checks for pre-existing absolute/relative position.
      • +
      • Added className switch demo and self-test debug mode.
      • +
      • Documentation changes.
      • +
      +
    • +
    • v1.0 RC5 +
        +
      • Added support for CSS className changing of background images.
      • +
      • The script now detects element's background-repeat and sets the PNG + sizingMethod to 'crop' or 'scale' automatically.
      • +
      • Enhanced link fixer to cover many clickable elements, and added popup + warning dialog when the fix cannot be made.
      • +
      • Support for PNG backgrounds behind GIF/JPEG images (e.g. dropshadows).
      • +
      • Script sets display:inline-block automatically on inline elements.
      • +
      • Loosened the URL matching rules, now any URLs with a .PNG in the path are + activated, so /cgi-app/foo.png?date=123 will now work without modifications.
      • +
      • Now works with the 'Whatever:hover' behavior to support :HOVER changing of + background images on page elements!
      • +
      • Simplified and reorganised portions of the script, especially the + background image changer.
      • +
      • Included demo .HTACCESS and .PHP files for sending the correct MIME type + for servers where this is an issue.
      • +
      • Rewrote the documentation, now it's understandable by human beings.
      • +
      +
    • +
    • v1.0 RC4 and earlier +
        +
      • Various tweaks ;).
      • +
      +
    • +
    + + + diff --git a/module/iepngfix/iepngfix.php b/module/iepngfix/iepngfix.php new file mode 100644 index 000000000000..7b78dc9551a0 --- /dev/null +++ b/module/iepngfix/iepngfix.php @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/module/iepngfix/iepngfix_tilebg.js b/module/iepngfix/iepngfix_tilebg.js new file mode 100644 index 000000000000..42522537d0d1 --- /dev/null +++ b/module/iepngfix/iepngfix_tilebg.js @@ -0,0 +1,173 @@ +// IE5.5+ PNG Alpha Fix v2.0 Alpha: Background Tiling Support +// (c) 2008-2009 Angus Turnbull http://www.twinhelix.com + +// This is licensed under the GNU LGPL, version 2.1 or later. +// For details, see: http://creativecommons.org/licenses/LGPL/2.1/ + +var IEPNGFix = window.IEPNGFix || {}; + +IEPNGFix.tileBG = function(elm, pngSrc, ready) { + // Params: A reference to a DOM element, the PNG src file pathname, and a + // hidden "ready-to-run" passed when called back after image preloading. + + var data = this.data[elm.uniqueID], + elmW = Math.max(elm.clientWidth, elm.scrollWidth), + elmH = Math.max(elm.clientHeight, elm.scrollHeight), + bgX = elm.currentStyle.backgroundPositionX, + bgY = elm.currentStyle.backgroundPositionY, + bgR = elm.currentStyle.backgroundRepeat; + + // Cache of DIVs created per element, and image preloader/data. + if (!data.tiles) { + data.tiles = { + elm: elm, + src: '', + cache: [], + img: new Image(), + old: {} + }; + } + var tiles = data.tiles, + pngW = tiles.img.width, + pngH = tiles.img.height; + + if (pngSrc) { + if (!ready && pngSrc != tiles.src) { + // New image? Preload it with a callback to detect dimensions. + tiles.img.onload = function() { + this.onload = null; + IEPNGFix.tileBG(elm, pngSrc, 1); + }; + return tiles.img.src = pngSrc; + } + } else { + // No image? + if (tiles.src) ready = 1; + pngW = pngH = 0; + } + tiles.src = pngSrc; + + if (!ready && elmW == tiles.old.w && elmH == tiles.old.h && + bgX == tiles.old.x && bgY == tiles.old.y && bgR == tiles.old.r) { + return; + } + + // Convert English and percentage positions to pixels. + var pos = { + top: '0%', + left: '0%', + center: '50%', + bottom: '100%', + right: '100%' + }, + x, + y, + pc; + x = pos[bgX] || bgX; + y = pos[bgY] || bgY; + if (pc = x.match(/(\d+)%/)) { + x = Math.round((elmW - pngW) * (parseInt(pc[1]) / 100)); + } + if (pc = y.match(/(\d+)%/)) { + y = Math.round((elmH - pngH) * (parseInt(pc[1]) / 100)); + } + x = parseInt(x); + y = parseInt(y); + + // Handle backgroundRepeat. + var repeatX = { 'repeat': 1, 'repeat-x': 1 }[bgR], + repeatY = { 'repeat': 1, 'repeat-y': 1 }[bgR]; + if (repeatX) { + x %= pngW; + if (x > 0) x -= pngW; + } + if (repeatY) { + y %= pngH; + if (y > 0) y -= pngH; + } + + // Go! + this.hook.enabled = 0; + if (!({ relative: 1, absolute: 1 }[elm.currentStyle.position])) { + elm.style.position = 'relative'; + } + var count = 0, + xPos, + maxX = repeatX ? elmW : x + 0.1, + yPos, + maxY = repeatY ? elmH : y + 0.1, + d, + s, + isNew; + if (pngW && pngH) { + for (xPos = x; xPos < maxX; xPos += pngW) { + for (yPos = y; yPos < maxY; yPos += pngH) { + isNew = 0; + if (!tiles.cache[count]) { + tiles.cache[count] = document.createElement('div'); + isNew = 1; + } + var clipR = Math.max(0, xPos + pngW > elmW ? elmW - xPos : pngW), + clipB = Math.max(0, yPos + pngH > elmH ? elmH - yPos : pngH); + d = tiles.cache[count]; + s = d.style; + s.behavior = 'none'; + s.left = (xPos - parseInt(elm.currentStyle.paddingLeft)) + 'px'; + s.top = yPos + 'px'; + s.width = clipR + 'px'; + s.height = clipB + 'px'; + s.clip = 'rect(' + + (yPos < 0 ? 0 - yPos : 0) + 'px,' + + clipR + 'px,' + + clipB + 'px,' + + (xPos < 0 ? 0 - xPos : 0) + 'px)'; + s.display = 'block'; + if (isNew) { + s.position = 'absolute'; + s.zIndex = -999; + if (elm.firstChild) { + elm.insertBefore(d, elm.firstChild); + } else { + elm.appendChild(d); + } + } + this.fix(d, pngSrc, 0); + count++; + } + } + } + while (count < tiles.cache.length) { + this.fix(tiles.cache[count], '', 0); + tiles.cache[count++].style.display = 'none'; + } + + this.hook.enabled = 1; + + // Cache so updates are infrequent. + tiles.old = { + w: elmW, + h: elmH, + x: bgX, + y: bgY, + r: bgR + }; +}; + + +IEPNGFix.update = function() { + // Update all PNG backgrounds. + for (var i in IEPNGFix.data) { + var t = IEPNGFix.data[i].tiles; + if (t && t.elm && t.src) { + IEPNGFix.tileBG(t.elm, t.src); + } + } +}; +IEPNGFix.update.timer = 0; + +if (window.attachEvent && !window.opera) { + window.attachEvent('onresize', function() { + clearTimeout(IEPNGFix.update.timer); + IEPNGFix.update.timer = setTimeout(IEPNGFix.update, 100); + }); +} diff --git a/module/iepngfix/opacity.png b/module/iepngfix/opacity.png new file mode 100644 index 000000000000..a0858b6447f6 Binary files /dev/null and b/module/iepngfix/opacity.png differ diff --git a/module/iepngfix/opacity2.png b/module/iepngfix/opacity2.png new file mode 100644 index 000000000000..1967335c7989 Binary files /dev/null and b/module/iepngfix/opacity2.png differ diff --git a/module/iepngfix/shadow.png b/module/iepngfix/shadow.png new file mode 100644 index 000000000000..8399b3f8a985 Binary files /dev/null and b/module/iepngfix/shadow.png differ diff --git a/module/iframe/agent_iframe.html b/module/iframe/agent_iframe.html new file mode 100644 index 000000000000..37dbd35a94dd --- /dev/null +++ b/module/iframe/agent_iframe.html @@ -0,0 +1,25 @@ + + + + +��ֻ�Ǹ����� + + + + + + \ No newline at end of file diff --git a/module/iframe/agent_iframe_once.html b/module/iframe/agent_iframe_once.html new file mode 100644 index 000000000000..af0f6eea3fb5 --- /dev/null +++ b/module/iframe/agent_iframe_once.html @@ -0,0 +1,13 @@ + + + + +��ֻ�Ǹ����� + + + + + + \ No newline at end of file diff --git a/module/iframe/different_area.html b/module/iframe/different_area.html new file mode 100644 index 000000000000..9640f4e712bc --- /dev/null +++ b/module/iframe/different_area.html @@ -0,0 +1,56 @@ + + + + +����Aҳ�治ͬ�� + + + +
    ����һ�����Զ�λ�IJ�
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    ����һ�����Զ�λ�IJ�
    + + + \ No newline at end of file diff --git a/module/iframe/different_area_once.html b/module/iframe/different_area_once.html new file mode 100644 index 000000000000..01c4d5a0e7b5 --- /dev/null +++ b/module/iframe/different_area_once.html @@ -0,0 +1,20 @@ + + + + +����Aҳ�治ͬ��ҳ��߶Ȳ���仯 + + + +
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    asdasdasd
    + + + \ No newline at end of file diff --git a/module/iframe/different_broswer_height.html b/module/iframe/different_broswer_height.html new file mode 100644 index 000000000000..2d6ce1fa50ba --- /dev/null +++ b/module/iframe/different_broswer_height.html @@ -0,0 +1,50 @@ + + + + +��ͬ���������ҳ��߶ȵIJ�ͬ���� + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    IEsFirefoxoperaChrome��safari
    documentElement1629(IE8:1628)1626162698
    body8282821636��1637
    +
    ����һ�����Զ�λ�IJ�
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    ����һ�����Զ�λ�IJ�
    + + + \ No newline at end of file diff --git a/module/iframe/iframe_height_different_area.html b/module/iframe/iframe_height_different_area.html new file mode 100644 index 000000000000..653bbacc22e6 --- /dev/null +++ b/module/iframe/iframe_height_different_area.html @@ -0,0 +1,11 @@ + + + + +iframe����Ӧ�߶� - ���� + + + + + + \ No newline at end of file diff --git a/module/iframe/iframe_height_different_area_once.html b/module/iframe/iframe_height_different_area_once.html new file mode 100644 index 000000000000..8aac49608968 --- /dev/null +++ b/module/iframe/iframe_height_different_area_once.html @@ -0,0 +1,11 @@ + + + + +iframe����Ӧ�߶� - ���� + + + + + + \ No newline at end of file diff --git a/module/iframe/iframe_higher.html b/module/iframe/iframe_higher.html new file mode 100644 index 000000000000..abca8c610dc7 --- /dev/null +++ b/module/iframe/iframe_higher.html @@ -0,0 +1,60 @@ + + + + +iframe����ҳ��ʵ�ʸ߶� + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    IEsFirefoxoperaChrome��safari
    documentElement1544180018000
    body0001800
    + + + + \ No newline at end of file diff --git a/module/iframe/same_area.html b/module/iframe/same_area.html new file mode 100644 index 000000000000..20879e2bff8a --- /dev/null +++ b/module/iframe/same_area.html @@ -0,0 +1,26 @@ + + + + +����Aҳ��ͬ�� + + + +
    ����һ�����Զ�λ�IJ�
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    test2
    ����һ�����Զ�λ�IJ�
    + + + \ No newline at end of file diff --git a/module/images/lrtk.png b/module/images/lrtk.png new file mode 100644 index 000000000000..4336cc7c23bb Binary files /dev/null and b/module/images/lrtk.png differ diff --git a/module/imgAutoNarrow/100715-thickbox-0.jpg b/module/imgAutoNarrow/100715-thickbox-0.jpg new file mode 100644 index 000000000000..24ead796076f Binary files /dev/null and b/module/imgAutoNarrow/100715-thickbox-0.jpg differ diff --git a/module/imgAutoNarrow/100715-thickbox-1.jpg b/module/imgAutoNarrow/100715-thickbox-1.jpg new file mode 100644 index 000000000000..b234820d8131 Binary files /dev/null and b/module/imgAutoNarrow/100715-thickbox-1.jpg differ diff --git a/module/imgAutoNarrow/imgAutoNarrow.html b/module/imgAutoNarrow/imgAutoNarrow.html new file mode 100644 index 000000000000..39cdce4c3186 --- /dev/null +++ b/module/imgAutoNarrow/imgAutoNarrow.html @@ -0,0 +1,50 @@ + + + + + img Auto Narrow + + + + + + +
    +

    原图片大小:460*629,目标显示图片区域大小:200*140,图片通过本jQ程式处理后显示大小:200*273

    +

    +

    原图片大小:640*554,目标显示图片区域大小:200*140,图片通过本jQ程式处理后显示大小:200*173

    +

    +
    + + + diff --git a/module/imgAutoNarrow/jquery-1.3.2.js b/module/imgAutoNarrow/jquery-1.3.2.js new file mode 100644 index 000000000000..a337f78cd7a6 --- /dev/null +++ b/module/imgAutoNarrow/jquery-1.3.2.js @@ -0,0 +1 @@ +eval(function(p,a,c,k,e,r){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('c6(c2(p,a,c,k,e,r){e=c2(c){c3(c35?c8.cd(c+29):c.c9(36))};if(!\'\'.c4(/^/,c8)){c5(c--)r[e(c)]=k[c]||e(c);k=[c2(e){c3 r[e]}];e=c2(){c3\'\\\\w+\'};c=1};c5(c--)if(k[c])p=p.c4(ca cb(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);c3 p}(\'(11(){14 l=6,g,y=l.3t,p=l.$,o=l.3t=l.$=11(E,F){12 2N o.1n.5z(E,F)},D=/^[^<]*(<(.|\\\\s)+>)[^>]*$|^#([\\\\w-]+)$/,f=/^.[^:#\\\\[\\\\.,]*$/;o.1n=o.2a={5z:11(E,H){E=E||17;7(E.1e){6[0]=E;6.15=1;6.31=E;12 6}7(1j E==="1I"){14 G=D.2F(E);7(G&&(G[1]||!H)){7(G[1]){E=o.4C([G[1]],H)}18{14 I=17.3u(G[3]);7(I&&I.3Z!=G[3]){12 o().1B(E)}14 F=o(I||[]);F.31=17;F.1W=E;12 F}}18{12 o(H).1B(E)}}18{7(o.1X(E)){12 o(17).2G(E)}}7(E.1W&&E.31){6.1W=E.1W;6.31=E.31}12 6.6Y(o.32(E)?E:o.2t(E))},1W:"",5A:"1.3.2",8O:11(){12 6.15},33:11(E){12 E===g?2u.2a.1Y.1q(6):6[E]},2v:11(F,H,E){14 G=o(F);G.5B=6;G.31=6.31;7(H==="1B"){G.1W=6.1W+(6.1W?" ":"")+E}18{7(H){G.1W=6.1W+"."+H+"("+E+")"}}12 G},6Y:11(E){6.15=0;2u.2a.1r.1C(6,E);12 6},1f:11(F,E){12 o.1f(6,F,E)},5C:11(E){12 o.2O(E&&E.5A?E[0]:E,6)},2g:11(F,H,G){14 E=F;7(1j F==="1I"){7(H===g){12 6[0]&&o[G||"2g"](6[0],F)}18{E={};E[F]=H}}12 6.1f(11(I){1a(F 1w E){o.2g(G?6.1g:6,F,o.1D(6,E[F],G,I,F))}})},2b:11(E,F){7((E=="2h"||E=="2w")&&2P(F)<0){F=g}12 6.2g(E,F,"2o")},1J:11(F){7(1j F!=="24"&&F!=1b){12 6.4D().3v((6[0]&&6[0].1F||17).4E(F))}14 E="";o.1f(F||6,11(){o.1f(6.34,11(){7(6.1e!=8){E+=6.1e!=1?6.4F:o.1n.1J([6])}})});12 E},5D:11(E){7(6[0]){14 F=o(E,6[0].1F).5E();7(6[0].1o){F.2x(6[0])}F.2p(11(){14 G=6;1A(G.1s){G=G.1s}12 G}).3v(6)}12 6},8P:11(E){12 6.1f(11(){o(6).6Z().5D(E)})},8Q:11(E){12 6.1f(11(){o(6).5D(E)})},3v:11(){12 6.40(1t,19,11(E){7(6.1e==1){6.2H(E)}})},70:11(){12 6.40(1t,19,11(E){7(6.1e==1){6.2x(E,6.1s)}})},71:11(){12 6.40(1t,1c,11(E){6.1o.2x(E,6)})},5F:11(){12 6.40(1t,1c,11(E){6.1o.2x(E,6.35)})},4G:11(){12 6.5B||o([])},1r:[].1r,36:[].36,37:[].37,1B:11(E){7(6.15===1){14 F=6.2v([],"1B",E);F.15=0;o.1B(E,6[0],F);12 F}18{12 6.2v(o.4H(o.2p(6,11(G){12 o.1B(E,G)})),"1B",E)}},5E:11(G){14 E=6.2p(11(){7(!o.1Q.5G&&!o.4I(6)){14 I=6.8R;7(!I){14 J=6.1F.1Z("1G");J.2H(6.4J(19));I=J.2y}12 o.4C([I.1u(/ 3t\\\\d+="(?:\\\\d+|1b)"/g,"").1u(/^\\\\s*/,"")])[0]}18{12 6.4J(19)}});7(G===19){14 H=6.1B("*").5H(),F=0;E.1B("*").5H().1f(11(){7(6.1p!==H[F].1p){12}14 I=o.1d(H[F],"2z");1a(14 K 1w I){1a(14 J 1w I[K]){o.1h.2c(6,K,I[K][J],I[K][J].1d)}}F++})}12 E},1v:11(E){12 6.2v(o.1X(E)&&o.41(6,11(G,F){12 E.1q(G,F)})||o.3w(E,o.41(6,11(F){12 F.1e===1})),"1v",E)},42:11(E){14 G=o.38.1m.3x.1l(E)?o(E):1b,F=0;12 6.2p(11(){14 H=6;1A(H&&H.1F){7(G?G.5C(H)>-1:o(H).43(E)){o.1d(H,"42",F);12 H}H=H.1o;F++}})},44:11(E){7(1j E==="1I"){7(f.1l(E)){12 6.2v(o.3w(E,6,19),"44",E)}18{E=o.3w(E,6)}}14 F=E.15&&E[E.15-1]!==g&&!E.1e;12 6.1v(11(){12 F?o.2O(6,E)<0:6!=E})},2c:11(E){12 6.2v(o.4H(o.5I(6.33(),1j E==="1I"?o(E):o.2t(E))))},43:11(E){12!!E&&o.3w(E,6).15>0},8S:11(E){12!!E&&6.43("."+E)},5J:11(K){7(K===g){14 E=6[0];7(E){7(o.1p(E,"4K")){12(E.8T.2A||{}).72?E.2A:E.1J}7(o.1p(E,"2q")){14 I=E.4L,L=[],M=E.1x,H=E.1i=="2q-5K";7(I<0){12 1b}1a(14 F=H?I:0,J=H?I+1:M.15;F=0||o.2O(6.2B,K)>=0)}18{7(o.1p(6,"2q")){14 N=o.2t(K);o("4K",6).1f(11(){6.45=(o.2O(6.2A,N)>=0||o.2O(6.1J,N)>=0)});7(!N.15){6.4L=-1}}18{6.2A=K}}})},39:11(E){12 E===g?(6[0]?6[0].2y.1u(/ 3t\\\\d+="(?:\\\\d+|1b)"/g,""):1b):6.4D().3v(E)},73:11(E){12 6.5F(E).25()},5N:11(E){12 6.1Y(E,+E+1)},1Y:11(){12 6.2v(2u.2a.1Y.1C(6,1t),"1Y",2u.2a.1Y.1q(1t).3a(","))},2p:11(E){12 6.2v(o.2p(6,11(G,F){12 E.1q(G,F,G)}))},5H:11(){12 6.2c(6.5B)},40:11(J,M,L){7(6[0]){14 I=(6[0].1F||6[0]).8U(),F=o.4C(J,(6[0].1F||6[0]),I),H=I.1s;7(H){1a(14 G=0,E=6.15;G1||G>0?I.4J(19):I)}}7(F){o.1f(F,z)}}12 6;11 K(N,O){12 M&&o.1p(N,"21")&&o.1p(O,"3y")?(N.26("27")[0]||N.2H(N.1F.1Z("27"))):N}}};o.1n.5z.2a=o.1n;11 z(E,F){7(F.4N){o.47({1y:F.4N,3b:1c,28:"1R"})}18{o.5O(F.1J||F.74||F.2y||"")}7(F.1o){F.1o.2i(F)}}11 e(){12+2N 5P}o.1H=o.1n.1H=11(){14 J=1t[0]||{},H=1,I=1t.15,E=1c,G;7(1j J==="5Q"){E=J;J=1t[1]||{};H=2}7(1j J!=="24"&&!o.1X(J)){J={}}7(I==H){J=6;--H}1a(;H-1}},7b:11(H,G,I){14 E={};1a(14 F 1w G){E[F]=H.1g[F];H.1g[F]=G[F]}I.1q(H);1a(14 F 1w G){H.1g[F]=E[F]}},2b:11(H,F,J,E){7(F=="2h"||F=="2w"){14 L,G={2C:"4P",7c:"2I",1N:"4Q"},K=F=="2h"?["5S","7d"]:["5T","7e"];11 I(){L=F=="2h"?H.49:H.5U;7(E==="3A"){12}o.1f(K,11(){7(!E){L-=2P(o.2o(H,"4R"+6,19))||0}7(E==="3B"){L+=2P(o.2o(H,"3B"+6,19))||0}18{L-=2P(o.2o(H,"3A"+6+"7f",19))||0}})}7(H.49!==0){I()}18{o.7b(H,G,I)}12 3d.4S(0,3d.90(L))}12 o.2o(H,F,J)},2o:11(I,F,G){14 L,E=I.1g;7(F=="1K"&&!o.1Q.1K){L=o.2g(E,"1K");12 L==""?"1":L}7(F.1m(/4a/i)){F=w}7(!G&&E&&E[F]){L=E[F]}18{7(q.4T){7(F.1m(/4a/i)){F="4a"}F=F.1u(/([A-Z])/g,"-$1").3C();14 M=q.4T(I,1b);7(M){L=M.91(F)}7(F=="1K"&&L==""){L="1"}}18{7(I.4U){14 J=F.1u(/\\\\-(\\\\w)/g,11(N,O){12 O.2r()});L=I.4U[F]||I.4U[J];7(!/^\\\\d+(3c)?$/i.1l(L)&&/^\\\\d/.1l(L)){14 H=E.1z,K=I.5V.1z;I.5V.1z=I.4U.1z;E.1z=L||0;L=E.92+"3c";E.1z=H;I.5V.1z=K}}}}12 L},4C:11(F,K,I){K=K||17;7(1j K.1Z==="2J"){K=K.1F||K[0]&&K[0].1F||17}7(!I&&F.15===1&&1j F[0]==="1I"){14 H=/^<(\\\\w+)\\\\s*\\\\/?>$/.2F(F[0]);7(H){12[K.1Z(H[1])]}}14 G=[],E=[],L=K.1Z("1G");o.1f(F,11(P,S){7(1j S==="46"){S+=""}7(!S){12}7(1j S==="1I"){S=S.1u(/(<(\\\\w+)[^>]*?)\\\\/>/g,11(U,V,T){12 T.1m(/^(93|br|7g|94|3D|5W|95|3E|96|7h|97)$/i)?U:V+">"});14 O=S.1u(/^\\\\s+/,"").98(0,10).3C();14 Q=!O.1O("<99")&&[1,"<2q 7i=\\\'7i\\\'>",""]||!O.1O("<9a")&&[1,"<7j>",""]||O.1m(/^<(9b|27|9c|9d|9e)/)&&[1,"<21>",""]||!O.1O("<3y")&&[2,"<21><27>",""]||(!O.1O("<5X")||!O.1O("<9f"))&&[3,"<21><27><3y>",""]||!O.1O("<7g")&&[2,"<21><27><7k>",""]||!o.1Q.7l&&[1,"1G<1G>",""]||[0,"",""];L.2y=Q[1]+S+Q[2];1A(Q[0]--){L=L.7m}7(!o.1Q.27){14 R=/<27/i.1l(S),N=!O.1O("<21")&&!R?L.1s&&L.1s.34:Q[1]=="<21>"&&!R?L.34:[];1a(14 M=N.15-1;M>=0;--M){7(o.1p(N[M],"27")&&!N[M].34.15){N[M].1o.2i(N[M])}}}7(!o.1Q.7n&&/^\\\\s/.1l(S)){L.2x(K.4E(S.1m(/^\\\\s*/)[0]),L.1s)}S=o.2t(L.34)}7(S.1e){G.1r(S)}18{G=o.5I(G,S)}});7(I){1a(14 J=0;G[J];J++){7(o.1p(G[J],"1R")&&(!G[J].1i||G[J].1i.3C()==="1J/3z")){E.1r(G[J].1o?G[J].1o.2i(G[J]):G[J])}18{7(G[J].1e===1){G.37.1C(G,[J+1,0].4V(o.2t(G[J].26("1R"))))}I.2H(G[J])}}12 E}12 G},2g:11(J,G,K){7(!J||J.1e==3||J.1e==8){12 g}14 H=!o.4I(J),L=K!==g;G=H&&o.4b[G]||G;7(J.3F){14 F=/2s|4N|1g/.1l(G);7(G=="45"&&J.1o){J.1o.4L}7(G 1w J&&H&&!F){7(L){7(G=="1i"&&o.1p(J,"3D")&&J.1o){4W"1i 9g 9h\\\'t be 9i"}J[G]=K}7(o.1p(J,"5Y")&&J.3e(G)){12 J.3e(G).4F}7(G=="5Z"){14 I=J.3e("5Z");12 I&&I.72?I.2A:J.1p.1m(/(2K|3D|24|2q|60)/i)?0:J.1p.1m(/^(a|7h)$/i)&&J.2s?0:g}12 J[G]}7(!o.1Q.1g&&H&&G=="1g"){12 o.2g(J.1g,"9j",K)}7(L){J.9k(G,""+K)}14 E=!o.1Q.7o&&H&&F?J.2k(G,2):J.2k(G);12 E===1b?g:E}7(!o.1Q.1K&&G=="1K"){7(L){J.76=1;J.1v=(J.1v||"").1u(/7p\\\\([^)]*\\\\)/,"")+(2Q(K)+""=="9l"?"":"7p(1K="+K*7q+")")}12 J.1v&&J.1v.1O("1K=")>=0?(2P(J.1v.1m(/1K=([^)]*)/)[1])/7q)+"":""}G=G.1u(/-([a-z])/9m,11(M,N){12 N.2r()});7(L){J[G]=K}12 J[G]},9n:11(E){12(E||"").1u(/^\\\\s+|\\\\s+$/g,"")},2t:11(G){14 E=[];7(G!=1b){14 F=G.15;7(F==1b||1j G==="1I"||o.1X(G)||G.4X){E[0]=G}18{1A(F){E[--F]=G[F]}}}12 E},2O:11(G,H){1a(14 E=0,F=H.15;E0?6.5E(19):6).33();o.1n[F].1C(o(L[K]),I);J=J.4V(I)}12 6.2v(J,E,G)}});o.1f({9L:11(E){o.2g(6,E,"");7(6.1e==1){6.63(E)}},9M:11(E){o.1L.2c(6,E)},9N:11(E){o.1L.25(6,E)},9O:11(F,E){7(1j E!=="5Q"){E=!o.1L.48(6,F)}o.1L[E?"2c":"25"](6,F)},25:11(E){7(!E||o.1v(E,[6]).15){o("*",6).2c([6]).1f(11(){o.1h.25(6);o.3g(6)});7(6.1o){6.1o.2i(6)}}},4D:11(){o(6).7v().25();1A(6.1s){6.2i(6.1s)}}},11(E,F){o.1n[E]=11(){12 6.1f(F,1t)}});11 j(E,F){12 E[0]&&2Q(o.2o(E[0],F,19),10)||0}14 h="3t"+e(),v=0,A={};o.1H({1S:{},1d:11(F,E,G){F=F==l?A:F;14 H=F[h];7(!H){H=F[h]=++v}7(E&&!o.1S[H]){o.1S[H]={}}7(G!==g){o.1S[H][E]=G}12 E?o.1S[H][E]:H},3g:11(F,E){F=F==l?A:F;14 H=F[h];7(E){7(o.1S[H]){2S o.1S[H][E];E="";1a(E 1w o.1S[H]){1M}7(!E){o.3g(F)}}}18{22{2S F[h]}23(G){7(F.63){F.63(h)}}2S o.1S[H]}},2D:11(F,E,H){7(F){E=(E||"2d")+"2D";14 G=o.1d(F,E);7(!G||o.32(H)){G=o.1d(F,E,o.2t(H))}18{7(H){G.1r(H)}}}12 G},4c:11(H,G){14 E=o.2D(H,G),F=E.3h();7(!G||G==="2d"){F=E[0]}7(F!==g){F.1q(H)}}});o.1n.1H({1d:11(E,G){14 H=E.2j(".");H[1]=H[1]?"."+H[1]:"";7(G===g){14 F=6.64("9P"+H[1]+"!",[H[0]]);7(F===g&&6.15){F=o.1d(6[0],E)}12 F===g&&H[1]?6.1d(H[0]):F}18{12 6.1T("9Q"+H[1]+"!",[H[0],G]).1f(11(){o.1d(6,E,G)})}},3g:11(E){12 6.1f(11(){o.3g(6,E)})},2D:11(E,F){7(1j E!=="1I"){F=E;E="2d"}7(F===g){12 o.2D(6[0],E)}12 6.1f(11(){14 G=o.2D(6,E,F);7(E=="2d"&&G.15==1){G[0].1q(6)}})},4c:11(E){12 6.1f(11(){o.4c(6,E)})}});(11(){14 R=/((?:\\\\((?:\\\\([^()]+\\\\)|[^()]+)+\\\\)|\\\\[(?:\\\\[[^[\\\\]]*\\\\]|[\\\'"][^\\\'"]*[\\\'"]|[^[\\\\]\\\'"]+)+\\\\]|\\\\\\\\.|[^ >+~,(\\\\[\\\\\\\\]+)+|[>+~])(\\\\s*,\\\\s*)?/g,L=0,H=78.2a.4O;14 F=11(Y,U,a,b){a=a||[];U=U||17;7(U.1e!==1&&U.1e!==9){12[]}7(!Y||1j Y!=="1I"){12 a}14 Z=[],W,af,ai,T,ad,V,X=19;R.9R=0;1A((W=R.2F(Y))!==1b){Z.1r(W[1]);7(W[2]){V=3i.9S;1M}}7(Z.15>1&&M.2F(Y)){7(Z.15===2&&I.2L[Z[0]]){af=J(Z[0]+Z[1],U)}18{af=I.2L[Z[0]]?[U]:F(Z.3h(),U);1A(Z.15){Y=Z.3h();7(I.2L[Y]){Y+=Z.3h()}af=J(Y,af)}}}18{14 c=b?{38:Z.4Z(),65:E(b)}:F.1B(Z.4Z(),Z.15===1&&U.1o?U.1o:U,Q(U));af=F.1v(c.38,c.65);7(Z.15>0){ai=E(af)}18{X=1c}1A(Z.15){14 d=Z.4Z(),ag=d;7(!I.2L[d]){d=""}18{ag=Z.4Z()}7(ag==1b){ag=U}I.2L[d](ai,ag,Q(U))}}7(!ai){ai=af}7(!ai){4W"7x 3G, 7y 7z: "+(d||Y)}7(H.1q(ai)==="[24 2u]"){7(!X){a.1r.1C(a,ai)}18{7(U.1e===1){1a(14 e=0;ai[e]!=1b;e++){7(ai[e]&&(ai[e]===19||ai[e].1e===1&&K(U,ai[e]))){a.1r(af[e])}}}18{1a(14 e=0;ai[e]!=1b;e++){7(ai[e]&&ai[e].1e===1){a.1r(af[e])}}}}}18{E(ai,a)}7(V){F(V,U,a,b);7(G){4d=1c;a.36(G);7(4d){1a(14 e=1;e":11(Z,U,a){14 X=1j U==="1I";7(X&&!/\\\\W/.1l(U)){U=a?U:U.2r();1a(14 V=0,T=Z.15;V=0)){7(!V){T.1r(Y)}}18{7(V){U[X]=1c}}}}12 1c},3k:11(T){12 T[1].1u(/\\\\\\\\/g,"")},3H:11(U,T){1a(14 V=0;T[V]===1c;V++){}12 T[V]&&Q(T[V])?U[1]:U[1].2r()},52:11(T){7(T[1]=="2R"){14 U=/(-?)(\\\\d*)n((?:\\\\+|-)?\\\\d*)/.2F(T[2]=="54"&&"2n"||T[2]=="55"&&"2n+1"||!/\\\\D/.1l(T[2])&&"9X+"+T[2]||T[2]);T[2]=(U[1]+(U[2]||1))-0;T[3]=U[3]-0}T[0]=L++;12 T},69:11(X,U,V,T,Y,Z){14 W=X[1].1u(/\\\\\\\\/g,"");7(!Z&&I.6b[W]){X[1]=I.6b[W]}7(X[2]==="~="){X[4]=" "+X[4]+" "}12 X},4h:11(X,U,V,T,Y){7(X[1]==="44"){7(X[3].1m(R).15>1||/^\\\\w/.1l(X[3])){X[3]=F(X[3],1b,1b,U)}18{14 W=F.1v(X[3],U,V,19^Y);7(!V){T.1r.1C(T,W)}12 1c}}18{7(I.1m.3x.1l(X[0])||I.1m.52.1l(X[0])){12 19}}12 X},3x:11(T){T.7F(19);12 T}},3K:{9Y:11(T){12 T.57===1c&&T.1i!=="2I"},57:11(T){12 T.57===19},4M:11(T){12 T.4M===19},45:11(T){T.1o.4L;12 T.45===19},7u:11(T){12!!T.1s},4D:11(T){12!T.1s},48:11(V,U,T){12!!F(T[3],V).15},9Z:11(T){12/h\\\\d/i.1l(T.1p)},1J:11(T){12"1J"===T.1i},5L:11(T){12"5L"===T.1i},5M:11(T){12"5M"===T.1i},6c:11(T){12"6c"===T.1i},58:11(T){12"58"===T.1i},6d:11(T){12"6d"===T.1i},7G:11(T){12"7G"===T.1i},7H:11(T){12"7H"===T.1i},2K:11(T){12"2K"===T.1i||T.1p.2r()==="a0"},3D:11(T){12/3D|2q|60|2K/i.1l(T.1p)}},7I:{4g:11(U,T){12 T===0},53:11(V,U,T,W){12 U===W.15-1},54:11(U,T){12 T%2===0},55:11(U,T){12 T%2===1},7C:11(V,U,T){12 UT[3]-0},2R:11(V,U,T){12 T[3]-0==U},5N:11(V,U,T){12 T[3]-0==U}},1v:{4h:11(Z,V,W,a){14 U=V[1],X=I.3K[U];7(X){12 X(Z,W,V,a)}18{7(U==="6e"){12(Z.74||Z.a1||"").1O(V[3])>=0}18{7(U==="44"){14 Y=V[3];1a(14 W=0,T=Y.15;W=0)}}},3k:11(U,T){12 U.1e===1&&U.2k("3Z")===T},3H:11(U,T){12(T==="*"&&U.1e===1)||U.1p===T},4f:11(U,T){12(" "+(U.1L||U.2k("3J"))+" ").1O(T)>-1},69:11(Y,W){14 V=W[1],T=I.56[V]?I.56[V](Y):Y[V]!=1b?Y[V]:Y.2k(V),Z=T+"",X=W[2],U=W[4];12 T==1b?X==="!=":X==="="?Z===U:X==="*="?Z.1O(U)>=0:X==="~="?(" "+Z+" ").1O(U)>=0:!U?Z&&T!==1c:X==="!="?Z!=U:X==="^="?Z.1O(U)===0:X==="$="?Z.66(Z.15-U.15)===U:X==="|="?Z===U||Z.66(0,U.15+1)===U+"-":1c},3x:11(X,U,V,Y){14 T=U[2],W=I.7I[T];7(W){12 W(X,V,U,Y)}}}};14 M=I.1m.3x;1a(14 O 1w I.1m){I.1m[O]=3i(I.1m[O].7J+/(?![^\\\\[]*\\\\])(?![^\\\\(]*\\\\))/.7J)}14 E=11(U,T){U=2u.2a.1Y.1q(U);7(T){T.1r.1C(T,U);12 T}12 U};22{2u.2a.1Y.1q(17.1E.34)}23(N){E=11(X,W){14 U=W||[];7(H.1q(X)==="[24 2u]"){2u.2a.1r.1C(U,X)}18{7(1j X.15==="46"){1a(14 V=0,T=X.15;V";14 T=17.1E;T.2x(U,T.1s);7(!!17.3u(V)){I.1B.3k=11(X,Y,Z){7(1j Y.3u!=="2J"&&!Z){14 W=Y.3u(X[1]);12 W?W.3Z===X[1]||1j W.3e!=="2J"&&W.3e("3Z").4F===X[1]?[W]:g:[]}};I.1v.3k=11(Y,W){14 X=1j Y.3e!=="2J"&&Y.3e("3Z");12 Y.1e===1&&X&&X.4F===W}}T.2i(U)})();(11(){14 T=17.1Z("1G");T.2H(17.a6(""));7(T.26("*").15>0){I.1B.3H=11(U,Y){14 X=Y.26(U[1]);7(U[1]==="*"){14 W=[];1a(14 V=0;X[V];V++){7(X[V].1e===1){W.1r(X[V])}}X=W}12 X}}T.2y="";7(T.1s&&1j T.1s.2k!=="2J"&&T.1s.2k("2s")!=="#"){I.56.2s=11(U){12 U.2k("2s",2)}}})();7(17.5b){(11(){14 T=F,U=17.1Z("1G");U.2y="

    ";7(U.5b&&U.5b(".7N").15===0){12}F=11(Y,X,V,W){X=X||17;7(!W&&X.1e===9&&!Q(X)){22{12 E(X.5b(Y),V)}23(Z){}}12 T(Y,X,V,W)};F.1B=T.1B;F.1v=T.1v;F.3j=T.3j;F.50=T.50})()}7(17.3L&&17.1E.3L){(11(){14 T=17.1Z("1G");T.2y="<1G 3J=\\\'1l e\\\'><1G 3J=\\\'1l\\\'>";7(T.3L("e").15===0){12}T.7m.1L="e";7(T.3L("e").15===1){12}I.51.37(1,0,"4f");I.1B.4f=11(U,V,W){7(1j V.3L!=="2J"&&!W){12 V.3L(U[1])}}})()}11 P(U,Z,Y,a,b,c){14 d=U=="3f"&&!c;1a(14 W=0,V=a.15;W0){X=T;1M}}}T=T[U]}a[W]=X}}}14 K=17.5a?11(U,T){12 U.5a(T)&16}:11(U,T){12 U!==T&&(U.6e?U.6e(T):19)};14 Q=11(T){12 T.1e===9&&T.1E.1p!=="79"||!!T.1F&&Q(T.1F)};14 J=11(T,a){14 W=[],X="",Y,V=a.1e?[a]:a;1A((Y=I.1m.4h.2F(T))){X+=Y[0];T=T.1u(I.1m.4h,"")}T=I.2L[T]?T+"*":T;1a(14 Z=0,U=V.15;Z0||T.5U>0};F.3j.3K.a7=11(T){12 o.41(o.4i,11(U){12 T===U.1k}).15};o.3w=11(V,T,U){7(U){V=":44("+V+")"}12 F.50(V,T)};o.4Y=11(V,U){14 T=[],W=V[U];1A(W&&W!=17){7(W.1e==1){T.1r(W)}W=W[U]}12 T};o.2R=11(X,T,V,W){T=T||1;14 U=0;1a(;X;X=X[V]){7(X.1e==1&&++U==T){1M}}12 X};o.62=11(V,U){14 T=[];1a(;V;V=V.35){7(V.1e==1&&V!=U){T.1r(V)}}12 T};12;l.a8=F})();o.1h={2c:11(I,F,H,K){7(I.1e==3||I.1e==8){12}7(I.4X&&I!=l){I=l}7(!H.29){H.29=6.29++}7(K!==g){14 G=H;H=6.3N(G);H.1d=K}14 E=o.1d(I,"2z")||o.1d(I,"2z",{}),J=o.1d(I,"2e")||o.1d(I,"2e",11(){12 1j o!=="2J"&&!o.1h.6i?o.1h.2e.1C(1t.4j.1k,1t):g});J.1k=I;o.1f(F.2j(/\\\\s+/),11(M,N){14 O=N.2j(".");N=O.3h();H.1i=O.1Y().36().3a(".");14 L=E[N];7(o.1h.4k[N]){o.1h.4k[N].4l.1q(I,K,O)}7(!L){L=E[N]={};7(!o.1h.3O[N]||o.1h.3O[N].4l.1q(I,K,O)===1c){7(I.5c){I.5c(N,J,1c)}18{7(I.3P){I.3P("5d"+N,J)}}}}L[H.29]=H;o.1h.2l[N]=19});I=1b},29:1,2l:{},25:11(K,H,J){7(K.1e==3||K.1e==8){12}14 G=o.1d(K,"2z"),F,E;7(G){7(H===g||(1j H==="1I"&&H.a9(0)==".")){1a(14 I 1w G){6.25(K,I+(H||""))}}18{7(H.1i){J=H.6j;H=H.1i}o.1f(H.2j(/\\\\s+/),11(M,O){14 Q=O.2j(".");O=Q.3h();14 N=3i("(^|\\\\\\\\.)"+Q.1Y().36().3a(".*\\\\\\\\.")+"(\\\\\\\\.|$)");7(G[O]){7(J){2S G[O][J.29]}18{1a(14 P 1w G[O]){7(N.1l(G[O][P].1i)){2S G[O][P]}}}7(o.1h.4k[O]){o.1h.4k[O].4m.1q(K,Q)}1a(F 1w G[O]){1M}7(!F){7(!o.1h.3O[O]||o.1h.3O[O].4m.1q(K,Q)===1c){7(K.6k){K.6k(O,o.1d(K,"2e"),1c)}18{7(K.5e){K.5e("5d"+O,o.1d(K,"2e"))}}}F=1b;2S G[O]}}})}1a(F 1w G){1M}7(!F){14 L=o.1d(K,"2e");7(L){L.1k=1b}o.3g(K,"2z");o.3g(K,"2e")}}},1T:11(I,K,H,E){14 G=I.1i||I;7(!E){I=1j I==="24"?I[h]?I:o.1H(o.3l(G),I):o.3l(G);7(G.1O("!")>=0){I.1i=G=G.1Y(0,-1);I.7P=19}7(!H){I.3m();7(6.2l[G]){o.1f(o.1S,11(){7(6.2z&&6.2z[G]){o.1h.1T(I,K,6.2e.1k)}})}}7(!H||H.1e==3||H.1e==8){12 g}I.5f=g;I.2M=H;K=o.2t(K);K.7F(I)}I.6l=H;14 J=o.1d(H,"2e");7(J){J.1C(H,K)}7((!H[G]||(o.1p(H,"a")&&G=="5g"))&&H["5d"+G]&&H["5d"+G].1C(H,K)===1c){I.5f=1c}7(!E&&H[G]&&!I.6m()&&!(o.1p(H,"a")&&G=="5g")){6.6i=19;22{H[G]()}23(L){}}6.6i=1c;7(!I.6n()){14 F=H.1o||H.1F;7(F){o.1h.1T(I,K,F,19)}}},2e:11(K){14 J,E;K=1t[0]=o.1h.7Q(K||l.1h);K.6l=6;14 L=K.1i.2j(".");K.1i=L.3h();J=!L.15&&!K.7P;14 I=3i("(^|\\\\\\\\.)"+L.1Y().36().3a(".*\\\\\\\\.")+"(\\\\\\\\.|$)");E=(o.1d(6,"2z")||{})[K.1i];1a(14 G 1w E){14 H=E[G];7(J||I.1l(H.1i)){K.6j=H;K.1d=H.1d;14 F=H.1C(6,1t);7(F!==g){K.5f=F;7(F===1c){K.3n();K.3m()}}7(K.6o()){1M}}}},4b:"ae aj ak al 2K am 4n 6p 7R 6q 6l 1d an ao 5h 6j 6r 6s ap aq 6t 7S ar as 5i at au av 7T 2M 7U aw ax 4o".2j(" "),7Q:11(H){7(H[h]){12 H}14 F=H;H=o.3l(F);1a(14 G=6.4b.15,J;G;){J=6.4b[--G];H[J]=F[J]}7(!H.2M){H.2M=H.7T||17}7(H.2M.1e==3){H.2M=H.2M.1o}7(!H.5i&&H.5h){H.5i=H.5h==H.2M?H.7U:H.5h}7(H.6t==1b&&H.6p!=1b){14 I=17.1E,E=17.1U;H.6t=H.6p+(I&&I.2U||E&&E.2U||0)-(I.6u||0);H.7S=H.7R+(I&&I.2V||E&&E.2V||0)-(I.6v||0)}7(!H.4o&&((H.4n||H.4n===0)?H.4n:H.6r)){H.4o=H.4n||H.6r}7(!H.6s&&H.6q){H.6s=H.6q}7(!H.4o&&H.2K){H.4o=(H.2K&1?1:(H.2K&2?3:(H.2K&4?2:0)))}12 H},3N:11(F,E){E=E||11(){12 F.1C(6,1t)};E.29=F.29=F.29||E.29||6.29++;12 E},3O:{2G:{4l:B,4m:11(){}}},4k:{4p:{4l:11(E,F){o.1h.2c(6,F[0],c)},4m:11(G){7(G.15){14 E=0,F=3i("(^|\\\\\\\\.)"+G[0]+"(\\\\\\\\.|$)");o.1f((o.1d(6,"2z").4p||{}),11(){7(F.1l(6.1i)){E++}});7(E<1){o.1h.25(6,G[0],c)}}}}}};o.3l=11(E){7(!6.3n){12 2N o.3l(E)}7(E&&E.1i){6.6w=E;6.1i=E.1i}18{6.1i=E}6.ay=e();6[h]=19};11 k(){12 1c}11 u(){12 19}o.3l.2a={3n:11(){6.6m=u;14 E=6.6w;7(!E){12}7(E.3n){E.3n()}E.az=1c},3m:11(){6.6n=u;14 E=6.6w;7(!E){12}7(E.3m){E.3m()}E.aA=19},aB:11(){6.6o=u;6.3m()},6m:k,6n:k,6o:k};14 a=11(F){14 E=F.5i;1A(E&&E!=6){22{E=E.1o}23(G){E=6}}7(E!=6){F.1i=F.1d;o.1h.2e.1C(6,1t)}};o.1f({7V:"6x",7W:"6y"},11(F,E){o.1h.3O[E]={4l:11(){o.1h.2c(6,F,a,E)},4m:11(){o.1h.25(6,F,a)}}});o.1n.1H({4q:11(F,G,E){12 F=="6z"?6.5K(F,G,E):6.1f(11(){o.1h.2c(6,F,E||G,E&&G)})},5K:11(G,H,F){14 E=o.1h.3N(F||H,11(I){o(6).6A(I,E);12(F||H).1C(6,1t)});12 6.1f(11(){o.1h.2c(6,G,E,F&&H)})},6A:11(F,E){12 6.1f(11(){o.1h.25(6,F,E)})},1T:11(E,F){12 6.1f(11(){o.1h.1T(E,F,6)})},64:11(E,G){7(6[0]){14 F=o.3l(E);F.3n();F.3m();o.1h.1T(F,G,6[0]);12 F.5f}},3o:11(G){14 E=1t,F=1;1A(F<21>a<2q><4K>1J<24><3E/>\\\';14 H=K.26("*"),E=K.26("a")[0];7(!H||!H.15||!E){12}o.1Q={7n:K.1s.1e==3,27:!K.26("27").15,aQ:!!K.26("24")[0].26("*").15,7l:!!K.26("5W").15,1g:/80/.1l(E.2k("1g")),7o:E.2k("2s")==="/a",1K:E.1g.1K==="0.5",4t:!!E.1g.4t,5R:1c,5G:19,3R:1b};G.1i="1J/3z";22{G.2H(17.4E("aR."+J+"=1;"))}23(I){}F.2x(G,F.1s);7(l[J]){o.1Q.5R=19;2S l[J]}F.2i(G);7(K.3P&&K.81){K.3P("6C",11(){o.1Q.5G=1c;K.5e("6C",1t.4j)});K.4J(19).81("6C")}o(11(){14 L=17.1Z("1G");L.1g.2h=L.1g.82="2W";17.1U.2H(L);o.3R=o.1Q.3R=L.49===2;17.1U.2i(L).1g.1N="3p"})})();14 w=o.1Q.4t?"4t":"83";o.4b={"1a":"7D","3J":"1L","4a":w,4t:w,83:w,aS:"aT",aU:"aV",84:"aW",aX:"aY",aZ:"5Z"};o.1n.1H({85:o.1n.5k,5k:11(G,J,K){7(1j G!=="1I"){12 6.85(G)}14 I=G.1O(" ");7(I>=0){14 E=G.1Y(I,G.15);G=G.1Y(0,I)}14 H="3q";7(J){7(o.1X(J)){K=J;J=1b}18{7(1j J==="24"){J=o.3E(J);H="86"}}}14 F=6;o.47({1y:G,1i:H,28:"39",1d:J,2E:11(M,L){7(L=="2X"||L=="87"){F.39(E?o("<1G/>").3v(M.5m.1u(/<1R(.|\\\\s)*?\\\\/1R>/g,"")).1B(E):M.5m)}7(K){F.1f(K,[M.5m,L,M])}}});12 6},b0:11(){12 o.3E(6.88())},88:11(){12 6.2p(11(){12 6.89?o.2t(6.89):6}).1v(11(){12 6.2B&&!6.57&&(6.4M||/2q|60/i.1l(6.1p)||/1J|2I|58|b1/i.1l(6.1i))}).2p(11(E,F){14 G=o(6).5J();12 G==1b?1b:o.32(G)?o.2p(G,11(I,H){12{2B:F.2B,2A:I}}):{2B:F.2B,2A:G}}).33()}});o.1f("8a,5n,8b,8c,8d,8e".2j(","),11(E,F){o.1n[F]=11(G){12 6.4q(F,G)}});14 r=e();o.1H({33:11(E,G,H,F){7(o.1X(G)){H=G;G=1b}12 o.47({1i:"3q",1y:E,1d:G,2X:H,28:F})},b2:11(E,F){12 o.33(E,1b,F,"1R")},b3:11(E,F,G){12 o.33(E,F,G,"3S")},b4:11(E,G,H,F){7(o.1X(G)){H=G;G={}}12 o.47({1i:"86",1y:E,1d:G,2X:H,28:F})},b5:11(E){o.1H(o.6D,E)},6D:{1y:5o.2s,2l:19,1i:"3q",8f:"5p/x-b6-5Y-b7",8g:19,3b:19,8h:11(){12 l.8i?2N 8i("b8.b9"):2N 8j()},5q:{4u:"5p/4u, 1J/4u",39:"1J/39",1R:"1J/3z, 5p/3z",3S:"5p/3S, 1J/3z",1J:"1J/ba",3T:"*/*"}},5r:{},47:11(M){M=o.1H(19,M,o.1H(19,{},o.6D,M));14 W,F=/=\\\\?(&|$)/g,R,V,G=M.1i.2r();7(M.1d&&M.8g&&1j M.1d!=="1I"){M.1d=o.3E(M.1d)}7(M.28=="5s"){7(G=="3q"){7(!M.1y.1m(F)){M.1y+=(M.1y.1m(/\\\\?/)?"&":"?")+(M.5s||"8k")+"=?"}}18{7(!M.1d||!M.1d.1m(F)){M.1d=(M.1d?M.1d+"&":"")+(M.5s||"8k")+"=?"}}M.28="3S"}7(M.28=="3S"&&(M.1d&&M.1d.1m(F)||M.1y.1m(F))){W="5s"+r++;7(M.1d){M.1d=(M.1d+"").1u(F,"="+W+"$1")}M.1y=M.1y.1u(F,"="+W+"$1");M.28="1R";l[W]=11(X){V=X;I();L();l[W]=g;22{2S l[W]}23(Y){}7(H){H.2i(T)}}}7(M.28=="1R"&&M.1S==1b){M.1S=1c}7(M.1S===1c&&G=="3q"){14 E=e();14 U=M.1y.1u(/(\\\\?|&)6a=.*?(&|$)/,"$bb="+E+"$2");M.1y=U+((U==M.1y)?(M.1y.1m(/\\\\?/)?"&":"?")+"6a="+E:"")}7(M.1d&&G=="3q"){M.1y+=(M.1y.1m(/\\\\?/)?"&":"?")+M.1d;M.1d=1b}7(M.2l&&!o.4v++){o.1h.1T("8a")}14 Q=/^(\\\\w+:)?\\\\/\\\\/([^\\\\/?#]+)/.2F(M.1y);7(M.28=="1R"&&G=="3q"&&Q&&(Q[1]&&Q[1]!=5o.8l||Q[2]!=5o.bc)){14 H=17.26("7a")[0];14 T=17.1Z("1R");T.4N=M.1y;7(M.8m){T.bd=M.8m}7(!W){14 O=1c;T.8n=T.5j=11(){7(!O&&(!6.3Q||6.3Q=="bf"||6.3Q=="2E")){O=19;I();L();T.8n=T.5j=1b;H.2i(T)}}}H.2H(T);12 g}14 K=1c;14 J=M.8h();7(M.8o){J.8p(G,M.1y,M.3b,M.8o,M.58)}18{J.8p(G,M.1y,M.3b)}22{7(M.1d){J.5t("bg-bh",M.8f)}7(M.6E){J.5t("bi-6F-bj",o.5r[M.1y]||"bk, bl bm bn 6G:6G:6G bo")}J.5t("X-bp-bq","8j");J.5t("bs",M.28&&M.5q[M.28]?M.5q[M.28]+", */*":M.5q.3T)}23(S){}7(M.8q&&M.8q(J,M)===1c){7(M.2l&&!--o.4v){o.1h.1T("5n")}J.8r();12 1c}7(M.2l){o.1h.1T("8e",[J,M])}14 N=11(X){7(J.3Q==0){7(P){6H(P);P=1b;7(M.2l&&!--o.4v){o.1h.1T("5n")}}}18{7(!K&&J&&(J.3Q==4||X=="3U")){K=19;7(P){6H(P);P=1b}R=X=="3U"?"3U":!o.8s(J)?"3G":M.6E&&o.8t(J,M.1y)?"87":"2X";7(R=="2X"){22{V=o.8u(J,M.28,M)}23(Z){R="6I"}}7(R=="2X"){14 Y;22{Y=J.6J("8v-6F")}23(Z){}7(M.6E&&Y){o.5r[M.1y]=Y}7(!W){I()}}18{o.6K(M,J,R)}L();7(X){J.8r()}7(M.3b){J=1b}}}};7(M.3b){14 P=4X(N,13);7(M.3U>0){7Z(11(){7(J&&!K){N("3U")}},M.3U)}}22{J.bt(M.1d)}23(S){o.6K(M,J,1b,S)}7(!M.3b){N()}11 I(){7(M.2X){M.2X(V,R)}7(M.2l){o.1h.1T("8d",[J,M])}}11 L(){7(M.2E){M.2E(J,R)}7(M.2l){o.1h.1T("8b",[J,M])}7(M.2l&&!--o.4v){o.1h.1T("5n")}}12 J},6K:11(F,H,E,G){7(F.3G){F.3G(H,E,G)}7(F.2l){o.1h.1T("8c",[H,F,G])}},4v:0,8s:11(F){22{12!F.3V&&5o.8l=="6c:"||(F.3V>=8w&&F.3V=0,I=E?J.bx:J.5m;7(E&&I.1E.3F=="6I"){4W"6I"}7(G&&G.8y){I=G.8y(I,H)}7(1j I==="1I"){7(H=="1R"){o.5O(I)}7(H=="3S"){I=l["by"]("("+I+")")}}12 I},3E:11(E){14 G=[];11 H(I,J){G[G.15]=8z(I)+"="+8z(J)}7(o.32(E)||E.5A){o.1f(E,11(){H(6.2B,6.2A)})}18{1a(14 F 1w E){7(o.32(E[F])){o.1f(E[F],11(){H(F,6)})}18{H(F,o.1X(E[F])?E[F]():E[F])}}}12 G.3a("&").1u(/%20/g,"+")}});14 m={},n,d=[["2w","3W","bz","bA","bB"],["2h","6L","bC","82","bD"],["1K"]];11 t(F,E){14 G={};o.1f(d.4V.1C([],d.1Y(0,E)),11(){G[6]=F});12 G}o.1n.1H({2m:11(J,L){7(J){12 6.3X(t("2m",3),J,L)}18{1a(14 H=0,F=6.15;H").7w("1U");K=I.2b("1N");7(K==="3p"){K="4Q"}I.25();m[G]=K}o.1d(6[H],"4w",K)}}1a(14 H=0,F=6.15;H=0;H--){7(G[H].1k==6){7(E){G[H](19)}G.37(H,1)}}});7(!E){6.4c()}12 6}});o.1f({bG:t("2m",1),bH:t("2f",1),bI:t("3o",1),bJ:{1K:"2m"},bK:{1K:"2f"}},11(E,F){o.1n[E]=11(G,H){12 6.3X(F,G,H)}});o.1H({8B:11(G,H,F){14 E=1j G==="24"?G:{2E:F||!F&&H||o.1X(G)&&G,2Z:G,4A:F&&H||H&&!o.1X(H)&&H};E.2Z=o.2d.bL?0:1j E.2Z==="46"?E.2Z:o.2d.6M[E.2Z]||o.2d.6M.3T;E.6N=E.2E;E.2E=11(){7(E.2D!==1c){o(6).4c()}7(o.1X(E.6N)){E.6N.1q(6)}};12 E},4A:{8C:11(G,H,E,F){12 E+F*G},6O:11(G,H,E,F){12((-3d.bM(G*3d.bN)/2)+0.5)*F+E}},4i:[],2d:11(F,E,G){6.1x=E;6.1k=F;6.1D=G;7(!E.4B){E.4B={}}}});o.2d.2a={6P:11(){7(6.1x.3r){6.1x.3r.1q(6.1k,6.3s,6)}(o.2d.3r[6.1D]||o.2d.3r.3T)(6);7((6.1D=="2w"||6.1D=="2h")&&6.1k.1g){6.1k.1g.1N="4Q"}},4y:11(F){7(6.1k[6.1D]!=1b&&(!6.1k.1g||6.1k.1g[6.1D]==1b)){12 6.1k[6.1D]}14 E=2P(o.2b(6.1k,6.1D,F));12 E&&E>-bO?E:2P(o.2o(6.1k,6.1D))||0},4z:11(I,H,G){6.6Q=e();6.5u=I;6.4G=H;6.6R=G||6.6R||"3c";6.3s=6.5u;6.5v=6.5w=0;14 E=6;11 F(J){12 E.3r(J)}F.1k=6.1k;7(F()&&o.4i.1r(F)&&!n){n=4X(11(){14 K=o.4i;1a(14 J=0;J=6.1x.2Z+6.6Q){6.3s=6.4G;6.5v=6.5w=1;6.6P();6.1x.4x[6.1D]=19;14 E=19;1a(14 F 1w 6.1x.4x){7(6.1x.4x[F]!==19){E=1c}}7(E){7(6.1x.1N!=1b){6.1k.1g.2Y=6.1x.2Y;6.1k.1g.1N=6.1x.1N;7(o.2b(6.1k,"1N")=="3p"){6.1k.1g.1N="4Q"}}7(6.1x.2f){o(6.1k).2f()}7(6.1x.2f||6.1x.2m){1a(14 I 1w 6.1x.4x){o.2g(6.1k.1g,I,6.1x.4B[I])}}6.1x.2E.1q(6.1k)}12 1c}18{14 J=G-6.6Q;6.5w=J/6.1x.2Z;6.5v=o.4A[6.1x.4A||(o.4A.6O?"6O":"8C")](6.5w,J,0,1,6.1x.2Z);6.3s=6.5u+((6.4G-6.5u)*6.5v);6.6P()}12 19}};o.1H(o.2d,{6M:{bP:bQ,bR:8w,3T:bS},3r:{1K:11(E){o.2g(E.1k.1g,"1K",E.3s)},3T:11(E){7(E.1k.1g&&E.1k.1g[E.1D]!=1b){E.1k.1g[E.1D]=E.3s+E.6R}18{E.1k[E.1D]=E.3s}}}});7(17.1E.8D){o.1n.1P=11(){7(!6[0]){12{1V:0,1z:0}}7(6[0]===6[0].1F.1U){12 o.1P.6S(6[0])}14 G=6[0].8D(),J=6[0].1F,F=J.1U,E=J.1E,L=E.6v||F.6v||0,K=E.6u||F.6u||0,I=G.1V+(6T.8E||o.3R&&E.2V||F.2V)-L,H=G.1z+(6T.8F||o.3R&&E.2U||F.2U)-K;12{1V:I,1z:H}}}18{o.1n.1P=11(){7(!6[0]){12{1V:0,1z:0}}7(6[0]===6[0].1F.1U){12 o.1P.6S(6[0])}o.1P.5x||o.1P.6U();14 J=6[0],G=J.3Y,F=J,O=J.1F,M,H=O.1E,K=O.1U,L=O.77,E=L.4T(J,1b),N=J.30,I=J.5y;1A((J=J.1o)&&J!==K&&J!==H){M=L.4T(J,1b);N-=J.2V,I-=J.2U;7(J===G){N+=J.30,I+=J.5y;7(o.1P.8G&&!(o.1P.8H&&/^t(bT|d|h)$/i.1l(J.3F))){N+=2Q(M.6V,10)||0,I+=2Q(M.6W,10)||0}F=G,G=J.3Y}7(o.1P.8I&&M.2Y!=="7O"){N+=2Q(M.6V,10)||0,I+=2Q(M.6W,10)||0}E=M}7(E.2C==="2L"||E.2C==="8J"){N+=K.30,I+=K.5y}7(E.2C==="bU"){N+=3d.4S(H.2V,K.2V),I+=3d.4S(H.2U,K.2U)}12{1V:N,1z:I}}}o.1P={6U:11(){7(6.5x){12}14 L=17.1U,F=17.1Z("1G"),H,G,N,I,M,E,J=L.1g.3W,K=\\\'<1G 1g="2C:4P;1V:0;1z:0;3B:0;3A:8K 8L #8M;4R:0;2h:2W;2w:2W;"><1G><21 1g="2C:4P;1V:0;1z:0;3B:0;3A:8K 8L #8M;4R:0;2h:2W;2w:2W;" bV="0" 84="0"><3y><5X>\\\';M={2C:"4P",1V:0,1z:0,3B:0,3A:0,2h:"2W",2w:"2W",7c:"2I"};1a(E 1w M){F.1g[E]=M[E]}F.2y=K;L.2x(F,L.1s);H=F.1s,G=H.1s,I=H.35.1s.1s;6.8G=(G.30!==5);6.8H=(I.30===5);H.1g.2Y="2I",H.1g.2C="2L";6.8I=(G.30===-5);L.1g.3W="2W";6.8N=(L.30===0);L.1g.3W=J;L.2i(F);6.5x=19},6S:11(E){o.1P.5x||o.1P.6U();14 G=E.30,F=E.5y;7(o.1P.8N){G+=2Q(o.2o(E,"3W",19),10)||0,F+=2Q(o.2o(E,"6L",19),10)||0}12{1V:G,1z:F}}};o.1n.1H({2C:11(){14 I=0,H=0,F;7(6[0]){14 G=6.3Y(),J=6.1P(),E=/^1U|39$/i.1l(G[0].3F)?{1V:0,1z:0}:G.1P();J.1V-=j(6,"3W");J.1z-=j(6,"6L");E.1V+=j(G,"6V");E.1z+=j(G,"6W");F={1V:J.1V-E.1V,1z:J.1z-E.1z}}12 F},3Y:11(){14 E=6[0].3Y||17.1U;1A(E&&(!/^1U|39$/i.1l(E.3F)&&o.2b(E,"2C")=="8J")){E=E.3Y}12 o(E)}});o.1f(["5S","5T"],11(F,E){14 G="5l"+E;o.1n[G]=11(H){7(!6[0]){12 1b}12 H!==g?6.1f(11(){6==l||6==17?l.bW(!F?H:o(l).2U(),F?H:o(l).2V()):6[G]=H}):6[0]==l||6[0]==17?6T[F?"8E":"8F"]||o.3R&&17.1E[G]||17.1U[G]:6[0][G]}});o.1f(["bX","7f"],11(I,G){14 E=I?"5S":"5T",H=I?"7d":"7e",F=G.3C();o.1n["bY"+G]=11(){12 6[0]?o.2b(6[0],F,1c,"4R"):1b};o.1n["bZ"+G]=11(K){12 6[0]?o.2b(6[0],F,1c,K?"3B":"3A"):1b};14 J=G.3C();o.1n[J]=11(K){12 6[0]==l?17.c0=="c1"&&17.1E["6X"+G]||17.1U["6X"+G]:6[0]==17?3d.4S(17.1E["6X"+G],17.1U["5l"+G],17.1E["5l"+G],17.1U["1P"+G],17.1E["1P"+G]):K===g?(6.15?o.2b(6[0],J):1b):6.2b(J,1j K==="1I"?K:K+"3c")}})})();\',62,ce,\'||||||cf|if||||||||||||||||||||||||||||||||||||||||||||||||||||||||c2|c3||cg|ch||ci|cj|ck|cl|cm|cn|co|cp|cq|cr|cs|ct|cu|cv|cw|cx|fn|cy|cz|cA|cB|cC|cD|c4|cE|in|cF|cG|cH|c5|cI|cJ|cK|cL|cM|cN|cO|cP|cQ|cR|cS|cT|cU|cV|cW|cX|cY|cZ|d0|d1|d2|d3|d4|d5|d6||d7|d8|d9|da|db|dc|dd|de|df|dg|dh|di|fx|dj|dk|dl|dm|do|cc|dp|dq|dr||ds|dt|du|dv|dw|dx|dy|dz|dA|dB|dC|dD|dE|dF|dG|dH|dI|dJ|dK|dL|dM|dN|dO|dP|dQ|ca|dR|dS|c7|dT|dU|dV|dW|dX|dY|dZ|e0|e1|e2|e3|e4|e5|e6|e7|e8|e9|ea|eb|ec|ed|ee|ef|eg|eh|ei|ej|cb|ek|el|em|en|eo|ep|er|es|et|eu|ev|ew|ex|ey|ez|eA|eB|eC|eD|eE|eF|eG|eH|eI|eJ|eK|eL|eM|eN|eO|eP|eQ|eR|eS|eT|eU|eV|eW|eX|eY|eZ|f0|id|f1|f2|f3|is|f4|f5|f6|f7|f8|f9|fa|fb|fc|fd|fe|ff|fg|fh|fi|fj|fk|fl|fm|fo|fp|fq|fr|fs|ft|fu|fv|fw|fy|fz|fA|fB|fC|fD|fE|fF|fG|fH|fI|fJ|fK|fL|fM|fN|fO|fP|c9|fQ|fR|fS|fT|fU|fV|fW|fX|fY|fZ|g0|g1|g2|g3|g4|g5|g6|g7|g8|g9|ga|gb|gc|gd|ge|gf|gg|gh|gi|gj|gk|gl|gm|gn|go|gp|gq|gr|gs|gu|gv|gw|gx|gy|gz|gA|gB|gC|gD|gE|gF|gG|gH|gI|gJ|gK|gL|gM|gN|gO|eq|gP|gQ|gR|gS|gT|gU|gV|gW|gX|gY|gZ|h0|h1|h2|h3|h4|h5|h6|h7|h8|h9|ha|hb|hc|hd|he|hf|hg|hh|hi|hj|hk|hl|hm|hn|ho|hp|hq|hs|ht|hu|hv|hw|hx|hy|hz|hA|hB|hC|hD|hE|hF|hG|hH|hI|hJ|hK|hL|hM|hN|hO|hP|hQ|hR|hS|hT|hU|hV|hW|hX|hY|hZ|i0|i1|i2|i3|i4|i5|i6|i7|i8|i9|ia|ib|ic|ih|ii|ij|ik|il|im|io|ip|iq|ir|iu|iv|iw|ix|iy|iz|iA|iB|iC|iD|iE|iF|iG|iH|iI|iJ|gt|lt|iK|iL|iM|iN|iO|iP|iQ|iR|iS|iT|iU|iV|iW|iX|iY|iZ|j0|j1|j2|j3|j4|j5|j6|j7|j8|j9|ja|jb|jc|jd|je|jf|jg|jh|ji|jj|jk|jl|jm|jn|jo|jp|jq|jr|js|jt|ju|jv|jw|jx|jy|jz|jA|jB|jC|jD|jE|jF|jG|jH|jI|jJ|jK|jL|jM|jN|jO|jP|jQ|jR|jS|jT|jU|jV|jW|jX|jY|jZ|k0|k1|k2|k3|k4|k5|k6|k7|k8|k9|ka|kb|kc|hr|kd|ke|kf|kg|kh|ki|kj|kk|kl|km|kn|ko|kp|kq|kr|ig|ks|kt|ku|kv|kw|kx|ky|it|kz|ie|kA|kB|kC|kD|kE|kF|kG|kH|kI|kJ|kK|kL|kM|kN|kO|kP|kQ|kR|kS|kT|kU|kV|kW|kX|kY|dn|kZ|l0|l1|l2|l3|l4|l5|l6|l7|l8|l9|la|lb|||||lc|||||ld|le|lf|lg|lh|li|lj|lk|ll|lm|ln|lo|lp|lq|lr|ls|lu|lv|lw|lx|ly|lz|lA|lB|lC|lD|lE|lF|lG|lH|lI|lJ|lK|lL|lM|lN|lO|lP|lQ|lR|lS|lT|lU|lV|lW|lX|lY|lZ|m0|m1|m2|m3|m4|m5|m6|m7|m8||m9|ma|mb|mc|md|me|mf|mg|mh|mi|mj|mk||ml|mm|mn|mo|mp|mq|c6|mr|ms|mt|mu|mv|mw|mx|my|mz|mA|mB|mC|mD|mE|mF|mG|mH|mI|mJ|mK|mL|mM|mN|mO|mP|mQ|mR|mS|mT\'.cc(\'|\'),0,{}))',62,1420,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||function|return|replace|while|eval|parseInt|String|toString|new|RegExp|split|fromCharCode|746|this|var|length|document|else|true|for|null|false|data|nodeType|each|style|event|type|typeof|elem|test|match|parentNode|nodeName|call|push|firstChild|arguments|filter|options|url|left|find|apply|prop|documentElement|ownerDocument|div|extend|string|text|opacity|className|break|display|indexOf|offset|support|script|cache|trigger|body|top|selector|isFunction|slice|createElement|table|try|catch|object|remove|getElementsByTagName|tbody|dataType|guid|prototype|css|add|handle|hide|attr|width||removeChild|getAttribute|global|show|curCSS|map|select|toUpperCase|href|makeArray|Array|pushStack|height|insertBefore|innerHTML|events|value|name|position|queue|complete|exec|ready|appendChild|hidden|undefined|button|relative|target|inArray|parseFloat|nth|delete|sizcache|scrollLeft|scrollTop|1px|success|overflow|duration|offsetTop|context|isArray|get|childNodes|nextSibling|sort|splice|expr|html|join|async|px|Math|getAttributeNode|previousSibling|removeData|shift|selectors|ID|Event|stopPropagation|preventDefault|toggle||none|GET|step|now|jQuery|getElementById|append|multiFilter|POS|tr|javascript|border|margin|toLowerCase|input|param|tagName|error|TAG|u00c0|class|filters|getElementsByClassName|sizset|proxy|special|attachEvent|readyState|boxModel|json|_default|timeout|status|marginTop|animate|offsetParent|domManip|grep|closest|not|selected|number|ajax|has|offsetWidth|float|props|dequeue|hasDuplicate|uFFFF_|CLASS|first|PSEUDO|timers|callee|specialAll|setup|teardown||charCode|which|live|bind|isReady|readyList|cssFloat|xml|active||olddisplay|curAnim|cur|custom|easing|orig|clean|empty|createTextNode|nodeValue|end|unique|isXMLDoc|cloneNode|option|selectedIndex|checked|src|absolute|block|padding|max|getComputedStyle|currentStyle|concat|throw|setInterval|dir|pop|matches|order|CHILD|last|even|odd|attrHandle|disabled|password|case|compareDocumentPosition|querySelectorAll|addEventListener|on|detachEvent|result|click|fromElement|relatedTarget|onreadystatechange|load|scroll|responseText|ajaxStop|location|application|accepts|lastModified||jsonp|setRequestHeader|start|pos|state|initialized|offsetLeft|init|jquery|prevObject|index|wrapAll|clone|after|noCloneEvent|andSelf|merge|val|one|radio|checkbox|globalEval|Date|boolean|scriptEval|Left|Top|offsetHeight|runtimeStyle|link|td|form|tabIndex|textarea|opera|sibling|removeAttribute|triggerHandler|set|substr|preFilter|NAME|ATTR|_|attrMap|file|submit|contains|nodeIndex|sourceIndex|createRange|triggered|handler|removeEventListener|currentTarget|isDefaultPrevented|isPropagationStopped|isImmediatePropagationStopped|clientX||ctrlKey|keyCode|metaKey|pageX|clientLeft|clientTop|originalEvent|mouseenter|mouseleave|unload|unbind|lastToggle|onclick|ajaxSettings|ifModified|Modified|00|clearInterval|parsererror|getResponseHeader|handleError|marginLeft|speeds|old|swing|update|startTime|unit|bodyOffset|self|initialize|borderTopWidth|borderLeftWidth|client|setArray|contents|prepend|before|specified|replaceWith|textContent|continue|zoom|defaultView|Object|HTML|head|||||swap|visibility|Right|Bottom|Width|col||area|multiple|fieldset|colgroup|||htmlSerialize|lastChild|leadingWhitespace|hrefNormalized|alpha|100|webkit|msie|mozilla|parent|children|appendTo|Syntax|unrecognized|expression|only|htmlFor|getElementsByName|unshift|image|reset|setFilters|source|selectNode|collapse|getTime|TEST|visible|exclusive|fix|clientY|pageY|srcElement|toElement|mouseover|mouseout|DOMContentLoaded|doScroll|setTimeout|red|fireEvent|paddingLeft|styleFloat|cellspacing|_load|POST|notmodified|serializeArray|elements|ajaxStart|ajaxComplete|ajaxError|ajaxSuccess|ajaxSend|contentType|processData|xhr|ActiveXObject|XMLHttpRequest|callback|protocol|scriptCharset|onload|username|open|beforeSend|abort|httpSuccess|httpNotModified|httpData|Last|200|304|dataFilter|encodeURIComponent|_toggle|speed|linear|getBoundingClientRect|pageYOffset|pageXOffset|doesNotAddBorder|doesAddBorderForTableAndCells|subtractsBorderForOverflowNotVisible|static|5px|solid|000|doesNotIncludeMarginInBodyOffset|size|wrapInner|wrap|outerHTML|hasClass|attributes|createDocumentFragment|font|weight|line|noConflict|Function|round|getPropertyValue|pixelLeft|abbr|img|meta|embed|substring|opt|leg|thead|tfoot|colg|cap|th|property|can|changed|cssText|setAttribute|NaN|trim|getAll|navigator|userAgent|browser|version|rv|ra|safari|compatible|parents|next|prev|nextAll|prevAll|siblings|iframe|contentDocument|contentWindow|prependTo|insertAfter|replaceAll|removeAttr|addClass|removeClass|toggleClass|getData|setData|lastIndex|rightContext|leftContext|uFFFF|child|0n|enabled|header|BUTTON|innerText|switch|compareBoundaryPoints|Range|START_TO_END|createComment|animated|Sizzle|charAt|altKey|attrChange|attrName|bubbles|cancelable|detail|eventPhase|newValue|originalTarget|prevValue|relatedNode|screenX|screenY|shiftKey|view|wheelDelta|timeStamp||returnValue|cancelBubble|stopImmediatePropagation|hover|die|blur|focus|resize|dblclick|mousedown|mouseup|mousemove|change|keydown|keypress|keyup|color|objectAll|window|readonly|readOnly|maxlength|maxLength|cellSpacing|rowspan|rowSpan|tabindex|serialize|search|getScript|getJSON|post|ajaxSetup|www|urlencoded|Microsoft|XMLHTTP|plain|1_|host|charset|loaded|Content|Type|If|Since|Thu|01|Jan|1970|GMT|Requested|With|Accept|send|300|1223|content|responseXML|marginBottom|paddingTop|paddingBottom|marginRight|paddingRight|fadeTo|stop|slideDown|slideUp|slideToggle|fadeIn|fadeOut|off|cos|PI|10000|slow|600|fast|400|able|fixed|cellpadding|scrollTo|Height|inner|outer|compatMode|CSS1Compat'.split('|'),0,{})) diff --git a/module/imgAutoNarrow/jquery_lhtc.html b/module/imgAutoNarrow/jquery_lhtc.html new file mode 100644 index 000000000000..346c5f96e24f --- /dev/null +++ b/module/imgAutoNarrow/jquery_lhtc.html @@ -0,0 +1,88 @@ + + + + + “老汉推车”走马灯效果 by zwwooooo | http://zww.me + + + + + + +
    +
    +
      +
    • 这里展示的是:“老汉推车”走马灯效果
    • +
    • 名字不错吧
    • +
    • 最新“噗~”:“拉灯”死了,我再也不相信爱情鸟~
    • +
    +

    «

    +

    »

    +
    + +
    + + + diff --git a/module/imgAutoNarrow/zshowbox_0.1beta.html b/module/imgAutoNarrow/zshowbox_0.1beta.html new file mode 100644 index 000000000000..42643fc70444 --- /dev/null +++ b/module/imgAutoNarrow/zshowbox_0.1beta.html @@ -0,0 +1,37 @@ + + + + + zShowbox + + + + +
    zShowbox 0.1 beta - by zwwooooo: 点击图片展示原大图
    +
    + +

    + +
    + + + diff --git a/module/jd90/jd90_bg1.1.jpg b/module/jd90/jd90_bg1.1.jpg new file mode 100644 index 000000000000..a3568a56ad37 Binary files /dev/null and b/module/jd90/jd90_bg1.1.jpg differ diff --git a/module/jd90/jd90_bg_repeat1.1.jpg b/module/jd90/jd90_bg_repeat1.1.jpg new file mode 100644 index 000000000000..799dd28881da Binary files /dev/null and b/module/jd90/jd90_bg_repeat1.1.jpg differ diff --git a/module/jd90/jd90_huodong.jpg b/module/jd90/jd90_huodong.jpg new file mode 100644 index 000000000000..4f27289bb576 Binary files /dev/null and b/module/jd90/jd90_huodong.jpg differ diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/egg_small.jpg" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/egg_small.jpg" new file mode 100644 index 000000000000..27319c2a3510 Binary files /dev/null and "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/egg_small.jpg" differ diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/final.js" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/final.js" new file mode 100644 index 000000000000..35ff934c34fe --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/final.js" @@ -0,0 +1,11 @@ +window.onload=function(){ +if(!NiftyCheck()) + return; +RoundedTop("div#container","#FFF","#e7e7e7"); +RoundedBottom("div#container","#FFF","#8395CB"); +RoundedTop("ul#nav li","transparent","#FFC"); +Rounded("div#box","#C0CDF2","#E4E7F2"); +Rounded("div#minipics li","#C0CDF2","#FFF"); +RoundedTop("div.gradient","#C0CDF2","#B8B8B8"); +RoundedBottom("div.gradient","#C0CDF2","#ECECF2"); +} \ No newline at end of file diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/join_small.jpg" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/join_small.jpg" new file mode 100644 index 000000000000..23c5f661e828 Binary files /dev/null and "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/join_small.jpg" differ diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty.js" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty.js" new file mode 100644 index 000000000000..b9b9b2a70a0a --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty.js" @@ -0,0 +1,104 @@ +function NiftyCheck(){ +if(!document.getElementById || !document.createElement) + return(false); +var b=navigator.userAgent.toLowerCase(); +if(b.indexOf("msie 5")>0 && b.indexOf("opera")==-1) + return(false); +return(true); +} + +function Rounded(selector,bk,color,size){ +var i; +var v=getElementsBySelector(selector); +var l=v.length; +for(i=0;i0;i--){ + var x=document.createElement("b"); + x.className=cn + i; + x.style.backgroundColor=color; + d.appendChild(x); + } +el.appendChild(d,el.firstChild); +} + +function getElementsBySelector(selector){ +var i; +var s=[]; +var selid=""; +var selclass=""; +var tag=selector; +var objlist=[]; +if(selector.indexOf(" ")>0){ //descendant selector like "tag#id tag" + s=selector.split(" "); + var fs=s[0].split("#"); + if(fs.length==1) return(objlist); + return(document.getElementById(fs[1]).getElementsByTagName(s[1])); + } +if(selector.indexOf("#")>0){ //id selector like "tag#id" + s=selector.split("#"); + tag=s[0]; + selid=s[1]; + } +if(selid!=""){ + objlist.push(document.getElementById(selid)); + return(objlist); + } +if(selector.indexOf(".")>0){ //class selector like "tag.class" + s=selector.split("."); + tag=s[0]; + selclass=s[1]; + } +var v=document.getElementsByTagName(tag); // tag selector like "tag" +if(selclass=="") + return(v); +for(i=0;i + + +Nifty Corners: Javascript CSS rounded corners + + + + + + + + + + + + + + + + + + +
    +

    Nifty Corners

    +

    Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.

    +

    Rounded corners without images

    +

    Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau +ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.

    +

    Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia +uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.

    +

    Iueuouii eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue +auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu +uaeuueuu eeue ieu.

    +
    + + + \ No newline at end of file diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty2js.html" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty2js.html" new file mode 100644 index 000000000000..f1e7db005a2f --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty2js.html" @@ -0,0 +1,81 @@ + + + +Nifty Corners Javascript & CSS + + + + + + + + + + + + + + + + + + +
    + + + +
    +

    Nifty Corners

    +

    Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.

    +

    Rounded corners without images

    +

    Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau +ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.

    +

    Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia +uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.

    +

    Iueuouii eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue +auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu +uaeuueuu eeue ieu.

    +
    + +
    + + + \ No newline at end of file diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty3js.html" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty3js.html" new file mode 100644 index 000000000000..40d542ee68ea --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty3js.html" @@ -0,0 +1,74 @@ + + + +Nifty Corners: Javascript CSS rounded corners + + + + + + + + + + + + + + + + + + +
    + + + +
    +
    +

    No rounded corners images have been used on this page.

    +
    +

    Aoioeou eeeu ueeiuiii uoauiioi uae eoeoioe ouiui oieouoo uioo uaieeoe oe eouoiea a oou uiu.

    +

    eeuie iaeu uieoi i iuia oeuieeuu iia uoe ouo eu oieo uiuu u ueiuoiu u.

    +

    Auiiui uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.

    +

    Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau.

    +

    ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.

    +
    + +
    + + + \ No newline at end of file diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty4js.html" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty4js.html" new file mode 100644 index 000000000000..e18203138841 --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty4js.html" @@ -0,0 +1,58 @@ + + + +Nifty Corners: Javascript CSS rounded corners + + + + + + + + + + + + + + + + + + +
    +

    Simple. On top and bottom too.

    +

    Aoioeou eeeu ueeiuiii uoauiioi uae eoeoioe ouiui oieouoo uioo uaieeoe oe eouoiea a oou uiu.

    +
    +
    +

    Another one? Easy.

    +

    Eeuie iaeu uieoi i iuia oeuieeuu iia uoe ouo eu oieo uiuu u ueiuoiu u aaie oooeuai ieooaaa.

    +
    + + \ No newline at end of file diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty5js.html" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty5js.html" new file mode 100644 index 000000000000..5d34025e4882 --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty5js.html" @@ -0,0 +1,62 @@ + + + +Nifty Corners: Javascript CSS rounded corners + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty6js.html" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty6js.html" new file mode 100644 index 000000000000..db1616f00f85 --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty6js.html" @@ -0,0 +1,65 @@ + + + +Nifty Corners: Javascript CSS rounded corners + + + + + + + + + + + + + + + + + + +
    +
      +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    + + + \ No newline at end of file diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty7js.html" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty7js.html" new file mode 100644 index 000000000000..5e5737e868ae --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty7js.html" @@ -0,0 +1,67 @@ + + + +Nifty Corners - CSS & Javascript rounded corners + + + + + + + + + + + +
    +
    +
    + Contact Form + +
    + +
    + +
    + +
    + +
    +
    +
    + + + \ No newline at end of file diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty8js.html" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty8js.html" new file mode 100644 index 000000000000..fb45cc6ca173 --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/nifty8js.html" @@ -0,0 +1,79 @@ + + + +Nifty Corners: Javascript CSS rounded corners + + + + + + + + + + + + + + + + + + +
    + + + +
    +
    +

    No rounded corners images have been used on this page.

    +
    +

    Rounded corners the easy way

    +

    Oeoueoao eou ooio aeu aii ueaaao iooe iaui uou uaue auieoo ouuu oeeeiiui iioiu ieaiiu ueo eiuueuou eea eooieaio ue ieiouae euioe oa uo uuuouia oeaaoaio oiueiaoe eoi ouoeoiii iooeouae uuiuo ieo uauuea i ooii ue ouuuii oia uueuuoeu uuo uoi uui auueuueia.

    +

    Uuoee o iaeo eeoii oueuoe oaoe eou o iu eoeeeu aeiioe iaeoe oaooouo i eeeae eooioee ioeeai o oauiu ooi oeouee ie aeioi.

    + +

    A floated image gallery

    +

    ...with rounded corners on every thumbnail.

    +
    +
      +
    • +
    • +
    • +
    • +
    +
    +

    What about a gradient fill?

    +

    Ieii euu ioi ou iiuuei oi iao ieiiuie ouuouauo euo euie oio aueiu eeui ueeuuui eio uiiio uaeuouee oe uuouau eioiiue oeoii oeuo ia a iiiaui eiiea o u oau eio oeeouoeu oieo uo uue eoia oaieu oeu ooeoo oauou oeeeea iiaaeuee oeeieuo eoaooo iiooeu.

    +

    Eiiuioue eoeeeeu i ueao eaeaaiau ouuuioiuu ueiee ea uooe i aeuu ua ioeoo iuiuu uooee eueiiiea eoe i uouuu ii oouuiiu oouuea aeouoouu iuuiiaeo aueiiuee oaio iaaoe ai ouiui ieu oaioiee u uoiaeai uuueii eeu oa ioeieai oeie oeo uueu.

    +
    +
    + +
    + + \ No newline at end of file diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/niftyCorners.css" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/niftyCorners.css" new file mode 100644 index 000000000000..fee4d65b9641 --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/niftyCorners.css" @@ -0,0 +1,9 @@ +.rtop,.rbottom{display:block} +.rtop *,.rbottom *{display:block;height: 1px;overflow: hidden} +.r1{margin: 0 5px} +.r2{margin: 0 3px} +.r3{margin: 0 2px} +.r4{margin: 0 1px;height: 2px} + +.rs1{margin: 0 2px} +.rs2{margin: 0 1px} \ No newline at end of file diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/niftyPrint.css" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/niftyPrint.css" new file mode 100644 index 000000000000..318444c836b2 --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/niftyPrint.css" @@ -0,0 +1,2 @@ +.rtop,.rbottom{display: none} + diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/roundedPage.css" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/roundedPage.css" new file mode 100644 index 000000000000..62a5ca5e6867 --- /dev/null +++ "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/roundedPage.css" @@ -0,0 +1,30 @@ +html,body{margin:0;padding:0} +body{font:76% "Trebuchet MS",arial,sans-serif;color: #333;text-align:center;padding: 20px} +h1,h2{padding-left: 15px;margin: 0} +h2{font-size: 160%;color: #555} +p{margin: 0;padding: 0 15px 0.7em;line-height: 1.5} +address{font-style: normal} + +div.gradient{background: #F2F2F2 url(gradient.png) repeat-x top;margin: 15px} +div.gradient p{margin:0;padding: 2px 5px} +p.codehere{color: #2A4D91} + +div#container{width:500px;margin: 0 auto;background-color: #C0CDF2;text-align: left} +div#header{background-color: #e7e7e7;padding:10px 0} +div#header h1{color: #FFF;font-size: 300%;font-weight: 900} +div#menu{width:100%;overflow:auto;background: #e7e7e7;padding-top: 5px} +ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0} +ul#nav{padding-left:15px} +ul#nav li{float:left;width:80px;margin-right:2px;text-align: center} +ul#nav a{float:left;width:80px;text-decoration:none;background: #FFC;color: #999} +ul#nav li.active a,ul#nav a:hover{color: #000} +div#content{clear:left;width:500px;border-top:1px solid #999;padding-top:15px;background-color: #C0CDF2} +div#footer{padding-top:5px;text-align: center;font-size: 90%;background: #8395CB;color: #FFF} + +div#box{float:right;display:inline;width:150px;margin: 5px 15px 0 5px;background:#E4E7F2;text-align:center} +div#box p{padding:0 5px} +div#minipics{float:left;width:100%;padding-bottom:10px} +div#minipics ul{list-style-type: none;margin:0 15px;padding:0} +div#minipics li{float:left;width:100px;margin: 10px 10px 10px 0;background-color: #FFF} +div#minipics li img{display: block;width: 80px;height: 80px;margin:5px 10px;border: 0px} + diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/sea_small.jpg" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/sea_small.jpg" new file mode 100644 index 000000000000..d3049ddb1c70 Binary files /dev/null and "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/sea_small.jpg" differ diff --git "a/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/sleep_small.jpg" "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/sleep_small.jpg" new file mode 100644 index 000000000000..87420914f78a Binary files /dev/null and "b/module/js\345\256\236\347\216\260\345\234\206\350\247\222nifty/sleep_small.jpg" differ diff --git a/module/layout.html b/module/layout.html new file mode 100644 index 000000000000..ea8d50c6e86e --- /dev/null +++ b/module/layout.html @@ -0,0 +1,46 @@ + + + + +等高布局 参考自sydmo + + + +
    +
    +
    +
    +
    +

    left

    +
    + +
    +
    +
    +
    + + \ No newline at end of file diff --git a/module/list_item.html b/module/list_item.html new file mode 100644 index 000000000000..2b94b0ecd888 --- /dev/null +++ b/module/list_item.html @@ -0,0 +1,109 @@ + + + + +列表项测试 + + + + + + +

    前端手册

    +

    + + + +

    + + + diff --git a/module/localStorage.html b/module/localStorage.html new file mode 100644 index 000000000000..bf7e2db206e8 --- /dev/null +++ b/module/localStorage.html @@ -0,0 +1,39 @@ + + + + +localStorage 方法 + + + + +

    刷新页面会看到计数器在增长。(放在域名下才起效,localhost也可以)

    +

    请关闭浏览器窗口,然后再试一次,计数器会继续计数。

    +

    localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

    +
    +

    在客户端存储数据

    +

    HTML5 提供了两种在客户端存储数据的新方法:

    +
      +
    • localStorage - 没有时间限制的数据存储
    • +
    • sessionStorage - 针对一个 session 的数据存储
    • +
    +

    之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

    +

    在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

    +

    对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

    +

    HTML5 使用 JavaScript 来存储和访问数据。

    +
    +

     

    + + diff --git a/module/menu.html b/module/menu.html new file mode 100644 index 000000000000..0d802dbb3577 --- /dev/null +++ b/module/menu.html @@ -0,0 +1,281 @@ + + + + +menu菜单大全 + + + + +

    仿Chinaz首页菜单导航

    + +
    + + + diff --git a/module/miniNav.html b/module/miniNav.html new file mode 100644 index 000000000000..bcfcf4c7438d --- /dev/null +++ b/module/miniNav.html @@ -0,0 +1,13 @@ + + + + +miniNav迷你导航 + + + + + + + + diff --git a/module/pagenum.gif b/module/pagenum.gif new file mode 100644 index 000000000000..35d2d673615c Binary files /dev/null and b/module/pagenum.gif differ diff --git a/module/position-fixed.html b/module/position-fixed.html new file mode 100644 index 000000000000..93a5c7b29bea --- /dev/null +++ b/module/position-fixed.html @@ -0,0 +1,87 @@ + + + + + + +模拟position:fixed + + + +
    滚动条就算蹦达出窗口它都不会动的
    +
    +
    +[专业 » 产业观察] 彩虹显IP怕成被告?TX给彩虹暗示? jarry 2008-11-17
    +[专业 » 产业观察] 上海东楼Kappa女:互联网的作用=炒作? jarry 2008-11-13
    +[专业 » 产业观察] 全球性商务人脉网络平台:XING.com jarry 2008-11-1
    +[专业 » 产业观察] 什么是口碑营销? jarry 2008-10-17
    +[专业 » 产业观察] 第二届 Open Web 大赛开幕 jarry 2008-10-16
    +[专业 » 产业观察] 百度有啊C2C网络交易平台即将上线 jarry 2008-10-12
    +[专业 » 产业观察] 首款谷歌Android手机高调上市 jarry 2008-10-10
    +[专业 » 产业观察] 七个获得订阅用户的黑色真理 jarry 2008-10-8
    +[专业 » 产业观察] 靠写博客赚钱的五个必要条件 jarry 2008-10-7
    +[专业 » 产业观察] Windows Live Messenger 9 Wave3 最终发布日期确定 jarry 2008-10-6
    +[专业 » 产业观察] 2008中国互联网大会昨日开幕 jarry 2008-9-24
    +[专业 » 产业观察] 有道热闻上线! jarry 2008-9-19
    +[专业 » 产业观察] Phpcms 2008 测试版9月1日开源免费发布 jarry 2008-9-17
    +[专业 » 产业观察] 电脑报介绍的adobe air应用 jarry 2008-9-10
    +[专业 » 产业观察] WordCamp China 2008即将召开 jarry 2008-8-28
    +[专业 » 产业观察] 开发硬件防火墙的主要步骤 jarry 2008-8-11
    +[专业 » 产业观察] 细数20个Windows 7应该拥有的功能 - Windows 7之家--iWindows7.com jarry 2008-8-6
    +[专业 » 产业观察] 互联网运营者和互联网评论者 jarry 2008-6-22
    +[专业 » 产业观察] 有趣的BlogBus暂停服务提示 jarry 2008-6-12
    +[专业 » 产业观察] 谁收入最高?程序员收入大比拼 jarry 2008-6-11
    +[专业 » 产业观察] Blog营销的特征 jarry 2008-6-10
    +[专业 » 产业观察] 推荐一个文内广告平台:群视 jarry 2008-6-8
    +[专业 » 产业观察] Google官方解释为何更换小图标 jarry 2008-6-8
    +[专业 » 产业观察] 二十年前的1GB jarry 2008-6-8
    +[专业 » 产业观察] 【pr=7,震古铄今,PR=8,天人合一】PR境界谈 jarry 2008-6-8
    +[专业 » 产业观察] 大网站谎言,你有没有被欺骗过 jarry 2008-6-8
    +[专业 » 产业观察] blog.35免费绑定域名的wp服务 jarry 2008-6-7
    +[专业 » 产业观察] 腾讯SNS:QQ校友开始内测 jarry 2008-6-7
    +[专业 » 产业观察] 衡量博客价值七个指标 jarry 2008-6-6
    +[专业 » 产业观察] 另类思维:百度是嫖客 我(站长)要学会做小姐 jarry 2008-6-6
    +[专业 » 产业观察] 中国电信承接CDMA后的运营策略 jarry 2008-6-5
    +[专业 » 产业观察] 微软新系统Windows 7桌面截图(16pics) jarry 2008-6-5
    +[专业 » 产业观察] 3G门户:无线互联网门户网站 jarry 2008-6-5
    +[专业 » 产业观察] Retaggr:个性化名片制作 jarry 2008-6-3
    +[专业 » 产业观察] Acrobat:Adobe的网络办公室 jarry 2008-6-3
    +[专业 » 产业观察] 影响博客互动运营的八大因素 jarry 2008-6-2
    +[专业 » 产业观察] 影响中国人通讯习惯的十家公司 jarry 2008-6-2
    +[专业 » 产业观察] 5月浏览器大战升级 FireFox 3份额提升 jarry 2008-6-2
    +[专业 » 产业观察] 为什么很多博客赚不到钱? jarry 2008-5-31
    +[专业 » 产业观察] VIA OpenBook迷你笔记本实物图 jarry 2008-5-31
    +[专业 » 产业观察] 人肉搜索:天使还是魔鬼? jarry 2008-5-30
    +[专业 » 产业观察] 360doc:个人图书馆,网页在线收藏 jarry 2008-5-30
    +[专业 » 产业观察] 时光网:电影、社区、你和我 jarry 2008-5-30
    +[专业 » 产业观察] 十大最让人恼火的软件 jarry 2008-5-27
    +[专业 » 产业观察] 付钱让员工辞职,Zappos 的成功秘诀 jarry 2008-5-27
    +[专业 » 产业观察] 三部委发布电信业重组公告 完成后发三张3G牌照 jarry 2008-5-25
    +[专业 » 产业观察] QQ网络硬盘网页版秘密发布 jarry 2008-5-25
    +[专业 » 产业观察] Google Sites开始向所有人免费开放 建立自己的个人主页 jarry 2008-5-23
    +[专业 » 产业观察] 10个不为人知的Google失败作品 jarry 2008-5-22
    +[专业 » 产业观察] C2Call:基于Web浏览器的网络电话服务 jarry 2008-5-21
    +[专业 » 产业观察] 微软放弃Vista 用Windows 7取而代之 jarry 2008-5-21
    +[专业 » 产业观察] 2008年不可错过的Web2.0产品 jarry 2008-5-21
    +[专业 » 产业观察] 在 Google Earth 上看新闻 jarry 2008-5-21
    +[专业 » 产业观察] 全国哀悼日CCTV启用wenchuan.cn域名 jarry 2008-5-20
    +[专业 » 产业观察] 微软抗衡谷歌计划:200亿并购Facebook jarry 2008-5-20
    +[专业 » 产业观察] 还有什么不能卖?-ebay 十大火星拍卖 jarry 2008-5-19
    +[专业 » 产业观察] 互联网营销——互联网是手段,营销才是本质 jarry 2008-5-13
    +[专业 » 产业观察] 中移动手机邮箱也抄袭? jarry 2007-11-2
    +[专业 » 产业观察] TNND,要彻底放弃MSN了。 jarry 2007-6-11
    +[专业 » 产业观察] 好玩的在线工具 jarry 2006-11-11
    +[专业 » 产业观察] 让收费网站去死吧,用google 突破!! jarry 2005-11-20
    +
    +
    + + + diff --git a/module/scroll.html b/module/scroll.html new file mode 100644 index 000000000000..a013847ec908 --- /dev/null +++ b/module/scroll.html @@ -0,0 +1,15 @@ + + + + +Scroll滚动页面 + + + + +

    不间断滚动

    + + + + + diff --git a/module/sethomepage.html b/module/sethomepage.html new file mode 100644 index 000000000000..ced4d8efbef8 --- /dev/null +++ b/module/sethomepage.html @@ -0,0 +1,491 @@ + + + + +��Ϊ��ҳ_360��ȫ��ַ���� + + + + +
    +
    + + +
    +
      +
      + + + +
      +
      +
      �ȸ�
      +
        +
      • �ٶ�
      • +
      • �ȸ�
      • +
      +
      + + + +
      ����λ�ã�������ҳ > ��ҳ����
      +
      +
      +

      ����ڲ�ͬ��������н�360��ȫ��ַ��Ϊ��ҳ��

      +
      ����������⣬����ϵ����
      +
      +
      + IE����� +
      +

      1.IE������У��ڲ˵����򿪹��� �� Internetѡ�� ���������ԶԻ���

      +

      2.����ҳ���������� http://hao.360.cn��Ȼ���� ȷ�� ���ɽ�360��ȫ��ַ��Ϊ��ҳ��

      +

      +
      +
      +
      + 360��ȫ����� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ���360��ȫ���������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�ڲ˵����� ���� �� ��ҳ���ã�������ҳ���öԻ���

      +

      2.ֱ�ӵ����ʹ��360��ַ��������������ҳ���������� http://hao.360.cn��Ȼ���� ȷ�� ������Ϊ��ҳ��

      +

      +
      +
      +
      + 360��������� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ���360�������������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�����������Ͻǵ�����ͼ��-ѡ�����ѡ��Ի���

      +

      2.�ڻ��������У�ѡ�����ҳ--�򿪴�ҳ--����������� http://hao.360.cn�������رռ��ɣ���������Զ����档

      +

      +
      +
      +
      + chrome����� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ���chrome���������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�����������Ͻǵ�����ͼ��-ѡ�����ѡ��Ի���

      +

      2.�ڻ��������У�ѡ�����ҳ--�򿪴�ҳ--����������� http://hao.360.cn�������رռ��ɣ���������Զ����档

      +

      +
      +
      +
      + Firefox����� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ���Firefox���������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�ڲ˵����� ���� �� ѡ�� ������ѡ��Ի���

      +

      2.����ҳ��Ŀ������� http://hao.360.cn��Ȼ���� ȷ�� ������Ϊ��ҳ��

      +

      +
      +
      +
      + �ѹ������ +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ����ѹ����������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�ڲ˵�����ѡ�񹤾�--�ѹ����������ѡ�����ѡ��Ի���

      +

      2.�ڳ���--���������У�ѡ���Զ�����ַ�����ں���������� http://hao.360.cn��������ȷ�����ɡ�

      +

      +
      +
      +
      + ��������� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ����������������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.������ϽǵIJ˵�--ѡ�������ѡ��ҳ�档

      +

      2.�ڻ�������--����ʱ���У�ѡ����ҳ��������ҳ����������� http://hao.360.cn���������Զ����档

      +

      +
      +
      +
      + ����֮������� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ�������֮�����������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�ڲ˵����� ���� �� ѡ���ѡ������ҳ�档

      +

      2.����ҳ���õĿհ׿������� http://hao.360.cn��Ȼ��������Ŀհ״������Զ����档

      +

      +
      +
      +
      + ����֮����������� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ�������֮���������������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�����������Ͻǵ�����ͼ��-ѡ���ѡ��ҳ�档

      +

      2.�ڻ��������У�ѡ�����ҳ--�򿪴�ҳ--����������� http://hao.360.cn�������رռ��ɣ���������Զ����档

      +

      +
      +
      +
      + ��ɫ����� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ�����ɫ���������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�ڲ˵����� ���� �� GreenBrowserѡ�������ҳ���öԻ���

      +

      2.ѡ�񳣹�-����/�˳�-�Զ�����ҳ��������������� http://hao.360.cn��Ȼ���� ȷ�� ������Ϊ��ҳ��

      +

      +
      +
      +
      + QQ����� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ���QQ���������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�����������Ͻǵ�����ͼ��-ѡ���ѡ��ҳ�档

      +

      2.�ڻ�������-��ҳ-�Զ�����ַ-���� http://hao.360.cn��Ȼ���� ���� ���ɽ�360��ȫ��ַ��Ϊ��ҳ��

      +

      +
      +
      +
      + �ٶ������ +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ��ǰٶ����������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�����������Ͻǵ�����ͼ��-ѡ���ѡ��ҳ�档

      +

      2.ѡ�����-����ʱ��-��ҳ-����ҳ���������� http://hao.360.cn��Ȼ�����հ״��Զ����棬���ɽ�360��ȫ��ַ��Ϊ��ҳ��

      +

      +
      +
      +
      + Safari����� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ���Safari���������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�����������Ͻǵ�����ͼ��-ƫ�����ã���ͨ�ô��ڡ�

      +

      2.ѡ��ͨ�á�������ҳ���������� http://hao.360.cn��Ȼ�����հ״������Զ����棬��360��ȫ��ַ��Ϊ��ҳ��

      +

      +
      +
      +
      + Opera����� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ���Opera���������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.������Ͻ�opera�������ͼ�꣬����--��ѡ�������ѡ��Ի���

      +

      2.ѡ�񳣹�-����-����ҳ-����ҳ���������� http://hao.360.cn��Ȼ���� ȷ�� ���ɽ�360��ȫ��ַ��Ϊ��ҳ��

      +

      +
      +
      +
      + KR����� +
      +

      ���� 360��ȫ��ַ


      +

      ��ʹ�õ���KR���������Ҫ�ֶ�������ҳ���밴���²������У�

      +

      1.�ڲ˵����� ���� �� �޸���ҳ��������ҳ���öԻ���

      +

      2.����ҳ���������� http://hao.360.cn��Ȼ���� ȷ�� ������Ϊ��ҳ��

      +

      +
      +
      +
      + + + +
      + + + + \ No newline at end of file diff --git a/module/slide.html b/module/slide.html new file mode 100644 index 000000000000..3b1c54768883 --- /dev/null +++ b/module/slide.html @@ -0,0 +1,11 @@ + + + + +slide幻灯片大全 + + + + + + diff --git a/module/vertical-middle.html b/module/vertical-middle.html new file mode 100644 index 000000000000..645a28a2e8e5 --- /dev/null +++ b/module/vertical-middle.html @@ -0,0 +1,50 @@ + + + + +vertical-align:middle + + + + + + + +
      +
      +
      + + + +
      +
      不定高度图片/容器自适应垂直居中(你可以随意更换内部图片的大小,可以自适应垂直居中)
      +
      + +
      +
      +
      +
      + +
      +
      +
      不定高度图片/容器自适应垂直居中(容器同上)
      +
      + + + + diff --git a/module/white-space_pre-wrap.html b/module/white-space_pre-wrap.html new file mode 100644 index 000000000000..ed54e94163bc --- /dev/null +++ b/module/white-space_pre-wrap.html @@ -0,0 +1,25 @@ + + + + +关于white-space: pre-wrap属性 + + + +
      +

      更多渐进增强的资料:

      + +
      + + + diff --git a/module/word-wrap/floatingPanel.css b/module/word-wrap/floatingPanel.css new file mode 100644 index 000000000000..a079e7a2c20e --- /dev/null +++ b/module/word-wrap/floatingPanel.css @@ -0,0 +1,74 @@ + +#translator-floating-panel { + -moz-border-radius: 12px; + background: transparent; + border: 0; + border-radius: 12px; + bottom: auto; + color: #111; + cursor: pointer; + font-family: Helvetica, Arial, sans-serif; + font-size: 13px !important; + font-style: normal; + font-weight: normal; + height: auto; + left: 0; + margin: 0; + max-height: 16px; /* limit size to avoid animation glitch */ + max-width: 16px; /* limit size to avoid animation glitch */ + min-height: 0; /* this should overwrite any external styles */ + min-width: 0; /* this should overwrite any external styles */ + opacity: 0.4; + overflow: hidden; + outline: 0; + padding: 0; + position: fixed; + right: auto; + text-align: left; + top: 0; + width: auto; + z-index: 2147483647; +} + #translator-floating-panel:hover { + opacity: 1; + } + +#translator-floating-panel * { + background: transparent; + border: 0; + color: inherit; + cursor: inherit; + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-weight: inherit; + height: auto; + margin: 0; + opacity: 1; + overflow: auto; + outline: 0; + padding: 0; + text-align: inherit; + text-decoration: none; + width: auto; +} + +#translator-floating-panel.translator-theme-original { + background-color: #D9C6B6; + border: 1px #784F2B solid; + padding: 2px; +} +#translator-floating-panel.translator-theme-default { + background-color: #F0F0F0; + border: 1px #979797 solid; + padding: 2px; +} +#translator-floating-panel.translator-theme-system { + -moz-appearance: dialog; +} + +#translator-floating-panel-button { + background: url('chrome://translator/skin/icons.png') top left no-repeat; + height: 16px; + width: 16px; +} \ No newline at end of file diff --git a/module/word-wrap/word-wrap.html b/module/word-wrap/word-wrap.html new file mode 100644 index 000000000000..fba1e2533d7f --- /dev/null +++ b/module/word-wrap/word-wrap.html @@ -0,0 +1,180 @@ + + + + + word wrap + + + + + + + + +
      + + + +
      +

      ����һ�δ�������ģ���ʹ�б���������Σ����������ô����ô�����ɲ��� Microsoft Office Word�� + ���������� html �ĵ���������һ�����У� + �޶Բ��𣬼�����һ��Ӣ�ģ��Ҳ��ǹ���ġ���������Ͳ���ʾ���ĺͺ�������������ˡ��� + ������΢�����Ǻܴ����ģ�����ʵ�ֵ� word-break keep-all ������Կ�������һ�㣡 + ���ˣ����пո�Ҫ����һ�µġ���G-Cup ���� �̣�

      + +

      Once there's a Chinese word called "������". + (new line inserted here) + It is said that this word represents a kind of animal - which is horse. + In English, the "������" may be translated to "HiGuysInFactImNotTheTranslationButADamnLongWordHaHaa". + Hey my friend, don't care the crazy translator. + Even you can turn the long word back to Chinese "Ӣ���м�����һ����ô�������Ļ��������������Ŀ�Դ�"

      + +

      ���� inline-block ϵ�еĺ��ӣ�����ҲҪ�ŵ���������� IE67������ hasLayout �� inline ����ģ�⡣ + �ܳ��ܳ��ܳ��ܳ��ܳ��ܳ��ܳ����������ں����ڴ� + �ܳ��ܳ����������ں����ڴ��ܳ����������ں����ڴ� + ���������ں���ALongLongLongLongLongLongNoneBreakingBox + a long long long long long breaking inline-block box + a short inline-block boxboxfk + + inline-block box���ں������ں���

      + +

      ��һ������ͼƬ���� + + + + + + +

      + +

      ��һ�����Ը������� + �ܳ��ܳ��ܳ��ܳ��ܳ��ܳ��ܳ������ĸ��������ڴ� + �ܳ��ܳ������ĸ��������ڴ��ܳ������ĸ��������ڴ� + �����ĸ�������ALongLongLongLongLongLongNoneBreakingBox + + a long long long long long breaking floating box + a short floating boxboxfk + floating box����������������

      + + +
      + + + + + + + + + +
      +
      + + +
      + + + +

      white-space �� white-space-collapsing �� text-wrap ����д(wrap�Զ�����)
      +break-word ���һ����û�������ɽ��ܵĶϵ㣬��ô��ǿ�жϿ��ı�����
      +�� IE ��ʵ��Ч���У�word-break ��Ч��Ҫ�����ö࣬�����׼���ضϿ����е��ʣ��������߽�Ļ���
      +���� W3C ��������˵��word-wrap ��������Զ����з�ʽ������ǿ�жϿ����ʡ�����ʵ����ǣ�word-break: break-all; �ķ�ʽҪ��Ϊ����
      �Ա� word-wrap: break-word; �� word-break: break-all;�����߶����ı��޶����������ķ�Χ�ڣ�ֻ�� break-all �����е��ʣ����۳��̵أ�ͨͨ�ضϣ�break-word �����ˣ���������������Ű����

      + +

      ʵ������

      +
        +
      • ����������������ݣ��ɿصģ�����ʹ���κ� word-wrap �� word-break �����ԣ����ڿ��ܲ����ij������������С�����¼������ȿ������������Ƿ��������ο���Ϊ�������������ַ�“-”�Ա�����ضϿ���������� overflow: hidden; �����Ӿ��ϵ������
      • +
      • �����û���������ݣ����ɿصģ����������۵ȣ����ڲ��ų��û�������“dddddddddddd”����ûӪ�����������ݣ�ʹ�� word-wrap: break-word; ��ǿ�нضϡ�
      • +
      +

      ���Ĺ۵�

      +
        + +
      • ������ȫǨ�Ͳ�����������Ϊ��ʱ������ʵ������
      • +
      • �����Ĭ���Ѿ����ù��ã�ǿ������ break-all; ������ָ���Dz����ŵġ�
      • +
      • �����಻����ʵ�֣���������ƣ�������̫խ����
      • +
      • ���� bug �����ʹ�� hack ���ɣ��������ǵĴ���
      • +
      +

       

      + \ No newline at end of file diff --git "a/module/\347\273\235\345\257\271\345\256\232\344\275\215/index.html" "b/module/\347\273\235\345\257\271\345\256\232\344\275\215/index.html" new file mode 100644 index 000000000000..86805173be24 --- /dev/null +++ "b/module/\347\273\235\345\257\271\345\256\232\344\275\215/index.html" @@ -0,0 +1,32 @@ + + + + +绝对定位 + + + + +
      height:1000px; width:980px; margin:0 auto; border:1px solid #ccc;
      +
      +
      专家QQ交流 +

      当前有18
      位患者在咨询

      +

      在线咨询专家 + 免费预约挂号

      +
      +
      + + diff --git "a/module/\347\273\235\345\257\271\345\256\232\344\275\215/zxfd.png" "b/module/\347\273\235\345\257\271\345\256\232\344\275\215/zxfd.png" new file mode 100644 index 000000000000..4f56fe4a109c Binary files /dev/null and "b/module/\347\273\235\345\257\271\345\256\232\344\275\215/zxfd.png" differ diff --git "a/module/\350\203\214\346\212\225\346\264\273\345\212\250\350\256\276\347\275\256.html" "b/module/\350\203\214\346\212\225\346\264\273\345\212\250\350\256\276\347\275\256.html" new file mode 100644 index 000000000000..267d46b15b1f --- /dev/null +++ "b/module/\350\203\214\346\212\225\346\264\273\345\212\250\350\256\276\347\275\256.html" @@ -0,0 +1,55 @@ + + + + + + + + + + +
      +
      +
      点击参与活动 + +
      + + + +
      网站主体
      + + +
      +
      + + \ No newline at end of file diff --git a/pandora/img/ext.png b/pandora/img/ext.png new file mode 100644 index 000000000000..d0b54c10f7cb Binary files /dev/null and b/pandora/img/ext.png differ