rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

more spacing tweaks

Browse Source
This commit is contained in:
Mark Otto 2011-08-20 23:32:37 -07:00
parent aaf9f752c4
commit c7c3356101
1 changed files with 554 additions and 550 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
docs/index.html
View File

@ -233,6 +233,8 @@
<div class="page-header">
<h1>Layouts <small>Basic templates to create webpages</small></h1>
</div>
<!-- Fixed layout -->
<div class="row">
<div class="span4 columns">
<h2>Fixed layout</h2>
@ -250,7 +252,9 @@
&lt;/body&gt;
</pre>
</div>
</div>
</div> <!-- /row -->
<!-- Fluid layout -->
<div class="row">
<div class="span4 columns">
<h2>Fluid layout</h2>
@ -274,17 +278,18 @@
&lt;/body&gt;
</pre>
</div>
</div>
</div> <!-- /row -->
</section>
<section id="typography">
<div class="page-header">
<div class="page-header">
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1>
</div>
</div>
<div class="row">
<!-- Headings & Paragraph Copy -->
<div class="row">
<div class="span4 columns">
<h2>Headings and copy</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p>
@ -302,9 +307,10 @@
<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>
<h1>Example heading <small>Has sub-heading&hellip;</small></h1>
</div>
</div>
</div>
<div class="row">
<!-- Misc Elements -->
<div class="row">
<div class="span4 columns">
<h2>Misc. elements</h2>
<p>Using emphasis, addresses, &amp; abbreviations</p>
@ -333,9 +339,10 @@
<h3>Abbreviations</h3>
<p>For abbreviations and acronyms, use the <code>&lt;abbr&gt;</code> tag (<code>&lt;acronym&gt;</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> <!-- /row -->
<div class="row">
<!-- Blockquotes -->
<div class="row">
<div class="span4 columns">
<h2>Blockquotes</h2>
<p>
@ -351,11 +358,11 @@
<small>Dr. Julius Hibbert</small>
</blockquote>
</div>
</div>
</div> <!-- /row -->
<h2>Lists</h2>
<div class="row">
<!-- Types of Lists -->
<h2>Lists</h2>
<div class="row">
<div class="span4 columns">
<h4>Unordered <code>&lt;ul&gt;</code></h4>
<ul>
@ -431,16 +438,17 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
</div>
</div> <!-- /row -->
</section>
<section id="tables">
<div class="page-header">
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
<div class="row">
<section id="tables">
<div class="page-header">
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
<!-- Table structure -->
<div class="row">
<div class="span4 columns">
<h2>Building tables</h2>
<p>
@ -458,9 +466,9 @@
<p>Similar to the column headers, all your table’s body content should be wrapped in a <code>&lt;tbody&gt;</code> so your hierarchy is <code>&lt;tbody&gt;</code> > <code>&lt;tr&gt;</code> > <code>&lt;td&gt;</code>.</p>
</div>
<div class="span12 columns">
<h3>Example: Default table styles</h3>
<p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
<table>
<h3>Example: Default table styles</h3>
<p>All tables will be automatically styled with only the essential borders to ensure readability and maintain structure. No need to add extra classes or attributes.</p>
<table>
<thead>
<tr>
<th>#</th>
@ -489,15 +497,14 @@
<td>Code</td>
</tr>
</tbody>
</table>
</table>
<pre class="prettyprint linenums">
&lt;table class="common-table"&gt;
...
&lt;/table&gt;</pre>
<h3>Example: Zebra-striped</h3>
<p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.zebra-striped</code> class.</p>
<table class="zebra-striped">
<h3>Example: Zebra-striped</h3>
<p>Get a little fancy with your tables by adding zebra-striping&mdash;just add the <code>.zebra-striped</code> class.</p>
<table class="zebra-striped">
<thead>
<tr>
<th>#</th>
@ -526,15 +533,14 @@
<td>Code</td>
</tr>
</tbody>
</table>
</table>
<pre class="prettyprint linenums">
&lt;table class="common-table zebra-striped"&gt;
...
&lt;/table&gt;</pre>
<h3>Example: Zebra-striped w/ TableSorter.js</h3>
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
<table class="zebra-striped" id="sortTableExample">
<h3>Example: Zebra-striped w/ TableSorter.js</h3>
<p>Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via <a href="http://jquery.com">jQuery</a> and the <a href="http://tablesorter.com/docs/">Tablesorter</a> plugin. <strong>Click any column’s header to change the sort.</strong></p>
<table class="zebra-striped" id="sortTableExample">
<thead>
<tr>
<th>#</th>
@ -563,7 +569,7 @@
<td>Code</td>
</tr>
</tbody>
</table>
</table>
<pre class="prettyprint linenums">
&lt;script src="js/jquery/jquery.tablesorter.min.js"&gt;&lt;/script&gt;
&lt;script &gt;
@ -575,18 +581,16 @@
...
&lt;/table&gt;</pre>
</div>
</div>
</div> <!-- /row -->
</section>
<section id="forms">
<div class="page-header">
<div class="page-header">
<h1>Forms</h1>
</div>
<div class="row">
</div>
<div class="row">
<div class="span4 columns">
<h2>Default styles</h2>
<p>All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.</p>
@ -765,11 +769,11 @@
</fieldset>
</form>
</div>
</div>
</div> <!-- /row -->
<br />
<br />
<div class="row">
<div class="row">
<div class="span4 columns">
<h2>Stacked forms</h2>
<p>Add <code>.form-stacked</code> to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.</p>
@ -828,9 +832,9 @@
</div>
</form>
</div>
</div>
</div> <!-- /row -->
<div class="row">
<div class="row">
<div class="span4 columns">
<h2>Buttons</h2>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
@ -866,7 +870,7 @@
<button class="btn large" disabled>Action</button>
</div>
</div>
</div>
</div> <!-- /row -->
</section>