使用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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
jQuery的bind()方法使用详解
Jul 15 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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
php 自定义错误日志实例详解
2016/11/12 PHP
javascript中对对层的控制
2006/12/29 Javascript
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python实现合并字典的方法
2015/07/07 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python先序遍历二叉树问题
2017/11/10 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python实现购物车购物小程序
2018/04/18 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
error和exception有什么区别
2012/10/02 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
简历里的自我评价范文
2014/02/24 职场文书
党员实事承诺书
2014/03/26 职场文书
员工工作自我评价
2014/09/26 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
员工手册编写范本
2015/05/14 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python