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) 将上述 ...
随机推荐
- 基于SpringBoot从零构建博客网站 - 技术选型和整合开发环境
技术选型和整合开发环境 1.技术选型 博客网站是基于SpringBoot整合其它模块而开发的,那么每个模块选择的技术如下: SpringBoot版本选择目前较新的2.1.1.RELEASE版本 持久化 ...
- 【公告】关于8.8MIP组件审核平台故障的说明
故障通报 2017 年 8 月 8 日 下午 14:11,由于机器故障原因,MIP 组件管理平台暂时无法提供服务. 2017 年 8 月 8 日 下午 16:46, 故障已解决.MIP 组件管理平台服 ...
- 【重学计算机】操作系统D6章：并发程序设计
1. 并发程序的基本概念 程序顺序性 内部顺序性:CPU严格按照顺序执行指令 外部顺序性:程序员设计程序时往往用顺序设计的思想 顺序程序特性 程序执行的顺序性 计算环境的封闭性: 程序执行时犹如独占资 ...
- 游戏AI之决策结构—有限状态机/行为树（2）
目录 有限状态机 行为树 控制节点 条件节点 行为节点 装饰节点 总结 额外/细节/优化 游戏AI的决策部分是比较重要的部分,游戏程序的老前辈们留下了两种经过考验的用于AI决策的结构: 有限状态机 行 ...
- Gradle中的闭包
Gradle是基于Groovy的DSL基础上的构建工具,Gradle中的闭包,其原型上实际上即Groovy中闭包.而在表现形式上,其实,Gradle更多的是以约定和基于约定基础上的配置去展现.但本质上 ...
- Java 在PPT中绘制图形
Microsoft PowerPoint可支持在幻灯片中插入各种类型的图形并且可设置图形填充.线条颜色.图形大小.位置等.下面将通过Java编程来演示在PPT中绘制图形的方法. 工具:Free Spi ...
- ArcGIS API for JavaScript 4.x 本地部署之Apache(含Apache官方下载方法)
IIS.Nginx都说了,老牌的Apache和Tomcat也得说一说(如果喜欢用XAMPP另算) 本篇先说Apache. 安装Apache 这个...说实话,比Nginx难找,Apache最近的版本都 ...
- Web地图导图总结
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1. 背景 地图端展示了各类制图效果,用户希望可以一键生成报表,其中核心 ...
- svn统计代码行数（增量）
转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10770296.html android代码,两个版本之间,代码行数增加了多少,怎么得出呢? 1.安装To ...
- 关于Redis和Memcache的比较
关于Redis和Memcache在应用中,都可以实现缓存的功能,但是,具体使用情况需要根据具体业务场景,尤其是对缓存数据有特性要求时,需要选择对应的缓存机制. 共同点: 都是基于内存的数据库,可用作缓 ...