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) 将上述 ...
随机推荐
- Java调用Javascript、Python算法总结
最近项目中经常需要将Javascript或者Python中的算法发布为服务,而发布Tomcat服务则需要在Java中调用这些算法,因此就不免要进行跨语言调用,即在Java程序中调用这些算法. 不管是调 ...
- 开发教程(四) MIP组件平台使用说明
组件审核平台用于上传 MIP 组件.经过自动校验之后,提交审核,通过审核的组件会定时推送到线上,供网站使用. 平台地址:https://www.mipengine.org/platform/ 1. 使 ...
- 深入理解令牌认证机制（token）
以前的开发模式是以MVC为主,但是随着互联网行业快速的发展逐渐的演变成了前后端分离,若项目中需要做登录的话,那么token成为前后端唯一的一个凭证. token即标志.记号的意思,在IT领域也叫作令牌 ...
- Promise（避免金字塔回调）
前后端分离开发,前端通过接口获取数据,但是有的页面不止一个接口,就会出现金字塔回调,可以通过 Promise 封装请求. request-data.js: function reqData(postu ...
- openlayers4 入门开发系列之地图展示篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- 【Chrome插件】去掉因使用jsonView插件的弹出窗口"请停用以开发者模式运行的扩展程序"
前言 小编最近使用jsonView插件时,每次打开谷歌浏览器都会弹出下面的窗口,上网搜索,找到一个非常有效的方法. 解决方法 一.新建一个文本文档 二.复制代码 <# : @echo off c ...
- PMP应考知识点-合同类型以及选择要领
合同类型的选择貌似是必考知识点,加上对合同类型的了解和选择的要领,对于开展日常工作来讲也是挺有必要的.所以这两天重新回顾并总结了合同的种类和各种类的选择要领,与大家分享. 转走请标明出处 https ...
- Soot生成代码控制流图
Soot可以对代码进行分析,提供了多种字节码分析和变换功能,通过它可以进行过程内和过程间的分析优化,以及程序流图的生成,还能通过图形化的方式输出. http://www.brics.dk/SootGu ...
- cmd提取时间格式（小时）问题以及Windows系统语言判断
你在这里看到了我的现在的时间是01:15,没错正在做个开发,本来好好的,结果一运行,直接报错: 这里就是时间中的获取小时出了问题,之前23点那会已经调试通过了,过那时是没有问题的,那么这时发生了什么? ...
- 模型转换[yolov3模型在keras与darknet之间转换]
首先借助qqwweee/keras-yolo3中的convert.py和tensorrt例子yolov3_onnx,并重新编写了代码,实现将darknet格式的yolov3的yolov3.cfg和yo ...