【2阶】BootStrap制作简易CRM管理系统-crm-1
生活随笔
收集整理的這篇文章主要介紹了
【2阶】BootStrap制作简易CRM管理系统-crm-1
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
一.添加導入資源
二.前端頁面創建
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導入資源和圖片
BooStrap、jQuery 、Vue
http://鏈接：https://pan.baidu.com/s/1QleGhktJpGk2A1M3Cc_gsA?pwd=33ct 提取碼：33ct
<!--導入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;">> 首頁</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;">> 添加用戶</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;">> 修改密碼</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;">> 用戶管理</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運行效果
總結
以上是生活随笔為你收集整理的【2阶】BootStrap制作简易CRM管理系统-crm-1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【PIC单片机】2.编译器下载
- 下一篇： 安徽省计算机二级考试知识点,安徽省计算机