Bootstrap框架初体验——管理系统界面
2020-03-06 12:58
901 查看
简介
Bootstrap2：支持广泛浏览器，但功能有限，目前已放弃更新。
Bootstrap3（本文使用此版本）：放弃了IE7和Firefox3.x的支持；支持IE8，但其对CSS3的支持有限，效果不佳。
可以仅通过data属性就能使用所有的Bootstrap插件，无需写一行JavaScript代码，这是Bootstrap的优势。
注意：
1、Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。在 bower.json
文件中 列出了 Bootstrap 所支持的 jQuery 版本。
2、Bootstrap不支持IE的兼容模式，在IE中运行最新的渲染模式：
[code]<meta http-equiv="X-UA-Compatible" content="IE=edge">
3、适配移动浏览器时，一般均需加入初始化移动浏览显示：
[code]<meta name="viewport" content="width=device-width, initial-scale=1">
上面这句代码的含义：让视口的宽度等于设备实际的物理分辨率。
[code]width=device-width <!--页面宽度=设备的宽度--> initial-scale=1 <!--页面首次载入的缩放比例-->
引入Bootstrap
准备工作
常用方法
我只试过这两种方法：
1、官网下载Bootstrap文件，将HTML放置于Bootstrap的目录，并在代码中引入。文件结构如下：
[code]bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
2、官网复制Bootstrap文件的链接，并在代码中引入。
[code]<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
注意：CSS放于<head>，JS放于<body>的最下方。
其他方法
1、通过 Bower 进行安装
[code]$ bower install bootstrap
2、通过 npm 进行安装
[code]$ npm install bootstrap@3
3、通过 Composer 进行安装
[code]$ composer require twbs/bootstrap
实现引入Bootstrap
[code]<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>index</title> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <style> </style> </head> <body> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
注意
[code]<!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]-->
1、版本低于IE9时，第一个js：IE8对HTML5标签进行支持；第二个js：IE8对媒体查询进行支持。
2、html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
Bootstrap的网页制作
菜单响应式布局
[code]<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
其中，这部分实现了菜单响应式布局：
[code] ... ... <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> ... ... <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
实现页面
导航条
导航条依赖JavaScript，响应式导航条依赖折叠（collapese）插件。
Collapse包含在Bootstrap中。
如果不支持JavaScript，那么响应式导航条也就不被支持。
下拉菜单
下拉菜单的按钮和功能
[code] <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button>
下拉菜单的内容
[code] <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul>
注意：divider为分隔线的实现。
[code]<li role="separator" class="divider"></li>
实现页面
滚动广告Carousel
翻页（导航）
[code]<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> ... ...
内容
[code] ... ... <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> ... ...
轮播方向
[code] ... ... <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> ... ...
栅格系统布局
简单来说，即页面横向等分为12份。
栅格参数
使用单一的一组
.col-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ”
.row内。如下图所示。
引自：官方文档
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个
.container容器。我们提供了两个作此用处的类，分别为.container和
.container-fluid。注意，由于
padding等属性的原因，这两种容器类不能互相嵌套。引自：官方文档
.container类用于固定宽度并支持响应式布局的容器。
.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
举例
也正是以上这两个部分，使得响应式布局得以实现。
上图界面布局的实现代码为：
[code]<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
分隔线（水平线）：
<hr>，以在哪一个container中来控制长度。
标签页 Tabs
不用写JavaScript代码，只需要将页面元素指定data-toggle=“tab”，为ul添加nav和nav-tabs class。
标签
[code] ... ... <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> ... ...
标签的内容
[code] ... ... <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> ... ...
弹出框（模态框）Modal
头部（标题）
[code]<div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> ... ...
内容
[code] ... ... <div class="modal-body"> <p>One fine body…</p> </div> ... ...
底部（按钮）
[code] ... ... <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
菜单定位
[code]$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
其他功能
详细的可以参照官方帮助文档，内容很丰富也很详细。
在此提供一下大概的目录，写代码时便于查找。
代码
[code]<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>某管理系统</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style>
div{
#border:solid 1px;
}
button{
width:70px;
height:30px;
}
.mytitle{
font-size:26px;
padding-top:20px;
}
.myhr{
margin-top:0px;
}
.myright{
float:right;
}
.mybtn{
width:100px;
}
.mybtn2{
width:120px;
}
.myprogress{
margin-top:10px;
}
.mynavi{
height:700px;
background-color:lightgray;
padding-top:20px;
}
.mynavi0{
height:100%;
margin-top:-20px;
background-color:lightgray;
}
.mynavitop{
#padding-bottom:0px;
#background-color:black;
}
.myblack{
background-color:#1C1C1C;
}
</style>
</head>
<body>
<div>
<div class="mynavitop"><!--导航-->
<nav class="navbar navbar-default myblack">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">...</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">某管理系统</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页 <span class="sr-only"> </span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">d</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">e</a></li>
</ul>
</li>
<li><a href="#">帮助</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="用户名">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
<!--<ul class="nav navbar-nav navbar-right">
<li><a href="#">首页</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">功能<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">d</a></li>
</ul>
</li>
</ul>-->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="mynavi0">
<div class="mynavi col-md-3 "><!--左侧导航-->
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#">首页</a></li>
<li role="presentation"><a href="#"></a></li>
<li role="presentation"><a href="#">信息建立</a></li>
<li role="presentation"><a href="#">信息查询</a></li>
<li role="presentation"><a href="#">信息管理</a></li>
<li role="presentation"><a href="#"></a></li>
<li role="presentation"><a href="#">设置</a></li>
<li role="presentation"><a href="#">帮助</a></li>
</ul>
</div>
<div class="col-md-9">
<div class="mytitle">管理控制台<hr class="myhr"></div>
<div style="margin-bottom:10px"><!-- 标签 -->
<!-- Standard button -->
<button type="button" class="btn btn-default">操作1</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">操作2</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">操作3</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">操作4</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">操作5</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">操作6</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
</div>
<div>
<div>
<div class="col-md-6"><!--c1-->
<div class="panel panel-primary">
<div class="panel-heading">最新提醒</div>
<div class="panel-body">
<div class="alert alert-success" role="alert"><b>提示</b> 您的订单（1234）已通过审核！</div>
<div class="alert alert-danger" role="alert"><b>提示</b> 您的订单（45678）已通过审核！</div>
<div class="alert alert-warning" role="alert"><b>提示</b> 您的订单（12121212）已通过审核！</div>
</div>
</div>
</div>
<div class="col-md-6"><!--c2-->
<div class="panel panel-primary">
<div class="panel-heading">我的任务</div>
<div class="panel-body">
<div class="alert alert-info" role="alert">订单审批<span class="badge myright">42</span></div>
<div class="alert alert-info" role="alert">收款确认<span class="badge myright">20</span></div>
<div class="alert alert-info" role="alert">付款确认<span class="badge myright">10</span></div>
</div>
</div>
</div>
</div>
<div>
<div class="col-md-6"><!--c3-->
<div class="panel panel-primary">
<div class="panel-heading">最新订单</div>
<div class="panel-body">
<!-- Table -->
<table class="table table-striped">
<tr>
<th>#</th>
<th>产品</th>
<th>数量</th>
<th>总金额</th>
<th>业务员</th>
</tr>
<tr>
<td>1</td>
<td>Mac</td>
<td>10</td>
<td>10000</td>
<td>张三</td>
</tr>
<tr>
<td>2</td>
<td>Apple</td>
<td>20</td>
<td>8000</td>
<td>李四</td>
</tr>
<tr>
<td>3</td>
<td>Windows</td>
<td>5</td>
<td>5000</td>
<td>王五</td>
</tr>
</table>
<button type="button" class="btn btn-primary mybtn">查看详情 >></button>
</div>
</div>
</div>
<div class="col-md-6"><!--c4-->
<div class="panel panel-primary">
<div class="panel-heading">工程进度</div>
<div class="panel-body">
<button type="button" class="btn btn-primary mybtn2">水井挖掘工程</button>
<div class="progress myprogress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only"></span>
</div>
</div>
<button type="button" class="btn btn-danger mybtn">基建工程</button>
<div class="progress myprogress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
实现页面
参考资料
内容及教程： https://www.imooc.com/learn/182
Bootstrap官方文档：https://v3.bootcss.com/
有缘看到的小伙伴，给人家点个赞呗~么么哒❤
- 点赞 2
- 收藏
- 分享
- 文章举报
愤怒的软绵绵
发布了12 篇原创文章 · 获赞 23 · 访问量 2096
私信
关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十六节--SignalR与ABP框架Abp.Web.SignalR及扩展
- 员工管理系统实战--基于java的swing界面框架之员工个人信息界面（三）
- Apache Shiro+SpringMVC+Hibernate Search+Hibernate+Bootstrap企业信息管理系统基础框架搭建整合实例代码教程
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->Web版本“产品管理”事例编辑界面新增KindEditor复文本编辑控件
- PHP实战 新闻管理系统 使用到了bootstrap框架
- .NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十五节--缓存小结与ABP框架项目中 Redis Cache的实现
- PHP实战 新闻管理系统 使用到了bootstrap框架
- .NET快速信息化系统开发框架 V3.2->Web版本“产品管理”事例编辑界面新增KindEditor复文本编辑控件
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->Web版本模块管理界面新增模块排序功能
- Winform开发框架之客户关系管理系统(CRM)的开发总结系列1-界面功能展示
- .NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择
- .NET快速信息化系统开发框架 V3.2 -> WinForm“组织机构管理”界面组织机构权限管理采用新的界面，操作权限按模块进行展示
- 员工管理系统实战--基于java的swing界面框架之财务信息管理界面（五）
- .NET快速信息化系统开发框架 V3.2 -> WinForm“组织机构管理”界面组织机构权限管理采用新的界面，操作权限按模块进行展示
- 小菜的系统框架界面设计-小菜用户权限管理软件开源大放送
- 员工管理系统实战--基于java的swing界面框架之后勤信息管理界面（六）
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->WinForm版本新增新的角色授权管理界面效率更高、更规范
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->Web版本新增新的角色授权管理界面效率更高、更规范
- Apache Shiro+SpringMVC+Hibernate Search+Hibernate+Bootstrap企业信息管理系统基础框架搭建整合实例代码教程