使用BootStrap制作CRM管理系统

最新推荐文章于 2024-07-10 11:03:07 发布

雷大胖胖

最新推荐文章于 2024-07-10 11:03:07 发布

阅读量405

点赞数 1

文章标签： bootstrap 前端 javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_74795259/article/details/127754076

版权

目录

一项目准备工作

1.1添加依赖

1.2项目开发中用到的图片资源

二前端开发

2.1登录页面开发

创建login.html,并导入依赖(bootstrap,vue)

2.2首页开发

创建index.html，，并导入依赖（bootstrap、vue）

2.3添加用户开发

创建user_add.html，，并导入依赖（bootstrap、vue）

2.4、用户管理页面效果

创建user_list.html，并导入依赖（bootstrap、vue）

2.5、修改密码页面效果

创建user_list.html，并导入依赖（bootstrap、vue）

一项目准备工作

1.1添加依赖

bootstrap依赖,JQuery依赖,vue依赖

1.2项目开发中用到的图片资源

二前端开发

2.1登录页面开发

创建login.html,并导入依赖(bootstrap,vue)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
    <div class="container" id="app">
        <!--1画框-->
        <div class="row">

            <div class="col-md-6 col-md-offset-3" style="height: 310px;border:1px solid black;margin-top: 80px">
                <div class="row">
                    <!--2显示标题的div-->
                    <div class="col-md-5" style="height: 310px;background-color: rgb(43,136,223);font-size: 18px;color:white;font-weight:bold;text-align: center;line-height: 310px;">
                        蜗牛CRM管理系统
                    </div>
                    <!--3显示内容-->
                    <div class="col-md-7">
                        <!--4bootstap画hang-->
                        <div class="row">
                            <div class="col-md-12" style="text-align: center;font-size: 18px;font-weight: bold;padding:30px 0 30px 0;">
                                登录
                            </div>
                        </div>
                        <!--5bootstap画账号的行-->
                        <div class="row" style="height: 60px;margin-bottom: 20px;">
                            <div class="col-md-8 col-md-offset-2">
                                <lable>用户名</lable>
                                <input type="text" class="form-control" v-model="username"/>
                            </div>
                        </div>
                        <!--6bootstap画密码的行-->
                        <div class="row" style="height: 60px; margin-bottom: 20px;">
                            <div class="col-md-8 col-md-offset-2">
                                <lable>密码</lable>
                                <input type="possword" class="form-control" v-model="posswd"/>
                            </div>
                        </div>
                        <!--7bootstap画按钮的行-->
                        <div class="row" style="height: 60px;">
                            <div class="col-md-8 col-md-offset-2" style="text-align: center">
                               <button class="btn btn-primary" style="margin-right: 8px;" @click="dologin">登录</button>
                                <button class=" btn btn-default" @click="doRest">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

运行效果

2.2首页开发

创建index.html，，并导入依赖（bootstrap、vue）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
    <style>
        a:link{font-size: 20px;color:rgb(109,109,109);}
        a:visited{font-size: 20px;color:rgb(109,109,109);}
        a:hover{font-size: 20px;color:white;text-decoration:none; }
    </style>
</head>
    <body>
    <div class="container" id="app">
        <div class="row">
            <!--导航-->
            <div class="col-md-3" style="background-color: rgb(0,21,41);height: 600px;">
                <!--行-->
                <div class="row">
                    <div class="col-md-12" style="background-color: rgb(0,40,77);text-align: center;line-height: 70px;height: 70px;font-size: 20px;color: white;font-weight: bold;">
                        <!--添加蜗牛logo图片并设置大小-->
                        <img src="assets/img/logo.png" style="width:30px;height: 30px;margin-right: 8px;"/>
                        蜗牛GRC管理系统
                    </div>

                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">
                        <a href="index.html">进入首页</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">
                        <a href="user_list.html">用户管理</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">
                        <a href="user_add.html">添加用户</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;">

最低0.47元/天解锁文章

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
使用BootStrap制作CRM管理系统

重置修改修改修改修改
复制链接

扫一扫

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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