From 5dd47f11967f25aa8f5fe4ad25db807c5b33ccca Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Mon, 11 Jun 2012 20:33:00 -0700
Subject: [PATCH] keep tables at 13px in docs for now, clean up some modals js
docs stuff
---
docs/assets/css/docs.css | 80 ++----------------------
docs/javascript.html | 49 +++++++++++----
docs/templates/pages/javascript.mustache | 50 +++++++++++----
3 files changed, 82 insertions(+), 97 deletions(-)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a39dc3c6e0..c91afd73a8 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -69,81 +69,6 @@ body > .navbar-fixed-top .brand:hover {
}
-
-/* Left nav
--------------------------------------------------- */
-
-.bs-docs-nav {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- bottom: 0;
- overflow-y: scroll;
- width: 150px;
- padding: 25px;
- background-color: #dde2e9;
- text-shadow: 0 1px 0 rgba(255,255,255,.55);
- -webkit-box-shadow: inset -10px 0 15px rgba(0,0,0,.15);
- -moz-box-shadow: inset -10px 0 15px rgba(0,0,0,.15);
- box-shadow: inset -10px 0 15px rgba(0,0,0,.15);
- background-color: #444;
- text-shadow: 0 1px 0 rgba(0,0,0,.5);
-}
-.bs-docs-nav ul {
- margin-left: 0;
- margin-bottom: 15px;
-}
-.bs-docs-nav ul li {
- list-style: none;
- line-height: 1;
-}
-.bs-docs-nav a:hover {
- text-decoration: none;
-}
-.bs-docs-nav ul li a {
- display: block;
- width: 145px;
- padding: 0 30px;
- margin: 0 -30px;
- font-size: 12px;
- line-height: 22px;
- color: #444;
- color: #999;
-}
-.bs-docs-nav ul li a:hover {
- color: #333;
- color: #fff;
- background-color: rgba(0,0,0,.05);
-}
-.bs-docs-nav > ul > li > a {
- font-size: 14px;
- font-weight: bold;
- line-height: 24px;
- color: #333;
- color: #fff;
-}
-
-/* Logo wordmark */
-.bs-docs-logo {
- font-size: 24px;
- font-weight: bold;
- line-height: 1;
- margin-top: 0;
- margin-bottom: 20px;
-}
-.bs-docs-logo a {
- color: #a4b4cb;
- color: #333;
- text-shadow: 0 1px 0 #555;
-}
-.bs-docs-logo a:hover {
- color: #8e9db3;
- color: #222;
-}
-
-
-
/* Space out sub-sections more
-------------------------------------------------- */
@@ -151,6 +76,11 @@ section {
padding-top: 60px;
}
+section > .table {
+ font-size: 13px;
+}
+
+
/* Table of contents */
.bs-docs-contents li {
line-height: 25px;
diff --git a/docs/javascript.html b/docs/javascript.html
index 90079292b4..b83612d52e 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -106,10 +106,13 @@
<div class="page-header">
<h1>Javascript in Bootstrap</h1>
</div>
+
<h3>Individual or compiled</h3>
<p>If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.</p>
- <h3>Data attributea</h3>
+
+ <h3>Data attributes</h3>
<p>...</p>
+
<h3>Programmatic API</h3>
<p>...</p>
@@ -126,8 +129,16 @@
<h1>Transitions <small>bootstrap-transition.js</small></h1>
</div>
<h3>About transitions</h3>
- <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
- <p class="muted"><strong>*</strong> Required for animation in plugins</p>
+ <p>For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.</p>
+ <h3>Use cases</h3>
+ <p>A few examples of the transition plugin:</p>
+ <ul>
+ <li>Sliding or fading in modals</li>
+ <li>Fading out tabs</li>
+ <li>Fading out alerts</li>
+ <li>Sliding carousel panes</li>
+ </ul>
+
</section>
@@ -139,11 +150,11 @@
<h1>Modals <small>bootstrap-modal.js</small></h1>
</div>
- <h3>About modals</h3>
+
+ <h2>About modals</h2>
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
- <h2>Static example</h2>
- <p>Below is a statically rendered modal.</p>
+ <h3>Static example</h3>
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header">
@@ -159,10 +170,24 @@
</div>
</div>
</div>
+<pre class="prettyprint linenums">
+<div class="modal hide fade">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">&times;</button>
+ <h3>Modal header</h3>
+ </div>
+ <div class="modal-body">
+ <p>One fine body…</p>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn">Close</a>
+ <a href="#" class="btn btn-primary">Save changes</a>
+ </div>
+</div>
+</pre>
- <h2>Live demo</h2>
+ <h3>Live demo</h3>
<p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
-
<!-- sample modal content -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-header">
@@ -195,16 +220,18 @@
<a href="#" role="button" class="btn btn-primary">Save changes</a>
</div>
</div>
-
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
</div>
- <hr>
- <h2>Using bootstrap-modal</h2>
+ <hr class="bs-docs-separator">
+
+
+ <h2>Usage</h2>
<p>Call the modal via javascript:</p>
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
+
<h3>Options</h3>
<table class="table table-bordered table-striped">
<thead>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index d90184c7b8..38e38a9e43 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -29,10 +29,13 @@
<div class="page-header">
<h1>{{_i}}Javascript in Bootstrap{{/i}}</h1>
</div>
+
<h3>{{_i}}Individual or compiled{{/i}}</h3>
<p>{{_i}}If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.{{/i}}</p>
- <h3>{{_i}}Data attributea{{/i}}</h3>
+
+ <h3>{{_i}}Data attributes{{/i}}</h3>
<p>{{_i}}...{{/i}}</p>
+
<h3>{{_i}}Programmatic API{{/i}}</h3>
<p>{{_i}}...{{/i}}</p>
@@ -50,8 +53,17 @@
<h1>{{_i}}Transitions{{/i}} <small>bootstrap-transition.js</small></h1>
</div>
<h3>{{_i}}About transitions{{/i}}</h3>
- <p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
- <p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
+ <p>{{_i}}For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.{{/i}}</p>
+ <h3>{{_i}}Use cases{{/i}}</h3>
+ <p>{{_i}}A few examples of the transition plugin:{{/i}}</p>
+ <ul>
+ <li>{{_i}}Sliding or fading in modals{{/i}}</li>
+ <li>{{_i}}Fading out tabs{{/i}}</li>
+ <li>{{_i}}Fading out alerts{{/i}}</li>
+ <li>{{_i}}Sliding carousel panes{{/i}}</li>
+ </ul>
+
+ {{! Ideas: include docs for .fade.in, .slide.in, etc }}
</section>
@@ -63,11 +75,11 @@
<h1>{{_i}}Modals{{/i}} <small>bootstrap-modal.js</small></h1>
</div>
- <h3>{{_i}}About modals{{/i}}</h3>
+
+ <h2>{{_i}}About modals{{/i}}</h2>
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
- <h2>{{_i}}Static example{{/i}}</h2>
- <p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
+ <h3>{{_i}}Static example{{/i}}</h3>
<div class="bs-docs-example" style="background-color: #f5f5f5;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header">
@@ -83,10 +95,24 @@
</div>
</div>
</div>{{! /example }}
+<pre class="prettyprint linenums">
+<div class="modal hide fade">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal">&times;</button>
+ <h3>{{_i}}Modal header{{/i}}</h3>
+ </div>
+ <div class="modal-body">
+ <p>{{_i}}One fine body…{{/i}}</p>
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn">{{_i}}Close{{/i}}</a>
+ <a href="#" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
+ </div>
+</div>
+</pre>
- <h2>{{_i}}Live demo{{/i}}</h2>
+ <h3>{{_i}}Live demo{{/i}}</h3>
<p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
-
<!-- sample modal content -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-header">
@@ -119,16 +145,18 @@
<a href="#" role="button" class="btn btn-primary">{{_i}}Save changes{{/i}}</a>
</div>
</div>
-
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">{{_i}}Launch demo modal{{/i}}</a>
</div>{{! /example }}
- <hr>
- <h2>{{_i}}Using bootstrap-modal{{/i}}</h2>
+ <hr class="bs-docs-separator">
+
+
+ <h2>{{_i}}Usage{{/i}}</h2>
<p>{{_i}}Call the modal via javascript:{{/i}}</p>
<pre class="prettyprint linenums">$('#myModal').modal(options)</pre>
+
<h3>{{_i}}Options{{/i}}</h3>
<table class="table table-bordered table-striped">
<thead>
--
GitLab