0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00

More documentation and content changes

This commit is contained in:
Mark Otto 2011-04-27 15:40:12 -07:00
parent 677b5554f3
commit b9d6acf766
2 changed files with 232 additions and 207 deletions

View File

@ -326,9 +326,12 @@
<div class="page-header" id="typography">
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
<h2>Headings and paragraphs</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p>
<div class="row">
<div class="span4 columns">
<h2>Headings and copy</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p>
</div>
<div class="span6 columns">
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
@ -342,13 +345,19 @@
<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>
</div>
</div>
<h2>Emphasis, addresses, &amp; abbreviations</h2>
<div class="row">
<div class="span4 columns">
<h2>Misc. elements</h2>
<p>Using emphasis, addresses, &amp; abbreviations</p>
<p>
<code>&lt;strong&gt;</code>
<code>&lt;em&gt;</code>
<code>&lt;address&gt;</code>
<code>&lt;abbr&gt;</code>
</p>
</div>
<div class="span12 columns">
<h4>When to use</h4>
<p>Emphasis tags (<code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code>) should be used to add visual distinction between a word or phrase and its surrounding copy. Use <code>&lt;strong&gt;</code> for plain old attention and <code>&lt;em&gt;</code> for <em>slick</em> attention and titles.</p>
<h3>Emphasis in a paragraph</h3>
@ -364,18 +373,27 @@
<p><strong>Note:</strong> Each line in an <code>address</code> must end with a line-break (<code>&lt;br /&gt;</code>) to properly structure the content as it is read in real life without any styles applied.</p>
<h3>Abbreviations</h3>
<p>For abbreviations and acronyms, use the <code>abbr</code> tag (<code>acronym</code> is deprecated in <abbr title="HyperText Markup Langugage 5">HTML5</abbr>). Put the shorthand form within the tag and set a title for the complete name.</p>
</div>
</div>
<div class="row">
<div class="span4 columns">
<h2>Blockquotes</h2>
<p>
<code>&lt;blockquote&gt;</code>
<code>&lt;p&gt;</code>
<code>&lt;cite&gt;</code>
</p>
</div>
<div class="span12 columns">
<p>Be sure to wrap your <code>blockquote</code> around <code>paragraph</code> and <code>cite</code> tags. When citing a source, use the <code>cite</code> element. The CSS will automatically preface a name with an em dash (&amp;mdash;).</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
<cite>Dr. Julius Hibbert</cite>
</blockquote>
</div>
</div>
<h2>Lists</h2>
<div class="row">
@ -627,7 +645,12 @@
<div class="page-header" id="forms">
<h1>Forms and buttons</h1>
</div>
<div class="row">
<div class="span4 columns">
<p>All forms are given default styles to present them in a readable and scalable way.</p>
</div>
<div class="span12 columns">
<form>
<fieldset>
<legend>Example form legend</legend>
@ -799,6 +822,8 @@
</div>
</fieldset>
</form>
</div>
</div>
<div class="row">
<div class="span4 columns">

View File

@ -85,10 +85,7 @@ section {
margin-bottom: 40px;
}
// Hashgrid grid
/**
* Grid
*/
// Hashgrid.js grid
#grid {
width: 980px;
position: absolute;
@ -107,7 +104,10 @@ section {
}
#grid div.horiz {
height: 19px;
border-bottom: 1px dotted rgba(255,0,0,.25);
border-bottom: 1px solid rgba(255,0,0,.1);
margin: 0;
padding: 0;
&:nth-child(5n) {
border-color: rgba(255,0,0,.25);
}
}