使用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图片阅览组件
Nov 09 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
Python2.x中文乱码问题解决方法
2015/06/02 Python
浅谈Python peewee 使用经验
2017/10/20 Python
详解Python中的四种队列
2018/05/21 Python
python读写csv文件的方法
2019/08/13 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
财务助理岗位职责
2013/11/10 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
自我反省检讨书
2014/01/23 职场文书
优秀护士获奖感言
2014/02/20 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
初中教师个人总结
2015/02/10 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
入党函调证明材料
2015/06/19 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL