Skip to content

B
bootstrap
Commit c7c33561 authored by Mark Otto's avatar Mark Otto
Browse files
Options

more spacing tweaks

parent aaf9f752
Show whitespace changes
Inline Side-by-side
Showing with 551 additions and 547 deletions
docs/index.html
View file @ c7c33561
...@@ -233,6 +233,8 @@ ...@@ -233,6 +233,8 @@
<div class="page-header"> <div class="page-header">
<h1>Layouts <small>Basic templates to create webpages</small></h1> <h1>Layouts <small>Basic templates to create webpages</small></h1>
</div> </div>
<!-- Fixed layout -->
<div class="row"> <div class="row">
<div class="span4 columns"> <div class="span4 columns">
<h2>Fixed layout</h2> <h2>Fixed layout</h2>
...@@ -250,7 +252,9 @@ ...@@ -250,7 +252,9 @@
&lt;/body&gt; &lt;/body&gt;
</pre> </pre>
</div> </div>
</div> </div> <!-- /row -->
<!-- Fluid layout -->
<div class="row"> <div class="row">
<div class="span4 columns"> <div class="span4 columns">
<h2>Fluid layout</h2> <h2>Fluid layout</h2>
...@@ -274,17 +278,18 @@ ...@@ -274,17 +278,18 @@
&lt;/body&gt; &lt;/body&gt;
</pre> </pre>
</div> </div>
</div> </div> <!-- /row -->
</section> </section>
<section id="typography"> <section id="typography">
<div class="page-header"> <div class="page-header">
<h1>Typography <small>Headings, paragraphs, lists, and other inline type elements</small></h1> <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"> <div class="span4 columns">
<h2>Headings and copy</h2> <h2>Headings and copy</h2>
<p>A standard typographic hierarchy for structuring your webpages.</p> <p>A standard typographic hierarchy for structuring your webpages.</p>
...@@ -302,9 +307,10 @@ ...@@ -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> <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> <h1>Example heading <small>Has sub-heading&hellip;</small></h1>
</div> </div>
</div> </div>
<div class="row"> <!-- Misc Elements -->
<div class="row">
<div class="span4 columns"> <div class="span4 columns">
<h2>Misc. elements</h2> <h2>Misc. elements</h2>
<p>Using emphasis, addresses, &amp; abbreviations</p> <p>Using emphasis, addresses, &amp; abbreviations</p>
...@@ -333,9 +339,10 @@ ...@@ -333,9 +339,10 @@
<h3>Abbreviations</h3> <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> <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> </div> <!-- /row -->
<div class="row"> <!-- Blockquotes -->
<div class="row">
<div class="span4 columns"> <div class="span4 columns">
<h2>Blockquotes</h2> <h2>Blockquotes</h2>
<p> <p>
...@@ -351,11 +358,11 @@ ...@@ -351,11 +358,11 @@
<small>Dr. Julius Hibbert</small> <small>Dr. Julius Hibbert</small>
</blockquote> </blockquote>
</div> </div>
</div> </div> <!-- /row -->
<h2>Lists</h2> <!-- Types of Lists -->
<div class="row"> <h2>Lists</h2>
<div class="row">
<div class="span4 columns"> <div class="span4 columns">
<h4>Unordered <code>&lt;ul&gt;</code></h4> <h4>Unordered <code>&lt;ul&gt;</code></h4>
<ul> <ul>
...@@ -431,16 +438,17 @@ ...@@ -431,16 +438,17 @@
<dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl> </dl>
</div> </div>
</div> </div> <!-- /row -->
</section> </section>
<section id="tables"> <section id="tables">
<div class="page-header"> <div class="page-header">
<h1>Tables <small>For, you guessed it, tabular data</small></h1> <h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div> </div>
<!-- Table structure -->
<div class="row"> <div class="row">
<div class="span4 columns"> <div class="span4 columns">
<h2>Building tables</h2> <h2>Building tables</h2>
<p> <p>
...@@ -458,9 +466,9 @@ ...@@ -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> <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>
<div class="span12 columns"> <div class="span12 columns">
<h3>Example: Default table styles</h3> <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> <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> <table>
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
...@@ -489,15 +497,14 @@ ...@@ -489,15 +497,14 @@
<td>Code</td> <td>Code</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="common-table"&gt; &lt;table class="common-table"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
<h3>Example: Zebra-striped</h3>
<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>
<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">
<table class="zebra-striped">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
...@@ -526,15 +533,14 @@ ...@@ -526,15 +533,14 @@
<td>Code</td> <td>Code</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;table class="common-table zebra-striped"&gt; &lt;table class="common-table zebra-striped"&gt;
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
<h3>Example: Zebra-striped w/ TableSorter.js</h3>
<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>
<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">
<table class="zebra-striped" id="sortTableExample">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
...@@ -563,7 +569,7 @@ ...@@ -563,7 +569,7 @@
<td>Code</td> <td>Code</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script src="js/jquery/jquery.tablesorter.min.js"&gt;&lt;/script&gt; &lt;script src="js/jquery/jquery.tablesorter.min.js"&gt;&lt;/script&gt;
&lt;script &gt; &lt;script &gt;
...@@ -575,18 +581,16 @@ ...@@ -575,18 +581,16 @@
... ...
&lt;/table&gt;</pre> &lt;/table&gt;</pre>
</div> </div>
</div> </div> <!-- /row -->
</section> </section>
<section id="forms"> <section id="forms">
<div class="page-header">
<div class="page-header">
<h1>Forms</h1> <h1>Forms</h1>
</div> </div>
<div class="row">
<div class="row">
<div class="span4 columns"> <div class="span4 columns">
<h2>Default styles</h2> <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> <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 @@ ...@@ -765,11 +769,11 @@
</fieldset> </fieldset>
</form> </form>
</div> </div>
</div> </div> <!-- /row -->
<br /> <br />
<div class="row"> <div class="row">
<div class="span4 columns"> <div class="span4 columns">
<h2>Stacked forms</h2> <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> <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 @@ ...@@ -828,9 +832,9 @@
</div> </div>
</form> </form>
</div> </div>
</div> </div> <!-- /row -->
<div class="row"> <div class="row">
<div class="span4 columns"> <div class="span4 columns">
<h2>Buttons</h2> <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> <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 @@ ...@@ -866,7 +870,7 @@
<button class="btn large" disabled>Action</button> <button class="btn large" disabled>Action</button>
</div> </div>
</div> </div>
</div> </div> <!-- /row -->
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment