周日任务:了解bootstrap和后台管理系统
2016-04-16 18:58
561 查看
bootstrap
bootstrap是基于HTML、CSS 、JavaScript 的前端开发框架,目前最受欢迎。bootstrap包含丰富的组件:包括下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、进度条、警告对话框等。
bootstrap自带13个jquery插件,包括标签页、滚动条、弹出框等。
总而言之,这是一个强大而方便实用的开发框架。
虽然我现在还没有深入了解,但是通过查资料大致知晓这个框架的用法。
例如,当想为表格添加斑马线设置时,只需为table元素增加类名 table-striped即可。这个 table-striped类的相关设置已经在bootstrap中定义好。
前提是引用bootstrap的.css文件。
看起来十分方便,节省了工作量。
在这里说一下响应式的导航条。之前看约单的下载页面,导航条是响应式的,奈何功力尚浅,代码看得我一脸懵逼。
在了解了bootstrap框架里的响应式导航条后,我自己也可以快速地写出响应式的导航条。
只需简单的三步:
1.为包裹整个导航条的 div 增加class、role
class="navbar navbar-default" role="navigation"
2.引入窄屏时显示的收缩/展开按钮
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#demo"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>3.将需要收缩的内容放入一个div中并为该div增加class
<div class="collapse navbar-collapse"id="demo">上面所提到的类都是已经在bootstrap的.css文件中定义好的,我们只需要引用该文件,为设计需要增加相应的类名就能达到效果。
剩下的导航条的润色加工可根据自己的需要进行相关的css设置。
这是最简单便捷的方法实现响应式导航条。
算是一个小小的启蒙。对bootstrap的初步了解便进行到这里。
bootstrap内不仅有css文件,还有不同的font字体可以为我们的网页所用,还有相关的js插件。
希望在以后的深入学习中,能将这一框架运用得得心应手。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>响应式导航条</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
body{padding:50px 0 0 0;}
</style>
</head>
<body>
<!--代码-->
<divclass="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#demo"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="##" class="navbar-brand">时光商店</a>
</div>
<div class="collapse navbar-collapse"id="demo">
<ul class="nav navbar-nav">
<li class="active"><a href="##">首页</a></li>
<li><a href="##">服务</a></li>
<li><a href="##">特色</a></li>
<li><a href="##">指引</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
后台管理系统
后台管理系统是内容管理系统的一个子集,简称CMS。后台管理系统的大致有以下功能:
一系统管理:管理员管理,可以新增管理员及修改管理员密码;数据库备份,为保证您的数据安全本系统采用了数据库备份功能;上传文件管理,管理你增加产品时上传的图片及其他文件
二企业信息:可设置修改企业的各类信息及介绍
三产品管理:产品类别新增修改管理,产品添加修改以及产品的审核
四下载中心:可分类增加各种文件,如驱动和技术文档等文件的下载
五订单管理:查看订单的详细信息及订单处理
六会员管理:查看修改删除会员资料,及锁定解锁功能可在线给会员发信
七新闻管理:能分大类和小类新闻,不再受新闻栏目的限制
八留言管理:管理信息反馈及注册会员的留言,注册会员的留言可在线回复,未注册会员可使用在线发信功能给于答复
九荣誉管理:新增修改企业荣誉栏目的信息新增修改企业形象栏目的信息
十人才管理:发布修改招聘信息,人才策略栏目管理,应聘管理
十一营销网络:修改营销网络栏目的信息
十二调查管理:发布修改新调查
十三友情链接:新增修改友情链接
十四全新模版功能,在线编辑修改模版
十五全新挂接数据库,在线表编辑,添加数据表,编辑数据库,加添编辑文件挂接网站等等
十六系统日志功能,每一步操作都有记录,系统更安全
十七中英文切换,简体繁体切换
十八还有多开源的代码,以便站长二次开发
好了,其实前面的都是废话。说了这么多,讲一下我对这个后台管理系统的理解。
假如现在我们伯爵科技有一个网站,里面有介绍我们团队的发展历程,人员,产品开发等等等等等等。
当访问者进入我们的网站时,就看到这些我们要展示给他们的东西。把我们要展示给访问者的网页称之为前台,那么后台管理系统就是一个网站的幕后工作者,专门为前台提供支持和服务。
一个后台管理系统可以通过对这个网站的信息进行修改、添加、删除等来管理这个网站。所以说后台是一个网站的核心,它直接决定了网站前台显示的内容和元素。
例1.假如我们的网站有一个留言模块,访问者可以在网站留言,写下对我们伯爵的看法和期待等或者对我们开发的产品的使用后感。
那我们的后台管理系统就可以有一个留言管理功能,可以对留言进行删除,或者回复等。
例2.假如我们的网站有一个人员信息模块。
那我们的后台管理系统就可以有一个人员信息管理功能,当人员离开时,可以进行信息删除,当加入新成员时,可以加入新的信息。
例3.假如我们的网站有一个“程序员心路历程”的文章展示模块,即伯爵的程序猿们写了一篇文章记录他的成才之路,并在网站上展示
那么后台管理系统可以有相应的文章管理功能,删改文章,上传新文章等。
要进入后台管系统肯定需要管理员的账户、密码。
一个后台管理系统可以允许多个管理员登入 ,进行网站的维护与管理。
而后台管理系统的具体功能设计取决于前台的展示内容需要。
不知道这样的理解对不对。
还请师兄指正。
相关文章推荐
- 【一点一滴Bootstrap】可编辑的表格
- bootstrap修改默认字体,更换为微软雅黑或其他字体的方法
- yii使用bootstrap分页样式
- 编辑 编号序列的静态界面(使用bootstrap插件中的dropdown)
- java框架整合Springmvc+mybatis+shiro+bootstrap
- maven大型互联网企业架构 SpringMVC Mybatis Shiro Bootstrap
- 基于bootstrap的一些admin主题
- 第一个项目--用bootstrap实现美工设计的首页
- 我与Bootstrap
- 基于bootstrap的左侧栏
- Bootstrap.js 重复加载导致dropdown-toggle出现问题
- bootstrap去除按钮圆角
- Bootstrap小结
- 动态添加表单元素,并使用bootstrapValidator插件进行动态添加校验
- Bootstrap前端开发学习
- table-responsive响应式表格,HTML表格自适应,bootstrap2表格自适应
- 基于bootstrap实现简单用户管理功能
- Bootstrap Multiselect 动态二联赋值 支持多选
- bootstrap中200个来自 Glyphicon Halflings 的字体图标
- Bootstrap 中下拉菜单修改成鼠标悬停直接显示[原创]_javascript技巧_脚本之家