【一、bootstrap框架前端注册登录页面】

一、使用bootstrap框架写一个简易的前端登录页面。

先上截图

下面开始记录本人使用bootstrap框架写这个登录页面的过程

1、bootstrap需要的配置文件

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

2、如何修改背景图片

body{background-image:url(C:/Users/hp/Desktop/01.webp);//此处可修改背景图片background-size:cover;background-repeat: no-repeat;}

3、如何写一个图标与输入框附合的表单

例如这样

<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" class="form-control" id="username" placeholder="请输入用户名"></div>

4、如何写一组单选框

<div class="well well-sm" style="text-align:center;"><label class="radio-inline"><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 普通用户</label><label class="radio-inline"><input type="radio"name="optionsRadios"id="optionsRadios1"values="option2">管理员</label></div>

5、最后附上完整代码：

<!DOCTYPE html> <!--告知浏览器是哪一个版本-->
<html><head><meta charset="utf-8"> <!--定义页面使用编码--><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"><!--适应手机-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- css样式表 -->
<style>body{background-image:url(C:/Users/hp/Desktop/01.webp);background-size:cover;background-repeat: no-repeat;}.loginform{/*上边界距离*/margin-top: 100px;}</style></head>
<body>
<div class="loginform"><!-- <h1 class="text-center">电子相册系统</h1> --><div class="container-fluid"><div class="row bg"><div class="col-md-4 col-md-offset-4" style="border: #4d4d4d solid 1px;background-color: hsl(0, 0%, 98%);"><form class="form-container" role="form"><h3 class="text-center">用户登录</h3><div class="form-group"><label for="username">用户名 </label><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" class="form-control" id="username" placeholder="请输入用户名"></div></div><div class="form-group"><label for="password">密码</label><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span><input type="password" class="form-control" id="password" placeholder="请输入密码"></div><div class="well well-sm" style="text-align:center;"><label class="radio-inline"><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 普通用户</label><label class="radio-inline"><input type="radio"name="optionsRadios"id="optionsRadios1"values="option2">管理员</label></div><div><button class="btn btn-primary btn-block active" id="in" type="submit">登录</button></div><div class="well well-sm" style="text-align:center;"><button type="button" class="btn btn-link">注册用户</button><button type="button" class="btn btn-link">找回密码</button></div></form>        </div></div></div>
</div>
</body>
</html>

6、最后的最后，仅以此文记录本新手小白开发电子相册管理系统的过程，如有错误或建议，欢迎指正！感激不尽！

【一、bootstrap框架前端注册登录页面】相关推荐

使用bootstrap框架实现简单登录页面
实现思路:从上到下,从左到右一开始没想到怎么实现的是验证码和图片那里,实现验证码和图片那一块的布局还是一个input控件和一张图片,使用bootstrap里的input控件默认情况下,是占一行的. ...
SpringSecurity+Mybatis实现用户自助注册登录(含角色)，打造简单安全的注册登录页面。
#项目架构.功能点架构: Springboot2.5.+ MySQL数据库8.0+(记录用户信息.角色清单.用户角色对照表) 持久层Mybatis 用户注册页面RegisterPage采用Thyme ...
用vue+element-ui快速写一个注册登录页面
vue+element-ui可以快速开发一个页面,免除大部分的css代码. 一.用表单来做: 1.代码:  <template><div ...
原生js验证简洁美观注册登录页面
本文转载自: https://www.cnblogs.com/storm-chou/p/6189489.html 作者:storm-chou 转载请注明该声明. 序一个以js验证表单的简洁的注册登录 ...
Android注册登录页面
Android注册登录页面需求分析项目目录 .java domain JsonBean.java UserInfo.java utils GetJsonDataUtil.java Login.j ...
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面 tips 在不同设备中显示的样式页面布局思路 html css tips 这个页面里的图片忒难看,实际可以换一换在不同设备中显 ...
使用TARO框架实现一个登录页面
使用 TARO 框架实现一个登录页面,你需要做以下几件事: 创建一个新的 TARO 项目,在项目根目录下运行 taro init 命令. 在项目的 src 目录下创建一个新的组件,作为登录页面. 在组 ...
设计灵感|APP注册登录页面的设计形式
注册登录页面是一个APP的门面,它的好坏与否直接影响着APP的用户数和用户体验. 作为一个设计师,其实经常时不时就会去下载一些APP,体验的时候经常被一些不尽人意的注册登录页面弄的想怒摔手机,最终都 ...
注册登录页面代码用js判断是否填入信息_php实现登录功能
原文:https://blog.csdn.net/ccy1995414/article/details/80638685 自然是从最简单的功能起步,我第一个任务选择了做一个登录操作,其实也没想象中那么 ...

【一、bootstrap框架前端注册登录页面】

【一、bootstrap框架前端注册登录页面】相关推荐

最新文章

热门文章