411831bf726f5fb440a96fd00cbc7614f462e0e4
kate
Thu Feb 9 12:21:39 2017 -0800
Add instructions for how to center an image using bootstrap class 'text-center'. refs #18504
diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html
index 8e576e4..70880ab 100755
--- src/hg/htdocs/template.html
+++ src/hg/htdocs/template.html
@@ -1,176 +1,177 @@
<!DOCTYPE html>
<!-- template.html: Example HTML for a Genome Browser static page -->
<!-- Style recommendations
1. Capitalization: use only lowercase for HTML element names, attributes and values
2. Quotes: Use double quotes for attribute values
3. Whitespace: Use a new line for every block list or table element
4. Indentation: Indent every child element 2 spaces
5. Special characters: Don't use entity references (set editor to UTF-8), except < &
6. Limit lines to a maximum of 100 characters
-->
<!-- Page header -->
<!--#set var="TITLE" value="UCSC Genome Browser: Document Styles" -->
<!--#set var="ROOT" value="." -->
<!-- Relative paths to support mirror sites with non-standard GB docs install -->
<!--#include virtual="$ROOT/inc/gbPageStart.html" -->
<!-- Page content -->
<h1>Sample Genome Browser Static Page (h1)</h1>
<p>
This is a standard paragraph ("p" tag) of explanatory text.
The next part of the page demonstrates how to create a multi-column layout
using the grid layout feature of bootstrap.css, a widely used stylesheet which is now
included in the browser static pages.</p>
<!-- Sections -->
<!-- In this example, two of same size, so use 6 columns of 12 total in grid -->
<div class="row">
<!-- Left column -->
<div class="col-md-6">
<h2>Page section (h2)</h2>
<p>
This is one of two subsections, formatted as equal-sized columns.
The bootstrap grid contains 12 columns; column widths are specified using
classes "col-md-1" through "col-md-12".
This example contains two divs, each assigned class "col-md-6", within a
"row" div.</p>
<p>
NOTE: The two columns are displayed only on wide screens. On small screens, the sections will
be stacked vertically (a feature of bootstrap responsive layout).</p>
<h3>Subsection (h3)</h3>
<p>
This is the next level, a subsection. Use an "h3" tag for this. To structure content
below this level use a list, table, or titled paragraph:</p>
<h6>Titled paragraph</h6>
<p>
Use the "h6" tag at any level in the section hierarchy to precede a paragraph with a
bolded title.</p>
<h3>Lists</h3>
<p>
The description of lists below is formatted as an HTML definition list. Use this format when
defining terms or phrases. (You will not see this much in our current pages -- instead, this
type of text was usually styled ad-hoc using "strong" and "br" tags).</p>
<dl>
<dt>Definition list</dt>
<dd>
Use the "dl" tag to enclose the full list, then "dt" for each item term,
and "dd" for each item definition.</dd>
<dt>Bulleted list</dt>
Use the "ul" (unordered list tag) to enclose the full list, then "li" for
each list item.
<dd>
<dd>
<dt>Numbered list</dt>
<dd>
Use the "ol" (ordered list) tag to enclose the full list, then "li" for
each list item.
</dd>
</dl>
</div>
<!-- Right column -->
<div class="col-md-6">
<h2>Another section</h2>
<!-- Subsections -->
<h3>List Examples</h3>
<p>
Here is a bulleted list ("ul" and "li" elements). To suppress the bullet
add the class "gbsNoBullet" to the "ul" tag.</p>
<!-- Bulleted list example -->
<ul>
<li>red</li>
<li>white</li>
<li>blue</li>
</ul>
<!-- Numbered list example -->
<p>
Here is a numbered list ("ol" and "li" elements):
</p>
<ol>
<li>
<strong>chrom</strong> - The name of the chromosome (e.g. chr3, chrY, chr2_random) or
scaffold (e.g. scaffold10671).</li>
<li>
<strong>chromStart</strong> - The starting position of the feature in the chromosome or
scaffold. The first base in a chromosome is numbered 0.</li>
<li>
<strong>chromEnd</strong> - The ending position of the feature in the chromosome or scaffold.
The <em>chromEnd</em> base is not included in the display of the feature.
For example, the first 100 bases of a chromosome are defined
as <em>chromStart=0, chromEnd=100</em>, and span the bases numbered 0-99.</li>
</ol>
<h3>Tables</h3>
<p>
Here is a table ("table", "tr", "th", and "td"
elements):</p>
<!-- Table example -->
<table>
<tr>
<th>Type</th>
<th>Total</th>
</tr>
<tr>
<td>Chromosomes</td>
<td>261</td>
</tr>
<tr>
<td>Haplotypes</td>
<td>261</td>
</tr>
<tr>
<td>Unlocalized contigs</td>
<td>1270</td>
</tr>
</table>
<p>
To horizontally center the text in each table cell, add the class "gbsCenterText" to
the table element.</p>
<!-- Preformatted code example -->
<h3>Code</h3>
<p>
Here is some code in a preformatted section ("pre" and "code" tags):</p>
<pre><code>sudo -i
bash browserSetup.sh install</code></pre>
<p>
And here is some text with a <code>bit of code</code> embedded (just the "code"
tag).</p>
</div> <!-- end column -->
</div> <!-- end row -->
<h2>Section with a picture and caption</h2>
<p>
Use the "img" tag to include the picture file, which is typically in .jpg or .png format.
Images should normally have their "width" and "height' attributes set in the
-"img" element. To right-align the image add the "gbsAlignRight" class.
+"img" element.
The caption is a "p" element, which is assigned the "gbsCaption" class.
+To center the image, wrap it in a 'div' or 'p' element, and add the
+bootstrap "text-center" class to the wrapper element (also adding to a caption if present).
+</p>
+<p>
In the special case where an image is used as a character/symbol embedded inline in
a paragraph, add the class "gbsInlineImg" to the image tag, i.e. here's the wrench
(<img class="gbsInlineImg" src="images/wrench.png">).</p>
-<div class="row">
- <div class="col-md-12">
- <img src="images/gbstaff16.jpg" alt="Genome Browser staff" width="499" height="299">
- <p class="gbsCaption">
- Browser staff in native habitat.</p>
- </div>
-</div>
+<p class='text-center'>
+ <img class='text-center' src="images/gbstaff16.jpg" alt="Genome Browser staff" width="499" height="299">
+ <p class='gbsCaption text-center'>Browser staff in native habitat.</p>
+</p>
<!--#include virtual="$ROOT/inc/gbPageEnd.html" -->