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代码实现
工厂方法模式 工厂方法模式,对简单工厂模式进行了升级.我们将水果园比作一个工厂,在简单工厂模式下,水果园是一个具体的工厂,直接用来生产各种各样的水果.那么在工厂方法模式下,水果园是一个抽象工厂,那么苹 ...
- ES 18 - (底层原理) Elasticsearch写入索引数据的过程 以及优化写入过程
目录 1 Lucene操作document的流程 1.1 添加document的流程 1.2 删除document的流程 2 优化写入流程 - 实现近实时搜索 2.1 流程的改进思路 2.2 设置re ...
- 《k8s-1.13版本源码分析》-抢占调度
源码分析系列文章已经开源到github,地址如下: github:https://github.com/farmer-hutao/k8s-source-code-analysis gitbook:ht ...
- Android版数据结构与算法(七):赫夫曼树
版权声明:本文出自汪磊的博客,未经作者允许禁止转载. 近期忙着新版本的开发,此外正在回顾C语言,大部分时间没放在数据结构与算法的整理上,所以更新有点慢了,不过既然写了就肯定尽力将这部分完全整理好分享出 ...
- Django-restframework 之认证源码分析
Django-restframework 源码分析之认证 前言 最近学习了 django 的一个 restframework 框架,对于里面的执行流程产生了兴趣,经过昨天一晚上初步搞清楚了执行流程(部 ...
- asp.net core 系列之中间件基础篇(middleware)
中间件是一种插入到管道上进行处理请求和响应的软件:每个中间件组件具有下面的功能: 选择是否把请求传递到管道上的下一个组件 可以在下一个组件的之前和之后做处理工作 请求委托(request delega ...
- CenOS_命令帮助
1.帮助 1.1man 基本语法: man[命令或配置文件](功能描述:获得帮助信息) 如:man ll 1.2help 基本语法: help 命令 (功能描述:获得 shell 内置命令的帮助信息) ...
- Microsoft SQL Server 双机热备份，实时同步
1.两台服务器,主服务器,从服务器,两台服务器都安装SQL Server 2008R2并且安装相同表结构的数据库(需要实时同步的数据库) 2.主服务器数据库安装完毕,打开SQL Server 配置管理 ...
- devm_xxx机制【转】
前言 devm是内核提供的基础机制,用于方便驱动开发者所分配资源的自动回收.参考内核文档devres.txt.总的来说,就是驱动开发者只需要调用这类接口分配期望的资源,不用关心释放问题.这些资源的释放 ...
- pc蛋蛋app开发定制
如今的pc蛋蛋app开发和pc蛋蛋软件开发互联网已经不再是一个新兴行业,对打仗的团队也要求更加正规化.对于产品技术运营市场等角色来说,如果每个人都能有比较全面的视野,那这个产业将是一个全新的趋势,单一 ...