AdminLTE 是一个非常受欢迎的开源的管理仪表盘和控制面板的WebApp模板。 它是基于Bootstrap 3 的CSS框架定义的响应式HTML模板。 利用所有Bootstrap的组件对大部分使用插件进行设计和调整风格,创建出可以用作后端应用程序的用户界面一致性设计。 AdminLTE 基于模块化设计,可以很容易在其之上定制和重制。 本文档将指导您完成安装模板并探索与模板捆绑在一起的各种组件。
AdminLTE 可以下载两种不同的版本, 每个版本都拥有不同的技能水平和用例。
Compiled and ready to use in production. Download this version if you don't want to customize AdminLTE's LESS files.
DownloadAll files including the compiled CSS. Download this version if you plan on customizing the template. Requires a LESS compiler.
DownloadFile Hierarchy of the Source Code Package
AdminLTE/
├── dist/
│ ├── CSS/
│ ├── JS
│ ├── img
├── build/
│ ├── less/
│ │ ├── AdminLTE's Less files
│ └── Bootstrap-less/ (Only for reference. No modifications have been made)
│ ├── mixins/
│ ├── variables.less
│ ├── mixins.less
└── plugins/
├── All the customized plugins CSS and JS files
AdminLTE依赖于两个主要框架。可下载的软件包包含这两个库,因此您不必手动下载它们。
在你去看你的新的主题之前,这里有几个关于如何熟悉它的技巧:
Note: LESS files are better commented than the compiled CSS file.
布局主要有四个主要的部分:
.wrapper
. A div that wraps the whole site..main-header
. Contains the logo and navbar..sidebar-wrapper
. Contains the user panel and sidebar menu..content-wrapper
. Contains the page header and content.The starter page is a good place to start building your app if you'd like to start from scratch.
AdminLTE 2.0提供了一套适用于您的主要布局的选项。 这些类中的每一个都可以添加到body标签中以获得所需的目标。
.fixed
to get a fixed header and sidebar..sidebar-collapse
to have a collapsed sidebar upon loading..layout-boxed
to get a boxed layout that stretches only to 1250px..layout-top-nav
to remove the sidebar and have your links at the top navbar.Note: you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.
皮肤可以在dist / css / skins文件夹中找到。 选择所需的皮肤文件,然后将正确的类添加到body标签,以更改模板的外观。 以下是可用皮肤的列表:
可以使用以下方式之一来修改AdminLTE的app.js选项。
在主要的Javascript文件中,修改$.AdminLTE.options对象以适合您的用例。
或者,您可以定义一个名为 AdminLTEOptions
的全局选项变量,并在加载app.js之前对其进行初始化。
例子
<script>
var AdminLTEOptions = {
//Enable sidebar expand on hover effect for sidebar mini
//This option is forced to true if both the fixed layout and sidebar mini
//are used together
sidebarExpandOnHover: true,
//BoxRefresh Plugin
enableBoxRefresh: true,
//Bootstrap.js tooltip
enableBSToppltip: true
};
</script>
<script src="dist/js/app.js" type="text/javascript"></script>
{
//Add slimscroll to navbar menus
//This requires you to load the slimscroll plugin
//in every page before app.js
navbarMenuSlimscroll: true,
navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
navbarMenuHeight: "200px", //The height of the inner menu
//General animation speed for JS animated elements such as box collapse/expand and
//sidebar treeview slide up/down. This options accepts an integer as milliseconds,
//'fast', 'normal', or 'slow'
animationSpeed: 500,
//Sidebar push menu toggle button selector
sidebarToggleSelector: "[data-toggle='offcanvas']",
//Activate sidebar push menu
sidebarPushMenu: true,
//Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
sidebarSlimScroll: true,
//Enable sidebar expand on hover effect for sidebar mini
//This option is forced to true if both the fixed layout and sidebar mini
//are used together
sidebarExpandOnHover: false,
//BoxRefresh Plugin
enableBoxRefresh: true,
//Bootstrap.js tooltip
enableBSToppltip: true,
BSTooltipSelector: "[data-toggle='tooltip']",
//Enable Fast Click. Fastclick.js creates a more
//native touch experience with touch devices. If you
//choose to enable the plugin, make sure you load the script
//before AdminLTE's app.js
enableFastclick: true,
//Control Sidebar Tree Views
enableControlTreeView: true,
//Control Sidebar Options
enableControlSidebar: true,
controlSidebarOptions: {
//Which button should trigger the open/close event
toggleBtnSelector: "[data-toggle='control-sidebar']",
//The sidebar selector
selector: ".control-sidebar",
//Enable slide over content
slide: true
},
//Box Widget Plugin. Enable this plugin
//to allow boxes to be collapsed and/or removed
enableBoxWidget: true,
//Box Widget plugin options
boxWidgetOptions: {
boxWidgetIcons: {
//Collapse icon
collapse: 'fa-minus',
//Open icon
open: 'fa-plus',
//Remove icon
remove: 'fa-times'
},
boxWidgetSelectors: {
//Remove button selector
remove: '[data-widget="remove"]',
//Collapse button selector
collapse: '[data-widget="collapse"]'
}
},
//Direct Chat plugin options
directChat: {
//Enable direct chat by default
enable: true,
//The button to open and close the chat contacts pane
contactToggleSelector: '[data-widget="chat-pane-toggle"]'
},
//Define the set of colors to use globally around the website
colors: {
lightBlue: "#3c8dbc",
red: "#f56954",
green: "#00a65a",
aqua: "#00c0ef",
yellow: "#f39c12",
blue: "#0073b7",
navy: "#001F3F",
teal: "#39CCCC",
olive: "#3D9970",
lime: "#01FF70",
orange: "#FF851B",
fuchsia: "#F012BE",
purple: "#8E24AA",
maroon: "#D81B60",
black: "#222222",
gray: "#d2d6de"
},
//The standard screen sizes that bootstrap uses.
//If you change these in the variables.less file, change
//them here too.
screenSizes: {
xs: 480,
sm: 768,
md: 992,
lg: 1200
}
}
AdminLTE uses all of Bootstrap 3 components. It's a good start to review the Bootstrap documentation to get an idea of the various components that this documentation does not cover.
If you go through the example pages and would like to copy a component, right-click on the component and choose "inspect element" to get to the HTML quicker than scanning the HTML page.
Main Header包含徽标和导航栏。 引导栏的构造与Bootstrap略有不同,因为它具有Bootstrap不提供的组件。 导航栏可以以两种方式构建。 这是一个正常导航栏的例子,接下来我们将提供顶部导航布局的示例。
<header class="main-header"> <a href="../../index2.html" class="logo"> <!-- LOGO --> AdminLTE </a> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top" role="navigation"> <!-- Navbar Right Menu --> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <!-- Messages: style can be found in dropdown.less--> <li class="dropdown messages-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-envelope-o"></i> <span class="label label-success">4</span> </a> <ul class="dropdown-menu"> <li class="header">You have 4 messages</li> <li> <!-- inner menu: contains the actual data --> <ul class="menu"> <li><!-- start message --> <a href="#"> <div class="pull-left"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <h4> Sender Name <small><i class="fa fa-clock-o"></i> 5 mins</small> </h4> <p>Message Excerpt</p> </a> </li><!-- end message --> ... </ul> </li> <li class="footer"><a href="#">See All Messages</a></li> </ul> </li> <!-- Notifications: style can be found in dropdown.less --> <li class="dropdown notifications-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bell-o"></i> <span class="label label-warning">10</span> </a> <ul class="dropdown-menu"> <li class="header">You have 10 notifications</li> <li> <!-- inner menu: contains the actual data --> <ul class="menu"> <li> <a href="#"> <i class="ion ion-ios-people info"></i> Notification title </a> </li> ... </ul> </li> <li class="footer"><a href="#">View all</a></li> </ul> </li> <!-- Tasks: style can be found in dropdown.less --> <li class="dropdown tasks-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-flag-o"></i> <span class="label label-danger">9</span> </a> <ul class="dropdown-menu"> <li class="header">You have 9 tasks</li> <li> <!-- inner menu: contains the actual data --> <ul class="menu"> <li><!-- Task item --> <a href="#"> <h3> Design some buttons <small class="pull-right">20%</small> </h3> <div class="progress xs"> <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">20% Complete</span> </div> </div> </a> </li><!-- end task item --> ... </ul> </li> <li class="footer"> <a href="#">View all tasks</a> </li> </ul> </li> <!-- User Account: style can be found in dropdown.less --> <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"> <span class="hidden-xs">Alexander Pierce</span> </a> <ul class="dropdown-menu"> <!-- User image --> <li class="user-header"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> <p> Alexander Pierce - Web Developer <small>Member since Nov. 2012</small> </p> </li> <!-- Menu Body --> <li class="user-body"> <div class="col-xs-4 text-center"> <a href="#">Followers</a> </div> <div class="col-xs-4 text-center"> <a href="#">Sales</a> </div> <div class="col-xs-4 text-center"> <a href="#">Friends</a> </div> </li> <!-- Menu Footer--> <li class="user-footer"> <div class="pull-left"> <a href="#" class="btn btn-default btn-flat">Profile</a> </div> <div class="pull-right"> <a href="#" class="btn btn-default btn-flat">Sign out</a> </div> </li> </ul> </li> </ul> </div> </nav> </header>
To use this main header instead of the regular one, you must add the layout-top-nav
class to the body tag.
<header class="main-header"> <nav class="navbar navbar-static-top"> <div class="container-fluid"> <div class="navbar-header"> <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <i class="fa fa-bars"></i> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbar-collapse"> <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">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" id="navbar-search-input" placeholder="Search"> </div> </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">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </header>
sidebar组件:本页面左边使用的侧边栏提供了侧边栏应该是什么样的例子。 边栏的构造:
<div class="main-sidebar"> <!-- Inner sidebar --> <div class="sidebar"> <!-- user panel (Optional) --> <div class="user-panel"> <div class="pull-left image"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"> </div> <div class="pull-left info"> <p>User Name</p> <a href="#"><i class="fa fa-circle text-success"></i> Online</a> </div> </div><!-- /.user-panel --> <!-- Search Form (Optional) --> <form action="#" method="get" class="sidebar-form"> <div class="input-group"> <input type="text" name="q" class="form-control" placeholder="Search..."> <span class="input-group-btn"> <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button> </span> </div> </form><!-- /.sidebar-form --> <!-- Sidebar Menu --> <ul class="sidebar-menu"> <li class="header">HEADER</li> <!-- Optionally, you can add icons to the links --> <li class="active"><a href="#"><span>Link</span></a><</li> <li><a href="#"><span>Another Link</span></a></li> <li class="treeview"> <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a> <ul class="treeview-menu"> <li><a href="#">Link in level 2</a></li> <li><a href="#">Link in level 2</a></li> </ul> </li> </ul><!-- /.sidebar-menu --> </div><!-- /.sidebar --> </div><!-- /.main-sidebar -->
Control sidebar 是右侧栏。 它可以用于许多目的,非常容易创建。 侧边栏配有两种不同的显示/隐藏样式。 第一个允许侧边栏滑过内容。 第二个推送内容为边栏腾出空间。 可以通过Javascript选项来设置这些方法之一。
以下代码应放在.wrapper
div中. 我更喜欢把它放在页脚后面。
Dark Sidebar Markup
<!-- The Right Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Content of the sidebar goes here -->
</aside>
<!-- The sidebar's background -->
<!-- This div must placed right after the sidebar for it to work-->
<div class="control-sidebar-bg"></div>
Light Sidebar Markup
<!-- The Right Sidebar -->
<aside class="control-sidebar control-sidebar-light">
<!-- Content of the sidebar goes here -->
</aside>
<!-- The sidebar's background -->
<!-- This div must placed right after the sidebar for it to work-->
<div class="control-sidebar-bg"></div>
创建侧栏后,您将需要一个切换按钮来打开/关闭它。 通过将属性data-toggle="control-sidebar"
添加到任何按钮,它将自动充当切换按钮。
Toggle Button Example
Sidebar Toggle Markup
<button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button>
Info box用于显示统计代码段。 信息框有两种类型。
Markup
<div class="info-box">
<!-- Apply any bg-* class to to the icon to color it -->
<span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">93,139</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
Markup
<!-- Apply any bg-* class to to the info-box to color it -->
<div class="info-box bg-red">
<span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
<!-- The progress section is optional -->
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div><!-- /.info-box-content -->
</div><!-- /.info-box -->
您唯一需要更改的事情是在这些风格之间切换,以改变bg- *类的位置。 对于第一种风格,应用任何bg- *类到图标本身。 对于其他样式,将bg- *类应用到info-box div。
Box组件是通过这个模板使用最广泛的组件。 您可以使用它来显示图表到只是文本块。 它有很多不同之处我们将在下面探讨的风格。
<div class="box"> <div class="box-header with-border"> <h3 class="box-title">Default Box Example</h3> <div class="box-tools pull-right"> <!-- Buttons, labels, and many other things can be placed here! --> <!-- Here is a label for example --> <span class="label label-primary">Label</span> </div><!-- /.box-tools --> </div><!-- /.box-header --> <div class="box-body"> The body of the box </div><!-- /.box-body --> <div class="box-footer"> The footer of the box </div><!-- box-footer --> </div><!-- /.box -->
Y您可以通过添加任何上下文类来更改框的样式。
<div class="box box-default">...</div> <div class="box box-primary">...</div> <div class="box box-info">...</div> <div class="box box-warning">...</div> <div class="box box-success">...</div> <div class="box box-danger">...</div>
Solid Box是显示盒子的替代方法。 它们可以通过简单地将box-solid类添加到框组件来创建。 您也可以使用带有实体框的上下文类。
<div class="box box-solid box-default">...</div> <div class="box box-solid box-primary">...</div> <div class="box box-solid box-info">...</div> <div class="box box-solid box-warning">...</div> <div class="box box-solid box-success">...</div> <div class="box box-solid box-danger">...</div>
Box 可以包含部署特定事件或提供简单信息的工具。 以下示例使用框的标题中的多个AdminLTE组件。
AdminLTE data-widget 属性提供了能够折叠或被删除的框。 这些按钮放置在盒子工具中,这些工具放置在盒子标题中。
<!-- This will cause the box to be removed when clicked --> <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> <!-- This will cause the box to collapse when clicked --> <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
<div class="box box-default"> <div class="box-header with-border"> <h3 class="box-title">Collapsable</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> </div><!-- /.box-tools --> </div><!-- /.box-header --> <div class="box-body"> The body of the box </div><!-- /.box-body --> </div><!-- /.box -->
<div class="box box-default"> <div class="box-header with-border"> <h3 class="box-title">Removable</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> </div><!-- /.box-tools --> </div><!-- /.box-header --> <div class="box-body"> The body of the box </div><!-- /.box-body --> </div><!-- /.box -->
<div class="box box-default collapsed-box"> <div class="box-header with-border"> <h3 class="box-title">Expandable</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button> </div><!-- /.box-tools --> </div><!-- /.box-header --> <div class="box-body"> The body of the box </div><!-- /.box-body --> </div><!-- /.box -->
我们可以在Box中添加 labels, badges, pagination, tooltips, inputs等。 几个例子如下:
<div class="box box-default"> <div class="box-header with-border"> <h3 class="box-title">Labels</h3> <div class="box-tools pull-right"> <span class="label label-default">8 New Messages</span> </div><!-- /.box-tools --> </div><!-- /.box-header --> <div class="box-body"> The body of the box </div><!-- /.box-body --> </div><!-- /.box -->
<div class="box box-default"> <div class="box-header with-border"> <h3 class="box-title">Input</h3> <div class="box-tools pull-right"> <div class="has-feedback"> <input type="text" class="form-control input-sm" placeholder="Search..."> <span class="glyphicon glyphicon-search form-control-feedback"></span> </div> </div><!-- /.box-tools --> </div><!-- /.box-header --> <div class="box-body"> The body of the box </div><!-- /.box-body --> </div><!-- /.box -->
<div class="box box-default"> <div class="box-header with-border"> <h3 class="box-title">Tooltips on buttons</h3> <div class="box-tools pull-right"> <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> </div><!-- /.box-tools --> </div><!-- /.box-header --> <div class="box-body"> The body of the box </div><!-- /.box-body --> </div><!-- /.box -->
如果您在加载app.js
后将文档插入文档,则必须通过调用.activateBox()
来显式地激活collapse / remove按钮::
<script>
$("#box-widget").activateBox();
</script>
要模拟加载状态,只需将该代码放在.box
关闭标记之前。
<div class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
Direct chat 部件扩展了box组件,它创建了一个漂亮的聊天界面。此小组件由必需的消息窗格和可选的联系人窗格组成。 例子:
Direct Chat Markup
<!-- Construct the box with style you want. Here we are using box-danger -->
<!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
<!-- The contextual class should match the box, so we are using direct-chat-danger -->
<div class="box box-danger direct-chat direct-chat-danger">
<div class="box-header with-border">
<h3 class="box-title">Direct Chat</h3>
<div class="box-tools pull-right">
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<!-- In box-tools add this button if you intend to use the contacts pane -->
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages">
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">Alexander Pierce</span>
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
</div><!-- /.direct-chat-info -->
<img class="direct-chat-img" src="../../assets/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-right">Sarah Bullock</span>
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
</div><!-- /.direct-chat-info -->
<img class="direct-chat-img" src="../../assets/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
</div><!-- /.direct-chat-text -->
</div><!-- /.direct-chat-msg -->
</div><!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts">
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="../../assets/img/user1-128x128.jpg" alt="Contact Avatar">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
<small class="contacts-list-date pull-right">2/28/2015</small>
</span>
<span class="contacts-list-msg">How have you been? I was...</span>
</div><!-- /.contacts-list-info -->
</a>
</li><!-- End Contact Item -->
</ul><!-- /.contatcts-list -->
</div><!-- /.direct-chat-pane -->
</div><!-- /.box-body -->
<div class="box-footer">
<div class="input-group">
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-flat">Send</button>
</span>
</div>
</div><!-- /.box-footer-->
</div><!--/.direct-chat -->
当然,你可以通过添加solid-box
类到box中,直接与实体框进行聊天。这里有一组例子:
AdminLTE使用以下插件。 有关文档,更新或许可信息,请访问提供的链接。
AdminLTE 支持下面的浏览器:
Note: IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.
要从1.x升级到最新版本,请遵循本指南。
确保更新与AdminLTE相关的所有CSS和JS文件。 否则,布局将无法正常运行。 最重要的文件是AdminLTE.css,皮肤CSS文件和app.js.
<div class="main-header">
<div class="content-wrapper">
<div class="main-sidebar">
<div class="navbar-custom-menu">
对这些页面的HTML标记和样式进行了重大更改。 最好的方法是复制页面的代码并进行自定义。
And you should be set to go!
邮箱升级包含三个不同的视图。 视图是收件箱,阅读邮件和撰写新邮件。 要使用这些视图,您应该使用提供的HTML文件在pages / mailbox文件夹中。
注意: 旧的邮箱布局已被弃用,有利于新的邮箱布局,并将在下一个版本中删除。
由于许多AdminLTE用户,模板的多个实现方式可以轻松地与后端框架集成。 以下是其中的一些:
注意: tAlmsaeed Studio不支持这些实现。 但是,它们提供了一个很好的例子,说明如何将AdminLTE集成到不同的框架中。 有关AdminLTE的最新版本,请访问我们的 存储库或网站
AdminLTE是一个HTML模板,可以用于任何目的。但是,它不是容易安装在Wordpress上。这将需要一些努力和足够的Wordpress脚本的知识。
简短答案,不。 然而,网络上有叉子和教程,它提供了如何与许多不同框架集成的信息。 甚至还有一些版本的AdminLTE与jQuery ajax,AngularJS和/或MVC5 ASP .NET集成在一起。
最好的选择是使用Almsaeed Studio上的订阅表订阅我们的邮件列表。如果这并不吸引您,您可以随时观看Github上的存储库,或者访问Almsaeed Studio,然后再进行更新和公告。
AdminLTE是一个根据麻省理工学院许可证获得许可的开源项目。只要您在“软件的所有副本或大部分内容”中包含版权,您就可以做任何事情。归因不是必需的(尽管非常感谢)。