基于OpenWrt的PPTP插件适配Bootstrap

来源：互联网发布：java中的scanner 编辑：程序博客网时间：2024/06/14 00:00

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' onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\W]/g,''))"  />

0 0