From 269ce715f1a722a10d0a4a9229bcca8da3aa682a Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Thu, 7 Jun 2012 22:24:47 -0700
Subject: [PATCH] overhaul js docs top sections, update subhead
---
docs/assets/css/docs.css | 3 +-
docs/javascript.html | 92 ++++++++---------------
docs/templates/pages/javascript.mustache | 93 ++++++++----------------
3 files changed, 61 insertions(+), 127 deletions(-)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 640dc5cfb7..b5e4cc33cb 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -258,9 +258,10 @@ hr.soften {
font-size: 60px;
}
.subhead .lead {
- max-width: 780px;
margin-bottom: 30px;
line-height: 25px;
+ font-size: 30px;
+ line-height: 40px;
}
/* Subnav */
diff --git a/docs/javascript.html b/docs/javascript.html
index 2aa5fce2c1..a6dcd301e4 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -177,69 +177,35 @@
- <!-- Using Javascript w/ Bootstrap
- ================================================== -->
- <section id="javascript">
- <div class="page-header">
- <h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1>
- </div>
- <div class="row">
- <div class="span4">
- <h3><a href="./javascript.html#modals">Modals</a></h3>
- <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3>
- <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3>
- <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#tabs">Togglable tabs</a></h3>
- <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
- </div>
- </div> <!-- /row -->
- <div class="row">
- <div class="span4">
- <h3><a href="./javascript.html#tooltips">Tooltips</a></h3>
- <p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3>
- <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
- <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#alerts">Alert messages</a></h3>
- <p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#buttons">Buttons</a></h3>
- <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
- </div>
- </div> <!-- /row -->
- <div class="row" style="margin-bottom: 9px;">
- <div class="span4">
- <h3><a href="./javascript.html#collapse">Collapse</a></h3>
- <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#carousel">Carousel</a></h3>
- <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
- <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
- </div>
- <div class="span4">
- <h3>Transitions <small class="muted">*</small></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>
- </div>
- </div> <!-- /row -->
- <div class="alert alert-info"><strong>Heads up!</strong> 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.</div>
+
+<!-- Overview
+================================================== -->
+<section id="overview">
+ <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>
+ <p>...</p>
+ <h3>Programmatic API</h3>
+ <p>...</p>
+
+
+
+</section>
+
+
+
+<!-- Transitions
+================================================== -->
+<section id="modals">
+ <div class="page-header">
+ <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>
</section>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index e9e81ddb5c..d90184c7b8 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -22,69 +22,36 @@
- <!-- Using Javascript w/ Bootstrap
- ================================================== -->
- <section id="javascript">
- <div class="page-header">
- <h1>{{_i}}jQuery plugins{{/i}} <small>{{_i}}A dozen Bootstrap plugins to get you started{{/i}}</small></h1>
- </div>
- <div class="row">
- <div class="span4">
- <h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a></h3>
- <p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a></h3>
- <p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></h3>
- <p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#tabs">{{_i}}Togglable tabs{{/i}}</a></h3>
- <p>{{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}</p>
- </div>
- </div> <!-- /row -->
- <div class="row">
- <div class="span4">
- <h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3>
- <p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#popovers">{{_i}}Popovers{{/i}}</a> <small class="muted">*</small></h3>
- <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}</p>
- <p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltips</a> to be included{{/i}}</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#alerts">{{_i}}Alert messages{{/i}}</a></h3>
- <p>{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#buttons">{{_i}}Buttons{{/i}}</a></h3>
- <p>{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}</p>
- </div>
- </div> <!-- /row -->
- <div class="row" style="margin-bottom: 9px;">
- <div class="span4">
- <h3><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></h3>
- <p>{{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></h3>
- <p>{{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}</p>
- </div>
- <div class="span4">
- <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
- <p>{{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}</p>
- </div>
- <div class="span4">
- <h3>{{_i}}Transitions{{/i}} <small class="muted">*</small></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>
- </div>
- </div> <!-- /row -->
- <div class="alert alert-info"><strong>{{_i}}Heads up!{{/i}}</strong> {{_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}}</div>
+
+<!-- Overview
+================================================== -->
+<section id="overview">
+ <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>
+ <p>{{_i}}...{{/i}}</p>
+ <h3>{{_i}}Programmatic API{{/i}}</h3>
+ <p>{{_i}}...{{/i}}</p>
+
+
+ {{! Thought: consider porting much of the JS readme here? }}
+
+</section>
+
+
+
+<!-- Transitions
+================================================== -->
+<section id="modals">
+ <div class="page-header">
+ <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>
</section>
--
GitLab