176 lines
8.3 KiB
PHP
176 lines
8.3 KiB
PHP
<?php include('header.php'); ?>
|
|
|
|
<div>
|
|
<ul class="breadcrumb">
|
|
<li>
|
|
<a href="#">Home</a> <span class="divider">/</span>
|
|
</li>
|
|
<li>
|
|
<a href="#">Typography</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="row-fluid sortable">
|
|
<div class="box span9">
|
|
<div class="box-header well" data-original-title>
|
|
<h2><i class="icon-font"></i> Typography</h2>
|
|
<div class="box-icon">
|
|
<a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
|
|
<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
|
|
<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="box-content">
|
|
<div class="page-header">
|
|
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
|
|
</div>
|
|
<div class="row-fluid ">
|
|
<div class="span4">
|
|
<h3>Sample text and paragraphs</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. Donec consectetur, velit a pharetra ultricies, diam lorem lacinia risus, ac commodo orci erat eu massa. Sed sit amet nulla ipsum. Donec felis mauris, vulputate sed tempor at, aliquam a ligula. Pellentesque non pulvinar nisi.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. Donec consectetur, velit a pharetra ultricies, diam lorem lacinia risus, ac commodo orci erat eu massa. Sed sit amet nulla ipsum. Donec felis mauris, vulputate sed tempor at, aliquam a ligula. Pellentesque non pulvinar nisi.
|
|
</p>
|
|
</div>
|
|
<div class="span4">
|
|
<h3>Example body text</h3>
|
|
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
|
|
</div>
|
|
<div class="span4 ">
|
|
<div class="well">
|
|
<h1>h1. Heading 1</h1>
|
|
<h2>h2. Heading 2</h2>
|
|
<h3>h3. Heading 3</h3>
|
|
<h4>h4. Heading 4</h4>
|
|
<h5>h5. Heading 5</h5>
|
|
<h6>h6. Heading 6</h6>
|
|
</div>
|
|
</div>
|
|
</div><!--/row -->
|
|
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<h3>Example blockquotes</h3>
|
|
<div class="row-fluid">
|
|
<div class="span6">
|
|
<p>Default blockquotes are styled as such:</p>
|
|
<blockquote>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
|
|
<small>Someone famous in <cite title="">Body of work</cite></small>
|
|
</blockquote>
|
|
</div>
|
|
<div class="span6">
|
|
<p>You can always float your blockquote to the right:</p>
|
|
<blockquote class="pull-right">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
|
|
<small>Someone famous in <cite title="">Body of work</cite></small>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-fluid">
|
|
<div class="span6">
|
|
<h3>More Sample Text</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. Donec consectetur, velit a pharetra ultricies, diam lorem lacinia risus, ac commodo orci erat eu massa. Sed sit amet nulla ipsum. Donec felis mauris, vulputate sed tempor at, aliquam a ligula. Pellentesque non pulvinar nisi.
|
|
</p>
|
|
</div>
|
|
<div class="span6">
|
|
<h3>And Paragraphs</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. Donec consectetur, velit a pharetra ultricies, diam lorem lacinia risus, ac commodo orci erat eu massa. Sed sit amet nulla ipsum. Donec felis mauris, vulputate sed tempor at, aliquam a ligula. Pellentesque non pulvinar nisi.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row-fluid">
|
|
<div class="span12">
|
|
<h2>Example use of Tooltips</h2>
|
|
<p>Hover over the links below to see tooltips:</p>
|
|
<div class="tooltip-demo well">
|
|
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-rel="tooltip" data-original-title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american appadata-rel <a href="#" data-rel="tooltip" data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" data-rel="tooltip" data-original-title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" data-rel="tooltip" data-original-title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!--/span-->
|
|
|
|
<div class="box span3">
|
|
<div class="box-header well" data-original-title>
|
|
<h3>Unordered List</h3>
|
|
<div class="box-icon">
|
|
<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="box-content">
|
|
<ul>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit
|
|
<ul>
|
|
<li>Phasellus iaculis neque</li>
|
|
<li>Purus sodales ultricies</li>
|
|
<li>Vestibulum laoreet porttitor sem</li>
|
|
<li>Ac tristique libero volutpat at</li>
|
|
</ul>
|
|
</li>
|
|
<li>Faucibus porta lacus fringilla vel</li>
|
|
<li>Aenean sit amet erat nunc</li>
|
|
<li>Eget porttitor lorem</li>
|
|
</ul>
|
|
</div>
|
|
</div><!--/span-->
|
|
|
|
<div class="box span3">
|
|
<div class="box-header well" data-original-title>
|
|
<h3>Ordered List</h3>
|
|
<div class="box-icon">
|
|
<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="box-content">
|
|
<ol>
|
|
<li>Lorem ipsum dolor sit amet</li>
|
|
<li>Consectetur adipiscing elit</li>
|
|
<li>Integer molestie lorem at massa</li>
|
|
<li>Facilisis in pretium nisl aliquet</li>
|
|
<li>Nulla volutpat aliquam velit</li>
|
|
<li>Faucibus porta lacus fringilla vel</li>
|
|
<li>Aenean sit amet erat nunc</li>
|
|
<li>Eget porttitor lorem</li>
|
|
</ol>
|
|
</div>
|
|
</div><!--/span-->
|
|
|
|
<div class="box span3">
|
|
<div class="box-header well" data-original-title>
|
|
<h3>Description List</h3>
|
|
<div class="box-icon">
|
|
<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="box-content">
|
|
<dl>
|
|
<dt>Description lists</dt>
|
|
<dd>A description list is perfect for defining terms.</dd>
|
|
<dt>Euismod</dt>
|
|
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
|
|
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
|
|
<dt>Malesuada porta</dt>
|
|
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
|
</dl>
|
|
</div>
|
|
</div><!--/span-->
|
|
|
|
|
|
|
|
</div><!--/row-->
|
|
|
|
<?php include('footer.php'); ?>
|