<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jLightenDarken Demo with Bootstrap Framework integration.</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {
color:#fff;
background-color:#ffffff;
}
div.alert, div.panel {
background-color:#2196f3;
color:#ffffff;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<div class="panel panel-default bgDarken-4">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-4 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
<div class="panel panel-default bgDarken-8">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-8 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-16">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-24">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-40">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
<div class="panel panel-default bgDarken-48">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-64">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-80">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
<div class="panel panel-default bgDarken-96">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
<div class="panel panel-default bgDarken-124">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-140">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-148">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-156">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
<div class="panel panel-default bgDarken-164">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-192">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-24 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-224">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
\t <div class="panel panel-default bgDarken-255">
\t \t <div class="panel-body">
\t \t \t Lorem ipsum
\t \t </div>
\t \t <div class="panel-footer bgLighten-16 txtDarken-255"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero...</div>
\t </div>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-8 col-xs-offset-2 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
<div class="alert alert-info bgLighten-16"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-24"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-32"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-40"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-48"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-56"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-64"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-80"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-96"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-124 txtDarken-124"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-156 txtDarken-156"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-164 txtDarken-164"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-180 txtDarken-180"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-192 txtDarken-196"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-216 txtDarken-224"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-232 txtDarken-248"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
<div class="alert alert-info bgLighten-256 txtDarken-256"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus neque, pretium eget elit sit amet, maximus pretium libero... </div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">!function(n){function t(n){return null==n||""==n||"rgba(0, 0, 0, 0)"===n||"transparent"===n}function o(n){var i=n.parent(),r=n.css("background-color");return t(r)&&(r=i&&null!=i?o(i):""),r}function r(n){var i=n.parent(),o=n.css("color");return t(o)&&(o=i&&null!=i?r(i):""),o}function s(n){var t=n.split("-"),i=[];return 2==t.length?(i.functionality=t[0],i.amount=parseInt(t[1]),i):void 0}function l(t){var o,l,a,e,h=[],c=[],u=[];for(e=0,j=0;j<t.length;j++){"txtLighten"==t&&(e=1),"txtDarken"==t&&(e=-1),o=n('div[class*="'+t+'"]');var g,f=0,p=[];for(n.each(o,function(){for($klassKolor=r(n(this)),p.push($klassKolor.match(/\d+/g)),h.push($klassKolor),l=n(this).prop("class").split(" "),k=0;k<l.length;k++)-1!=l[k].search(t)&&(a=s(l[k]),c.push(a.amount))}),f=0;f<p.length;f++){for(g=p[f],i=0;i<g.length;i++)g[i]=parseInt(g[i])+c[f]*e,g[i]>=255&&(g[i]=255),g[i]<=0&&(g[i]=0),g[i]=g[i].toString(16),g[i].length<2&&(g[i]="0"+g[i]);u.push("#"+g.join(""))}}n.each(o,function(t){n(this).css("color",u[t])})}function a(t){var r,l,a,e,h=[],c=[],u=[];for(e=0,j=0;j<t.length;j++){"bgLighten"==t&&(e=1),"bgDarken"==t&&(e=-1),r=n('div[class*="'+t+'"]');var g,f=0,p=[];for(n.each(r,function(){for($klassKolor=o(n(this)),p.push($klassKolor.match(/\d+/g)),h.push($klassKolor),l=n(this).prop("class").split(" "),k=0;k<l.length;k++)-1!=l[k].search(t)&&(a=s(l[k]),c.push(a.amount))}),f=0;f<p.length;f++){for(g=p[f],i=0;i<g.length;i++)g[i]=parseInt(g[i])+c[f]*e,g[i]>=255&&(g[i]=255),g[i]<=0&&(g[i]=0),g[i]=g[i].toString(16),g[i].length<2&&(g[i]="0"+g[i]);u.push("#"+g.join(""))}}n.each(r,function(t){n(this).css("background-color",u[t])})}n.fn.jLightenDarken=function(){l("txtLighten"),l("txtDarken"),a("bgLighten"),a("bgDarken")}}(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('body').jLightenDarken();
});
</script>
</body>
</html>
非常感谢您的回答。我刚刚更新了我的问题。如果你有时间，我希望你看看它。你是否仍然认为你的解决方案是最好的方法？ – Mimi
该原则仍然适用，你可以为你的泛型风格有一个泛型类（这意味着有30个类正在做同样的事情，我个人更喜欢我的解决方案在“.wrapper> div”之上），并且对每种颜色都有一个特定的类...回答你的问题..是 – Alex