开发日记，Bootstrap Mate，记录在开始的时候
很久以来一直有个想法，让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 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 for="vb_login_username">User Name:</label> <div 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 for="vb_login_username">Password:</label> <div 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 id="cookieuser" name="cookieuser" value="1"> Remember Me? </label> </div> </div> <div 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>