streamline css docs

This commit is contained in:
Mark Otto 2013-01-17 00:50:19 -08:00
parent 2398245e17
commit 267d3e7ed7
3 changed files with 27 additions and 114 deletions

View File

@ -165,12 +165,6 @@ section > ul li {
position: static;
top: 0;
}
.bs-docs-sidenav.affix-bottom {
position: absolute;
top: auto;
bottom: 270px;
}
/* Chevrons within each link */
.bs-docs-sidenav .glyphicon-chevron-right {
@ -474,6 +468,11 @@ section > ul li {
.bs-docs-sidenav {
width: 170px;
}
.bs-docs-sidenav.affix-bottom {
position: absolute;
top: auto;
bottom: 270px;
}
}
/* Tablets/desktops and up */

View File

@ -178,9 +178,6 @@
<p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
<hr class="bs-docs-separator">
<h2 id="emphasis">Emphasis</h2>
<p>Make use of HTML's default emphasis tags with lightweight styles.</p>
@ -240,9 +237,6 @@
</pre>
<hr class="bs-docs-separator">
<h2 id="abbreviations">Abbreviations</h2>
<p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
@ -261,9 +255,6 @@
<pre class="prettyprint">&lt;abbr title="HyperText Markup Language" class="initialism"&gt;HTML&lt;/abbr&gt;</pre>
<hr class="bs-docs-separator">
<h2 id="addresses">Addresses</h2>
<p>Present contact information for the nearest ancestor or the entire body of work.</p>
@ -296,9 +287,6 @@
</pre>
<hr class="bs-docs-separator">
<h2 id="blockquotes">Blockquotes</h2>
<p>For quoting blocks of content from another source within your document.</p>
@ -348,9 +336,6 @@
</pre>
<hr class="bs-docs-separator">
<!-- Lists -->
<h2 id="lists">Lists</h2>
@ -671,9 +656,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2>Optional classes</h2>
<p>Add any of the following classes to the <code>.table</code> base class.</p>
@ -840,9 +822,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2>Optional row classes</h2>
<p>Use contextual classes to color table rows.</p>
<table class="table table-bordered table-striped">
@ -933,9 +912,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2>Supported table markup</h2>
<p>List of supported table HTML elements and how they should be used.</p>
<table class="table table-bordered table-striped">
@ -1072,9 +1048,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2 id="forms-layouts">Optional layouts</h2>
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
@ -1163,9 +1136,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2 id="forms-controls">Supported form controls</h2>
<p>Examples of standard form controls supported in an example form layout.</p>
@ -1297,9 +1267,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2 id="forms-extending">Extending form controls</h2>
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
@ -1616,9 +1583,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2>Form control states</h2>
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
@ -2100,9 +2064,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
<hr class="bs-docs-separator">
<h2>How to use</h2>
<p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
<pre class="prettyprint linenums">
@ -2112,9 +2073,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
<hr class="bs-docs-separator">
<h2>Icon examples</h2>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
@ -2190,7 +2148,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<h4>Navigation</h4>
<div class="bs-docs-example">
<div class="well" style="padding: 8px 0; margin-bottom: 0;">
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> Home</a></li>
<li><a href="#"><i class="glyphicon-book"></i> Library</a></li>
@ -2198,7 +2155,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<li><a href="#"><i class="i"></i> Misc</a></li>
</ul>
</div>
</div>
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;&lt;i class="glyphicon-home icon-white"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
@ -2213,8 +2169,9 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<div class="control-group">
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="glyphicon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
@ -2223,8 +2180,8 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
&lt;div class="control-group"&gt;
&lt;label class="control-label" for="inputIcon"&gt;Email address&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;div class="input-prepend"&gt;
&lt;span class="add-on"&gt;&lt;i class="glyphicon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;div class="input-group"&gt;
&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;input class="span2" id="inputIcon" type="text"&gt;
&lt;/div&gt;
&lt;/div&gt;

View File

@ -114,9 +114,6 @@
<p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@font-size-base</code> and <code>@line-height-base</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>
<hr class="bs-docs-separator">
{{! Emphasis }}
<h2 id="emphasis">Emphasis</h2>
<p>Make use of HTML's default emphasis tags with lightweight styles.</p>
@ -177,9 +174,6 @@
</pre>
<hr class="bs-docs-separator">
{{! Abbreviations }}
<h2 id="abbreviations">Abbreviations</h2>
<p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>
@ -199,9 +193,6 @@
<pre class="prettyprint">&lt;abbr title="HyperText Markup Language" class="initialism"&gt;HTML&lt;/abbr&gt;</pre>
<hr class="bs-docs-separator">
{{! Addresses }}
<h2 id="addresses">Addresses</h2>
<p>Present contact information for the nearest ancestor or the entire body of work.</p>
@ -235,9 +226,6 @@
</pre>
<hr class="bs-docs-separator">
{{! Blockquotes }}
<h2 id="blockquotes">Blockquotes</h2>
<p>For quoting blocks of content from another source within your document.</p>
@ -288,9 +276,6 @@
</pre>
<hr class="bs-docs-separator">
<!-- Lists -->
<h2 id="lists">Lists</h2>
@ -611,9 +596,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2>Optional classes</h2>
<p>Add any of the following classes to the <code>.table</code> base class.</p>
@ -780,9 +762,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2>Optional row classes</h2>
<p>Use contextual classes to color table rows.</p>
<table class="table table-bordered table-striped">
@ -873,9 +852,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2>Supported table markup</h2>
<p>List of supported table HTML elements and how they should be used.</p>
<table class="table table-bordered table-striped">
@ -1012,9 +988,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2 id="forms-layouts">Optional layouts</h2>
<p>Included with Bootstrap are optional form layouts for common use cases.</p>
@ -1103,9 +1076,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2 id="forms-controls">Supported form controls</h2>
<p>Examples of standard form controls supported in an example form layout.</p>
@ -1237,9 +1207,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2 id="forms-extending">Extending form controls</h2>
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
@ -1556,9 +1523,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
</pre>
<hr class="bs-docs-separator">
<h2>Form control states</h2>
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
@ -2040,9 +2004,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p>
<hr class="bs-docs-separator">
<h2>How to use</h2>
<p>Add the appropriate class to any inline element. All icon classes are prefixed with <code>glyphicon-</code> for easy styling. To use, place the following code just about anywhere:</p>
<pre class="prettyprint linenums">
@ -2052,9 +2013,6 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
<hr class="bs-docs-separator">
<h2>Icon examples</h2>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
@ -2130,14 +2088,12 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<h4>Navigation</h4>
<div class="bs-docs-example">
<div class="well" style="padding: 8px 0; margin-bottom: 0;">
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="glyphicon-home icon-white"></i> Home</a></li>
<li><a href="#"><i class="glyphicon-book"></i> Library</a></li>
<li><a href="#"><i class="glyphicon-pencil"></i> Applications</a></li>
<li><a href="#"><i class="i"></i> Misc</a></li>
</ul>
</div>{{! /well }}
</div>{{! /bs-docs-example }}
<pre class="prettyprint linenums">
&lt;ul class="nav nav-list"&gt;
@ -2153,8 +2109,9 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
<div class="control-group">
<label class="control-label" for="inputIcon">Email address</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="glyphicon-envelope"></i></span><input class="span2" id="inputIcon" type="text">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
</div>
@ -2163,8 +2120,8 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
&lt;div class="control-group"&gt;
&lt;label class="control-label" for="inputIcon"&gt;Email address&lt;/label&gt;
&lt;div class="controls"&gt;
&lt;div class="input-prepend"&gt;
&lt;span class="add-on"&gt;&lt;i class="glyphicon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;div class="input-group"&gt;
&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon-envelope"&gt;&lt;/i&gt;&lt;/span&gt;
&lt;input class="span2" id="inputIcon" type="text"&gt;
&lt;/div&gt;
&lt;/div&gt;