基于bootstrap的强大又漂亮的模板ace资源-CSDN文库

共127个文件

js：54个

html：27个

css：21个

需积分: 9 130 浏览量 2017-01-17 16:41:38 上传评论 1 收藏 1.88MB RAR 举报

Ace模板是专为后台管理系统设计的一款强大且美观的界面模板，它充分利用了Bootstrap框架的优势，提供了丰富的功能和优秀的用户体验。Bootstrap是由Twitter开发的一款开源前端框架，它包含了一系列预定义的CSS样式、JavaScript组件以及HTML5元素，使得网页设计和开发变得更加高效和便捷。 Ace模板以其轻量化和响应式设计脱颖而出，这表示它不仅在桌面设备上表现优秀，而且在各种屏幕尺寸的移动设备如手机和平板电脑上也能流畅运行。通过响应式布局，Ace能够自动适应不同设备的屏幕大小，提供一致的视觉效果和操作体验，这对于现代多设备环境下的Web应用尤其重要。模板中的HTML5元素确保了与最新技术的兼容性，使内容更易于理解和解析，同时增强了网页的互动性和多媒体功能。HTML5的语义化标签如<header>, <nav>, <section>, <article>等，有助于提高页面的可读性和SEO性能。 Ace模板包含了各种组件和插件，如导航栏、下拉菜单、模态框、表单控件、数据表格、图表、时间线、进度条、按钮组等，这些都是基于Bootstrap的组件进行扩展和定制的。这些组件不仅可以快速构建出功能丰富的管理界面，还允许开发者自定义样式和行为，满足项目的特定需求。在Ace中，你可以找到各种布局选项，如固定式、流式和折叠式导航栏，以及侧边栏和顶部栏的不同组合，这些都可以根据项目需求轻松调整。此外，Ace还支持主题定制，提供了一些预设的主题颜色，同时也允许开发者通过修改CSS变量来自定义独特的主题风格。为了增强交互性，Ace集成了jQuery和其他JavaScript库，如Ace提供的AJAX功能，可以实现无刷新的数据加载和页面更新，提高用户体验。此外，Ace还支持第三方插件集成，如日期选择器、时间轴视图、富文本编辑器等，进一步丰富了后台管理系统的功能。在实际开发过程中，Ace的文档齐全，详细介绍了如何使用和自定义各个组件，对于开发者来说是宝贵的参考资料。开发者可以通过查看和修改压缩包中的文件，了解模板的工作原理并进行定制化开发。总而言之，Ace模板是基于Bootstrap的强大工具，它提供了全面的功能、良好的响应式设计以及丰富的组件库，是构建高效、美观的后台管理界面的理想选择。无论你是新手还是经验丰富的开发者，Ace都能帮助你快速构建出专业级别的Web应用。

资源推荐

资源详情

资源评论

收起资源包目录

基于bootstrap的强大又漂亮的模板ace （127个子文件）

ace.min.css 265KB

bootstrap.min.css 94KB

font-awesome-ie7.min.css 37KB

ace-rtl.min.css 36KB

ace-skins.min.css 26KB

jquery-ui-1.10.3.full.min.css 24KB

font-awesome.min.css 22KB

bootstrap-editable.css 21KB

select2.css 19KB

chosen.css 13KB

ui.jqgrid.css 12KB

dropzone.css 11KB

fullcalendar.css 11KB

datepicker.css 10KB

ace-ie.min.css 7KB

daterangepicker.css 5KB

colorbox.css 4KB

jquery-ui-1.10.3.custom.min.css 3KB

bootstrap-timepicker.css 3KB

colorpicker.css 2KB

jquery.gritter.css 2KB

Thumbs.db 21KB

Thumbs.db 4KB

loading.gif 9KB

profile.html 101KB

tables.html 98KB

form-elements.html 76KB

index.html 66KB

inbox.html 65KB

elements.html 59KB

buttons.html 56KB

widgets.html 47KB

form-wizard.html 46KB

faq.html 44KB

timeline.html 43KB

jquery-ui.html 38KB

jqgrid.html 35KB

pricing.html 34KB

typography.html 31KB

wysiwyg.html 30KB

gallery.html 29KB

calendar.html 29KB

nestable-list.html 28KB

invoice.html 27KB

grid.html 25KB

treeview.html 24KB

dropzone.html 24KB

error-404.html 23KB

error-500.html 23KB

blank.html 22KB

loginbg.jpg 679KB

image-4.jpg 89KB

image-2.jpg 79KB

image-1.jpg 66KB

image-3.jpg 61KB

image-5.jpg 59KB

image-6.jpg 42KB

thumb-2.jpg 9KB

thumb-4.jpg 9KB

thumb-3.jpg 9KB

profile-pic.jpg 8KB

thumb-5.jpg 8KB

thumb-1.jpg 6KB

thumb-6.jpg 5KB

user.jpg 1KB

jquery.jqGrid.min.js 261KB

jquery-ui-1.10.3.full.min.js 223KB

jquery-1.10.2.min.js 91KB

jquery-ui-1.10.3.custom.min.js 91KB

jquery-2.0.3.min.js 82KB

bootstrap-editable.min.js 78KB

jquery.dataTables.min.js 69KB

select2.min.js 59KB

fullcalendar.min.js 50KB

jquery.sparkline.min.js 42KB

jquery.flot.min.js 36KB

dropzone.min.js 28KB

bootstrap.min.js 27KB

chosen.jquery.min.js 25KB

jquery.validate.min.js 21KB

bootstrap-datepicker.min.js 19KB

excanvas.min.js 19KB

ace-elements.min.js 18KB

daterangepicker.min.js 18KB

markdown.min.js 16KB

moment.min.js 14KB

bootstrap-timepicker.min.js 14KB

additional-methods.min.js 13KB

bootstrap-markdown.min.js 12KB

jquery.colorbox-min.js 11KB

jquery.flot.pie.min.js 10KB

jquery.mobile.custom.min.js 10KB

bootstrap-colorpicker.min.js 9KB

html5shiv.js 9KB

jquery.knob.min.js 8KB

typeahead-bs2.min.js 8KB

ace.min.js 8KB

jquery.nestable.min.js 8KB

fuelux.tree-sampledata.js 7KB

共 127 条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>用户信息页面 - Bootstrap后台管理系统模版Ace下载</title> <meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文" /> <meta name="description" content="站长素材提供Bootstrap模版,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <link href="assets/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="assets/css/font-awesome.min.css" />   <link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.custom.min.css" /> <link rel="stylesheet" href="assets/css/jquery.gritter.css" /> <link rel="stylesheet" href="assets/css/select2.css" /> <link rel="stylesheet" href="assets/css/bootstrap-editable.css" />  <link rel="stylesheet" href="assets/css/ace.min.css" /> <link rel="stylesheet" href="assets/css/ace-rtl.min.css" /> <link rel="stylesheet" href="assets/css/ace-skins.min.css" />    <script src="assets/js/ace-extra.min.js"></script>   </head> <body> <div class="navbar navbar-default" id="navbar"> <script type="text/javascript"> try{ace.settings.check('navbar' , 'fixed')}catch(e){} </script> <div class="navbar-container" id="navbar-container"> <div class="navbar-header pull-left"> <a href="#" class="navbar-brand"> <small> <i class="icon-leaf"></i> Ace Admin </small> </a> </div> <div class="navbar-header pull-right" role="navigation"> <ul class="nav ace-nav"> <li class="grey"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> <i class="icon-tasks"></i> <span class="badge badge-grey">4</span> </a> <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close"> <li class="dropdown-header"> <i class="icon-ok"></i> 4 Tasks to complete </li> <li> <a href="#"> <div class="clearfix"> <span class="pull-left">Software Update</span> <span class="pull-right">65%</span> </div> <div class="progress progress-mini "> <div style="width:65%" class="progress-bar "></div> </div> </a> </li> <li> <a href="#"> <div class="clearfix"> <span class="pull-left">Hardware Upgrade</span> <span class="pull-right">35%</span> </div> <div class="progress progress-mini "> <div style="width:35%" class="progress-bar progress-bar-danger"></div> </div> </a> </li> <li> <a href="#"> <div class="clearfix"> <span class="pull-left">Unit Testing</span> <span class="pull-right">15%</span> </div> <div class="progress progress-mini "> <div style="width:15%" class="progress-bar progress-bar-warning"></div> </div> </a> </li> <li> <a href="#"> <div class="clearfix"> <span class="pull-left">Bug Fixes</span> <span class="pull-right">90%</span> </div> <div class="progress progress-mini progress-striped active"> <div style="width:90%" class="progress-bar progress-bar-success"></div> </div> </a> </li> <li> <a href="#"> See tasks with details <i class="icon-arrow-right"></i> </a> </li> </ul> </li> <li class="purple"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> <i class="icon-bell-alt icon-animated-bell"></i> <span class="badge badge-important">8</span> </a> <ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close"> <li class="dropdown-header"> <i class="icon-warning-sign"></i> 8 Notifications </li> <li> <a href="#"> <div class="clearfix"> <span class="pull-left"> <i class="btn btn-xs no-hover btn-pink icon-comment"></i> New Comments </span> <span class="pull-right badge badge-info">+12</span> </div> </a> </li> <li> <a href="#"> <i class="btn btn-xs btn-primary icon-user"></i> Bob just signed up as an editor ... </a> </li> <li> <a href="#"> <div class="clearfix"> <span class="pull-left"> <i class="btn btn-xs no-hover btn-success icon-shopping-cart"></i> New Orders </span> <span class="pull-right badge badge-success">+8</span> </div> </a> </li> <li> <a href="#"> <div class="clearfix"> <span class="pull-left"> <i class="btn btn-xs no-hover btn-info icon-twitter"></i> Followers </span> <span class="pull-right badge badge-info">+11</span> </div> </a> </li> <li> <a href="#"> See all notifications <i class="icon-arrow-right"></i> </a> </li> </ul> </li> <li class="green"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> <i class="icon-envelope icon-animated-vertical"></i> <span class="badge badge-success">5</span> </a> <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close"> <li class="dropdown-header"> <i class="icon-envelope-alt"></i> 5 Messages </li> <li> <a href="#"> <img src="assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" /> <span class="msg-body"> <span class="msg-title"> <span class="blue">Alex:</span> Ciao sociis natoque penatibus et auctor ... </span> <span class="msg-time"> <i class="icon-time"></i> <span>a moment ago</span> </span> </span> </a> </li> <li> <a href="#"> <img src="assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" /> <span class="msg-body"> <span class="msg-title"> <span class="blue">Susan:</span> Vestibulum id ligula porta felis euismod ... </span> <span class="msg-time"> <i class="icon-time"></i> <span>20 minutes ago</span> </span> </span> </a> </li> <li> <a href="#"> <img src="assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" /> <span class="msg-body"> <span class="msg-title"> <span class="blue">Bob:</span> Nullam quis risus eget urna mollis ornare ...

评论收藏

内容反馈