Bootstrap登录页面制作（十三）

最新推荐文章于 2024-08-04 22:07:39 发布
最新推荐文章于 2024-08-04 22:07:39 发布
阅读量1.6k 收藏 10
点赞数
分类专栏： # Bootstrap 文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dengfengling999/article/details/128159748
版权

创建web项目 

 

 

 

引入bootstrap：

 

创建login页面引入bootstrap：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--引入bootstrap的css-->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!--引入jQuery的文件-->
    <script src="../static/jq/jquery-3.6.0.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../static/js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

刷新页面F12在NetWork查看是否引入成功： 

 

<!--用户标题-->
   <div class="row" style="margin-top: 70px">
       <!--偏移3分占6分-->
       <div class="col-sm-6 col-sm-offset-3">
           <h1 class="text-center">用户登录</h1>
       </div>
   </div>

 

 

<!--用户表单-->
<div class="row">
    <!--偏移3分占6分-->
    <div class="col-sm-6 col-sm-offset-3">
        <!--表单-->
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</div>

 

修改表单：

 

<!--用户表单-->
<div class="row">
    <!--偏移3分占6分-->
    <div class="col-sm-6 col-sm-offset-3">
        <!--表单-->
        <form>
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="email" class="form-control" id="name" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <label for="code">验证码</label>
                <div>
                    <input type="text" class="form-control" style="width: 70%; height:55px;float: left;" id="code" placeholder="请输入验证码">
                    <img src="../static/imgs/22.png" style="float:right;width: 220px;height: 55px">
                </div>

            </div>
            <div class="clearfix"></div>
            <button type="submit" class="btn btn-danger" style="margin-top: 10px;float:left;width: 65%">登录</button>
            <button type="submit" class="btn btn-info" style="margin-top: 10px;float: right;width: 25%">登录</button>
        </form>
    </div>
</div>

 

全部登录代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--引入bootstrap的css-->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <!--引入jQuery的文件-->
    <script src="../static/jq/jquery-3.6.0.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../static/js/bootstrap.min.js"></script>
    <style>
        .form-control{
            height: 45px;
        }
    </style>
</head>
<body>
<!--用户标题-->
   <div class="row" style="margin-top: 70px">
       <!--偏移3分占6分-->
       <div class="col-sm-6 col-sm-offset-3">
           <h1 class="text-center">用户登录</h1>
       </div>
   </div>
<!--用户表单-->
<div class="row">
    <!--偏移3分占6分-->
    <div class="col-sm-6 col-sm-offset-3">
        <!--表单-->
        <form>
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="email" class="form-control" id="name" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <label for="code">验证码</label>
                <div>
                    <input type="text" class="form-control" style="width: 70%; height:55px;float: left;" id="code" placeholder="请输入验证码">
                    <img src="../static/imgs/22.png" style="float:right;width: 220px;height: 55px">
                </div>

            </div>
            <div class="clearfix"></div>
            <button type="submit" class="btn btn-danger" style="margin-top: 10px;float:left;width: 65%">登录</button>
            <button type="submit" class="btn btn-info" style="margin-top: 10px;float: right;width: 25%">登录</button>
        </form>
    </div>
</div>
</body>
</html>

 

喵俺第一专栏
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用Bootstrap框架制作简易登录界面
qq_40918903的博客
02-08 1万+
使用Bootstrap框架制作简易登录界面 从学校出来到在软件公司工作已经快三个月了，终于要转正了，在公司实习期间也学习了很多东西，比如正好总结一下。下面介绍的是如何使用Bootstrap制作一个简易登录界面。 一 使用Bootstrap网页模板 我提供的模板是Bootstrap 4，这个模板是我在学习途中，总结出来的，可以套用，在创建模板的过程中，需要注意两点：第一，要下载Bootstrap的相...
运用BootStrap之制作一个简单的登录页面
bears2的博客
05-29 4823
<!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.
【登录页面的美化】bootstrap的使用
m0_73575951的博客
07-19 860
对bootstrap需要在官网下载应用包，放入我们所写的项目中，然后再导入包，再官网的使用方法中可以找到很多的前端制作模板。
大学生bootstrap框架网页作业成品 bootstrap响应式网页制作模板 学生家乡网页bootstrap框架网站作品 html静态网页设计制作 dw静态网页成品模板素材网页
HTML网页设计
06-14 438
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——
采用bootstrap框架实现登录页面
qq_34884166的博客
12-20 1927
源码下载：微信小程序搜 “涨知识1024” ，搜索关键字“登录页”
Bootstrap JQuery 制作一个登录页面
qq_36371594的博客
06-13 640
使用JQuery Bootstrap 制作一个简简单单的登录界面
简单使用bootstrap制作ASP.NET的登录页面
大红鹰王狗蛋的IT之路
03-10 9537
一、引言    刚刚学习接触ASP.NET的开发，为了熟悉vs的环境，练习之前学的bootsrap 的使用，制作了简单的登录页面。过于简单，不喜勿喷哈，具体的样子如图所示。当登录成功时:当登录失败时:二、实现其实具体的实现过程还是比较容易的，首先需要在项目中导入，bootstrap的相关包：然后新建一个.aspx的登录页面写入&lt;%@ Page Language="C#" AutoEventW...
使用bootstrap框架实现简单登录页面
qq_49688914的博客
07-20 9364
登录注册
Bootstrap快速搭建登录界面
HerryDong的博客
09-11 6968
【代码】Bootstrap快速搭建登录界面。
bootstrap绘制登录页面
weixin_52837547的博客
11-08 573
了解bootstrap制作登录页面
simple:用bootstrap4制作的简单登录页面
04-16
这个"simple:用bootstrap4制作的简单登录页面"项目是利用Bootstrap 4 的组件和网格系统来创建一个简洁、高效的登录界面。下面将详细介绍如何使用Bootstrap 4 创建登录页面以及涉及到的相关知识点。 1. **Bootstrap ...
使用Bootstrap框架制作查询页面的界面实例代码
09-02
主要介绍了使用Bootstrap框架制作查询页面界面的效果，本文以职业技能考证分数查询界面为例，通过实例代码给大家详细介绍,需要的朋友可以参考下
bootstrap快速制作后台界面
01-19
最近看了bootstrap的一个小的视频，快速的做出一个后台界面；介绍了一些典型的用法； 里面涉及了： 下拉菜单、胶囊菜单、胶囊菜单垂直显示、栅格排列、导航栏、字体图标、 图片样式、输入组、折叠菜单panel、面包屑...
Bootstrap实现登录校验表单(带验证码)
09-02
2. `bootstrapValidator.min.css`：这是用于表单验证的第三方库Bootstrap Validator的CSS文件，它提供了美观的验证样式。 3. `jquery-2.1.4.min.js`：jQuery库，用于简化DOM操作和事件处理。 4. `bootstrap.min.js`...
从根儿上学习spring 九 之run方法启动第四段(3)
最新发布
baidu_19338587的博客
08-04 601
一般情况下调用doGetBean方法获取的bean实例都是为了真实使用的，像我们上面举得A，B对象的例子获取的A，B对象当然都是为了真实使用的，但有种场景就只是为了做类型检查，比如有时候为了判断FactoryBean里的对象的类型就要先获取FactoryBean再通过getObject方法获取里面的真实对象来判断其类型，这时获取的FactoryBean实例可能就只是为了类型检查并不是为了真实使用。二:当bean是多例时，会有不同的创建bean的逻辑，下面我们按照代码顺序先分析单例的情况。
学习日志7.29--QOS（Quality of Service）服务质量
m0_62560069的博客
07-29 305
命令：[R1-GigabitEthernet0/0/2]qos car outbound cir 20，在接口2限制，qos限速car传出速率(outbound)，速率分为传出速率和传入速率，对于这个拓扑就是传出速率，单位为20kbps。再在PC机上做发包设置，目的地址是2.2.2.2，源地址是1.1.1.1，端口号在范围允许内随便写但是要保持一致，周期发送时间间隔为10ms，一秒就可以发送100次配置好后，发送。我们日常生活中办理的是宽带，在网络速率上我们要求的是带宽，指传输的速率，比如50Mbps。
从根儿上学习spring 五 之run方法启动第二段
baidu_19338587的博客
08-04 538
讲完了PropertySources和PropertySource，我们再回头看图6的方法configurePropertySources方法似乎变得很简单没必要一行行分析了吧，这个方法就是向environment的sources属性里加入启动时的两个PropertySource，有不清楚的同学再结合我上面说的对着代码看两遍就清楚了，我就不再赘述了。Environment接口继承了PropertyResolver接口，PropertyResolver接口主要提供了获取配置属性的方法，如图3所示。
使用bootstrap制作一个登录界面
05-13
这个登录界面使用了 Bootstrap 的栅格系统，将登录表单放在了一个 `col-md-4` 的区域中，居中显示。登录表单使用了 Bootstrap 的表单组件，包括 `form-group`、`form-control` 和 `btn` 等。 你可以将这个代码保存...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喵俺第一专栏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值