欢迎使用响应式前端框架 1.2
QQ:522588122

浏览器支持

推客框架的目标是适合PC及移动设备端最新版的浏览器，同时对历史版本的浏览器同样支持，但对一些老旧浏览器的支持会有偏差，部份效果无法显示，但功能是完整的。

支持的浏览器

我们坚决支持以下浏览器的最新版本：

  • Chrome (Mac、Windows、iOS和Android)
  • Safari (Mac和iOS版)
  • Firefox (Mac、Windows)
  • Internet Explorer
  • Opera (Mac、Windows)
浏览器缩放 当设置浏览器大百分比之时，会引布局错位，所有网站都有此问题，因此可以忽略这情况。

IE 6,7,8支持

IE6 ,IE7

因微软于2013年对xp的IE6,7用户强制升级至IE8，win7的IE8强制升级至IE9，虽然大部份效果支持IE6,7，但推客并不再针对IE6及IE7特别支持。

Internet Explorer 8

推客前端框架支持Internet Explorer8版本，然而，因其不支持CSS3及HTML5，所以圆角、阴影、动画等CSS3及HTML5的专有属性是无法被支持。

IE 8 与 Respond.js

因IE8不支持CSS的媒体查询(media query)，因此，需引入respond.js才能使其实现媒体查询功能。

浏览器渲染及高速模式

兼容模式处理

推客并不支持 IE 的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 meta 标签加入到你页面的 head 中：
<meta http-equiv="X-UA-Compatible" content="IE=edge">

高速模式

国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 推客 构建的网站展现效果很糟糕的情况。
为了让浏览器运行高速模式下，建议将此 meta 标签加入到你页面的 head 中：
<meta name="renderer" content="webkit">


移动优先、跨屏响应

推客以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面的同时，更适应了移动互联网的潮流。

跨屏响应式布局

推客内置了相关的响应式类，如响应式网格系统、响应式图片、响应式表格等，使用响应式类，可以在各种屏幕大小上自动适合设备。

模板示例

<!DOCTYPE html> <html lang="zh-cn"> <head> <title>推客前端框架跨屏响应式模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="p.css"> <script src="jquery.js"></script> <script src="p.js"></script> <script src="respond.js"></script> </head> <body> <div class="container"> <div class="line"> <div class="xs6 xm4 xb3">xs6 xm4 xb3</div> <div class="xs6 xm4 xb3">xs6 xm4 xb3</div> <div class="xs6 xm4 xb3">xs6 xm4 xb3</div> <div class="xs6 xm4 xb3">xs6 xm4 xb3</div> </div> <div class="table-responsive"> <table class="table">...</table> </div> <img src="..." class="img-responsive" alt="..."> </div> </body> </html>

非响应式布局

当然，也可以采用非响应式布局方式，这种情况在所有设备上看到的页面大小是固定的，对特定项目可以使用；正常情况下，默认是响应式的布局方式。

禁用方法

  • 网格系统采用常规布局的方式。
  • 不使用响应式相关的类。

模板示例

<!DOCTYPE html> <html lang="zh-cn"> <head> <title>推客前端框架非响应式模板</title> <link rel="stylesheet" href="p.css"> <script src="jquery.js"></script> <script src="p.js"></script> <script src="respond.js"></script> </head> <body> <div class="container"> <div class="line"> <div class="x3">x3</div> <div class="x9">x9</div> </div> <div class="line"> <div class="x4">x4</div> <div class="x4">x4</div> <div class="x4">x4</div> </div> <div class="line"> <div class="x6">x6</div> <div class="x6">x6</div> </div> </div> </body> </html>


HTML模版

使用简单的HTML模版页面，包含CSS及JS文件，建议根据自己的需求做相关的修改再使用，如关键字、书签、代码等。

<!DOCTYPE html> <html lang="zh-cn"> <head> <title>推客前端框架HTML模版</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="p.css"> <script src="jquery.js"></script> <script src="p.js"></script> <script src="respond.js"></script> </head> <body> <h1>您好，欢迎使用推客前端框架!</h1> </body> </html>
引用顺序 jQuery.js在p.js之前引用，如有自定义的CSS或JS，请在p.css及p.js之后引用，同时为了IE8下正常使用响应式，自定义的CSS文件应在respond.js之前引用。

自定义颜色

推客框架包含可三类颜色体系，第一类为可自定义的前端配色体系，包含主色、辅色、背景色、融合色和点缀色；第2类为无色系，包含黑、灰、白三色；第三类为彩色系,包含红、黄、蓝、绿四色，同时也由此衍生的淡红、淡黄、淡蓝、淡绿的背景色。

可定义的色系

三类色系中，推客提供固定的第二、第三类色系的同时，也提供了可自定义的第一类色系，可根据项目要求，自主修改配色体系，使得前端色彩配置灵活而丰富。 具体修改方法为，打开p.css，将文档拉到页尾，即可看到可供修改的颜色；
/*--------自定义链接颜色(可选)--------*/ a{color:#333;text-decoration:none;} /*链接-颜色*/ a:focus,a:hover{color:#0a8;} /*链接-悬浮颜色*/ /*--------自定义文本颜色--------*/ * {color:#08a;} /*文本-主色*/ * {color:#0ae;}/*文本-辅色*/ * {color:#efe;} /*文本-背景色*/ * {color:#aed;} /*文本-融合色*/ * {color:#e33;} /*文本-点缀色*/ /*--------自定义背景色--------*/ * {background-color:#0a8;} /*背景-主色*/ * {background-color:#0ae;} /*背景-辅色*/ * {background-color:#efe;} /*背景-背景色*/ * {background-color:#aed;} /*背景-融合色*/ * {background-color:#e33;} /*背景-点缀色*/ /*--------自定义边框色--------*/ * {border-color:#0a8;} /*边框-主色*/ * {border-color:#0ae;} /*边框-辅色*/ * {border-color:#efe;} /*边框-背景色*/ * {border-color:#aed;} /*边框-融合色*/ * {border-color:#e33;} /*边框-点缀色*/ /*--------自定义按钮悬浮文本、边框及背景色--------*/ * {color:#fff;border-color:#0ab;background-color:#0ab;} /*主色-文本-边框-背景*/ * {color:#fff;border-color:#09f;background-color:#09f;} /*配色-文本-边框-背景*/ * {color:#333;border-color:#cec;background-color:#cec;} /*背景色-文本-边框-背景*/ * {color:#333;border-color:#cec;background-color:#cec;} /*融合-文本色-边框-背景*/ * {color:#fff;border-color:#f00;background-color:#f00;} /*点缀色-文本-边框-背景*/
颜色修改 链接可根据系统可选择性的修改；其他的文本色、背景色、边框色改成自身项目对应的主色、辅色、背景色、融合色及点缀色，按钮悬浮色一般会用较深点或较淡点颜色，具体自主定义。

改为直角

框架默认的样式，大部份采用圆角样式，因IE8以下浏览器不支持CSS3，显示的是直角；当在支持CSS3的浏览器上，如果想要改为直角形式，只需在p.css最后或自定义的CSS文件加上以下代码，即实现了样式的直角化。

blockquote,.drop-menu,.nav ul,.nav.nav-main li:first-child,.nav.nav-main li:first-child a,.nav.nav-main li:last-child a,.nav.nav-sub a,.nav.nav-tabs a,.bg-inverse .nav.nav-tabs a,.bg-inverse .nav.nav-tabs .active a,.selected-inline li,.progress,.progress .progress-bar:last-child,.range,.range-bar,.panel,.panel-head,.panel-foot,.tab .tab-nav li a,.tab .tab-body-bordered,.dialog,.dialog .dialog-head,.tip,.tip .tip-body,.tip .image,.alert,.pagination li,.pagination .active,.pagination a:hover,.pagination-group,.pagination-group li:first-child,.pagination-group li:last-child,.pager li a{border-radius:0;}
圆角元素 在使用习惯中，徽章、标签、胶囊、圆点等元素为圆角的，直角解决方案中为不包含此类元素，此类元素个别需要改为正角的，在元素上添加.radius-none可消除圆角效果。
按钮和表单，有时也会用到直角的需要，则以同样方式加上以下代码：
.button,.button-group .button-group:first-child .dropdown-toggle,.button-group .button-group:last-child .button:first-child,.button-group-y .button-group:first-child .dropdown-toggle,.button-group-y .button-group:last-child .button:first-child,.input,.input-group .addon,.input-inline input:first-child,.input-inline input:last-child,.input-block input:first-child,.input-block input:last-child{border-radius:0;}




版权所有 © domsn.com