提交 e219f5c6 编写于 作者: A almasaeed2010

Updated documentation

上级 7f65b2cd
......@@ -9,7 +9,13 @@
margin: 0 0 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
a {
color: #fff;
text-decoration: underline;
&:hover {
color: #eee;
}
}
h4 {
margin-top: 0;
font-weight: 600;
......
......@@ -1898,6 +1898,13 @@ a:focus {
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
.callout a {
color: #fff;
text-decoration: underline;
}
.callout a:hover {
color: #eee;
}
.callout h4 {
margin-top: 0;
font-weight: 600;
......
因为 它太大了无法显示 source diff 。你可以改为 查看blob
......@@ -28,19 +28,23 @@
}
.page-header {
border: 0;
margin: 0;
padding: 0 0 20px 0;
margin: 0 0 20px 0;
padding: 0;
position: relative;
z-index: 1;
font-size: 30px;
}
section[id] {
padding: 20px 0 0 0;
}
h3 {
margin-bottom: 5px;
}
.page-header span {
z-index: 5;
display: inline-block;
background-color: #f9f9f9;
padding: 10px 10px 10px 0;
font-size: 25px;
line-height: 1;
border-radius: 3px;
padding-right: 10px;
}
.page-header::before {
content: " ";
......@@ -140,6 +144,7 @@
<li><a href="#browsers"><i class='fa fa-circle-o'></i> Browser Support</a></li>
<li><a href="#upgrade"><i class='fa fa-circle-o'></i> Upgrade Guide</a></li>
<li><a href="#faq"><i class='fa fa-circle-o'></i> FAQ</a></li>
<li><a href="#license"><i class='fa fa-circle-o'></i> License</a></li>
</ul>
</section>
<!-- /.sidebar -->
......@@ -273,6 +278,7 @@ AdminLTE/
<li>Sidebar <code>.sidebar-wrapper</code></li>
<li>Content <code>.content-wrapper</code></li>
</ul>
<p>A full layout example for a quick start</p>
<pre class='prettyprint'>
&LT;!DOCTYPE html>
&LT;html>
......@@ -354,13 +360,233 @@ AdminLTE/
&LT;script src="../../js/AdminLTE/app.js" type="text/javascript">&LT;/script>
&LT;/body>
&LT;/html></pre>
<h3>Layout Options</h3>
<p class="lead">AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added
to the body tag to get the desired goal.</p>
<ul>
<li><b>Fixed:</b> use the class <code>.fixed</code> to get a fixed header and sidebar.</li>
<li><b>Collapsed Sidebar:</b> use the class <code>.collapsed-sidebar</code> to have a collapsed sidebar upon loading.</li>
<li><b>Boxed Layout:</b> use the class <code>.layout-boxed</code> to get a boxed layout that stretches only to 1024px.</li>
<li><b>Top Navigation</b> use the class <code>.layout-top-nav</code> to remove the sidebar and have your links at the top navbar.</li>
</ul>
<p><b>Note:</b> you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.</p>
<h3>Skins</h3>
<p class="lead">Add one of the following classes to the body tag to change the template's appearance.</p>
<ul>
<li><code>skin-blue</code></li>
<li><code>skin-yellow</code></li>
<li><code>skin-purple</code></li>
<li><code>skin-green</code></li>
<li><code>skin-red</code></li>
<li><code>skin-black</code></li>
</ul>
</section>
<!-- ============================================================= -->
<section id='components'>
<h2 class='page-header'><span>Components</span></h2>
<p class="lead">Content</p>
<p class='callout callout-info lead'>
AdminLTE makes use of all of Bootstrap 3 components. It's a good start to review
the <a href="http://getbootstrap.com">Bootstrap documentation</a> to get an idea of what you the various components
that this documentation does not cover.
</p>
<h3>Main Header</h3>
<p class='lead'>The main header contains the logo and navbar. Construction of the
navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide.
The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for
the top nav layout.</p>
<pre class='prettyprint'>
&LT;header class="main-header">
&LT;a href="../../index2.html" class="logo">
&LT;!-- LOGO -->
AdminLTE
&LT;/a>
&LT;!-- Header Navbar: style can be found in header.less -->
&LT;nav class="navbar navbar-static-top" role="navigation">
&LT;!-- Navbar Right Menu -->
&LT;div class="navbar-custom-menu">
&LT;ul class="nav navbar-nav">
&LT;!-- Messages: style can be found in dropdown.less-->
&LT;li class="dropdown messages-menu">
&LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
&LT;i class="fa fa-envelope-o">&LT;/i>
&LT;span class="label label-success">4&LT;/span>
&LT;/a>
&LT;ul class="dropdown-menu">
&LT;li class="header">You have 4 messages&LT;/li>
&LT;li>
&LT;!-- inner menu: contains the actual data -->
&LT;ul class="menu">
&LT;li>&LT;!-- start message -->
&LT;a href="#">
&LT;div class="pull-left">
&LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
&LT;/div>
&LT;h4>
Sender Name
&LT;small>&LT;i class="fa fa-clock-o">&LT;/i> 5 mins&LT;/small>
&LT;/h4>
&LT;p>Message Excerpt&LT;/p>
&LT;/a>
&LT;/li>&LT;!-- end message -->
...
&LT;/ul>
&LT;/li>
&LT;li class="footer">&LT;a href="#">See All Messages&LT;/a>&LT;/li>
&LT;/ul>
&LT;/li>
&LT;!-- Notifications: style can be found in dropdown.less -->
&LT;li class="dropdown notifications-menu">
&LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
&LT;i class="fa fa-bell-o">&LT;/i>
&LT;span class="label label-warning">10&LT;/span>
&LT;/a>
&LT;ul class="dropdown-menu">
&LT;li class="header">You have 10 notifications&LT;/li>
&LT;li>
&LT;!-- inner menu: contains the actual data -->
&LT;ul class="menu">
&LT;li>
&LT;a href="#">
&LT;i class="ion ion-ios-people info">&LT;/i> Notification title
&LT;/a>
&LT;/li>
...
&LT;/ul>
&LT;/li>
&LT;li class="footer">&LT;a href="#">View all&LT;/a>&LT;/li>
&LT;/ul>
&LT;/li>
&LT;!-- Tasks: style can be found in dropdown.less -->
&LT;li class="dropdown tasks-menu">
&LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
&LT;i class="fa fa-flag-o">&LT;/i>
&LT;span class="label label-danger">9&LT;/span>
&LT;/a>
&LT;ul class="dropdown-menu">
&LT;li class="header">You have 9 tasks&LT;/li>
&LT;li>
&LT;!-- inner menu: contains the actual data -->
&LT;ul class="menu">
&LT;li>&LT;!-- Task item -->
&LT;a href="#">
&LT;h3>
Design some buttons
&LT;small class="pull-right">20%&LT;/small>
&LT;/h3>
&LT;div class="progress xs">
&LT;div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
&LT;span class="sr-only">20% Complete&LT;/span>
&LT;/div>
&LT;/div>
&LT;/a>
&LT;/li>&LT;!-- end task item -->
...
&LT;/ul>
&LT;/li>
&LT;li class="footer">
&LT;a href="#">View all tasks&LT;/a>
&LT;/li>
&LT;/ul>
&LT;/li>
&LT;!-- User Account: style can be found in dropdown.less -->
&LT;li class="dropdown user user-menu">
&LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
&LT;img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
&LT;span class="hidden-xs">Alexander Pierce&LT;/span>
&LT;/a>
&LT;ul class="dropdown-menu">
&LT;!-- User image -->
&LT;li class="user-header">
&LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
&LT;p>
Alexander Pierce - Web Developer
&LT;small>Member since Nov. 2012&LT;/small>
&LT;/p>
&LT;/li>
&LT;!-- Menu Body -->
&LT;li class="user-body">
&LT;div class="col-xs-4 text-center">
&LT;a href="#">Followers&LT;/a>
&LT;/div>
&LT;div class="col-xs-4 text-center">
&LT;a href="#">Sales&LT;/a>
&LT;/div>
&LT;div class="col-xs-4 text-center">
&LT;a href="#">Friends&LT;/a>
&LT;/div>
&LT;/li>
&LT;!-- Menu Footer-->
&LT;li class="user-footer">
&LT;div class="pull-left">
&LT;a href="#" class="btn btn-default btn-flat">Profile&LT;/a>
&LT;/div>
&LT;div class="pull-right">
&LT;a href="#" class="btn btn-default btn-flat">Sign out&LT;/a>
&LT;/div>
&LT;/li>
&LT;/ul>
&LT;/li>
&LT;/ul>
&LT;/div>
&LT;/nav>
&LT;/header></pre>
<p class='lead'>Top Nav Layout. Main Header Example.</p>
<pre class='prettyprint'>
&LT;!-- header logo: style can be found in header.less -->
&LT;header class="main-header">
&LT;!-- Logo -->
&LT;a href="../../index2.html" class="logo">AdminLTE&LT;/a>
&LT;nav class="navbar navbar-static-top">
&LT;div class="navbar-header">
&LT;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
&LT;i class="fa fa-bars">&LT;/i>
&LT;/button>
&LT;/div>
&LT;!-- Collect the nav links, forms, and other content for toggling -->
&LT;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
&LT;ul class="nav navbar-nav">
&LT;li class="active">&LT;a href="#">Link &LT;span class="sr-only">(current)&LT;/span>&LT;/a>&LT;/li>
&LT;li>&LT;a href="#">Link&LT;/a>&LT;/li>
&LT;li class="dropdown">
&LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown &LT;span class="caret">&LT;/span>&LT;/a>
&LT;ul class="dropdown-menu" role="menu">
&LT;li>&LT;a href="#">Action&LT;/a>&LT;/li>
&LT;li>&LT;a href="#">Another action&LT;/a>&LT;/li>
&LT;li>&LT;a href="#">Something else here&LT;/a>&LT;/li>
&LT;li class="divider">&LT;/li>
&LT;li>&LT;a href="#">Separated link&LT;/a>&LT;/li>
&LT;li class="divider">&LT;/li>
&LT;li>&LT;a href="#">One more separated link&LT;/a>&LT;/li>
&LT;/ul>
&LT;/li>
&LT;/ul>
&LT;form class="navbar-form navbar-left" role="search">
&LT;div class="form-group">
&LT;input type="text" class="form-control" placeholder="Search">
&LT;/div>
&LT;/form>
&LT;ul class="nav navbar-nav navbar-right">
&LT;li>&LT;a href="#">Link&LT;/a>&LT;/li>
&LT;li class="dropdown">
&LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown &LT;span class="caret">&LT;/span>&LT;/a>
&LT;ul class="dropdown-menu" role="menu">
&LT;li>&LT;a href="#">Action&LT;/a>&LT;/li>
&LT;li>&LT;a href="#">Another action&LT;/a>&LT;/li>
&LT;li>&LT;a href="#">Something else here&LT;/a>&LT;/li>
&LT;li class="divider">&LT;/li>
&LT;li>&LT;a href="#">Separated link&LT;/a>&LT;/li>
&LT;/ul>
&LT;/li>
&LT;/ul>
&LT;/div>&LT;!-- /.navbar-collapse -->
&LT;/nav>
&LT;/header>
</pre>
</section>
<!-- ============================================================= -->
......@@ -385,10 +611,11 @@ AdminLTE/
<ol>
<li>The .wrapper div must be placed immediately after the body tag rather than after the header</li>
<li>Change the .header div to .main-header <code>&LT;div class="main-header"></code></li>
<li>Change the .right-side class to .content-wrapper<code>&LT;div class="content-wrapper"></code></li>
<li>Change the .left-side class to .main-sidebar<code>&LT;div class="main-sidebar"></code></li>
<li>Change the .right-side class to .content-wrapper <code>&LT;div class="content-wrapper"></code></li>
<li>Change the .left-side class to .main-sidebar <code>&LT;div class="main-sidebar"></code></li>
<li>In the navbar, change .navbar-right to .navbar-custom-menu <code>&LT;div class="navbar-custom-menu"></code></li>
</ol>
<p>And you should be set!</p>
<p>And you should be set to go!</p>
</section>
<!-- ============================================================= -->
......@@ -397,6 +624,61 @@ AdminLTE/
<h2 class='page-header'><span>FAQ</span></h2>
<h3>Can AdminLTE be used with Wordpress?</h3>
<p class="lead">AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do so.</p>
<h3>Is there an integration guide for PHP frameworks such as Yii or Symphony?</h3>
<p class='lead'>Short answer, no. However, there are forks and tutorials around the web that
provide info on how to integrate with many different frameworks. There are even versions of
AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.
</p>
<h3>How do I get notified of new AdminLTE versions?</h3>
<p class='lead'>The best option is to subscribe to our mailing list using the
<a href="http://almsaeedstudio.com/#subscribe">subscription form on Almsaeed Studio</a>.
If that's not appealing to you, you may watch the <a href="https://github.com/almasaeed2010/AdminLTE">repository on Github</a>
or visit <a href="http://almsaeedstudio.com">Almsaeed Studio</a> every now and then for updates and announcements.</p>
</section>
<!-- ============================================================= -->
<section id="license">
<h1 class="page-header"><span>License</span></h1>
<h3>AdminLTE</h3>
<p class="lead">AdminLTE is an open source project that is licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>.
This allows you to do pretty much anything you want with it except selling it without any major modifications.
Attribution is not required (though very much appreciated).</p>
<h3>AdminLTE Premium Collection</h3>
<p class="lead">AdminLTE's premium collection provides a set of non-open source components, plugins and widgets. To use
the premium collection, you must buy a license that fits your use case. The following is the set of available licenses:</p>
<p><b>Single Application License</b></p>
<ul>
<li>Your use of the item is restricted to a single installation.
<li>You may use the item in work which you are creating for your own purposes or for your client.
<li>You must not incorporate the item in a work which is created for redistribution or resale by you or your client.
<li>The item may not be redistributed or resold.
<li>If the item contains licensed components, those components must only be used within the item and you must not extract and use them on a stand-alone basis.
<li>If the item was created using materials which are the subject of a GNU General Public License (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing conditions (to the extent the GPL applies).
</ul>
<p><b>Multiple Applications License</b></p>
<ul>
<li>Your use of the item may extend to multiple installations.
<li>You may use the item in work which you are creating for your own purposes or for your clients.
<li>You must not incorporate the item in a work which is created for redistribution or resale by you or your clients.
<li>The item may not be redistributed or resold.
<li>If the item contains licensed components, those components must only be used within the item and you must not extract and use them on a stand-alone basis.
<li>If the item was created using materials which are the subject of a GNU General Public License (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing conditions (to the extent the GPL applies).
</ul>
<p><b>Extended License</b></p>
<p>This license must be purchased if you intend to license, sublicense, redistribute, or resell the final product.</p>
<ul>
<li>Your use of the item may extend to multiple installations.
<li>You may use the item in work which you are creating for your own purposes or for your clients.
<li>You may license, sublicense, redistribute, or resell the item in the following circumstances:
<li>The item is incorporated into a larger work you have created; or
<li>If you modify the item and resell the end product.
<li>If the item contains licensed components, those components must only be used within the item and you must not extract and use them on a stand-alone basis.
<li>If the item was created using materials which are the subject of a GNU General Public License (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing conditions (to the extent the GPL applies).
</ul>
</section>
</div><!-- /.content -->
</div><!-- /.content-wrapper -->
......@@ -426,11 +708,12 @@ AdminLTE/
}
</script>
<script>
$(function(){
$(".sidebar-menu li a").click(function(){
$(function () {
$(".sidebar-menu li a").click(function () {
$(this).parents("ul").find(".active").removeClass("active");
$(this).parent('li').addClass('active');
});
});
</script>
</body>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册