Difference between revisions of "About Wiki Page Layouts"
From Help Wiki
m |
m |
||
Line 1: | Line 1: | ||
− | The default Evergreen MediaWiki skin (Chameleon) is a bootstrap-based skin. 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. | + | {{TwoColumn|lead= |
+ | The default Evergreen MediaWiki skin (Chameleon) is a bootstrap-based skin. | ||
+ | |content= | ||
+ | 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 2 Column Layout Help Wiki default article=== | ===Create a 2 Column Layout Help Wiki default article=== | ||
Line 5: | Line 8: | ||
<pre><div class="container-fluid"> | <pre><div class="container-fluid"> | ||
<div class="row"> | <div class="row"> | ||
− | <div class="col-md- | + | <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- | + | </div><!-- end col-md-7 --> |
− | <div class="col-md- | + | <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- | + | </div> <!-- end col-md-3--> |
</div> <!-- end row --> | </div> <!-- end row --> | ||
</div> <!-- end container--> | </div> <!-- end container--> | ||
</pre> | </pre> | ||
+ | |sidebar= | ||
+ | ====Related pages==== | ||
+ | * | ||
+ | |||
+ | ---- | ||
+ | {{GetHelp}} | ||
+ | }} | ||
[[Category:Wiki Admin]] | [[Category:Wiki Admin]] |
Revision as of 14:32, 12 May 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 2 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-->