mirror of
https://github.com/boostorg/website.git
synced 2026-01-19 04:42:17 +00:00
712 lines
20 KiB
HTML
712 lines
20 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
|
<head>
|
|
<title>Boost C++ Libraries</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
|
|
<link rel="icon" href="/favicon.ico" type="image/ico" />
|
|
<link rel="stylesheet" type="text/css" href=
|
|
"/style-v2/section-development.css" />
|
|
<!--[if IE 7]> <style type="text/css"> body { behavior: url(/style-v2/csshover3.htc); } </style> <![endif]-->
|
|
</head><!--
|
|
Note: Editing website content is documented at:
|
|
https://www.boost.org/development/website_updating.html
|
|
-->
|
|
|
|
<body>
|
|
<div id="heading">
|
|
<!--#include virtual="/common/heading.html" -->
|
|
</div>
|
|
|
|
<div id="body">
|
|
<div id="body-inner">
|
|
<div id="content">
|
|
<div class="section" id="intro">
|
|
<div class="section-0">
|
|
<div class="section-title">
|
|
<h1>Website Exemplars</h1>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<p>This is both a test page and a guide as to the various
|
|
styled elements available in the Boost web pages. And for self
|
|
reference this is a [class="section-body"] div inside a
|
|
[class="section"] div. Each [class="section"] div should have a
|
|
corresponding "id", in this case the section is [id="intro"].
|
|
Feel free to copy elements from here onto other pages to
|
|
quickly get the structure you want. <strong>And of more import
|
|
please update this page if you add new content styles as it
|
|
helps everyone with the website documentation.</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" id="exemplar-section">
|
|
<div class="section-0">
|
|
<div class="section-title">
|
|
<h1>Section [class="section-title"]</h1>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<p>Simple paragraph inside the section body
|
|
[class="section-body"].</p>
|
|
|
|
<h2>Heading 2</h2>
|
|
|
|
<p><img src=
|
|
"http://sourceforge.net/sflogo.php?group_id=7586&type=3"
|
|
alt="SourceForge.net" class="left-inset" />The image to the
|
|
left uses a [class="left-inset"] as a shorthand for any
|
|
floating inset element aligned at both top and left edges.
|
|
— Lorem ipsum dolor sit amet, consectetuer adipiscing
|
|
elit. Duis ligula lorem, consequat eget, tristique nec, auctor
|
|
quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
|
|
Aenean viverra malesuada libero. Fusce ac quam. Donec neque.
|
|
Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan
|
|
aliquam, tellus dui fringilla quam, in condimentum augue lorem
|
|
non tellus. Pellentesque id arcu non sem placerat iaculis.
|
|
Curabitur posuere, pede vitae lacinia accumsan, enim nibh
|
|
elementum orci, ut volutpat eros sapien nec sapien. Suspendisse
|
|
neque arcu, ultrices commodo, pellentesque sit amet, ultricies
|
|
ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris
|
|
laoreet posuere odio. Nam ipsum ligula, ullamcorper eu,
|
|
fringilla at, lacinia ut, augue. Nullam nunc.</p>
|
|
|
|
<h3>Heading 3</h3>
|
|
|
|
<p><img src=
|
|
"http://sourceforge.net/sflogo.php?group_id=7586&type=4"
|
|
alt="SourceForge.net" class="right-inset" />This image uses a
|
|
[class="right-inset"] to as a mirror of the previous section
|
|
for a floating inset element aligned to top and right edges.
|
|
— Sed et lectus in massa imperdiet tincidunt. Praesent
|
|
neque tortor, sollicitudin non, euismod a, adipiscing a, est.
|
|
Mauris diam metus, varius nec, faucibus at, faucibus
|
|
sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum
|
|
tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam
|
|
interdum ullamcorper libero. Morbi vehicula imperdiet justo.
|
|
Etiam mollis fringilla ante. Donec et dui. Class aptent taciti
|
|
sociosqu ad litora torquent per conubia nostra, per inceptos
|
|
hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac,
|
|
lectus.</p>
|
|
|
|
<h4>Heading 4</h4>
|
|
|
|
<p>These are, hopefully all, the standard text markup styles.
|
|
Note, these are <em>not</em> structural markup elements. I.e.
|
|
these are the styles one sees to mark parts of the text inside
|
|
a paragraph, like the "not" in the second sentence of this
|
|
paragraph.</p>
|
|
|
|
<dl>
|
|
<dt>EM:</dt>
|
|
|
|
<dd>Indicates <em>emphasis</em>.</dd>
|
|
|
|
<dt>STRONG:</dt>
|
|
|
|
<dd>Indicates <strong>stronger emphasis</strong>.</dd>
|
|
|
|
<dt>CITE:</dt>
|
|
|
|
<dd>Contains a <cite>citation or a reference</cite> to other
|
|
sources.</dd>
|
|
|
|
<dt>DFN:</dt>
|
|
|
|
<dd>Indicates that this is the <dfn>defining instance</dfn>
|
|
of the enclosed term.</dd>
|
|
|
|
<dt>CODE:</dt>
|
|
|
|
<dd>Designates a fragment of <code>computer code</code>.</dd>
|
|
|
|
<dt>SAMP:</dt>
|
|
|
|
<dd>Designates <samp>sample output</samp> from programs,
|
|
scripts, etc.</dd>
|
|
|
|
<dt>KBD:</dt>
|
|
|
|
<dd>Indicates <kbd>text to be entered</kbd> by the user.</dd>
|
|
|
|
<dt>VAR:</dt>
|
|
|
|
<dd>Indicates an instance of a <var>variable</var> or program
|
|
argument.</dd>
|
|
|
|
<dt>ABBR:</dt>
|
|
|
|
<dd>Indicates an abbreviated form (e.g., <abbr>WWW</abbr>,
|
|
<abbr>HTTP</abbr>, <abbr>URI</abbr>, <abbr>Mass.</abbr>,
|
|
etc.).</dd>
|
|
|
|
<dt>ACRONYM:</dt>
|
|
|
|
<dd>Indicates an acronym (e.g., <acronym>WAC</acronym>,
|
|
<acronym>radar</acronym>, etc.).</dd>
|
|
|
|
<dt>Q:</dt>
|
|
|
|
<dd>Indicates a <q>quotation possibly with
|
|
<q>sub-quotes</q></q>.</dd>
|
|
|
|
<dt>SUB and SUP:</dt>
|
|
|
|
<dd>Indicates either sub<sub>scripts</sub> or
|
|
super<sup>scripts</sup>.</dd>
|
|
|
|
<dt>INS and DEL:</dt>
|
|
|
|
<dd>
|
|
Used to markup sections of the document that have been
|
|
<ins>inserted</ins> or <del>deleted</del> with respect to a
|
|
different version of a document.
|
|
</dd>
|
|
</dl>
|
|
|
|
<h5>Heading 5</h5>
|
|
|
|
<p>There are a variety of HTML structural elements. This means
|
|
that they do not tipically show with text flow. Bu tinstead
|
|
show as individual block elements. This paragraph being an
|
|
example. And the somewhat overused BLOCKQUOTE being
|
|
another:</p>
|
|
|
|
<blockquote>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
|
Duis ligula lorem, consequat eget, tristique nec, auctor
|
|
quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
|
|
Aenean viverra malesuada libero. Fusce ac quam. Donec neque.
|
|
Nunc venenatis enim nec quam. Cras faucibus, justo vel
|
|
accumsan aliquam, tellus dui fringilla quam, in condimentum
|
|
augue lorem non tellus. Pellentesque id arcu non sem placerat
|
|
iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim
|
|
nibh elementum orci, ut volutpat eros sapien nec sapien.
|
|
Suspendisse neque arcu, ultrices commodo, pellentesque sit
|
|
amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus
|
|
mollis. Mauris laoreet posuere odio. Nam ipsum ligula,
|
|
ullamcorper eu, fringilla at, lacinia ut, augue. Nullam
|
|
nunc.</p>
|
|
</blockquote>
|
|
|
|
<p>The Boost pages avoid the use of tables as a layout
|
|
mechanism. This helps, and hurts, in a variety of ways. The
|
|
most important benefit is the wider semantic access of the
|
|
content. It means that the largest set of browsers will
|
|
interpret tables as what they are; tabular content. The
|
|
following convenient sample comes from the helpful <a href=
|
|
"http://www.w3.org/TR/html4/struct/tables.html#h-11.5" class=
|
|
"external">HTML4 W3 standard</a>:</p>
|
|
|
|
<table summary=
|
|
"Code page support in different versions of MS Windows.">
|
|
<caption>
|
|
CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
|
|
</caption>
|
|
|
|
<colgroup></colgroup>
|
|
|
|
<colgroup></colgroup>
|
|
|
|
<colgroup span="2"></colgroup>
|
|
|
|
<colgroup span="3"></colgroup>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>Code-Page ID</th>
|
|
|
|
<th>Name</th>
|
|
|
|
<th>ACP</th>
|
|
|
|
<th>OEMCP</th>
|
|
|
|
<th>Windows NT 3.1</th>
|
|
|
|
<th>Windows NT 3.51</th>
|
|
|
|
<th>Windows 95</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>1200</td>
|
|
|
|
<td>Unicode (BMP of ISO/IEC-10646)</td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>*</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>1250</td>
|
|
|
|
<td>Windows 3.1 Eastern European</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>1251</td>
|
|
|
|
<td>Windows 3.1 Cyrillic</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>1252</td>
|
|
|
|
<td>Windows 3.1 US (ANSI)</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>1253</td>
|
|
|
|
<td>Windows 3.1 Greek</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>1254</td>
|
|
|
|
<td>Windows 3.1 Turkish</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>1255</td>
|
|
|
|
<td>Hebrew</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>1256</td>
|
|
|
|
<td>Arabic</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>1257</td>
|
|
|
|
<td>Baltic</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>1361</td>
|
|
|
|
<td>Korean (Johab)</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td>**</td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>437</td>
|
|
|
|
<td>MS-DOS United States</td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>708</td>
|
|
|
|
<td>Arabic (ASMO 708)</td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>709</td>
|
|
|
|
<td>Arabic (ASMO 449+, BCON V4)</td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>710</td>
|
|
|
|
<td>Arabic (Transparent Arabic)</td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>720</td>
|
|
|
|
<td>Arabic (Transparent ASMO)</td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
<td>X</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h6>Heading 6</h6>
|
|
|
|
<p>One of the most important elements of HTML is the hypertext
|
|
link. In the Boost pages all <a href="/">links</a> are treated
|
|
in a similar, consistent, manner regardless of context as much
|
|
as possible. Stylistic variations are present to account for
|
|
color contrast differences in the context. For example the
|
|
links in the header, and footer use different colors to match
|
|
the text color and contrast as much as possible with the
|
|
respective backgrounds. Within section content, like here, the
|
|
links also provide differing look & feel based on wether
|
|
they target the <a href="/">Boost web site</a>, or some
|
|
<a href="http://www.google.com/" class="external">external web
|
|
site [class="external"]</a>. Since most of the time links are
|
|
internal, that is the default semantic. External links need to
|
|
be decorated with [class="external"].</p>
|
|
|
|
<ul class="directory">
|
|
<li>
|
|
<h2>One</h2>
|
|
|
|
<p>This a "directory" unordered list [ul
|
|
class="directory"]. It is styled to show a list of short
|
|
items in as compact a form as possible. Currently that
|
|
means the items are arrayed in two columns and items are
|
|
packed to read left-to-right and top-to-bottom.</p>
|
|
</li>
|
|
|
|
<li>
|
|
<h2>Two</h2>
|
|
|
|
<p>Even though this an unordered list, one can also arrange
|
|
any block elements in this way. The top container needs to
|
|
be a [class="directory"] and the interior items
|
|
[class="directory-item"].</p>
|
|
</li>
|
|
</ul>
|
|
|
|
<h2>Unordered Lists [ul]</h2>
|
|
|
|
<p>This type of list is one of the most commonly used
|
|
structural elements used. It's used for directory listing,
|
|
history listings, table of contests, and many more. The goal is
|
|
to classify the various lists by type with a
|
|
[class="type-here"] attribute on the list [ul]. Please resist
|
|
the urge to use a classification just because it has the
|
|
particular look you want. As at some future point the look will
|
|
change and you will have no say in the effect of the particular
|
|
context.</p>
|
|
|
|
<h3>Default [ul]</h3>
|
|
|
|
<ul>
|
|
<li>Item 1
|
|
|
|
<ul>
|
|
<li>Subitem 1a
|
|
|
|
<ul>
|
|
<li>Subitem 1a1</li>
|
|
|
|
<li>Subitem 1a2</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>Subitem 1b</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>Item 2
|
|
|
|
<ul>
|
|
<li>Subitem 2a</li>
|
|
|
|
<li>Subitem 2b</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>Directory [ul class="directory"]</h3>
|
|
|
|
<ul class="directory">
|
|
<li>Item 1
|
|
|
|
<ul>
|
|
<li>Subitem 1a
|
|
|
|
<ul>
|
|
<li>Subitem 1a1</li>
|
|
|
|
<li>Subitem 1a2</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>Subitem 1b</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>Item 2
|
|
|
|
<ul>
|
|
<li>Subitem 2a</li>
|
|
|
|
<li>Subitem 2b</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>Table of contents [ul class="toc"]</h3>
|
|
|
|
<ul class="toc">
|
|
<li>
|
|
<a href="#">Item 1</a>
|
|
|
|
<ul>
|
|
<li><a href="#">Subitem 1a</a></li>
|
|
|
|
<li><a href="#">Subitem 1b</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="#">Item 2</a>
|
|
|
|
<ul>
|
|
<li><a href="#">Subitem 2a</a></li>
|
|
|
|
<li><a href="#">Subitem 2b</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>History [ul class="history"]</h3>
|
|
|
|
<ul class="history">
|
|
<li>Item 1
|
|
|
|
<ul>
|
|
<li>Subitem 1a</li>
|
|
|
|
<li>Subitem 1b</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>Item 2
|
|
|
|
<ul>
|
|
<li>Subitem 2a</li>
|
|
|
|
<li>Subitem 2b</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>Menus [ul class="menu"]</h3>
|
|
|
|
<ul class="menu">
|
|
<li><a href="#">Item 1</a></li>
|
|
|
|
<li><a href="#">Item 2</a></li>
|
|
</ul>
|
|
|
|
<h3>Tree [ul class="tree"]</h3>
|
|
|
|
<ul class="tree">
|
|
<li>Item 1
|
|
|
|
<ul>
|
|
<li>Subitem 1a
|
|
|
|
<ul>
|
|
<li>Subitem 1a1</li>
|
|
|
|
<li>Subitem 1a2</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>Subitem 1b</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>Item 2
|
|
|
|
<ul>
|
|
<li>Subitem 2a</li>
|
|
|
|
<li>Subitem 2b</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h2>Preformatted [pre]</h2>
|
|
|
|
<p>This is often used to show code examples, or more accurately
|
|
fixed examples. For example the <a href=
|
|
"/users/license.html">Boost Software License</a>:</p>
|
|
<pre>
|
|
<!--#include virtual="../LICENSE_1_0.txt" -->
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sidebar">
|
|
<!--#include virtual="/common/sidebar-common.html" -->
|
|
<!--#include virtual="/common/sidebar-development.html" -->
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer">
|
|
<div id="footer-left">
|
|
<div id="revised">
|
|
<p>Revised $Date$</p>
|
|
</div>
|
|
|
|
<div id="copyright">
|
|
<p>Copyright Rene Rivera 2005.</p>
|
|
</div><!--#include virtual="/common/footer-license.html" -->
|
|
</div>
|
|
|
|
<div id="footer-right">
|
|
<!--#include virtual="/common/footer-banners.html" -->
|
|
</div>
|
|
|
|
<div class="clear"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|