基于OpenWrt的PPTP插件适配Bootstrap

1、下载bootstrap.css

2、先引入bootstrap.css再引入bootstrap.js

例：

<link rel="stylesheet" href="../../css/bootstrap.css">    

		<script type="text/javascript" src="../../jquery-1.9.1.js"></script>

	 	<script type="text/javascript" src="../../bootstrap.js"></script>

好处是直接给标签配置class就可以，按照bootstrap的手册。就会出来不同样式。界面很漂亮。

Bootstrap是适配还是比较简单。遇到的问题记录一下：

1、在给老大演示时，截图为了截全，就把Chrome调节了缩放比例，结果一些文字出现不对齐现象，后来经过排查是浏览器这的问题。

2、由于系统本身的原因，短时间暴力开关数十遍会造成返回值错误，导致UI卡死。为解决这个问题，在开关和配置信息设置时加入了延时菊花progress，这个的使用需要引入bootstrap.css。

	<div class="plugin-modal" id="plugin_modal" >
	</div>
	<div class="modal fade wide in" aria-hidden="false" style="display: block;overflow-y:hidden;">
		<div class="modal-dialog pop-dialog" style="margin-top: 200px; max-width: 350px;">
			<div class="modal-content pop-content" >
				<div class="modal-title pop-title">
				</div>
				<div class="modal-body pop-body">
					<div>
						<div class="pop-body-ingstyle">
							<div class="ingstyle-icon icon-refresh">
							</div>
							<p class="ingstyle-text">处理中，请稍候...</p>
						</div>
					</div>
				</div>
				<div class="modal-foot pop-foot">
				</div>
			</div>
		</div>
	</div>

使用：

$('.progress').show();
$('.ingstyle-text').text('请稍后……');

执行完后：

$('.progress').delay(1000).hide(0);

3、为了防止用户乱输入，使用了下边这个正则，使之只能输入数字，字母或数字字母组合，并且防止复制粘贴过来不合法字符。

<input type='text' class='username' οnkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\W]/g,''))"  />