Skip to content

Commit 121b62d

Browse files
mdomdo
committed
updates to docs to include more example html, include links to javascript docs where necessary
1 parent 35bc3ae commit 121b62d

File tree

2 files changed

+82
-14
lines changed

2 files changed

+82
-14
lines changed

‎docs/assets/css/docs.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,7 @@ section > .row {
213213
box-shadow: 0 1px 2px rgba(0,0,0,.075);
214214
}
215215
.mini-layout {
216-
height: 340px;
216+
height: 240px;
217217
margin-bottom: 20px;
218218
padding: 9px;
219219
}
@@ -225,8 +225,8 @@ section > .row {
225225
.mini-layout .mini-layout-body {
226226
background-color: #dceaf4;
227227
margin: 0 auto;
228-
width: 340px;
229-
height: 340px;
228+
width: 240px;
229+
height: 240px;
230230
}
231231
.mini-layout.fluid .mini-layout-sidebar,
232232
.mini-layout.fluid .mini-layout-header,
@@ -236,7 +236,7 @@ section > .row {
236236
.mini-layout.fluid .mini-layout-sidebar {
237237
background-color: #bbd8e9;
238238
width: 90px;
239-
height: 340px;
239+
height: 240px;
240240
}
241241
.mini-layout.fluid .mini-layout-body {
242242
width: 300px;

‎docs/index.html

Lines changed: 78 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,21 @@ <h4>Example of nested columns</h4>
309309
</div>
310310
</div>
311311
</div>
312+
<pre class="prettyprint linenums">
313+
&lt;div class="row"&gt;
314+
&lt;div class="span12"&gt;
315+
Level 1 of column
316+
&lt;div class="row"&gt;
317+
&lt;div class="span6"&gt;
318+
Level 2
319+
&lt;/div&gt;
320+
&lt;div class="span6"&gt;
321+
Level 2
322+
&lt;/div&gt;
323+
&lt;/div&gt;
324+
&lt;/div&gt;
325+
&lt;/div&gt;
326+
</pre>
312327
</div>
313328
</div>
314329

@@ -356,7 +371,7 @@ <h3>Inside the grid</h3>
356371
<h3>Now to customize</h3>
357372
<p>Modifying the grid means changing the three <code>@grid-*</code> variables and recompiling the Less files.</p>
358373
<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>
359-
<pre class="prettyprint">@gridColumns: 24;
374+
<pre class="prettyprint linenums">@gridColumns: 24;
360375
@gridColumnWidth: 20px;
361376
@gridGutterWidth: 20px;</pre>
362377
<p>Once recompiled, you'll be set!</p>
@@ -504,6 +519,12 @@ <h3>How to quote</h3>
504519
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
505520
<small>Dr. Julius Hibbert</small>
506521
</blockquote>
522+
<pre class="prettyprint linenums">
523+
&lt;blockquote&gt;
524+
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.&lt;/p&gt;
525+
&lt;small&gt;Dr. Julius Hibbert&lt;/small&gt;
526+
&lt;/blockquote&gt;
527+
</pre>
507528
</div>
508529
</div><!-- /row -->
509530

@@ -771,6 +792,22 @@ <h4>Small</h4>
771792
</a>
772793
</li>
773794
</ul>
795+
<h4>Coding them</h4>
796+
<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>
797+
<pre class="prettyprint linenums">
798+
&lt;ul class="media-grid"&gt;
799+
&lt;li&gt;
800+
&lt;a href="#"&gt;
801+
&lt;img class="thumbnail" src="http://placehold.it/330x230" alt=""&gt;
802+
&lt;/a&gt;
803+
&lt;/li&gt;
804+
&lt;li&gt;
805+
&lt;a href="#"&gt;
806+
&lt;img class="thumbnail" src="http://placehold.it/330x230" alt=""&gt;
807+
&lt;/a&gt;
808+
&lt;/li&gt;
809+
&lt;/ul&gt;
810+
</pre>
774811
</div>
775812
</div><!-- /row -->
776813
</section>
@@ -1386,6 +1423,14 @@ <h2>Breadcrumbs</h2>
13861423
<li><a href="#">Another one</a> <span class="divider">/</span></li>
13871424
<li class="active">You are here</li>
13881425
</ul>
1426+
<pre class="prettyprint linenums">
1427+
&lt;ul class="breadcrumb"&gt;
1428+
&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
1429+
&lt;li&gt;&lt;a href="#"&gt;Middle page&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
1430+
&lt;li&gt;&lt;a href="#"&gt;Another one&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
1431+
&lt;li class="active"&gt;You are here&lt;/li&gt;
1432+
&lt;/ul&gt;
1433+
</pre>
13891434
</div>
13901435
</div>
13911436

@@ -1404,7 +1449,7 @@ <h2>Pagination</h2>
14041449
<li><a href="#">3</a></li>
14051450
<li><a href="#">4</a></li>
14061451
<li><a href="#">5</a></li>
1407-
<li class="next"><a href="#">Next &rarr;</a></li>
1452+
<li class="next"><a href="#">Next &raquo;</a></li>
14081453
</ul>
14091454
</div>
14101455
<div class="pagination">
@@ -1417,7 +1462,7 @@ <h2>Pagination</h2>
14171462
<li><a href="#">19</a></li>
14181463
<li><a href="#">20</a></li>
14191464
<li><a href="#">21</a></li>
1420-
<li class="next"><a href="#">Next &rarr;</a></li>
1465+
<li class="next"><a href="#">Next &raquo;</a></li>
14211466
</ul>
14221467
</div>
14231468
<div class="pagination">
@@ -1434,7 +1479,7 @@ <h2>Pagination</h2>
14341479
<li><a href="#">18</a></li>
14351480
<li><a href="#">19</a></li>
14361481
<li><a href="#">20</a></li>
1437-
<li class="next"><a href="#">Next &rarr;</a></li>
1482+
<li class="next"><a href="#">Next &raquo;</a></li>
14381483
</ul>
14391484
</div>
14401485
<pre class="prettyprint linenums">
@@ -1467,8 +1512,9 @@ <h1>Alerts &amp; Errors <small>Styles for success, warning, and error messages o
14671512
<div class="row">
14681513
<div class="span4">
14691514
<h2>Basic alerts</h2>
1470-
<p><code>div.alert-message</code></p>
1515+
<p><code>.alert-message</code></p>
14711516
<p>One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.</p>
1517+
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript &raquo;</a></p>
14721518
</div>
14731519
<div class="span12">
14741520
<div class="alert-message warning">
@@ -1487,14 +1533,23 @@ <h2>Basic alerts</h2>
14871533
<a class="close" href="#">&times;</a>
14881534
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
14891535
</div>
1536+
1537+
<h4>Example code</h4>
1538+
<pre class="prettyprint linenums">
1539+
&lt;div class="alert-message warning"&gt;
1540+
&lt;a class="close" href="#"&gt;&times;&lt;/a&gt;
1541+
&lt;p&gt;&lt;strong&gt;Holy guacamole!&lt;/strong&gt; Best check yo self, you’re not looking too good.&lt;/p&gt;
1542+
&lt;/div&gt;
1543+
</pre>
14901544
</div>
14911545
</div><!-- /row -->
14921546
<!-- Block messages -->
14931547
<div class="row">
14941548
<div class="span4">
14951549
<h2>Block messages</h2>
1496-
<p><code>div.alert-message.block-message</code></p>
1550+
<p><code>.alert-message.block-message</code></p>
14971551
<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>
1552+
<p><a class="btn js-btn" href="./javascript.html#alerts">Get the javascript &raquo;</a></p>
14981553
</div>
14991554
<div class="span12">
15001555
<div class="alert-message block-message warning">
@@ -1530,6 +1585,17 @@ <h2>Block messages</h2>
15301585
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
15311586
</div>
15321587
</div>
1588+
1589+
<h4>Example code</h4>
1590+
<pre class="prettyprint linenums">
1591+
&lt;div class="alert-message block-message warning"&gt;
1592+
&lt;a class="close" href="#"&gt;&times;&lt;/a&gt;
1593+
&lt;p&gt;&lt;strong&gt;Holy guacamole! This is a warning!&lt;/strong&gt; 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.&lt;/p&gt;
1594+
&lt;div class="alert-actions"&gt;
1595+
&lt;a class="btn small" href="#"&gt;Take this action&lt;/a&gt; &lt;a class="btn small" href="#"&gt;Or do this&lt;/a>
1596+
&lt;/div&gt;
1597+
&lt;/div&gt;
1598+
</pre>
15331599
</div>
15341600
</div><!-- /row -->
15351601
</section>
@@ -1545,6 +1611,7 @@ <h1>Popovers <small>Components for displaying content in modals, tooltips, and p
15451611
<div class="span4">
15461612
<h2>Modals</h2>
15471613
<p>Modals&mdash;dialogs or lightboxes&mdash;are great for contextual actions in situations where it’s important that the background context be maintained.</p>
1614+
<p><a class="btn js-btn" href="./javascript.html#modal">Get the javascript &raquo;</a></p>
15481615
</div>
15491616
<div class="span12">
15501617
<div class="well" style="background-color: #888; border: none; padding: 40px;">
@@ -1571,6 +1638,7 @@ <h3>Modal Heading</h3>
15711638
<div class="span4">
15721639
<h2>Tooltips</h2>
15731640
<p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
1641+
<p><a class="btn js-btn" href="./javascript.html#twipsy">Get the javascript &raquo;</a></p>
15741642
</div>
15751643
<div class="span12">
15761644
<div class="twipsies well">
@@ -1588,6 +1656,7 @@ <h2>Tooltips</h2>
15881656
<div class="span4">
15891657
<h2>Popovers</h2>
15901658
<p>Use popovers to provide subtextual information to a page without affecting layout.</p>
1659+
<p><a class="btn js-btn" href="./javascript.html#popover">Get the javascript &raquo;</a></p>
15911660
</div>
15921661
<div class="span12">
15931662
<div class="well popover-well">
@@ -1614,14 +1683,13 @@ <h3 class="title">Popover Title</h3>
16141683

16151684
<section id="javascript">
16161685
<div class="page-header">
1617-
<h1>Using Javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
1686+
<h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
16181687
</div>
16191688
<div class="row">
16201689
<div class="span4">
16211690
<h2>Getting started</h2>
16221691
<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>
1623-
<hr>
1624-
<p><a class="btn primary" href="./javascript.html">Skip to Bootstrap plugins &raquo;</a></p>
1692+
<p><a class="btn primary" href="./javascript.html">View javascript docs &raquo;</a></p>
16251693
</div>
16261694
<div class="span12">
16271695
<h3>What's included</h3>
@@ -1805,7 +1873,7 @@ <h3>Ways to compile</h3>
18051873
<td>Javascript</td>
18061874
<td>
18071875
<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>
1808-
<pre class="prettyprint">
1876+
<pre class="prettyprint linenums">
18091877
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
18101878
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
18111879
</pre>

0 commit comments

Comments
 (0)