基于Bootstrap的登录&注册模板(html+css)

基于Bootstrap的登录&注册模板(html+css)

1、简介

基于Bootstrap的登录&注册模板(html+css),适合django等框架,可直接修改对接后端

2、功能

登录、注册、输入信息错误提醒、记住密码、自动登录等等

2.1 登录

<div class="col-lg-6 bg-white">
	<div class="form d-flex align-items-center">
	<div class="content">
		<form method="post" action="login.html" class="form-validate" id="loginFrom">
		<div class="form-group">
			<input id="login-username" type="text" name="userName" required data-msg="请输入用户名" placeholder="用户名" value="admin" class="input-material">
		</div>
		<div class="form-group">
			<input id="login-password" type="password" name="passWord" required data-msg="请输入密码" placeholder="密码" class="input-material">
		</div>
		<button id="login" type="submit" class="btn btn-primary">登录</button>
		<div style="margin-top: -40px;"> 
			<div class="custom-control custom-checkbox " style="float: right;">
				<input type="checkbox" class="custom-control-input" id="check2" >
				<label class="custom-control-label" for="check2">自动登录</label>
			</div>
			<div class="custom-control custom-checkbox " style="float: right;">
				<input type="checkbox" class="custom-control-input" id="check1" >
				<label class="custom-control-label" for="check1">记住密码&nbsp;&nbsp;</label>
			</div> 
		</div>
		</form>
		<br />
		<small>没有账号?</small><a href="register.html" class="signup">&nbsp;注册</a>
	</div>
	</div>
</div>

2.2 注册

<div class="col-lg-6 bg-white">
	<div class="form d-flex align-items-center">
	<div class="content">
		<div class="form-group">
			<input id="register-username" class="input-material" type="text" name="registerUsername" placeholder="请输入用户名/姓名" >
							<div class="invalid-feedback">
								用户名必须在2~10位之间
							</div>
		</div>
		<div class="form-group">
			<input id="register-password" class="input-material" type="password" name="registerPassword" placeholder="请输入密码"   >
			<div class="invalid-feedback">
								密码必须在6~10位之间
							</div>
		</div>
		<div class="form-group">
			<input id="register-passwords" class="input-material" type="password" name="registerPasswords" placeholder="确认密码"   >
			<div class="invalid-feedback">
								两次密码必须相同 且在6~10位之间
							</div>
		</div>
		<div class="form-group">
			<button id="regbtn" type="button" name="registerSubmit" class="btn btn-primary">注册</button>
		</div>
		<small>已有账号?</small><a href="login.html" class="signup">&nbsp;登录</a>
	</div>
	</div>
</div>

3、展示

在这里插入图片描述
在这里插入图片描述

4、下载地址

GitHub:基于Bootstrap的登录&注册模板【下载麻烦客官点颗Star】

CSDN资源:基于Bootstrap的登录&注册模板(html+css)

  • 22
    点赞
  • 126
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
### 回答1: HTML (Hypertext Markup Language)是一种标记语言,用于构建和呈现网页的结构和内容。通过使用HTML标签,我们可以定义网页的标题、段落、图像、链接和各种元素。 CSS (Cascading Style Sheets) 是一种样式表语言,用于描述网页的外观和样式。通过使用CSS,我们可以改变网页的字体、颜色、布局、背景等方面的样式。 Bootstrap是一个流行的开源前端框架,它基于HTMLCSSJavaScript构建。Bootstrap提供了一个丰富的CSS类和JavaScript插件库,使开发者能够快速地创建响应式、移动友好的网页。通过使用Bootstrap,我们可以轻松地实现网页的网格布局、导航栏、按钮、表格、表单等常见的UI组件。 HTMLCSSBootstrap是构建现代网页的重要工具。HTML提供了网页的基本结构,CSS用于美化网页的外观和样式,而Bootstrap为我们提供了各种通用的UI组件和布局模板,加快了网页开发的速度。使用这些技术,我们可以创建具有良好用户体验的网页,并兼容各种设备和浏览器。无论是在个人网站、商业网站还是移动应用中,HTMLCSSBootstrap都是必备技术。 ### 回答2: HTML是超文本标记语言(Hypertext Markup Language)的缩写,用于将网页的内容结构化、呈现和组织起来。它由一系列的标签组成,通过这些标签可以定义网页的标题、段落、图像、链接等等。HTML是网页制作的基础,可以在浏览器中解析和显示网页内容。 CSS是层叠样式表(Cascading Style Sheets)的缩写,用于描述网页的外观和样式。通过CSS,我们可以为HTML元素添加颜色、字体、边距、布局等各种样式,实现对网页的美化和定制。CSS的好处是可以将样式与内容分离,使得网页的样式更加易于修改和维护。 Bootstrap是一个流行的前端开发框架,它基于HTMLCSSJavaScript,提供了丰富的组件和样式库,用于快速构建响应式、现代化的网页和应用程序。Bootstrap提供了各种预定义的样式、布局和组件,使得开发者能够快速搭建出高质量的用户界面。它的设计理念是移动设备优先,可以适应不同大小的屏幕和设备。 HTMLCSSBootstrap的组合使得网页开发变得更加简单、高效和灵活。HTML定义了网页的结构,CSS负责网页的样式,Bootstrap提供了额外的组件和样式库,使得开发者可以更快速地开发出美观、响应式的网页。使用这些技术,我们可以构建出具有丰富功能和良好用户体验的网页和应用程序。 ### 回答3: HTMLCSSBootstrap是用于网页开发的常用技术。 首先,HTML(超文本标记语言)是一种标记语言,用于构建网页的结构。通过使用HTML标签,我们可以创建标题、段落、链接、图像等元素,并将它们组织成一个有层次的结构。HTML还支持表单、多媒体等功能,使网页能够与用户进行交互。 其次,CSS(层叠样式表)是一种用于网页样式设计的语言。我们可以使用CSS来定义网页的布局、颜色、字体、边框等样式属性。通过将样式应用于HTML元素,我们可以美化网页的外观,并使得网页在不同设备和屏幕尺寸上显示一致。 Bootstrap则是一个流行的CSS框架,它提供了一套预定义的样式和组件,能够帮助开发人员快速搭建响应式和现代化的网页。使用Bootstrap,我们可以轻松地创建响应式布局、导航栏、按钮、表格、模态框等元素,而无需编写大量的CSS代码。此外,Bootstrap还提供了一些JavaScript插件,例如轮播图、下拉菜单等,以增强网页的交互性。 总结来说,HTML是用于构建网页结构的标记语言,CSS用于设计网页样式,而Bootstrap是一个方便的CSS框架,可以帮助快速搭建现代化和响应式的网页。它们共同的作用是提供更好的用户体验和设计一致性,使网页开发更加高效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

跳舞的皮埃尔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值