BootStrap制作简易CRM管理系统-1

发布于：2022-11-08 ⋅ 阅读:(642) ⋅ 点赞:(0)

目录

一.添加导入资源

二.前端页面创建

2.1登录页面login.htm

2.2主页index.html

2.3添加用户页面user_add.html

2.4修改密码页面update_passwd.html

2.5修改密码页面update_passwd.html

一.添加导入资源

1.1导入资源和图片

<!--导入bootstrap依赖 -->
    <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>
<!--导入Vue依赖-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>

二.前端页面创建

2.1登录页面login.html

2.1.1框架和样式

1.固定宽度(container) -> 行(row)->外框6个栅格,右移3格,页面居中位置(col-md-6  col-md-offset-3)

2.在6个栅格内 -> 左侧占5个栅格,右侧占7个 

3.右侧 -> 第1行(row)登录占12栅格字体居中

               第2行 用户名 文本框(form-control)

               第3行 密码 文本框

               第4行 登录(btn btn-primary) 重置(btn btn-default)按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <!--导入bootstrap依赖 -->
    <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>
    <!--导入Vue依赖-->
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>

</head>
<body>
    <div class="container" id="app">
        <!--bootstrap行-->
        <div class="row">
            <!--bootstrap列,6个栅格-->
            <div class="col-md-6 col-md-offset-3" style="height: 310px;border: 1px solid black;margin-top: 80px">
                <!--行-->
                <div class="row">
                    <!--显示文章标题-->
                    <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"/>
                            </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"/>
                            </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" >登录</button>
                                <button class="btn btn-default" >重置</button>
                            </div>
                        </div>
                    </div>
                </div>

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

2.1.2运行效果

 2.2主页index.html

2.2.1框架和样式

1.固定宽度(container) -> 行(row) ->外框(左3栅格 右9栅格)

2.左3栅格内 -> 共8行 都为12栅格

3.右9栅格内 ->第1行 12栅格 -> "首页"标题(高度和左侧标题一致)

                     ->第2行 12栅格 -> 插入图片(img-responsive center-block  响应式强制居中)

4.左侧小标题样式(注意顺序) a:link(文本链接属性)

                                              a:visited(文本访问后属性)

                                              a:hover(鼠标悬停时属性)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--导入bootstrap依赖 -->
    <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>
    <!--导入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>
<body>
    <div class="container" id="app">
        <!--行-->
        <div class="row">
            <!--登录导航-->
            <div class="col-md-3" style="background-color:rgb(0,21,41);height: 800px">
                <!--行-->
                <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="user_add.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="#">添加客户</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                        <a href="update_passwd.html">修改密码</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                        <a href="login.html">退出登陆</a>
                    </div>
                </div>
            </div>
            <!--登录内容-->
            <div class="col-md-9" style="border: 1px solid gray;height: 800px">
                <!--显示提示位置-->
                <div class="row">
                    <div class="col-md-12"style="height: 70px;color:rgb(109,109,109);font-size: 18px; line-height: 70px;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: 730px;padding: 20px 20px 20px 20px;">
                        <img src="assets/img/index.png" class="img-responsive center-block"/><!--响应式,强制居中-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

2.2.2 运行效果

 

2.3添加用户页面user_add.html

2.3.1框架和样式

1.大体同上

2.右9栅格内 ->第2行12栅格内 ->每行4栅格右移4(col-md-4 col-md-offset-4)

                                                    ->label文本   input文本框(form-control)  

                                                    ->选项  label文本  label(横向radio-inline) ->  input()

                                                    ->按钮同上按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <!--导入bootstrap依赖 -->
    <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>
    <!--导入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>
<body>
<div class="container" id="app">
    <!--行-->
    <div class="row">
        <!--登录导航-->
        <div class="col-md-3" style="background-color:rgb(0,21,41);height: 800px">
            <!--行-->
            <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="user_add.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="#">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="update_passwd.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="login.html">退出登陆</a>
                </div>
            </div>
        </div>
        <!--登录内容-->
        <div class="col-md-9" style="border: 1px solid gray;height: 800px">
            <!--显示提示位置-->
            <div class="row">
                <div class="col-md-12"style="height: 70px;color:rgb(109,109,109);font-size: 18px; line-height: 70px;font-weight: bold;padding-left: 20px;">
                    >&nbsp;&nbsp;添加用户
                </div>
            </div>
            <!--显示内容-->
            <div class="row" style="background-color:rgb(240,242,245);height: 730px;padding: 20px 20px 20px 20px;">
                <div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px;">
                   <div class="row">
                       <div class="col-md-4 col-md-offset-4"style="margin-top: 50px;">
                           <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>
                            <label class="radio-inline">
                                <input type="radio"/>男
                            </label>
                            <label class="radio-inline">
                                <input type="radio"/>女
                            </label>
                        </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>
</body>
</html>

2.3.2运行效果

 

2.4修改密码页面update_passwd.html

2.4.1框架和样式

1.全部同添加用户页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <!--导入bootstrap依赖 -->
    <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>
    <!--导入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>
<body>
<div class="container" id="app">
    <!--行-->
    <div class="row">
        <!--登录导航-->
        <div class="col-md-3" style="background-color:rgb(0,21,41);height: 800px">
            <!--行-->
            <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="user_add.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="#">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="update_passwd.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="login.html">退出登陆</a>
                </div>
            </div>
        </div>
        <!--登录内容-->
        <div class="col-md-9" style="border: 1px solid gray;height: 800px">
            <!--显示提示位置-->
            <div class="row">
                <div class="col-md-12"style="height: 70px;color:rgb(109,109,109);font-size: 18px; line-height: 70px;font-weight: bold;padding-left: 20px;">
                    >&nbsp;&nbsp;修改密码
                </div>
            </div>
            <!--显示内容-->
            <div class="row" style="background-color:rgb(240,242,245);height: 730px;padding: 20px 20px 20px 20px;">
                <div class="col-md-12" style="background-color: white;height: 730px;border: none;border-radius: 5px;">
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4"style="margin-top: 50px;">
                            <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>
</body>
</html>

2.4.2运行效果

 

2.5修改密码页面update_passwd.html

2.5.1框架和样式

1.大体同上

2.右9栅格内 ->第2行12栅格内 ->table(使用bootstrap表格斑马线样式:table table-striped) -><caption>(表格描述)

<thead>(表头) -> tr -> th

<tbody>(内容) -> tr -> td  -> 按钮为link样式(btn btn-link)

                                                                                          

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <!--导入bootstrap依赖 -->
    <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>
    <!--导入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>
<body>
<div class="container" id="app">
    <!--行-->
    <div class="row">
        <!--登录导航-->
        <div class="col-md-3" style="background-color:rgb(0,21,41);height: 800px">
            <!--行-->
            <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="user_add.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="#">添加客户</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="update_passwd.html">修改密码</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
                    <a href="login.html">退出登陆</a>
                </div>
            </div>
        </div>
        <!--登录内容-->
        <div class="col-md-9" style="border: 1px solid gray;height: 800px">
            <!--显示提示位置-->
            <div class="row">
                <div class="col-md-12"style="height: 70px;color:rgb(109,109,109);font-size: 18px; line-height: 70px;font-weight: bold;padding-left: 20px;">
                    >&nbsp;&nbsp;用户管理
                </div>
            </div>
            <!--显示内容-->
            <div class="row" style="background-color:rgb(240,242,245);height: 730px;padding: 20px 20px 20px 20px;">
                <div class="col-md-12" style="background-color: white;height: 730px;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>zhangsan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>1334567654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1001</td>
                                <td>zhangsan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>1334567654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1001</td>
                                <td>zhangsan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>1334567654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1001</td>
                                <td>zhangsan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>1334567654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1001</td>
                                <td>zhangsan</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>2000-02-04</td>
                                <td>1334567654</td>
                                <td>
                                    <button class="btn btn-link">修改</button>
                                    <button class="btn btn-link">删除</button>
                                </td>
                            </tr>
                        </tbody>

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

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

2.5.2运行效果

 

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布