使用Bootstrap4制作登陆界面

最新推荐文章于 2024-05-26 13:30:44 发布
最新推荐文章于 2024-05-26 13:30:44 发布
阅读量1.3w 收藏 30
点赞数 5
分类专栏： WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyx709389494/article/details/80248251
版权

实现效果：


标准的登陆页面：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
	<style>
	.carousel-inner img {
		width:100%;
		height:100%;
	}
	.jumbotron {
		margin-top: 10px;
		margin-bottom: 0px;
		padding-top: 10px;
	}
	#demo {
		width:100%;
		height: 264px;
	}
	.row {
		height: 264px;
	}
	.left {
		float: left;
		width: 70%;
	}
	.right {
		float: left;
		width: 30%;
	}
	.card {
		height: 264px;
	}
	.carousel-inner {
		height: 264px;
	}
	.footer {
		position: absolute;
		bottom: 0;
		height: 60px;
	}
	.jumheight1 {
		height: 140px;
	}
	.jumheight2 {
		height: 260px;
	}
	.end_name {
		margin-bottom: 5px;
	}
	.footer2 {
		padding-top: 210px;
		text-align: center;
	}
	</style>
	<script type="text/javascript">
		function Toregister() {
			window.open("register.html")
		}
	</script>
</head>
<body>
	<div>
		<div class="jumbotron text-info bg-light jumheight1">
			<h1>工时管理系统</h1>
			<p>一个简单的系统</p>
		</div>
		<!-- 轮播图 -->
		<!-- 指示符 -->
  		<div class="row">
		<div class="left">
		<div id="demo" class="carousel slide " data-ride="carousel">
			<ul class="carousel-indicators">
				<li data-target="#demo" data-slide-to="0" class="active"></li>
				<li data-target="#demo" data-slide-to="1"></li>
				<li data-target="#demo" data-slide-to="2"></li>
			</ul>
			<!-- 轮播图片 -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
				</div>
				<div class="carousel-item">
					<img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
				</div>
				<div class="carousel-item">
					<img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
				</div>
			</div>
			<!-- 左右切换按钮 -->
			<a href="#demo" class="carousel-control-prev" data-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
			<a href="#demo" class="carousel-control-next" data-slide=next>
				<span class="carousel-control-next-icon"></span>
			</a>
		</div>
 		</div>
		<div class="right">
		<!-- 登陆窗口 -->
		<div class="card">
			<div class="card-header">
				用户登陆
			</div>
			<div class="card-body">
				<form>
					<table style="border-collapse: separate;border-spacing: 0px 10px;">
						<tr>
							<td class="margin-top:10">
								<label>用户名：</label>
							</td>
							<td>
								<input type="text" name="" class="">
							</td>
						</tr>
						<tr>
							<td>
								<label for="pwd">密码:</label>
							</td>
							<td>
								<input type="password" name="" >
							</td>
						</tr>
					</table>
					<div class="form-check">
						<label class="form-check-label">
							<input type="checkbox" name="" class="form-check-input">记住密码
						</label>
					</div>
					<div class="footer">
					<button type="submit" class="btn btn-primary">登陆</button>
					<button type="" class="btn btn-secondary" οnclick="Toregister()">注册</button>
					<button type="button" class="btn btn-link"><small>忘记密码？</small></button>
					</div>
				</form>
			</div>
		</div>
		</div>
 		</div>
		<div class="jumbotron bg-light jumheight2">
			<p class="footer2">@Master_huangyx</p>
		</div>
	</div>
</body>
</html>

err_prodector
关注
  • 5
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
推荐开源项目：Bootstrap 4 登录页面模板
gitblog_00096的博客
05-19 422
推荐开源项目：Bootstrap 4 登录页面模板 项目地址:https://gitcode.com/nauvalazhar/bootstrap-4-login-page 1、项目介绍 如果你正在寻找一个简洁、高效的登录页面模版来提升你的网站用户体验，那么Bootstrap 4 Login Page Template无疑是你的不二之选。这个开源项目由@nauvalazhar创建，它是一个免费的个人...
基于Bootstrap的登录&注册模板（html+css）
皮埃尔的博客
01-28 1万+
基于Bootstrap的登录&注册模板（html+css），适合django等框架，可直接修改对接后端。
Bootstrap的登陆页面
最新发布
m0_46319477的博客
05-26 795
【代码】Bootstrap的登陆页面。
纯bootstrap4.3 写的一个漂亮的登录页面
xinsiyu2008的专栏
05-11 4088
转载于：https://lebang2020.cn/details/210419hpao3452.html 漂亮的Bootstrap4登录页面，纯Bootstrap4实现，直接上代码，提供源码的下载 <!DOCTYPE html> <html lang="en"> <head> <title>车辆登录系统</title> <meta charset="utf-8" /> <meta name.
运用 bootstrap 创建简单的登陆界面
m0_73384165的博客
08-15 3303
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。​Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
用vue和bootstrap实现用户登录页面
2201_75321887的博客
04-12 934
用vue和bootstrap实现用户登录页面
Bootstrap登录页面制作（十三）
dengfengling999的博客
12-03 1632
创建web项目 引入bootstrap： 创建login页面引入bootstrap： 刷新页面F12在NetWork查看是否引入成功： 修改表单： 全部登录代码：
simple:用bootstrap4制作的简单登录页面
04-16
这个"simple:用bootstrap4制作的简单登录页面"项目是利用Bootstrap 4 的组件和网格系统来创建一个简洁、高效的登录界面。下面将详细介绍如何使用Bootstrap 4 创建登录页面以及涉及到的相关知识点。 1. **Bootstrap ...
bootstrap制作登录注册界面
03-16
美观实用的bootstrap美化界面，想要直接套用模板的可以直接下载使用就好了
Bootstrap制作登录注册页面（完整项目，已配置）
12-03
在这个“Bootstrap制作登录注册页面”项目中，我们将会探讨如何利用Bootstrap来创建高效的用户界面，特别是针对登录和注册功能。 1. **Bootstrap简介**：Bootstrap是由Twitter开发并开源的前端框架，它包含HTML、...
第二课制作响应式登陆界面源码.zip
07-11
在"第二课制作响应式登陆界面源码.zip"这个压缩包中，包含的文件如下： 1. Default.dfm：这是Delphi的表单文件，其中定义了用户界面的布局、控件和它们的属性。在这个例子中，Default.dfm很可能包含了登录界面的...
Bootstrap4响应式登录注册界面模板
12-30
简单的Bootstrap4响应式登录注册界面模板，可自适应PC和WAP移动端。 适合新人，学习交流。
模仿QQ游戏登陆界面
11-22
使用Bootstrap或Vue.js等前端框架可以加速开发过程，提供响应式布局和组件化开发的优势。例如，使用Vue.js的v-model指令可以轻松实现输入框的双向数据绑定，监听用户输入。 对于登录按钮的点击事件，JavaScript需要...
使用bootstrap框架实现简单登录页面
qq_49688914的博客
07-20 9343
登录注册
使用Bootstrap框架制作简易登录界面
qq_40918903的博客
02-08 1万+
使用Bootstrap框架制作简易登录界面 从学校出来到在软件公司工作已经快三个月了，终于要转正了，在公司实习期间也学习了很多东西，比如正好总结一下。下面介绍的是如何使用Bootstrap制作一个简易登录界面。 一 使用Bootstrap网页模板 我提供的模板是Bootstrap 4，这个模板是我在学习途中，总结出来的，可以套用，在创建模板的过程中，需要注意两点：第一，要下载Bootstrap的相...
jQuery + bootstrap 4 简单登录验证
biu的博客
03-29 9915
简单的表单验证bootstrap4自带的js文件就可以实现哦bootstrap.js自带的表单验证的效果：下面贴html代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible
[前端]基于Bootstrap搭建登录页面，保姆级讲解，面面俱到~~~
热门推荐
qq_41604569的博客
04-05 2万+
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。在前端页面设计占有一定份额，今天手把手带你整除登录界面，最后的结果图如下： 页面要求 主要： 用户名 密码 同意单选框 登录按钮 修饰： 边框 阴影 开撸 1.新建一个login_demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LoginDe
采用bootstrap框架实现登录页面
qq_34884166的博客
12-20 1892
源码下载：微信小程序搜 “涨知识1024” ，搜索关键字“登录页”
【登录页面的美化】bootstrap的使用
m0_73575951的博客
07-19 846
对bootstrap需要在官网下载应用包，放入我们所写的项目中，然后再导入包，再官网的使用方法中可以找到很多的前端制作模板。
使用bootstrap4制作一个轮播图
05-26
好的，下面是一个简单的使用Bootstrap 4制作轮播图的示例： ```html <!DOCTYPE html> <html> <head> <title>Bootstrap 4 轮播图示例</title> <!-- 引入 Bootstrap 4 CSS --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://via.placeholder.com/800x400?text=Slide+1" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://via.placeholder.com/800x400?text=Slide+2" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://via.placeholder.com/800x400?text=Slide+3" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- 引入 Bootstrap 4 JS --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ``` 解释一下代码： 1. 在 `<head>` 标签中引入 Bootstrap 4 的 CSS 文件。 2. 在 `<body>` 标签中创建一个轮播图容器，它的 `id` 属性为 `carouselExampleIndicators`，这个 `id` 将与轮播图的 JavaScript 代码进行关联。 3. 在轮播图容器中，我们创建一个有序列表，用于显示轮播图的指示器。每个指示器都有一个 `data-slide-to` 属性，它指定了它对应的轮播图索引值。 4. 创建轮播图内部的轮播项容器。第一项的 `class` 属性为 `active`，表示它将作为初始显示的轮播项。 5. 在轮播图容器底部，我们创建两个轮播控制按钮，一个向左移动，一个向右移动。这些按钮的 `href` 属性指向轮播图容器的 `id`，并且它们的 `data-slide` 属性分别设置为 `prev` 和 `next`，表示点击它们时轮播图将向前或向后移动。 6. 最后，我们在 `<body>` 标签底部引入 Bootstrap 4 的 JavaScript 文件，以便轮播图能够正常工作。 希望这个示例对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值