]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | <section id="layout"> |
2 | <h2 class="page-header"><a href="#layout">Layout</a></h2> | |
3 | <p class="lead">The layout consists of four major parts:</p> | |
4 | <ul> | |
5 | <li>Wrapper <code>.wrapper</code>. A div that wraps the whole site.</li> | |
6 | <li>Main Header <code>.main-header</code>. Contains the logo and navbar.</li> | |
7 | <li>Sidebar <code>.sidebar-wrapper</code>. Contains the user panel and sidebar menu.</li> | |
8 | <li>Content <code>.content-wrapper</code>. Contains the page header and content.</li> | |
9 | </ul> | |
10 | <div class="callout callout-danger lead"> | |
11 | <h4>Tip!</h4> | |
12 | <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> | |
13 | </div> | |
14 | ||
15 | <h3>Layout Options</h3> | |
16 | <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 | |
17 | to the body tag to get the desired goal.</p> | |
18 | <ul> | |
19 | <li><b>Fixed:</b> use the class <code>.fixed</code> to get a fixed header and sidebar.</li> | |
20 | <li><b>Collapsed Sidebar:</b> use the class <code>.sidebar-collapse</code> to have a collapsed sidebar upon loading.</li> | |
21 | <li><b>Boxed Layout:</b> use the class <code>.layout-boxed</code> to get a boxed layout that stretches only to 1250px.</li> | |
22 | <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> | |
23 | </ul> | |
24 | <p><b>Note:</b> you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.</p> | |
25 | ||
26 | <h3>Skins</h3> | |
27 | <p class="lead">Skins can be found in the dist/css/skins folder. | |
28 | Choose and the skin file that you want then add the appropriate | |
29 | class to the body tag to change the template's appearance. Here is the list of available skins:</p> | |
30 | <div class="box box-solid" style="max-width: 300px;"> | |
31 | <div class="box-body no-padding"> | |
32 | <table id="layout-skins-list" class="table table-striped bring-up nth-2-center"> | |
33 | <thead> | |
34 | <tr> | |
35 | <th style="width: 210px;">Skin Class</th> | |
36 | <th>Preview</th> | |
37 | </tr> | |
38 | </thead> | |
39 | <tbody> | |
40 | <tr> | |
41 | <td><code>skin-blue</code></td> | |
42 | <td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td> | |
43 | </tr> | |
44 | <tr> | |
45 | <td><code>skin-blue-light</code></td> | |
46 | <td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td> | |
47 | </tr> | |
48 | <tr> | |
49 | <td><code>skin-yellow</code></td> | |
50 | <td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td> | |
51 | </tr> | |
52 | <tr> | |
53 | <td><code>skin-yellow-light</code></td> | |
54 | <td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td> | |
55 | </tr> | |
56 | <tr> | |
57 | <td><code>skin-green</code></td> | |
58 | <td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td> | |
59 | </tr> | |
60 | <tr> | |
61 | <td><code>skin-green-light</code></td> | |
62 | <td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td> | |
63 | </tr> | |
64 | <tr> | |
65 | <td><code>skin-purple</code></td> | |
66 | <td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td> | |
67 | </tr> | |
68 | <tr> | |
69 | <td><code>skin-purple-light</code></td> | |
70 | <td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td> | |
71 | </tr> | |
72 | <tr> | |
73 | <td><code>skin-red</code></td> | |
74 | <td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td> | |
75 | </tr> | |
76 | <tr> | |
77 | <td><code>skin-red-light</code></td> | |
78 | <td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td> | |
79 | </tr> | |
80 | <tr> | |
81 | <td><code>skin-black</code></td> | |
82 | <td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td> | |
83 | </tr> | |
84 | <tr> | |
85 | <td><code>skin-black-light</code></td> | |
86 | <td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td> | |
87 | </tr> | |
88 | </tbody> | |
89 | </table> | |
90 | </div><!-- /.box-body --> | |
91 | </div><!-- /.box --> | |
92 | </section> |