使用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 相关文章推荐
javascript引导程序
Oct 26 Javascript
js 解决“options为空或不是对象”
Dec 22 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
改造一台复古桌面收音机
2021/03/02 无线电
php 远程图片保存到本地的函数类
2008/12/08 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Python 基础教程之闭包的使用方法
2017/09/29 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python面试题小结附答案实例代码
2019/04/11 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python3中eval函数用法使用简介
2019/08/02 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
小学学校评估方案
2014/06/08 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
Python音乐爬虫完美绕过反爬
2021/08/30 Python