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) 将上述 ...
随机推荐
- Android Gradle基于参数化配置实现差异化构建
一.背景: 项目中有一些特殊的需求,如个别渠道集成腾讯bugly,个别渠道集成易观统计,不同的渠道集成不同的推送策略(如Oppo渠道优先Opush推送),不同的渠道拥有不同的第三方登录集成等等.这些需 ...
- 分析Class类和ClassLoader类下的同名方法getResourceAsStream
在读取本地资源的时候我们经常需要用到输入流,典型的场景就是使用Druid连接池时读取连接池的配置文件.Java为我们提供了读取资源的方法getResourceAsStream(),该方法有三种: Cl ...
- javascript深入理解-从作用域链理解闭包
一.概要 红宝书(P178)对于闭包的定义:闭包就是有权访问另外一个函数作用域中变量的函数. MDN,对于闭包的定义:闭包就是指能够访问自由变量的函数. 那么什么是自由变量?自由变量就是在函数中使用, ...
- go语言调度器源代码情景分析之五：汇编指令
本文是<go调度器源代码情景分析>系列 第一章 预备知识的第4小节. 汇编语言是每位后端程序员都应该掌握的一门语言,因为学会了汇编语言,不管是对我们调试程序还是研究与理解计算机底层的一些运 ...
- 基于Unity的AR开发初探：第一个AR应用程序
记得2014年曾经写过一个Unity3D的游戏开发初探系列,收获了很多好评和鼓励,不过自那之后再也没有用过Unity,因为没有相关的需求让我能用到.目前公司有一个App开发的需求,想要融合一下AR到A ...
- 深入理解pandas读取excel,txt,csv文件等命令
pandas读取文件官方提供的文档 在使用pandas读取文件之前,必备的内容,必然属于官方文档,官方文档查阅地址 http://pandas.pydata.org/pandas-docs/versi ...
- python assert的用处
python assert 句语格式及用法很简单.通常程序在运行完之后抛出异常,使用assert可以在出现有异常的代码处直接终止运行. 而不用等到程序执行完毕之后抛出异常. python assert ...
- 解决Android编译时出现aapt.exe finished with non-zero exit value 1（第二篇）
之前出现该错误,我用的是这个方法: https://www.cnblogs.com/tangZH/p/10691383.html 然而遗憾的是,这次不管用了,无奈,只好另寻他法,其实会出现这个错误就是 ...
- Android音视频之AudioTrack播放音频(二)
前一篇讲了如何录制wav音频文件,本篇就来讲讲如何播放wav文件,这里就是使用AudioTrack来播放音频,确切的说是播放pcm格式数据,使用AudioTrack播放也没什么难度,主要就是将数据写入 ...
- pod command
pod 基础使用命令 创建Podfile文件 1 pod init 使用命令打开Podfile文件 1 open -a Xcode Podfile 搜索pod 库 1 pod search 库名 更新 ...