44 lines
2.8 KiB
HTML
44 lines
2.8 KiB
HTML
<section id='layout'>
|
|
<h2 class='page-header'><a href="#layout">Layout</a></h2>
|
|
<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>
|
|
</div>
|
|
|
|
<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>.sidebar-collapse</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 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>
|
|
<ul id="layout-skins-list" class="bring-up">
|
|
<li><code>skin-blue</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-blue-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-yellow</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-yellow-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-purple</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-purple-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-green</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-green-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-red</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-red-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-black</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
<li><code>skin-black-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
|
|
</ul>
|
|
</section> |