Difference between revisions of "About Wiki Page Layouts"

From Help Wiki
m
m (subst applied to Template:TwoColumn)
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This article references the [http://getbootstrap.com/css/#grid Bootstrap 3.0 classes available for grid-based] page layouts when using the default Evergreen MediaWiki skin (Chameleon).
 
  
===Create a 2 Column Layout Help Wiki default article===
+
<div class="container-fluid">
 +
<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.
 +
 
 +
===Create a Two Column Layout Help Wiki default article===
 
Create a main content + sidebar layout
 
Create a main content + sidebar layout
 
<pre><div class="container-fluid">
 
<pre><div class="container-fluid">
 
   <div class="row">
 
   <div class="row">
         <div class="col-md-8 ">
+
         <div class="col-md-7 ">
 
             <div class="lead">Lead text goes here </div>  
 
             <div class="lead">Lead text goes here </div>  
       </div><!-- end col-md-8 -->
+
       </div><!-- end col-md-7 -->
       <div class="col-md-4 sidebar">
+
<div class="col-md-1"></div>
 +
       <div class="col-md-3 sidebar">
 
               *[[sidebar links can go here]]
 
               *[[sidebar links can go here]]
       </div> <!-- end col-md-4-->
+
       </div> <!-- end col-md-3-->
 
     </div> <!-- end row -->
 
     </div> <!-- end row -->
 
  </div> <!-- end container-->
 
  </div> <!-- end container-->
 
</pre>
 
</pre>
[[Category:Wiki Admin]]
+
 
 +
 
 +
<!-- end col-md-8 -->
 +
</div>
 +
<div class="col-md-1"></div>
 +
<div class="col-md-3 sidebar">
 +
====Related pages====
 +
*
 +
 
 +
----
 +
{{GetHelp}}
 +
 
 +
<!-- end col-md-3-->
 +
</div>
 +
<!-- end row-->
 +
</div>
 +
<!-- end container-->
 +
</div>
 +
<!-- Generator=Template:TwoColumn -->
 +
__NOTOC__
 +
__NOEDITSECTION__
 +
<!-- Generator=Template:TwoColumn -->
 +
[[Category:Page Layouts]]

Latest revision as of 17: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-->