欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】
让网页自动适应电脑、手机等不同屏幕宽度，一套代码多重效果。
上一篇文章：软件技术-零基础Golang编写文件服务器
页面基础
我们改进login.html文件，使用Go Live按钮启动实时预览。
可能需要从Preference-Settings修改"liveServer.settings.root":"/web/",使适合你的$GOPATH下的web文件夹路径。
修改代码为:
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>我的站点</title>
</head>
<body>
<h1>注册页面</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
注意底部的三个<script>标签，script是脚本的意思，什么是脚本？其实就是一段代码，可以用来改变页面或者执行什么动作的。
这里使用了三个别人编写好的脚本代码文件，分别是jquery、popper、bootstrap。
- jquery是用来操纵页面上的元素的，比如自动删掉或者增加标签元素；还可以用来自动向服务器发送数据请求（还记得服务器主要提供页面或者数据吗？）。
- popper是用来创建浮出提示文字的，我们到以后才会用到，先不用管。
- bootstrap就厉害了，它给我们提供了很多现成的漂亮页面元素，——我们自己编写的标签太简陋了，不是吗？
另外注意顶部的<!doctype html>，感叹号开始的标签式注释，就是说没啥用的只用来做说明备忘的字符，但这里是有点用的，就是说我们这个页面是符合最新html规范(html5)的代码。
其他的内容不必太在意，其实这个代码是来自Bootstrap官方的模板，稍微改进了一点点，有兴趣可以点击这里参考原版说明。
输入框
我们来创建用户名和密码的输入框：
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>我的站点</title>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center" style="margin-top:100px;margin-bottom:20px">
<h4>注册页面</h4>
</div>
<div class="row justify-content-center">
<div class="col-xs-10 col-sm-8 col-md-6 col-lg-4 col-xl-3">
<div class="form-group">
<label for="exampleInputEmail1">邮箱：</label>
<input id='email' type="email" class="form-control" aria-describedby="emailHelp" placeholder="请输入正确格式的邮箱">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码：</label>
<input id='pw' type="password" class="form-control"
placeholder="请输入6~18位密码">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">
<span>同意用户协议:</span>
<a href='agreement.html'>点击阅读</a>
</label>
</div>
<br>
<button onClick="sendRegPost()" class="btn btn-primary btn-block">提交</button>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
<script type="text/javascript">
function sendRegPost() {
var data = {
email: $('#email').val(),
pw: $('#pw').val(),
}
console.log(data);
$.post('/api/register', data, function (res) {
console.log(res);
})
}
</script>
</html>
这段代码比较多，但只要看改变的<body><div>....这个大标签的内容：
-
class="row justify-content-center"这个表示元素是一横行row，并且内容居中对齐justify-content-center。 -
class="col-xs-10 col-sm-8 col-md-6 col-lg-4 col-xl-3"这个表示元素是竖着的一列，但宽度会随着浏览器的宽度而变化（浏览器窗口是可以横向拉宽或者拉窄的），怎么变化呢？很窄xs的时候（比如手机上）元素宽度占浏览器宽度的10/12，比较窄sm的时候占8/12,中等md的时候占6/12,大一些时候占4/12,超大xl时候占3/12。——这个12就是表示浏览器宽度，你可以拉动浏览器窗口观察效果。 -
inpput和旋钮checkbox以及一个提交按钮button。 -
id='email'，给输入框命名，下面我们要用到这个输入框的内容。 -
onClick="sendRegPost()",当这个元素被点击的时候执行sendRegPost代码，这个代码稍后我们补充。 -
<a href='agreement.html'>点击阅读</a>，需要在page文件夹下添加一个areement.html文件，因为和login.html在同一文件夹下所以不需要再加/page。
更多的代码含义，有兴趣可以参考Bootstrap官方说明的components元素部分。
浏览器显示效果如下图（sm中等窗口和xs手机效果）：
关于人工智能通识理论的知识暂停了几条，不过很快就会更新，希望大家对这些编程知识也有兴趣~
欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】
每个人的智能新时代
如果您发现文章错误，请不吝留言指正；
如果您觉得有用，请点喜欢；
如果您觉得很有用，欢迎转载~
END
有疑问加站长微信联系（非本文作者）
