代码编织梦想

一、使用bootstrap框架写一个简易的前端登录页面。

先上截图

下面开始记录本人使用bootstrap框架写这个登录页面的过程

1、bootstrap需要的配置文件

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

 2、如何修改背景图片

body
        {
            background-image:url(C:/Users/hp/Desktop/01.webp);//此处可修改背景图片
            background-size:cover;
            background-repeat: no-repeat;
        }

3、如何写一个图标与输入框附合的表单

例如这样 

<div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                         </div>

 4、如何写一组单选框

<div class="well well-sm" style="text-align:center;">
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 普通用户
                        </label>
                        <label class="radio-inline">
                            <input type="radio"name="optionsRadios"id="optionsRadios1"values="option2">管理员
                        </label>
                    </div>

5、最后附上完整代码:

<!DOCTYPE html> <!--告知浏览器是哪一个版本-->
<html>
    <head>
        <meta charset="utf-8"> <!--定义页面使用编码-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"><!--适应手机-->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- css样式表 -->
<style>
    body
        {
            background-image:url(C:/Users/hp/Desktop/01.webp);
            background-size:cover;
            background-repeat: no-repeat;
        }
    .loginform{
        /*上边界距离*/
        margin-top: 100px;
    }
   
</style>


    </head>
<body>
<div class="loginform">
    <!-- <h1 class="text-center">电子相册系统</h1> -->
    <div class="container-fluid">
        <div class="row bg">
            <div class="col-md-4 col-md-offset-4" style="border: #4d4d4d solid 1px;background-color: hsl(0, 0%, 98%);">
                <form class="form-container" role="form">
                    <h3 class="text-center">用户登录</h3>
                    <div class="form-group">
                        <label for="username">用户名 </label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                         </div>
                    </div>

                    <div class="form-group">
                        <label for="password">密码</label>
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                            <input type="password" class="form-control" id="password" placeholder="请输入密码">
                    </div>

                    <div class="well well-sm" style="text-align:center;">
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 普通用户
                        </label>
                        <label class="radio-inline">
                            <input type="radio"name="optionsRadios"id="optionsRadios1"values="option2">管理员
                        </label>
                    </div>
                    
                    <div>
                        <button class="btn btn-primary btn-block active" id="in" type="submit">登录</button>
                    </div>

                    <div class="well well-sm" style="text-align:center;">
                    <button type="button" class="btn btn-link">注册用户</button>
                    <button type="button" class="btn btn-link">找回密码</button>
                    </div>

                </form>        
            </div>
        </div>
    </div>
</div>
</body>
</html>

6、最后的最后,仅以此文记录本新手小白开发电子相册管理系统的过程,如有错误或建议,欢迎指正!感激不尽!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_51988564/article/details/129822168

Bootstrap(前端开发框架一)-爱代码爱编程

目录 一、什么是WWW? 1、What:Bootstrap是什么 2、Why:为什么学Bootstrap? 3、Where:什么时候用Bootstrap? 二、Bootstrap的环境安装 1、下载Bootstrap库 2、页面中引入库 三、部分题目案例 准备工作 例1:查询按钮原生态实现对比Bootstrap方式实现 例2:演示Bo

Bootstrap【前端框架】-爱代码爱编程

一、环境安装 1、下载Bootstrap库 网址:http://www.bootstrap.com 二·引入 用它的时候记得引入:    bootstrap.min.css:Bootstrap核心样式【添加到head标签中】     jquery-3.3.1.js:jQuery库【注意:必须在Bootstrap核心库引入之前引入jQuery库】

Bootstrap前端框架-爱代码爱编程

什么是Bootstrap?         Bootstrap是一个基于HTML、CSS、JavaScript开发的简介、直观、强悍的前端开发框架,最初由Twitter的一名开发人员和一名设计人员创建。它提供了优雅的HTML规范和CSS规范。         ①.诞生于2011年,来自Twitter公司,是目前最受欢迎的前端框架         ②.

Bootstrap前端框架的基本使用-爱代码爱编程

目录 前端框架的理解  前端框架与前端类库的理解 使用Bootstrap所需要的依赖包 连网版导入 Bootstrap按钮样式与js对比  Bootstrap实现导航条  Bootstrap4中的固定容器与流式容器区别 更多详情请看Bootstrap文档 官网地址 纯中文翻译网址分享 前端框架的理解 1.前端框架是什么意