周日任务：了解bootstrap和后台管理系统

最新推荐文章于 2024-04-22 22:28:40 发布

墨霁青玉

最新推荐文章于 2024-04-22 22:28:40 发布

阅读量2.7k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_30604453/article/details/51169530

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>
<!--代码-->
<div class="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.假如我们的网站有一个“程序员心路历程”的文章展示模块，即伯爵的程序猿们写了一篇文章记录他的成才之路，并在网站上展示

那么后台管理系统可以有相应的文章管理功能，删改文章，上传新文章等。

要进入后台管系统肯定需要管理员的账户、密码。

一个后台管理系统可以允许多个管理员登入，进行网站的维护与管理。

而后台管理系统的具体功能设计取决于前台的展示内容需要。

墨霁青玉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
周日任务：了解bootstrap和后台管理系统

bootstrapbootstrap是基于HTML、CSS 、JavaScript 的前端开发框架，目前最受欢迎。bootstrap包含丰富的组件：包括下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、进度条、警告对话框等。bootstrap自带13个jquery插件，包括标签页、滚动条、弹出框等。总而言之，这是一个强大而方便实用的开发框架。虽然我现在
复制链接

扫一扫