博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端项目课程4 如何快速布局网页后台
阅读量:5993 次
发布时间:2019-06-20

本文共 12237 字,大约阅读时间需要 40 分钟。

前端项目课程4 如何快速布局网页后台

一、总结

一句话总结:套用bootstrap,然后需要的模块(比如导航、分页、模态框等)直接去bootstrap里面拖即可。

 

1、如何留出上端固定导航条的位置?

用的padding,而不是加div

给body设置padding即可

16         body{ 17             padding-top:70px; 18 }

 

2、如何使用框架(比如bootstrap)里面的各种样式?

a、用样式

b、样式不合意,找到样式的样式名,然后修改即可

.navba-brand本来是bootstrap里面的样式

11         .navbar-brand{ 12             color:#fff!important; 13 font-weight: bold; 14 }

 

3、弹出框用什么(比如修改密码的时候)?

模态框

使用的话超简单,直接进去拷就行了

 

4、如果bootstrap里面比如分页弄过来的代码不是预期要求,但是它上面显示的是预期要求,你怎么用这个样式?

检查里面拷贝源代码即可

列出的代码可能有问题,但是显示正常的源代码一定是没有问题的

 

5、后台如何实现模块化开发(区域自治)?

每个模块占单独的一个文件夹,这样也特别不容易错,要区域自治

 

 

二、如何快速布局网页后台

1、截图

 

 

 

 

2、代码

admin/index.html

1   2   3   4     
5 酒仙网后台 6 20
21 22 23 24 25 26 27
28
57 58
85 86 87
88
89
90
91
98
99
103
104
105 106
107
114
122
123 124
125
132
140
141 142
143
150
158
159 160
161
168
176
177 178
179
186
194
195 196
197
204
212
213 214
215 216
217 218
219
220
221
222
223

酒仙网后台信息:

224

联系方式: 0351-2728453

225

226 网站首页 227 退出系统228

229
230
231
232
233
234 235

 

admin/user/inde.html

1   2   3   4     
5 酒仙网后台 6 20
21 22 23 24 25 26 27
28
57 58
85 86 87
88
89
90
91
98
99
103
104
105 106
107
114
122
123 124
125
132
140
141 142
143
150
158
159 160
161
168
176
177 178
179
186
194
195 196
197
204
212
213 214
215 216
217 218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237 238
239
240
241
242
243
244
245
246 247
248
249
250
251
252
253
254
255 256
257
258
259
260
261
262
263
264 265
266
267
268
269
270
271
272
273 274
275
276
277
278
279
280
281
282 283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
编号 用户名 密码 注册时间 修改 删除
1 user1 123 2016-5-31 修改 删除
1 user1 123 2016-5-31 修改 删除
1 user1 123 2016-5-31 修改 删除
1 user1 123 2016-5-31 修改 删除
1 user1 123 2016-5-31 修改 删除
1 user1 123 2016-5-31 修改 删除
1 user1 123 2016-5-31 修改 删除
1 user1 123 2016-5-31 修改 删除
1 user1 123 2016-5-31 修改 删除
308 309
318
319
320
321 322

 

admin/user/add.html

1   2   3   4     
5 酒仙网后台 6 20
21 22 23 24 25 26 27
28
57 58
85 86 87
88
89
90
91
98
99
103
104
105 106
107
114
122
123 124
125
132
140
141 142
143
150
158
159 160
161
168
176
177 178
179
186
194
195 196
197
204
212
213 214
215 216
217 218
219
220
221
222
223
224
225 226
227
228
229
230 231
232
233
234
235 236
237
238
239
240
241
242
243
244 245

 

 

 

 

转载地址:http://ihtlx.baihongyu.com/

你可能感兴趣的文章
Ubuntu12.04 编译android源代码及生成模拟器经历分享
查看>>
KVM网络桥接设置方法
查看>>
Puppet学习手册:Puppet Yum安装
查看>>
我的友情链接
查看>>
ansible学习记录
查看>>
网思科技校园网计费解决方案
查看>>
我的友情链接
查看>>
携程 Apollo分布式部署
查看>>
2017 Hackatari Codeathon B. 2Trees(深搜)(想法)
查看>>
单词统计
查看>>
输入一个数字计算圆的面积
查看>>
在Delphi中隐藏程序进程
查看>>
AngularJS PhoneCat代码分析
查看>>
MEF元数据应用说明
查看>>
maven错误解决:编码GBK的不可映射字符
查看>>
2016/4/19 反射
查看>>
SharePoint Wiki发布页面的“保存冲突”
查看>>
oracle 10g 数据库与客户端冲突导致实例创建无监听问题
查看>>
Delphi中读取文本文件的方法(实例一)
查看>>
Linux常用命令
查看>>