Bootstrap4的日常copy小技巧

最新推荐文章于 2022-09-12 10:26:36 发布

舒翰

最新推荐文章于 2022-09-12 10:26:36 发布

阅读量623

点赞数 1

分类专栏：前端文章标签： bootstrap html

本文链接：https://blog.csdn.net/qq_43128330/article/details/115363665

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Bootstrap4搞一波登录

今天突发奇想想用bootstrap4搞一波登录
一直在被bootstrapValidator与bootstrap的版本兼容问题所纠结，主要是现在习惯了bootstrap4的风格。
现在的bootstrapValidator一直使用的是bootstrap3貌似，用4的话基本上很难受。
日常划水去搞了一波bootstrap4的验证，感觉海星，废话不多说，直接上代码。

	<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css"/>
		<link rel="stylesheet" href="css/index.css" />
		<!--script代码行-->
		
		
		<!--jquery-->
		<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
		<!--bootstrap-->
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<!--bootstrapValidator.js 修改过后的，后期会发一下-->
		<script type="text/javascript" src="js/bootstrapValidator.js" ></script>
	</head>
	<body>
		
		<div class="text-center logo">
		  <img src="img/bootstrap-solid.svg" class="rounded mx-auto d-block" alt="bootstrap" style="width: 100px;">
		</div>
		
		<div class="text-center title">
			<h1>登录</h1>
		</div>
		
		<form id="loginform">
			<div class="form-group row justify-content-center  ">
				<label for="username" class="float-right col-sm-2 col-form-label control-label text-right">用户名:</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" />
				</div>
			</div>
			<div class="form-group row justify-content-center ">
				<label for="password" class="float-right col-sm-2 col-form-label text-right">密码:</label>
				<div class="col-sm-4">
					<input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" />
				</div>
			</div>
			<div class="form-group row justify-content-center">
				<button type="submit" class="btn btn-success">登录</button>
			</div>
		</form>
		
		
		<script type="application/javascript">
			$("#loginform").bootstrapValidator({
				excluded:[":disabled"],
				live: 'enabled',
				message: 'This value is not valid',
				feedbackIcons: {
					valid: 'glyphicon glyphicon-ok',
					invalid: 'glyphicon glyphicon-remove',
					validating: 'glyphicon glyphicon-refresh'
				},
				fields:{
					username:{
						validators: {
							notEmpty: {
								message: '用户名不能位空'
							},
							stringLength: {
								min: 6,
								max: 30,
								message: '用户名必须大于6，小于30个字'
							},
							regexp: {
								regexp: /^[a-zA-Z0-9_\.]+$/,
								message: '用户名只能由字母、数字、点和下划线组成'
							}
						}
					},
					password: {
						validators:{
							notEmpty:{
								message: '密码不能为空',
							},
							stringLength:{
								min: 6,
								max: 12,
								message: '密码不能大于12位小于6位'
							}
						}
					}
				}
			});
		</script>
		
	</body>
</html>

在这里插入图片描述

基本样式也就是这样，主要是bootstrap4官方文档看起来舒服一点。主要还是感谢gitee上的萨法客户的帅哥
bootstrapValidator.js链接link.

舒翰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap4的日常copy小技巧

Bootstrap4搞一波登录今天突发奇想想用bootstrap4搞一波登录一直在被bootstrapValidator与bootstrap的版本兼容问题所纠结，主要是现在习惯了bootstrap4的风格。现在的bootstrapValidator一直使用的是bootstrap3貌似，用4的话基本上很难受。日常划水去搞了一波bootstrap4的验证，感觉海星，废话不多说，直接上代码。 <!DOCTYPE html><html xmlns:th="http://www.thy
复制链接

扫一扫

专栏目录