<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Title -->
<title>Bootstrap和jQuery聊天窗口自动回复</title>
<!-- Bootstrap Css -->
<link href="assets/plugins/bootstrap-4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<!-- Chat Plugin css-->
<link href="assets/plugins/chat/jquery.convform.css" rel="stylesheet" />
<style>
button {
font-family: 'Microsoft YaHei';
}
</style>
</head>
<body class="">
<div class="col-md-6">
<div class="card">
<div class="card-body p-6">
<div id="demo">
<div class="vertical-align">
<div class="p-0">
<div class="row">
<div class="col-sm-12">
<div class="no-border">
<div id="chat" class="conv-form-wrapper">
<form method="GET" class="hidden">
<select data-conv-question="Hello! 这是一个不错的聊天窗口插件，带自动回复功能，要继续吗？" name="first-question">
<option value="yes">好的</option>
<option value="sure">当然!</option>
</select>
<input type="text" name="name" data-conv-question="当然自动回复是模拟的静态数据">
<input type="text" data-conv-question="当然你可以使用ajax调用后台数据库" data-no-answer="true">
<input type="text" data-conv-question="看起来很棒吧" data-no-answer="true">
<select name="multi[]" data-conv-question="你肯定喜欢这个聊天插件" multiple>
<option value="Rock">Rock</option>
<option value="Pop">Pop</option>
<option value="Country">Country</option>
<option value="Classic">Classic</option>
</select>
<select name="programmer" data-callback="storeState" data-conv-question="更多优秀Bootstrap插件访问bootstrapmb.com">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div data-conv-fork="programmer">
<div data-conv-case="yes">
<input type="text" data-conv-question="A fellow programmer! Cool." data-no-answer="true">
</div>
<div data-conv-case="no">
<select name="thought" data-conv-question="Have you ever thought about learning? Programming is fun!">
<option value="yes">Yes</option>
<option value="no">No..</option>
</select>
</div>
</div>
<input type="text" data-conv-question="convForm also supports regex patterns. Look:" data-no-answer="true">
<input data-conv-question="Type in your e-mail" data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" id="email" type="email" name="email" required placeholder="What's your e-mail?">
<input data-conv-question="Now tell me a secret (like a password)" type="password" data-minlength="6" id="senha" name="password" required placeholder="password">
<select data-conv-question="Selects also support callback functions. For example, try one of these:">
<option value="google" data-callback="google">Google</option>
<option value="bing" data-callback="bing">Bing</option>
</select>
<select name="callbackTest" data-conv-question="You can do some cool things with callback functions. Want to rollback to the 'programmer' question before?">
<option value="yes" data-callback="rollback">Yes</option>
<option value="no" data-callback="restore">No</option>
</select>
<select data-conv-question="This is it! If you like me, consider donating! If you need support, contact me. When the form gets to the end, the plugin submits it normally, like you had filled it.">
<option value="">Awesome!</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Dashboard js -->
<script src="assets/js/vendors/jquery-3.2.1.min.js"></script>
<!-- Chat js -->
<script src="assets/plugins/chat/jquery.convform.js"></script>
<script src="assets/js/chat.js"></script>
</body>
</html>
<!--下面是无用代码-->
<a href="http://www.bootstrapmb.com" style="display:none">bootstrapmb</a>
Bootstrap和jQuery前端聊天样式+自动回复
192 浏览量
2023-04-26
12:55:07
上传
评论
收藏 70KB RAR 举报
Bootstrap和jQuery聊天自动回复前端.rar （8个子文件） 
assets plugins chat 
jquery.convform.js 22KB autosize.min.js 3KB jquery.convform.css 8KB bootstrap-4.1.3 js bootstrap.min.js 50KB css bootstrap.min.css 138KB js vendors jquery-3.2.1.min.js 85KB chat.js 1KB
index.html 7KB资源评论
