使用BootStrap实现用户登录界面UI


Posted in Javascript onAugust 10, 2016

先给大家展示下效果图,如果大家感觉还不错,请继续参考实现思路详解。

使用BootStrap实现用户登录界面UI

布局

1.左右各一半(col-md-6)

2.左侧登录框占左侧一半的10/12

3.右侧是登录系统的注意事项

使用到的HTML元素

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;
}

以上所述是小编给大家介绍的使用BootStrap实现用户登录界面UI,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 方法实现返回多个数据的代码
Apr 30 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
JavaScript this 深入理解
Jul 30 Javascript
jquery移动节点实例
Jan 14 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 #Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 #Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 #Javascript
JS获取鼠标选中的文字
Aug 10 #Javascript
浅析JavaScript函数的调用模式
Aug 10 #Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 #Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 #Javascript
You might like
第三节--定义一个类
2006/11/16 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
php-msf源码详解
2017/12/25 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python编程之序列操作实例详解
2017/07/22 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
python和JavaScript哪个容易上手
2020/06/23 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
软件工程师岗位职责
2013/11/16 职场文书
会计系毕业生求职信
2014/05/28 职场文书
2014年国庆节寄语
2014/09/19 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
单身证明格式样本
2015/06/15 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
Python基础详解之描述符
2021/04/28 Python