From 267d3e7ed7f50cc5625145ad714a5e1099612e87 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Thu, 17 Jan 2013 00:50:19 -0800
Subject: [PATCH] streamline css docs
---
docs/assets/css/docs.css | 11 +++---
docs/css.html | 65 ++++++-------------------------
docs/templates/pages/css.mustache | 65 ++++++-------------------------
3 files changed, 27 insertions(+), 114 deletions(-)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 27744e96d8..244728817d 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -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 */
diff --git a/docs/css.html b/docs/css.html
index fe0ab54667..e4499e571d 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -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><abbr></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"><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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,14 +2148,12 @@ For example, <code>&lt;section&gt;</code> 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>
+ <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>
<pre class="prettyprint linenums">
<ul class="nav nav-list">
@@ -2213,8 +2169,9 @@ For example, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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>
+ <div class="input-group">
+ <span class="input-group-addon"><i class="glyphicon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index b2fe366743..2190d781d3 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -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><abbr></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"><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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 }}
+ <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>{{! /bs-docs-example }}
<pre class="prettyprint linenums">
<ul class="nav nav-list">
@@ -2153,8 +2109,9 @@ For example, <code>&lt;section&gt;</code> 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, <code>&lt;section&gt;</code> 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>
+ <div class="input-group">
+ <span class="input-group-addon"><i class="glyphicon-envelope"></i></span>
<input class="span2" id="inputIcon" type="text">
</div>
</div>
--
GitLab