很久以来一直有个想法，让html不用写javascript代码，就可以动起来。我的目标很明确，就是两点：
1、不污染html，页面的html元素由使用者自己规范
2、不需要手写js代码，就能完成页面交互
以前也付出了实际行动，但总是不能取得很好的成果，第一个目标不能很好的达成，按照老的组件思路走，或多或少都要约束html元素结构，一段时间卡死在此。
一天无意看到了Bootstrap 2.0发布的新闻（1.0版的我没接触过），好奇点开看了下，顿时脑袋中产生了很多想法，长时间困扰我的问题可以得到妥善的解决――就是不污染html，bootstrap是一个对html元素强约束的框架，与我的思想形成一个互补。从此，第一个目标达成，Bootstrap Mate就这么诞生了。
?
下面这个例子是一个登入表单：
?
?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login to Sencha Forum - Bootstrap Mate</title>
<link href="../bootstrap/2.0.3/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/2.0.3/css/bootstrap-responsive.css" rel="stylesheet">
<link href="../shared/example.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Login to Sencha Forum</h1>
</div>
<form class="form-horizontal" method="POST" action="http://www.sencha.com/login/forum/login.php?do=login" data-inject="true"
data-mode="remote" data-use-ajax="false" data-press-enter="true">
<fieldset>
<input type="hidden" name="do" value="login">
<input type="hidden" name="vb_login_md5password" value="">
<input type="hidden" name="vb_login_md5password_utf" value="">
<input type="hidden" name="s" value="">
<input type="hidden" name="securitytoken" value="guest">
<input type="hidden" name="url" value="http://www.sencha.com/">
<div class="control-group">
<label class="control-label" for="vb_login_username">User Name:</label>
<div class="controls">
<input type="text" class="input-xlarge" id="vb_login_username" name="vb_login_username"
data-required="true" data-required-text="用户名不能为空"
data-typing-text="6-12个字符"
data-min-length="6" data-min-length-text="用户名长度不能小于{0}"
data-max-length="12" data-min-length-text="用户名长度不能大于{0}">
<span class="help-inline"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="vb_login_username">Password:</label>
<div class="controls">
<input type="password" class="input-xlarge" id="vb_login_password" name="vb_login_password"
data-required="true" data-required-text="密码不能为空"
data-typing-text="6-20个字符"
data-min-length="6" data-min-length-text="密码长度不能小于{0}"
data-max-length="20" data-min-length-text="密码长度不能大于{0}">
<span class="help-inline"></span>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox inline"> <input type="checkbox" id="cookieuser" name="cookieuser" value="1"> Remember Me? </label>
</div>
</div>
<div class="form-actions">
<button class="btn btn-primary" data-config="submit-button">Log in</button>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript" src="../jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../../bootstrapmate-debug.js"></script>
</body>
</html>