bootstarp+iframe实现局部刷新后台模板_bootstrapiframe模板,bootstrapiframe模板资源-CSDN下载

共2000个文件

js：4181个

png：1438个

svg：746个

后台模板

iframe

bootstarp

4星 · 超过85%的资源需积分: 50 175 浏览量 2018-10-19 17:03:58 上传评论 1 收藏 26.58MB ZIP 举报

Bootstrap是世界上最受欢迎的前端开发框架之一，用于构建响应式布局和移动设备优先的Web项目。在本主题中，“bootstrap+iframe 实现局部刷新后台模板”指的是利用Bootstrap框架和HTML5的`<iframe>`元素来创建一个后台管理界面，其中实现了一个关键特性——局部刷新。局部刷新允许用户在不重新加载整个页面的情况下更新特定部分，从而提高用户体验和效率。 Bootstrap框架提供了丰富的CSS样式、JavaScript组件和网格系统，使得开发者能够快速地创建出美观且易于使用的界面。在这个后台模板中，Bootstrap可能被用来定义导航菜单、按钮、表格、卡片等元素的样式和布局，确保在不同屏幕尺寸下的良好展示。 `<iframe>`标签则常用于在网页中嵌入另一个网页或应用，相当于在一个小窗口内显示另一个独立的页面。在后台模板中，`iframe`通常被用来承载各个功能模块，如数据管理、设置等，这样当用户在不同模块间切换时，只需要加载`iframe`内的内容，而不是整个页面，实现了局部刷新的效果。选项卡功能是另一种提高用户交互性的设计，它允许用户在多个视图或内容之间进行切换，而不需要滚动或点击多个链接。在Bootstrap中，可以使用Tab组件轻松实现这一功能。每个选项卡对应一个`iframe`，用户点击选项卡时，对应的`iframe`会显示其内容，同时可以实现窗口的自由关闭、打开，以及关闭其他或全部关闭的操作，这在管理多个任务或数据时非常有用。在压缩包文件“AdminLTE-master”中，很可能包含了实现上述功能的源代码。AdminLTE是一个基于Bootstrap的开源后台主题，它提供了许多预设的布局、颜色方案、组件和插件，适用于构建现代化的管理界面。这个模板可能包含HTML文件、CSS样式表、JavaScript脚本，以及可能用于实现选项卡和`iframe`功能的jQuery或Bootstrap的JavaScript插件。这个后台模板通过结合Bootstrap的强大样式支持和`iframe`的局部刷新能力，提供了一个高效、灵活的后台管理界面，加上选项卡和窗口管理功能，提升了后台操作的便捷性和效率。对于开发者来说，这样的模板可以作为快速构建企业级后台系统的基础，减少从零开始的开发工作量。

资源推荐

资源详情

资源评论

收起资源包目录

bootstarp+iframe 实现局部刷新后台模板（2000个子文件）

components-md.css 778KB

components.css 765KB

components-rounded.css 764KB

components-md.min.css 613KB

components.min.css 602KB

components-rounded.min.css 602KB

bootstrap.css 148KB

bootstrap.css 143KB

bootstrap.min.css 118KB

bootstrap.min.css 115KB

AdminLTE.css 109KB

AdminLTE.min.css 107KB

layout.css 106KB

AdminLTE-without-plugins.css 88KB

layout.css 85KB

layout.min.css 78KB

layout.css 78KB

AdminLTE-without-plugins.min.css 72KB

layout.css 69KB

layout.css 67KB

samples.css 66KB

layout.min.css 61KB

layout.min.css 56KB

ionicons.css 56KB

plugins-md.css 56KB

plugins.css 55KB

layout.css 54KB

editor_ie8.css 51KB

editor_iequirks.css 51KB

ionicons.min.css 50KB

editor_ie.css 50KB

layout.min.css 49KB

editor_gecko.css 49KB

editor.css 49KB

editor_ie7.css 48KB

layout.min.css 48KB

_all-skins.css 47KB

editor_iequirks.css 47KB

editor_ie8.css 47KB

editor_ie.css 46KB

editor_gecko.css 46KB

editor.css 46KB

light.css 45KB

editor_iequirks.css 43KB

editor_ie7.css 42KB

plugins-md.min.css 42KB

plugins.min.css 41KB

grey.css 41KB

light2.css 41KB

_all-skins.min.css 41KB

editor_ie8.css 40KB

editor_ie.css 40KB

blue.css 40KB

default.css 40KB

darkblue.css 40KB

layout.css 39KB

editor.css 39KB

layout.min.css 37KB

font-awesome.css 37KB

light.min.css 36KB

jquery-ui.css 35KB

jquery-ui.css 34KB

fullcalendar.css 33KB

style.css 32KB

grey.min.css 32KB

light2.min.css 32KB

blue.min.css 32KB

darkblue.min.css 32KB

default.min.css 32KB

font-awesome.css 32KB

datatables.min.css 31KB

font-awesome.min.css 30KB

style.css 30KB

jquery-ui.min.css 30KB

jquery-ui.min.css 29KB

共 2000 条

<!DOCTYPE html> <html> <head> <title>Ionicons v2.0.0 Cheatsheet</title> <style> * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { background: #fff; color: #444; font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; } a, a:visited { color: #888; text-decoration: underline; } a:hover, a:focus { color: #000; } header { border-bottom: 2px solid #ddd; margin-bottom: 20px; overflow: hidden; padding: 20px 0; } header h1 { color: #888; float: left; font-size: 36px; font-weight: 300; } header a { float: right; font-size: 14px; } .container { margin: 0 auto; max-width: 1200px; min-width: 960px; padding: 0 20px; width: 95%; } .icon-row { border-bottom: 1px dotted #ccc; padding: 10px 0 20px; margin-bottom: 20px; } .ion { -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .preview-icon { vertical-align: bottom; } .preview-scale { color: #888; font-size: 12px; margin-top: 5px; } .step { display: inline-block; line-height: 1; position: relative; width: 10%; } .step i { -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -ms-transition: opacity .3s; -o-transition: opacity .3s; transition: opacity .3s; } .step:hover i { opacity: .3; } .size-12 { font-size: 12px; } .size-14 { font-size: 14px; } .size-16 { font-size: 16px; } .size-18 { font-size: 18px; } .size-21 { font-size: 21px; } .size-24 { font-size: 24px; } .size-32 { font-size: 32px; } .size-48 { font-size: 48px; } .size-64 { font-size: 64px; } .size-96 { font-size: 96px; } .usage { margin-top: 10px; } .usage input { font-family: monospace; margin-right: 3px; padding: 2px 5px; text-align: center; -webkit-touch-callout: text; -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .usage label { font-size: 12px; text-align: right; padding: 0 3px 0 60px; } .usage label:first-child { padding-left: 0; } .usage .name { width: 180px; } .usage .html { width: 80px; } .usage .css { width: 80px; } footer { color: #888; font-size: 12px; padding: 20px 0; } </style> <link href="css/ionicons.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <header> <h1>Ionicons v2.0.0 Cheatsheet, 733 icons:</h1> <p><a href="http://ionicons.com/">Ionicons Homepage</a></p> </header> <div class="content"> <div class="icon-row"> <div class="preview-icon"><span class="step size-12"> <i class="icon ion-alert"></i> </span><span class="step size-14"> <i class="icon ion-alert"></i> </span><span class="step size-16"> <i class="icon ion-alert"></i> </span><span class="step size-18"> <i class="icon ion-alert"></i> </span><span class="step size-21"> <i class="icon ion-alert"></i> </span><span class="step size-24"> <i class="icon ion-alert"></i> </span><span class="step size-32"> <i class="icon ion-alert"></i> </span><span class="step size-48"> <i class="icon ion-alert"></i> </span><span class="step size-64"> <i class="icon ion-alert"></i> </span><span class="step size-96"> <i class="icon ion-alert"></i> </span> </div> <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div> <div class="usage"> <label>Classname:</label> <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-alert" /> <label>Selectable:</label> <span class="ion"></span> <label>Escaped HTML:</label> <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&#xf101;" /> <label>CSS Content:</label> <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f101" /> </div> </div> <div class="icon-row"> <div class="preview-icon"><span class="step size-12"> <i class="icon ion-alert-circled"></i> </span><span class="step size-14"> <i class="icon ion-alert-circled"></i> </span><span class="step size-16"> <i class="icon ion-alert-circled"></i> </span><span class="step size-18"> <i class="icon ion-alert-circled"></i> </span><span class="step size-21"> <i class="icon ion-alert-circled"></i> </span><span class="step size-24"> <i class="icon ion-alert-circled"></i> </span><span class="step size-32"> <i class="icon ion-alert-circled"></i> </span><span class="step size-48"> <i class="icon ion-alert-circled"></i> </span><span class="step size-64"> <i class="icon ion-alert-circled"></i> </span><span class="step size-96"> <i class="icon ion-alert-circled"></i> </span> </div> <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div> <div class="usage"> <label>Classname:</label> <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-alert-circled" /> <label>Selectable:</label> <span class="ion"></span> <label>Escaped HTML:</label> <input class="html" type="text" readonly="readonly" onClick="this.select();" value="&#xf100;" /> <label>CSS Content:</label> <input class="css" type="text" readonly="readonly" onClick="this.select();" value="\f100" /> </div> </div> <div class="icon-row"> <div class="preview-icon"><span class="step size-12"> <i class="icon ion-android-add"></i> </span><span class="step size-14"> <i class="icon ion-android-add"></i> </span><span class="step size-16"> <i class="icon ion-android-add"></i> </span><span class="step size-18"> <i class="icon ion-android-add"></i> </span><span class="step size-21"> <i class="icon ion-android-add"></i> </span><span class="step size-24"> <i class="icon ion-android-add"></i> </span><span class="step size-32"> <i class="icon ion-android-add"></i> </span><span class="step size-48"> <i class="icon ion-android-add"></i> </span><span class="step size-64"> <i class="icon ion-android-add"></i> </span><span class="step size-96"> <i class="icon ion-android-add"></i> </span> </div> <div class="preview-scale"><span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">32</span><span class="step">48</span><span class="step">64</span><span class="step">96</span></div> <div class="usage"> <label>Classname:</label> <input class="name" type="text" readonly="readonly" onClick="this.select();" value="ion-android-add" /> <label>Se

评论收藏

内容反馈