使用Bootstrap框架制作简易登录界面

最新推荐文章于 2024-06-30 12:00:24 发布
最新推荐文章于 2024-06-30 12:00:24 发布
阅读量1.1w 收藏 81
点赞数 10
分类专栏： 网页学习 文章标签： html5 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40918903/article/details/86775749
版权

使用Bootstrap框架制作简易登录界面

从学校出来到在软件公司工作已经快三个月了，终于要转正了，在公司实习期间也学习了很多东西，比如正好总结一下。下面介绍的是如何使用Bootstrap制作一个简易登录界面。

一 使用Bootstrap网页模板

我提供的模板是Bootstrap 4，这个模板是我在学习途中，总结出来的，可以套用，在创建模板的过程中，需要注意两点：第一，要下载Bootstrap的相关样式，第二，导入相关jQuery的插件。

//
<!doctype html>
<html lang="zh-cmn-Hans">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

注意：当我们引入Bootsrap.js和jQuery.js文件要注意引入该文件的先后顺序，要先引入jQuery.js再引入Bootstrap.js，否则就会报错。因为Bootstarp.js文件的开发是基于jQuery开发的，所以要先引入jQuery.js才可以使用Bootstrap。

二 使用BootStrap模板制作登录界面

制作好模板之后，就可以在中插入内容。
下面插入我已经写好的一个demo。直接插入body中。

// An highlighted block
 <div class="container">
最低0.47元/天 解锁文章
馨宝Alice
关注
  • 10
    点赞
  • 踩
  • 81
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap 登录界面
weixin_44984486的博客
05-28 1088
<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%> <%@ taglib uri=“http://java.sun.com/jsp/jstl/core” prefix=“c” %> <%@ taglib uri=“http://java.sun.c...
bootstrap实现登录页面
07-04
实现静态的登录页面，借助于bootstrap框架。Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
简单通用登录页面模板 bootstrap登录页面 html页面
01-18
简单通用登录页面模板，用户登录界面模板，有表单验证功能。
基于bootstrap的12种登录注册页面模板
最新发布
u012604801的博客
06-30 639
基于bootstrap的12种登录注册页面模板，分三种类型，默认简单的登录和注册，带背景图片的登录和注册，支持弹窗的登录和注册页面html下载。
4个bootstrap登录界面
07-12
4个bootstrap登录界面
bootstrap登录页面_Vue+Spring Boot简单用户登录Demo实现
weixin_39611008的博客
11-13 601
❝「如果觉得文章好看，欢迎点赞。」「同时欢迎关注微信公众号：氷泠之路。」❞这是一个前后端分离的简单用户登录Demo。技术栈VueBootstrapVueKotlinSpring BootMyBatis Plus前端创建工程使用vue-cli创建，没安装的可以先安装：sudocnpminstall-gvue@vue/cli查看版本：vue-V出现版本就安装成功了。创建初始工程：...
运用BootStrap之制作一个简单的登录页面
bears2的博客
05-29 4831
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>账号登录</title> <link rel="stylesheet" href="https://cdn.
simple:用bootstrap4制作的简单登录页面
04-16
这个"simple:用bootstrap4制作的简单登录页面"项目是利用Bootstrap 4 的组件和网格系统来创建一个简洁、高效的登录界面。下面将详细介绍如何使用Bootstrap 4 创建登录页面以及涉及到的相关知识点。 1. **Bootstrap ...
Bootstrap后台登录界面模板_后台模板_bootstrap_
10-01
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和设计工具，使得构建响应式、移动优先的网站变得简单高效。在这个“Bootstrap后台登录界面模板”中，我们可以找到一个预设计好的登录页面...
bootstrap框架登陆框样式
04-12
这个"bootstrap框架登陆框样式"项目显然旨在教授初学者如何利用Bootstrap来创建一个基本的登录界面。在这个教程中，我们将深入探讨Bootstrap的核心组件、CSS类以及JavaScript插件，以实现一个功能齐全且美观的登录框...
基于bootstrap的简洁登录界面Html
03-28
基于bootstrap的简洁登录界面，可以直接下载使用~内置css+js
bootstrap登录页面
10-12
bootstrap 手机电脑自适应屏幕 登录页面
使用BootStrap实现用户登录界面UI
09-01
本文给大家介绍使用BootStrap实现用户登录界面UI，布局风格采用左右各一半的风格设计，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
bootstrap简易登录注册页面
03-30
资源共享bootstrap简易登录注册页面
BootStrap用户登录界面的实现
11-29
本压缩包包含 BootStrap用户登录界面的实现，并且通过 jquery validate验证信息
Bootstrap点击弹出注册登录界面模板
06-08
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，使得构建响应式、移动优先的网页变得快速而简单。在这个“Bootstrap点击弹出注册登录界面模板”中，我们专注于利用Bootstrap 3.3.7...
Bootstrap的登陆页面
m0_46319477的博客
05-26 860
【代码】Bootstrap的登陆页面。
bootstrap 登录页面
趁年轻再疯狂一次吧
05-12 3566
商家登录         ">                             library" rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/js/sandbox/bootstrap-2.2.0/css/bootstrap.min.css">              
使用bootstrap框架写一个简单的登录界面
04-20
好的，这个问题是可以回答的。你可以在HTML中引入Bootstrap的CSS和JS，然后用Bootstrap提供的样式和组件来设计一个简单的登录界面。以下是一个简单的例子： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login Page</title> <!-- 导入Bootstrap的CSS --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row justify-content-center mt-5"> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Login</h4> <form> <div class="form-group"> <label>Username:</label> <input type="text" class="form-control" placeholder="Enter username"> </div> <div class="form-group"> <label>Password:</label> <input type="password" class="form-control" placeholder="Enter password"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </div> </div> <!-- 导入Bootstrap的JS --> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> </body> </html> ``` 这个例子使用了Bootstrap的卡片、表单和按钮组件来实现一个简单的登录界面。你可以根据需求自行修改。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值