Bootstrap实现注册界面
- 样式一
- 例图
- 代码
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link href="bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap-4.3.1-dist/js/bootstrap.js"></script>
<style> .container {
margin-top: 15%;
width: 35%;
} .btn-primary {
background-color: #337ab7;
border-color: #337ab7;
} .form-control {
margin-bottom: 4px;
} </style>
</head>
<body>
<div class="container">
<form>
<div class="form-signin">
<!--<h2 class="form-signin-heading">注册</h2>-->
<!-- class="sr-only"将label标签隐藏 -->
<label for="exampleInputUsername" class="sr-only">用户名</label>
<input type="text" class="form-control" id="exampleInputUsername" placeholder="用户名">
<label for="exampleInputUsername" class="sr-only">密码</label>
<input type="password" class="form-control" id="exampleInputPassword" placeholder="密码">
<label for="exampleInputUsername" class="sr-only">邮箱</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="邮箱">
<label for="exampleInputUsername" class="sr-only">手机</label>
<input type="tel" class="form-control" id="exampleInputPhone" placeholder="手机">
<div class="checkbox">
<label>
<!--<input type="checkbox">
记住密码-->
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
</div>
</form>
</div> </body>
</html>
- 例图
- 样式二
- 例图
- 代码
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link href="bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="bootstrap-4.3.1-dist/js/bootstrap.js"></script>
<style> .container1 {
margin-top: 70px;
width: 45%;
margin-left: 30%;
} /* 需要在一行的元素 */
.inline-style {
display: inline-block;
}
/* 文字需要靠右 */
.font-position-right{
text-align: right;
}
/* 注册按钮 */
.register-btn{
margin-left: 10%;
} </style>
</head>
<body>
<div class="container1"> <form class="form-horizontal">
<div class="form-group">
<!--<h2 class="form-signin-heading">注册</h2>-->
<!-- class="sr-only"将label标签隐藏 -->
<label for="exampleInputUsername1" class="col-sm-2 control-label inline-style font-position-right">用户名</label>
<div class="col-sm-9 inline-style ">
<input type="text" class="form-control" id="exampleInputUsername1" placeholder="用户名">
</div>
</div>
<div class="form-group">
<!--<h2 class="form-signin-heading">注册</h2>-->
<label for="exampleInputUsername1" class="col-sm-2 control-label inline-style font-position-right">密码</label>
<div class="col-sm-9 inline-style">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
</div>
</div>
<div class="form-group">
<label for="exampleInputUsername1" class="col-sm-2 control-label inline-style font-position-right">邮箱</label>
<div class="col-sm-9 inline-style">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="邮箱">
</div>
<div class="form-group">
</div>
</div>
<div class="form-group">
<label for="exampleInputUsername1" class="col-sm-2 control-label inline-style font-position-right">手机</label>
<div class="col-sm-9 inline-style">
<input type="tel" class="form-control" id="exampleInputPhone1" placeholder="手机">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<!--<input type="checkbox">
记住密码-->
</label>
</div>
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-lg btn-primary btn-block register-btn" type="submit">注册</button>
</div> </div>
</form> </div> </body>
</html>
- 例图
Bootstrap实现注册界面的更多相关文章
- 使用Boostrap框架写一个登录\注册界面
Bootstrap是一个Web前端开发框架,使用它提供的css.js文件可以简单.方便地美化HTML控件.一般情况下,对控件的美化需要我们自己编写css代码,并通过标签选择器.类选择器.ID选择器为指 ...
- Web前端-网站首页和注册界面的实现
首页用到的知识如下: 1.bootstrap框架 2.jQuerry实现页面定时弹出广告 注册界面用到的知识: 1.bootstrap框架 2.jQuerry实现省市联动操作 3.jQuerry实现表 ...
- HTML登录注册界面怎么制作？
在没有学习CSS样式的前提下,是如何做一个简单的注册界面的. 一.表单标签(form) 首先我们先写一个<form></form>的标签,form标签属于表单标签,通常我们的登 ...
- 50个令人惊奇的jQuery插件（对话框和表单篇）及免费的响应式bootstrap管理员后台界面主题 - Charisma
http://www.woiweb.net/50-amazing-jquery-plugins.html 多文件文件下载 免费的响应式bootstrap管理员后台界面主题 – Charisma htt ...
- iOS开发——UI进阶篇（八）pickerView简单使用,通过storyboard加载控制器，注册界面，通过xib创建控制器，控制器的view创建，导航控制器的基本使用
一.pickerView简单使用 1.UIPickerViewDataSource 这两个方法必须实现 // 返回有多少列 - (NSInteger)numberOfComponentsInPicke ...
- 免费下载！Twitter Bootstrap V3 矢量界面素材
Bootstrap 3 Vector UI Kit 包含所有矢量格式的 Twitter Bootstrap 3 界面控制元素.Glyphicons 以及额外的一些界面素材,而且基本的图形元素都切好图了 ...
- HTML练习----注册界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- tkinter 创建登陆注册界面
import tkinter as tk from tkinter import messagebox #设置窗口居中 def window_info(): ws = window.winfo_scr ...
- 实践练习_使用HTML标签制作一个注册界面03
使用HTML标签制作一个注册界面▲▲▲▲★1) 注册界面需要有用户名.密码.性别(单选).爱好(多选).专业(下拉列表)2) 注册界面需要有隐藏域和文件域3) 注册界面需要有提交和重置按钮4) 将上述 ...
随机推荐
- ES 19 - Elasticsearch的检索语法(_search API的使用)
目录 1 Search API的基本用法 1.1 查询所有数据 1.2 响应信息说明 1.3 timeout超时机制 1.4 查询多索引和多类型中的数据 2 URI Search的用法 2.1 GET ...
- Vue 进阶之路（四）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...
- ASP.NET Core中使用GraphQL - 最终章 Data Loader
ASP.NET Core中使用GraphQL - 目录 ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章 中间 ...
- Maven把项目依赖的所有jar包都打到同一个jar中
目录 1 使用maven-shade-plugin 2 推荐: 使用maven-assembly-plugin 3 扩展: Maven安装本地jar包到本地仓库 4 扩展: 手动生成jar包 5 扩展 ...
- [译]PEP 342--增强型生成器：协程
PEP原文 : https://www.python.org/dev/peps/pep-0342/ PEP标题: Coroutines via Enhanced Generators PEP作者: G ...
- 国内开源社区巨作AspectCore-Framework入门
前些天和张队(善友),lemon(浩洋),斌哥(项斌)等MVP大咖一块儿吃饭,大家聊到了lemon名下的AOP这个项目,我这小白听得一脸懵逼,后面回来做了一下功课,查了下资料,在lemon的Githu ...
- mybatis一对一 和 一对多 嵌套查询
实际项目中的,接口对外VO 会出现 一对一 和 一对多的情况,举例:小区 下面有 楼栋 ,楼栋 下面有 房屋 , 房屋里面又房间 小区Vo : districtVo { id: nam ...
- [转]POJ1006: 中国剩余定理的完美演绎
Biorhythms Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 117973 Accepted: 37026 Des ...
- 自动获取windows或者linux系统IP
1.获取Windows下的IP java.net.InetAddress.getLocalHost().getHostAddress(); 2.获取linux下的IP /** * 获取Linux下的I ...
- python线程（二）代码部分
使用threading创建线程: from threading import Thread def work(name): print(f"我是线程{name}") if __na ...