#上课记录#Day7利用Bootstrap框架制作简单的后台页面及登录界面

最新推荐文章于 2023-08-15 23:12:23 发布
最新推荐文章于 2023-08-15 23:12:23 发布
阅读量360 收藏 3
点赞数
文章标签： HTML 学习 BootStrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43455505/article/details/100714937
版权

Day7利用Bootstrap框架制作简单的后台页面及登录界面

  • 效果展示如下
    – 登录界面
    在这里插入图片描述
    –后台界面
    在这里插入图片描述
    – 代码展示（登录界面）
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="jquery-3.4.1.min.js"></script>
</head>
<style>
    body {
        font-family: "Microsoft YaHei";
    }
    #login {
        width: 30%;
        background: url(http://pic32.nipic.com/20130813/3347542_160503703000_2.jpg);
        margin-top: 250px;
        background-position:-150px -70px;
        border: 1px solid #f5f5f5;
    }
    #login form {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .text-center h1 {
        color: #FFFFFF;
    }
</style>
<body>
<div id="login" class="center-block">
    <div class="text-center">
        <h1>一个学院管理系统</h1>
    </div>
    <form style="width: 300px" action="#" class="center-block">
        <div class="form-group">
            <label for="username">账号：</label><input type="text" class="form-control" id="username">
        </div>
        <div class="form-group">
            <label for="password">密码：</label><input type="password" class="form-control" id="password">
        </div>
        <div class="row">
            <input style="width: 80px" type="submit" value="登录" class="btn btn-primary col-md-6 col-md-push-4" onclick="login()">
        </div>
    </form>
</div>
<script>
    function login() {
        var username = $("#username").val()
        var password = $("#password").val()
        if (username == "MoYiopo" && password == 123456) {
            window.location.href = "index.html";
        } else {
            alert("账号：MoYiopo  "+"密码：123456")
        }
    }


</script>
</body>
</html>

– 代码展示（登录界面）

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body >
<div class="center-block" style="width: 80%">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">一个学院管理教程</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">学员管理</a></li>
                    <li><a href="#">教师管理</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            其他管理
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">其他1</a></li>
                            <li><a href="#">其他2</a></li>
                            <li><a href="#">其他2</a></li>
                            <li class="divider"></li>
                            </li>
                        </ul>
            </div>
        </div>
    </nav>
    <div>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>班级</td>
                <td>学院</td>
                <td>管理</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>陌陌</td>
                <td>102</td>
                <td>xx学院</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-default">修改</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>陌陌</td>
                <td>102</td>
                <td>xx学院</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-default">修改</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>陌陌</td>
                <td>102</td>
                <td>xx学院</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-default">修改</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>陌陌</td>
                <td>102</td>
                <td>xx学院</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-default">修改</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>陌陌</td>
                <td>102</td>
                <td>xx学院</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-default">修改</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr>


            </tbody>

        </table>
    </div>
</div>

</body>
</html>
陌然回忆
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap快速制作后台界面
01-19
最近看了bootstrap的一个小的视频，快速的做出一个后台界面；介绍了一些典型的用法； 里面涉及了： 下拉菜单、胶囊菜单、胶囊菜单垂直显示、栅格排列、导航栏、字体图标、 图片样式、输入组、折叠菜单panel、面包屑...
使用bootstrap框架实现简单登录页面
qq_49688914的博客
07-20 9390
登录注册
【一、bootstrap框架前端注册登录页面】
weixin_51988564的博客
03-28 4155
基于eclipse平台，java语言开发，前端用到bootstrap框架，后端使用jsp技术和servlet技术，数据库使用mysql，服务器端使用tomcat,设计并开发一个电子相册系统。
前端大作业-Boostrap实现静态登录和后台页面
m0_62237233的博客
09-26 1005
基础部分类似同上，底下设几个div块，head的style css样式中 如.main > div:nth-child(1)指main中第一个div，.main > div:nth-child(2)>div:first-child指main中第二个div的第一个div。文档里组件-》弄个登录块，输入部分全局css样式中找表单。里面min.js,css等要导入，我导入在文件夹的3rd下，算是模板代码。（一般先div设成颜色块看布局，问题不大再去掉颜色往里面填内容）
Bootstrap(首页整和&&实现登录、注册)
m0_68332494的博客
05-01 2757
首页整和以及实现登录、注册 案例1：首页轮播图实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：首页轮播图实现</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> .
[前端]基于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后台登录界面模板_后台模板_bootstrap_
10-01
在这个“Bootstrap后台登录界面模板”中，我们可以找到一个预设计好的登录页面模板，这对于快速搭建后台管理系统非常有帮助。 模板设计遵循了Bootstrap的核心原则，包括网格系统、响应式布局以及易于定制的CSS类。...
使用Bootstrap框架制作查询页面的界面实例代码
09-02
主要介绍了使用Bootstrap框架制作查询页面界面的效果，本文以职业技能考证分数查询界面为例，通过实例代码给大家详细介绍,需要的朋友可以参考下
bootstrap创建登录注册页面
热门推荐
ITDragon博客
12-15 15万+
用bootstrap做登入注册页面，使用validate做表单验证 技术：bootstrap，font-awesome，jquery-validate； 特点：响应式布局，表单验证（用户两次密码是否相同，必填信息是否填写）背景图片自适应屏幕大小； 宗旨：从实战中学知识。 个人主页：http://www.itit123.cn/ 更多干货等你来拿 （微信小程序入门教程：入门教程系列 ，提供免费的api接口，无需考虑服务端代码问题）。
使用Boostrap框架写一个登录\注册界面
weixin_30912051的博客
10-01 1048
　　Bootstrap是一个Web前端开发框架，使用它提供的css、js文件可以简单、方便地美化HTML控件。一般情况下，对控件的美化需要我们自己编写css代码，并通过标签选择器、类选择器、ID选择器为指定的控件使用。Bootstrap框架为各种控件定义好了很多的类（class），在引入相关文件后，为控件添加相应的类，控件就变成了这个类所规定的样子了。Bootstrap现在有两个版本，Bootst...
bootstrap做登录注册页面带验证
12-15
用bootstrap做的登录，注册页面，使用validate进行表单验证，是本人从空白页面搭建的，亲测可用，1积分算是我的辛苦费吧。 我会通过博客注明知识点：http://blog.csdn.net/qq_19558705； 希望能帮到大家。没有积分的小伙伴可以私信我，我加qq发给你
一份Bootstrap框架的期末作业
06-17
这是我对平时bootstrap使用练习的一个集合，欢迎下载，使用的时候一定要注意更改页面底部标签-_-
基于bootstrap3后台模板(含登陆页面)
07-29
bootstrap3后台模板，内含大量插件和Demo，能满足绝大多数的需求。
使用BootStrap实现用户登录界面UI
09-01
本文给大家介绍使用BootStrap实现用户登录界面UI，布局风格采用左右各一半的风格设计，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面（看评论酌情下载）
12-07
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面（看评论酌情下载）
bootstrap-3.3.7实现简单登录注册页面
weixin_40460171的博客
07-04 4684
效果图如下 代码 注册页面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
运用 bootstrap 创建简单的登陆界面
m0_73384165的博客
08-15 3436
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。​Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
基于Bootstrap的登录&注册模板（html+css）
皮埃尔的博客
01-28 1万+
基于Bootstrap的登录&注册模板（html+css），适合django等框架，可直接修改对接后端。
bootstrap搭建后台管理页面
NeoYang的专栏
03-03 3万+
bootstrap搭建后台管理页面管理页面主体包括4部分，顶部导航栏，左侧导航栏，中间正文页和底部的页脚。其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件，主体页面为了演示方便，使用了iframe框架。
利用bootstrap框架制作
最新发布
06-09
Bootstrap是一个流行的前端开发框架，它提供了大量的预设样式、组件和网格系统，使得创建响应式、移动优先的Web应用程序变得简单易行。使用Bootstrap，你可以快速构建出美观且功能性的网站和应用界面，而无需从头开始编写CSS。以下是一些关键特点和如何使用Bootstrap的基本步骤： 1. **响应式设计**：Bootstrap基于Flexbox和Media Queries，确保在不同设备上都能适应布局。 2. **预设样式**：Bootstrap提供了一系列的UI组件，如导航栏、按钮、卡片、表单控件等，有预定义的颜色和间距，可以直接使用。 3. **网格系统**：12列的栅格系统，方便你轻松创建灵活的布局。 4. **易于定制**：可以通过Sass（SCSS版本）进行扩展或定制，改变颜色、字体等全局样式。 **制作步骤**: - **引入文件**：在HTML中链接Bootstrap的CSS和JavaScript文件，通常用`<link>`和`<script>`标签。 - **HTML结构**：使用Bootstrap提供的标签结构，比如<nav>导航栏、<div class="container">内容容器等。 - **组件使用**：应用Bootstrap类到元素上，例如 `.btn`类为按钮添加样式，`.navbar`用于导航条。 - **编写CSS**：如果你需要自定义样式，可以在HTML文档内使用内联样式，或者另写一个独立的CSS文件并引入。 - **利用插件**：Bootstrap提供了很多交互性插件，如模态框、下拉菜单、轮播图等，可通过JavaScript实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值