软件技术-零基础编写响应式登录页面

欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】

让网页自动适应电脑、手机等不同屏幕宽度，一套代码多重效果。

上一篇文章：软件技术-零基础Golang编写文件服务器
人工智能通识-2019年3月专题汇总

页面基础

我们改进login.html文件，使用Go Live按钮启动实时预览。
可能需要从Preference-Settings修改"liveServer.settings.root":"/web/",使适合你的$GOPATH下的web文件夹路径。

修改代码为:

注意底部的三个

这段代码比较多，但只要看改变的

....这个大标签的内容：

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代码，这个代码稍后我们补充。
点击阅读，需要在page文件夹下添加一个areement.html文件，因为和login.html在同一文件夹下所以不需要再加/page。

更多的代码含义，有兴趣可以参考Bootstrap官方说明的components元素部分。

浏览器显示效果如下图（sm中等窗口和xs手机效果）：

关于人工智能通识理论的知识暂停了几条，不过很快就会更新，希望大家对这些编程知识也有兴趣~

欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】

如果您发现文章错误，请不吝留言指正；
如果您觉得有用，请点喜欢；
如果您觉得很有用，欢迎转载~

END