From 121b62d54e6adb5836a1e09834056cf193407bbe Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Tue, 13 Sep 2011 10:08:24 -0700
Subject: [PATCH] updates to docs to include more example html, include links
to javascript docs where necessary
---
docs/assets/css/docs.css | 8 ++--
docs/index.html | 88 +++++++++++++++++++++++++++++++++++-----
2 files changed, 82 insertions(+), 14 deletions(-)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index d30b932cd4..37e18c8e44 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -213,7 +213,7 @@ section > .row {
box-shadow: 0 1px 2px rgba(0,0,0,.075);
}
.mini-layout {
- height: 340px;
+ height: 240px;
margin-bottom: 20px;
padding: 9px;
}
@@ -225,8 +225,8 @@ section > .row {
.mini-layout .mini-layout-body {
background-color: #dceaf4;
margin: 0 auto;
- width: 340px;
- height: 340px;
+ width: 240px;
+ height: 240px;
}
.mini-layout.fluid .mini-layout-sidebar,
.mini-layout.fluid .mini-layout-header,
@@ -236,7 +236,7 @@ section > .row {
.mini-layout.fluid .mini-layout-sidebar {
background-color: #bbd8e9;
width: 90px;
- height: 340px;
+ height: 240px;
}
.mini-layout.fluid .mini-layout-body {
width: 300px;
diff --git a/docs/index.html b/docs/index.html
index f97c3cb98d..41bf39b70e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -309,6 +309,21 @@
</div>
</div>
</div>
+<pre class="prettyprint linenums">
+<div class="row">
+ <div class="span12">
+ Level 1 of column
+ <div class="row">
+ <div class="span6">
+ Level 2
+ </div>
+ <div class="span6">
+ Level 2
+ </div>
+ </div>
+ </div>
+</div>
+</pre>
</div>
</div>
@@ -356,7 +371,7 @@
<h3>Now to customize</h3>
<p>Modifying the grid means changing the three <code>@grid-*</code> variables and recompiling the Less files.</p>
<p>Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.</p>
- <pre class="prettyprint">@gridColumns: 24;
+ <pre class="prettyprint linenums">@gridColumns: 24;
@gridColumnWidth: 20px;
@gridGutterWidth: 20px;</pre>
<p>Once recompiled, you'll be set!</p>
@@ -504,6 +519,12 @@
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<small>Dr. Julius Hibbert</small>
</blockquote>
+<pre class="prettyprint linenums">
+<blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+ <small>Dr. Julius Hibbert</small>
+</blockquote>
+</pre>
</div>
</div><!-- /row -->
@@ -771,6 +792,22 @@
</a>
</li>
</ul>
+ <h4>Coding them</h4>
+ <p>Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.</p>
+<pre class="prettyprint linenums">
+<ul class="media-grid">
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ <img class="thumbnail" src="http://placehold.it/330x230" alt="">
+ </a>
+ </li>
+</ul>
+</pre>
</div>
</div><!-- /row -->
</section>
@@ -1386,6 +1423,14 @@
<li><a href="#">Another one</a> <span class="divider">/</span></li>
<li class="active">You are here</li>
</ul>
+<pre class="prettyprint linenums">
+<ul class="breadcrumb">
+ <li><a href="#">Home</a> <span class="divider">/</span></li>
+ <li><a href="#">Middle page</a> <span class="divider">/</span></li>
+ <li><a href="#">Another one</a> <span class="divider">/</span></li>
+ <li class="active">You are here</li>
+</ul>
+</pre>
</div>
</div>
@@ -1404,7 +1449,7 @@
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
- <li class="next"><a href="#">Next →</a></li>
+ <li class="next"><a href="#">Next »</a></li>
</ul>
</div>
<div class="pagination">
@@ -1417,7 +1462,7 @@
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li><a href="#">21</a></li>
- <li class="next"><a href="#">Next →</a></li>
+ <li class="next"><a href="#">Next »</a></li>
</ul>
</div>
<div class="pagination">
@@ -1434,7 +1479,7 @@
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
- <li class="next"><a href="#">Next →</a></li>
+ <li class="next"><a href="#">Next »</a></li>
</ul>
</div>
<pre class="prettyprint linenums">
@@ -1467,8 +1512,9 @@
<div class="row">
<div class="span4">
<h2>Basic alerts</h2>
- <p><code>div.alert-message</code></p>
+ <p><code>.alert-message</code></p>
<p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
+ <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
</div>
<div class="span12">
<div class="alert-message warning">
@@ -1487,14 +1533,23 @@
<a class="close" href="#">×</a>
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
</div>
+
+ <h4>Example code</h4>
+<pre class="prettyprint linenums">
+<div class="alert-message warning">
+ <a class="close" href="#">×</a>
+ <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
+</div>
+</pre>
</div>
</div><!-- /row -->
<!-- Block messages -->
<div class="row">
<div class="span4">
<h2>Block messages</h2>
- <p><code>div.alert-message.block-message</code></p>
+ <p><code>.alert-message.block-message</code></p>
<p>For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.</p>
+ <p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript »</a></p>
</div>
<div class="span12">
<div class="alert-message block-message warning">
@@ -1530,6 +1585,17 @@
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
+
+ <h4>Example code</h4>
+<pre class="prettyprint linenums">
+<div class="alert-message block-message warning">
+ <a class="close" href="#">×</a>
+ <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
+ <div class="alert-actions">
+ <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
+ </div>
+</div>
+</pre>
</div>
</div><!-- /row -->
</section>
@@ -1545,6 +1611,7 @@
<div class="span4">
<h2>Modals</h2>
<p>Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.</p>
+ <p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript »</a></p>
</div>
<div class="span12">
<div class="well" style="background-color: #888; border: none; padding: 40px;">
@@ -1571,6 +1638,7 @@
<div class="span4">
<h2>Tooltips</h2>
<p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
+ <p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript »</a></p>
</div>
<div class="span12">
<div class="twipsies well">
@@ -1588,6 +1656,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<div class="span4">
<h2>Popovers</h2>
<p>Use popovers to provide subtextual information to a page without affecting layout.</p>
+ <p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript »</a></p>
</div>
<div class="span12">
<div class="well popover-well">
@@ -1614,14 +1683,13 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<section id="javascript">
<div class="page-header">
- <h1>Using Javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
+ <h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
</div>
<div class="row">
<div class="span4">
<h2>Getting started</h2>
<p>Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
- <hr>
- <p><a class="btn primary" href="./javascript.html">Skip to Bootstrap plugins »</a></p>
+ <p><a class="btn primary" href="./javascript.html">View javascript docs »</a></p>
</div>
<div class="span12">
<h3>What's included</h3>
@@ -1805,7 +1873,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<td>Javascript</td>
<td>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>head</code>.</p>
-<pre class="prettyprint">
+<pre class="prettyprint linenums">
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>
</pre>
--
GitLab