2015-03-02 23:39:46 +00:00
|
|
|
<section id='layout'>
|
2015-03-06 03:47:23 +00:00
|
|
|
<h2 class='page-header'><a href="#layout">Layout</a></h2>
|
2015-03-02 23:39:46 +00:00
|
|
|
<p class='lead'>The layout consists of four major parts:</p>
|
|
|
|
<ul>
|
|
|
|
<li>Wrapper <code>.wrapper</code>. A div that wraps the whole site.</li>
|
|
|
|
<li>Main Header <code>.main-header</code>. Contains the logo and navbar.</li>
|
|
|
|
<li>Sidebar <code>.sidebar-wrapper</code>. Contains the user panel and sidebar menu.</li>
|
|
|
|
<li>Content <code>.content-wrapper</code>. Contains the page header and content.</li>
|
|
|
|
</ul>
|
|
|
|
<div class="callout callout-danger lead">
|
|
|
|
<h4>Tip!</h4>
|
|
|
|
<p>The <a href="../starter.html">starter page</a> is a good place to start building your app if you'd like to start from scratch.</p>
|
2015-05-17 09:48:37 +00:00
|
|
|
</div>
|
2015-03-02 23:39:46 +00:00
|
|
|
|
|
|
|
<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>
|
2015-05-16 22:53:28 +00:00
|
|
|
<li><b>Collapsed Sidebar:</b> use the class <code>.sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
|
2015-03-02 23:39:46 +00:00
|
|
|
<li><b>Boxed Layout:</b> use the class <code>.layout-boxed</code> to get a boxed layout that stretches only to 1250px.</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">Skins can be found in the dist/css/skins folder.
|
|
|
|
Choose and the skin file that you want then add the appropriate
|
|
|
|
class to the body tag to change the template's appearance. Here is the list of available skins:</p>
|
2015-05-23 10:40:30 +00:00
|
|
|
<div class="box box-solid" style="max-width: 300px;">
|
|
|
|
<div class="box-body no-padding">
|
|
|
|
<table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<th style="width: 210px;">Skin Class</th>
|
|
|
|
<th>Preview</th>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-blue</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-blue-light</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-yellow</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-yellow-light</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-green</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-green-light</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-purple</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-purple-light</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-red</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-red-light</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-black</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td><code>skin-black-light</code></td>
|
|
|
|
<td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div><!-- /.box-body -->
|
|
|
|
</div><!-- /.box -->
|
2015-03-02 23:39:46 +00:00
|
|
|
</section>
|