使用BootStrap制作用户登录UI

先看看劳动成果

布局

左右各一半（col-md-6）
左侧登录框占左侧一半的10/12
右侧是登录系统的注意事项

使用到的BootStrap元素

well
输入框组（input-group）
按钮（btn-success）

HTML代码

<div class="row" style="margin-top:30px;"><div class="col-md-6" style="border-right:1px solid #ddd;">
<div class="well col-md-10">
<h3>用户登录</h3><div class="input-group input-group-md"><span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span><input type="text" class="form-control" placeholder="用户名" aria-describedby="sizing-addon1"></div><div class="input-group input-group-md"><span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span><input type="password" class="form-control" placeholder="密码" aria-describedby="sizing-addon1"></div><div class="well well-sm" style="text-align:center;"><input type="radio" name="kind" value="tea"> 老师<input type="radio" name="kind" value="stu"> 学生</div><button type="submit" class="btn btn-success btn-block">登录</button></div>
</div>
<div class="col-md-6">
<h3>
欢迎使用学生作业管理系统
</h3>
<ul>
<li>学生使用<em>学号</em>登录，初始密码为<em>6个1</em>，登录后请及时修改密码</li>
<li>老师请使用<em>工号</em>登录，初始密码为<em>6个1</em>，登录后请及时修改密码</li>
</ul>
</div></div>

CSS代码

    .input-group{margin:10px 0px;//输入框上下外边距为10px,左右为0px}h3{padding:5px;border-bottom:1px solid #ddd;//h3字体下边框}li{list-style-type:square;//列表项图标为小正方形margin:10px 0;//上下外边距是10px}em{//强调的样式color:#c7254e;font-style: inherit;background-color: #f9f2f4;}

本文首发于顶求网，转载请注明来源

转载于:https://www.cnblogs.com/nerd/p/5757465.html

使用BootStrap制作用户登录UI相关推荐

3、Vue+ElementUI制作用户登录页面
前面两篇简单了解了一下vue和SPA,现在来用Vue+ElementUI做一个用户登录页面,ElementUI是Element出的一套针对vue的UI库,类似的UI库非常多,ElementUI只是其中 ...
python tkinter制作用户登录界面
本文只是几年前学习的tkinter的时候写的测试程序,十分之简陋,只是学习用,没什么其他用处. 学习一下莫烦Python的tkinter教程,根据教程制作了用户登录注册页.基本功能为检查登录.注册.清 ...
python用户登录界面tkinter_python tkinter制作用户登录界面-Go语言中文社区
学习一下莫烦Python的tkinter教程,根据教程制作了用户登录注册页.基本功能为检查登录.注册.清明上河图观看网址http://news.sohu.com/s2015/qmsht/index.s ...
界面开发（3）--- PyQt5用户登录界面连接数据库
文章目录数据库账户注册账号登录找回密码为了实现用户登录界面的登录功能,我们必须建立一个数据库,并把账号和对应的密码,存储到数据库中.如果输入的账号和密码与数据库中的一致,那我们就允许用户登录 ...
用户登录界面（Bootstrap）入门教程01（适合初学者）
首先博主也是小白,之前没学过前端,花了一晚上做了个登录界面,想分享给大家,比较适合初学者来快速学习,博主以后也好好学基础的前端. 首先先上我做的登录界面的图: 因为博主水平有限,对前端认识太少,只能做 ...
修改ranger ui的admin用户登录密码踩坑小记
修改的ranger ui的admin用户登录密码时,需要在ranger的配置里把admin_password改成一样的,否则hdfs的namenode在使用admin时启动不起来,异常如下: Trac ...
ASP.NET Core的身份认证框架IdentityServer4--(5)自定义用户登录（通过接口登录，无UI版本）...
官网接口详解文档地址:文档地址 (PS:可通过接口名称搜索相应接口信息.) 源码地址:https://github.com/YANGKANG01/IdentityServer4-IdentityAut ...
vue配置文件读取_Vue+Spring Boot简单用户登录Demo实现
❝ 「如果觉得文章好看,欢迎点赞.」「同时欢迎关注微信公众号:氷泠之路.」 ❞ 这是一个前后端分离的简单用户登录Demo. 技术栈 Vue BootstrapVue Kotlin Spring Boo ...
【Docker】Registry搭建私有仓库、证书认证、用户登录认证
一.Docker Registry工作原理 02_Docker Registry角色 Docker Registry有三个角色,分别是index.registry和registry client. i ...

使用BootStrap制作用户登录UI

使用BootStrap制作用户登录UI相关推荐

最新文章

热门文章