Difference between revisions of "About Wiki Page Layouts"

From Help Wiki
m (subst applied to Template:TwoColumn)
 
Line 1: Line 1:
{{TwoColumn|lead=
+
 
The default Evergreen MediaWiki skin (Chameleon) is a bootstrap-based skin.  
+
<div class="container-fluid">
|content=
+
<div class="row">
 +
<div class="col-md-8">
 +
<div class="lead">
 +
The default Evergreen MediaWiki skin (Chameleon) is a bootstrap-based skin.
 +
</div>
 +
 
 
Understanding the [http://getbootstrap.com/css/#grid Bootstrap 3.0 classes available for grid-based] page layouts could help you better understand how the pages are structured.
 
Understanding the [http://getbootstrap.com/css/#grid Bootstrap 3.0 classes available for grid-based] page layouts could help you better understand how the pages are structured.
  
Line 18: Line 23:
 
  </div> <!-- end container-->
 
  </div> <!-- end container-->
 
</pre>
 
</pre>
|sidebar=
+
 
 +
 
 +
<!-- end col-md-8 -->
 +
</div>
 +
<div class="col-md-1"></div>
 +
<div class="col-md-3 sidebar">
 
====Related pages====
 
====Related pages====
 
*
 
*
Line 24: Line 34:
 
----
 
----
 
{{GetHelp}}
 
{{GetHelp}}
}}
+
 
 +
<!-- end col-md-3-->
 +
</div>
 +
<!-- end row-->
 +
</div>
 +
<!-- end container-->
 +
</div>
 +
<!-- Generator=Template:TwoColumn -->
 +
__NOTOC__
 +
__NOEDITSECTION__
 
<!-- Generator=Template:TwoColumn -->
 
<!-- Generator=Template:TwoColumn -->
 
[[Category:Page Layouts]]
 
[[Category:Page Layouts]]

Latest revision as of 16:00, 14 August 2017

The default Evergreen MediaWiki skin (Chameleon) is a bootstrap-based skin.

Understanding the Bootstrap 3.0 classes available for grid-based page layouts could help you better understand how the pages are structured.

Create a Two Column Layout Help Wiki default article

Create a main content + sidebar layout

<div class="container-fluid">
   <div class="row">
        <div class="col-md-7 ">
             <div class="lead">Lead text goes here </div> 
       </div><!-- end col-md-7 -->
<div class="col-md-1"></div>
       <div class="col-md-3 sidebar">
               *[[sidebar links can go here]]
       </div> <!-- end col-md-3-->
    </div> <!-- end row -->
 </div> <!-- end container-->