使用bootstrap制作CRM管理系统

最新推荐文章于 2024-04-22 22:28:40 发布
最新推荐文章于 2024-04-22 22:28:40 发布
阅读量336 收藏 1
点赞数 1
文章标签： bootstrap javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45428087/article/details/127754825
版权

一.项目准备工作

1.添加依赖

bootstrap依赖、jQuery依赖、vue的依赖

2.准备项目中用到的图片

二.前端开发

1.登录页面开发

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

<head>
<!--    导入bootstrap依赖-->
    <link type="text/css" 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>
<!--    导入vue依赖-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
    <meta charset="UTF-8">
    <title>登录</title>
</head>

使用bootstap布局页面

<body>
<div class="container" id="app">
    <div class="row" style="margin-top: 120px;">
        <div class="col-md-6 col-md-offset-3" style="height: 310px;border: 1px solid black;">
            <div class="row" style="height: 310px;">
                <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>
                <div class="col-md-7">
                    <div class="row" style="padding: 30px 0px 30px 0px;">
                        <div class="col-md-12" style="text-align: center;font-size: 18px;font-weight: bold">
                            登录
                        </div>
                    </div>
                        <div class="row" style="height:60px ;margin-bottom: 20px">
                            <div class="col-md-8 col-md-offset-2">
                              <label>用户名</label>
                                <input type="text" class="form-control" v-model="userName"/>
                            </div>
                        </div>
                        <div class="row" style="height:60px ;margin-bottom: 20px">
                            <div class="col-md-8 col-md-offset-2">
                                <label>密码</label>
                                <input type="password" class="form-control" v-model="passwd"/>
                            </div>
                        </div>
                        <div class="row" style="height: 60px;margin-bottom: 20px">
                            <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="doReset">重置</button>
                            </div>
                        </div>
                    </div>

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

运行后的效果

使用Vue实现登录/重置功能

<script >
    new Vue({
        el:'#app',//将id为app的div管理权交给Vue
        data:{//需要绑定的数据
            userName:null,//用户名
            passwd:null//密码
        },
        methods:{//所有声明的函数
            doLogin(){//点击登录按钮执行
                //通过this. 可以获取data中的数据
             if (this.userName== 'admin'&& this.passwd=='123'){
                window.location.href='index.html';//跳转到主页index.html
             } else{//登录失败
                 alert("用户名或密码错误");//弹窗警告
             }
            },
            doReset(){
                this.userName=null;
                this.passwd=null;
            }
        },
        created:function () {//页面加载完成后执行

        }
    });
</script>

2.首页开发

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

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link type="text/css" 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>
    <!--    导入vue依赖-->
    <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>
```注意:同时给所有超链接布局样式
使用bootstap布局页面

```java
 <div class="container" id="app">
        <div class="row">
            <div class="col-md-3" style="background-color: rgb(0,21,41);;height:602px;">
               <div class="row">
                   <div class="col-md-12" style="background-color:rgb(0,40,77);text-align: center;height: 70px;line-height:70px;font-size:20px;color:white;font-weight: bold">
                       <img src="assets/img/logo.png" style="width: 30px;height:30px;margin-right: 8px"/>
                       蜗牛crm管理系统
                   </div>
               </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                        <a href="index.html">进入首页</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                        <a href="user_list.html">用户管理</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                        <a href="re.html">添加用户</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                        <a href="#">添加客户</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                        <a href="update.html">修改密码</a>
                    </div>
                </div>
                <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="lg.html">退出登录</a>
                </div>
            </div>
            </div>
            <!--显示内容-->
            <div class="col-md-9" style="border:1px solid gray;">
                <div class="row">
            <!--显示提示位置-->
                    <div class="col-md-12" style="height: 70px;font-size: 18px;color: rgb(109,109,109);font-weight:bold;padding-left:20px">
                        >&nbsp;&nbsp;首页
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="background-color:rgb(240,242,245);height: 530px;padding: 20px">
                        <img src="assets/img/index.png" style="height:480px;" class="img-responsive center-block"/>
                    </div>
                </div>
            </div>
        </div>

    </div>

运行后的效果
在这里插入图片描述## 3.添加用户页面开发
创建user_add.html，，并导入依赖（bootstrap、vue）

<head>
    <!--    导入bootstrap依赖-->
    <link type="text/css" 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>
    <!--    导入vue依赖-->
    <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>
    <meta charset="UTF-8">
    <title>添加用户</title>
</head>

使用bootstap布局页面

<div class="container" id="app">
    <div class="row">
        <div class="col-md-3" style="background-color: rgb(0,21,41);;height:602px;">
            <div class="row">
                <div class="col-md-12" style="background-color:rgb(0,40,77);text-align: center;height: 70px;line-height:70px;font-size:20px;color:white;font-weight: bold">
                    <img src="assets/img/logo.png" style="width: 30px;height:30px;margin-right: 8px"/>
                    蜗牛crm管理系统
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="index.html">进入首页</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="user_list.html">用户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="re.html">添加用户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="#">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="update.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="lg.html">退出登录</a>
                </div>
            </div>
        </div>
        <!--显示内容-->
        <div class="col-md-9" style="border:1px solid gray;height:602px">
            <div class="row">
                <!--显示提示位置-->
                <div class="col-md-12" style="height: 70px;font-size: 18px;color: rgb(109,109,109);font-weight:bold;padding-left:20px">
                    >&nbsp;&nbsp;&nbsp;&nbsp;添加用户
                </div>
            </div>
            <div class="row" style="background-color:rgb(240,242,245);height: 500px;padding:20px;">
                <div class="col-md-12" style="background-color:white;height: 500px;border: none;border-radius: 5px">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>用户名</label>
                            <input type="text" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>昵称</label>
                            <input type="text" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>手机号</label>
                            <input type="text" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>生日</label>
                            <input type="text" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label style="margin-right: 15px">性别</label>
                            <ladel class="radio-inline">
                                <input type="radio" name="sex"/>男
                            </ladel>
                            <ladel class="radio-inline">
                                <input type="radio" name="sex"/>女
                            </ladel>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;text-align: center">
                            <button class="btn btn-primary" style="margin-right:8px">添加</button>
                            <button class="btn btn-default">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

运行后的效果
在这里插入图片描述 ## 4.用户管理页面效果
创建user_list.html，并导入依赖（bootstrap、vue）

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link type="text/css" 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>
    <!--    导入vue依赖-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
    <style>
        td{
          vertical-align: middle!important;
        }
        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>

使用bootstap布局页面

<div class="container" id="app">
    <div class="row">
        <div class="col-md-3" style="background-color: rgb(0,21,41);;height:602px;">
            <div class="row">
                <div class="col-md-12" style="background-color:rgb(0,40,77);text-align: center;height: 70px;line-height:70px;font-size:20px;color:white;font-weight: bold">
                    <img src="assets/img/logo.png" style="width: 30px;height:30px;margin-right: 8px"/>
                    蜗牛crm管理系统
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="index.html">进入首页</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="user_list.html">用户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="re.html">添加用户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="#">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="update.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="lg.html">退出登录</a>
                </div>
            </div>
        </div>
        <!--显示内容-->
        <div class="col-md-9" style="border:1px solid gray;">
            <div class="row">
                <!--显示提示位置-->
                <div class="col-md-12" style="height: 70px;font-size: 18px;color: rgb(109,109,109);font-weight:bold;padding-left:20px">
                    >&nbsp;&nbsp;用户管理
                </div>
            </div>
            <div class="row" style="background-color:rgb(240,242,245);height: 500px;padding:20px;">
                <div class="col-md-12" style="background-color:white;height: 500px;border: none;border-radius: 5px">
                    <!--使用bootstrap表格斑马线样式-->
                    <table class="table table-striped" style="margin-top: 20px">
<!--                       表格描述-->
                        <caption>用户管理-用户列表</caption>
<!--                       表头-->
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>昵称</th>
                            <th>性别</th>
                            <th>生日</th>
                            <th>手机号</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1001</td>
                            <td>法外狂徒</td>
                            <td>张三</td>
                            <td>男</td>
                            <td>2000-02-04</td>
                            <td>13334435352</td>
                            <td>
                                <button class="btn btn-link">修改</button>
                                <button class="btn btn-link">删除</button>
                            </td>
                        </tr>
                        </tbody>


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

</div>

运行后的效果
在这里插入图片描述## 5.修改密码

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

<head>
    <meta charset="UTF-8">
    <title>修改</title>
    <link type="text/css" 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>
    <!--    导入vue依赖-->
    <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>

使用bootstap布局页面

<div class="container" id="app">
    <div class="row">
        <div class="col-md-3" style="background-color: rgb(0,21,41);;height:602px;">
            <div class="row">
                <div class="col-md-12" style="background-color:rgb(0,40,77);text-align: center;height: 70px;line-height:70px;font-size:20px;color:white;font-weight: bold">
                    <img src="assets/img/logo.png" style="width: 30px;height:30px;margin-right: 8px"/>
                    蜗牛crm管理系统
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="index.html">进入首页</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="user_list.html">用户管理</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="re.html">添加用户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="#">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="update.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px">
                    <a href="lg.html">退出登录</a>
                </div>
            </div>
        </div>
        <!--显示内容-->
        <div class="col-md-9" style="border:1px solid gray;">
            <div class="row">
                <!--显示提示位置-->
                <div class="col-md-12" style="height: 70px;font-size: 18px;color: rgb(109,109,109);font-weight:bold;padding-left:20px">
                    >&nbsp;&nbsp;修改
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="background-color:rgb(240,242,245);height: 530px;padding: 20px">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>当前密码</label>
                            <input type="password" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>修改密码为</label>
                            <input type="password" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px">
                            <label>再次确认密码</label>
                            <input type="password" class="form-control"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;text-align: center">
                            <button class="btn btn-primary" style="margin-right:8px">修改</button>
                            <button class="btn btn-default">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

运行后的效果
在这里插入图片描述

染叶已秋
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用bootstrap制作CRM管理系统(上)
jiangnans_的博客
11-08 147
boostrap依赖、jQuery依赖、vue的依赖。
基于Bootstrap的管理后台模板源码
03-06
基于Bootstrap的管理后台模板源码
bootstrap开源的后台管理系统模板
热门推荐
寂寥人生
06-18 1万+
AdminLTE https://github.com/ColorlibHQ/AdminLTE sb-admin https://github.com/StartBootstrap/startbootstrap-sb-admin sb-admin-2 https://github.com/StartBootstrap/startbootstrap-sb-admin-2 stisla https://github.com/stisla/stisla ace https://github.com/bop
BootstrapAdmin Net7：基于RBAC的后台管理框架,实现精细化权限管理与多站点单点登录
最新发布
chenchuang0128的博客
04-22 1141
基于 RBAC 的 Net7 后台管理框架，权限管理，前后台分离，支持多站点单点登录，兼容所有主流浏览器，内置微信、支付宝、QQ等多种登录方式，内置多种样式，可切换至 Blazor 多 Tabs 模式，权限控制细化到网页内任意元素（按钮、表格、文本框等等）一直需要一款后台管理系统，但是网上很多开源项目都是 Java 开发的，本人是 NET 平台的对 Java 一窍不通，C#版本的本来就少而且还没有合适的。于是决定自己开发一套后台管理系统。
基于SpringBoot+Bootstrap的旅游管理系统的设计与实现
2301_77541824的博客
09-28 984
随着旅游业的迅速发展，传统的旅游信息查询方式，已经无法满足用户需求，因此，结合计算机技术的优势和普及，针对常州旅游，特开发了本基于Bootstrap的常州地方旅游管理系统。本论文首先对常州地方旅游管理系统进行需求分析，从系统开发环境、系统目标、设计流程、功能设计等几个方面进行系统的总体设计，开发出本基于Bootstrap的常州地方旅游管理系统，主要实现了用户功能模块和管理员功能模块两大部分，用户可查看景点信息、景点资讯等，注册登录后可进行景点订票操作，同时管理员可进入系统后台对系统进行全面管理操作。
【前端素材】bootstrap实现的几种通用的后台管理系统（附带源码）
m0_46013789的博客
02-20 1451
应用型的后台管理系统是一种用于管理应用程序、网站或系统的后台界面，通常由开发人员或管理员使用。这类系统的主要功能是帮助管理者有效地监控、维护和控制应用程序的运行情况，同时提供必要的工具和功能来管理用户、数据、内容以及系统设置等方面。
Springboot +JPA+thymeleaf+MySQL+BootStrap的学生管理系统
qq_17347837的博客
07-04 863
主要是代码展示等相关如何实现学生管理系统等.
使用flask+bootstrap+python+mysql制作的简易库存管理系统.zip
01-21
客户关系管理系统（CRM）： 用于管理与客户之间的关系，包括客户信息、沟通记录、销售机会跟踪等。CRM系统有助于企业更好地理解客户需求，提高客户满意度和保留率。 医院管理系统： 用于管理医院或医疗机构的患者...
Azia-Admin-Bootstrap-Template：免费Bootstrap 4管理模板
02-03
非常适合构建管理面板，电子商务系统，项目管理系统，CMS或CRM。 尽管模板的设计与众不同，但可以轻松自定义以满足您的要求。 Azia Admin带有干净且注释良好的代码，可轻松使用模板。 因此，它是快速启动项目的理想...
（含实训报告）黑马boot客户管理系统（源码+数据库文件）.zip
06-24
【标题】：“黑马boot客户管理系统”是一个基于SSM框架与Bootstrap技术实现的客户关系管理系统的实践项目，包含源代码和数据库文件。 【描述】：该系统的核心开发采用SSM（Spring、SpringMVC、MyBatis）框架，这是...
旅游管理简历电子版
07-28
总的来说，一个精心制作的“旅游管理简历电子版”是你打开旅游行业大门的关键。它不仅展示你的专业技能，还展现了你的职业素养和个人品牌。用心打造这份简历，你将在竞争激烈的求职市场中脱颖而出。
.NET制作房地产信息管理系统
04-25
本文将详细介绍.NET制作房地产信息管理系统的关键技术和设计思路。 一、.NET框架基础 .NET是微软公司推出的一款开源开发平台，它提供了丰富的类库和工具，支持多种编程语言，如C#、VB.NET等，使得开发者能够快速...
使用BootStrap制作CRM管理系统
m0_74795259的博客
11-08 391
重置修改修改修改修改
bootstrap + django的简单后台管理系统
COOL66BOY的博客
04-14 7707
文章目录登录页面Form和MiddleForm的书写HTML代码：信息管理页面母版HTML代码管理员信息各种功能页面Ajax数据传输JS部分数据统计页面JS部分文件上传HTML部分代码Python代码部分media配置补充 使用的是django3.0版本，数据库使用的是mysql1.0版本的 项目所包含的文件如下图： 登录页面 需要实现功能： 1、用户输入的用户名，密码和验证码能在后台获取 2、将获取的数据进入到数据库查找 3、成功登录后，将用户存储一个cookie在浏览器的session里面 4
爆肝5天，基于SpringBoot+BootStrap的图书管理系统
福尔摩东的博客
12-22 5212
基于SpringBoot+BootStrap的图书管理系统 ❝ 这是老师在校的一个课设要求，我顺手给share一下 ❞ 项目介绍 NUCSELL是一个图书网站用户可以登录，注册，查看分类书籍并查询管理员登录后可以在后台对图书进行增删改查管理员登录后可以在后台对图书类型进行增删改查管理员登录后可以在后台对用户进行增删改查希望可以对此项目进行更多的优化和扩展 本项目基于「IDEA」进行开发，使用到了「Swagger」接口文档进行开发，使用Github进行协同开发，使用「SpringBoot+BootStra
写一个bootstrap的后台管理系统
weixin_35753291的博客
01-25 698
首先，我们需要安装 Bootstrap，可以通过 CDN 或下载 Bootstrap 的源码来获得。 然后，我们可以创建一个 HTML 页面，在 head 中引入 Bootstrap 的 CSS 文件，在 body 中引入 Bootstrap 的 JavaScript 文件。 接下来，我们可以使用 Bootstrap 提供的组件来构建我们的后台管理系统。例如，使用导航栏组件可以创建顶部导航栏，使用...
bootstrap实现管理系统首页设计
weixin_52837547的博客
11-08 1409
bootstrap实现管理系统首页设计
SpringBoot+Bootstrap农业物资管理系统JavaI采购销售jsp源代码Mysql
wjwjwjd的博客
10-29 135
SpringBoot+Bootstrap农业物资管理系统JavaI采购销售jsp源代码Mysql
使用bootstrap搭建管理系统
04-28
使用 Bootstrap 搭建管理系统非常方便，以下是一个简单的步骤： 1. 下载 Bootstrap 首先，你需要从官方网站下载 Bootstrap。你可以下载最新版的 Bootstrap，也可以下载旧版的 Bootstrap。 2. 创建 HTML 文件 创建一个 HTML 文件，并将 Bootstrap 的 CSS 和 JavaScript 引入到 HTML 文件中。你可以从 Bootstrap 的官方网站中找到这些文件的链接。 3. 使用 Bootstrap 样式 使用 Bootstrap 的样式来设计你的管理系统。Bootstrap 提供了许多样式，如表格、表单、按钮等。 4. 使用 Bootstrap 组件 Bootstrap 还提供了许多组件，如导航栏、面包屑、警告框等。你可以使用这些组件来构建你的管理系统。 5. 自定义样式 如果你想要自定义样式，可以使用 Bootstrap 的变量和混合器。Bootstrap 的变量和混合器可以让你轻松地自定义样式。 6. 测试和部署 最后，你需要测试你的管理系统，并将其部署到服务器上。你可以使用一些工具来测试你的管理系统，如 Chrome 开发者工具和 Firebug。 希望这些步骤能够帮助你使用 Bootstrap 搭建管理系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值