Skip to content
GitLab
Commit 269ce715 authored by Mark Otto's avatar Mark Otto
Browse files

overhaul js docs top sections, update subhead

parent 97c7a83a
Hide whitespace changes
Inline Side-by-side
Showing
with 61 additions and 127 deletions
+61 -127
docs/assets/css/docs.css
+ 2
- 1
View file @ 269ce715
...@@ -258,9 +258,10 @@ hr.soften { ...@@ -258,9 +258,10 @@ hr.soften {
font-size: 60px; font-size: 60px;
} }
.subhead .lead { .subhead .lead {
max-width: 780px;
margin-bottom: 30px; margin-bottom: 30px;
line-height: 25px; line-height: 25px;
font-size: 30px;
line-height: 40px;
} }
/* Subnav */ /* Subnav */
......
docs/javascript.html
+ 29
- 63
View file @ 269ce715
...@@ -177,69 +177,35 @@ ...@@ -177,69 +177,35 @@
<!-- Using Javascript w/ Bootstrap
================================================== --> <!-- Overview
<section id="javascript"> ================================================== -->
<div class="page-header"> <section id="overview">
<h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1> <div class="page-header">
</div> <h1>Javascript in Bootstrap</h1>
<div class="row"> </div>
<div class="span4"> <h3>Individual or compiled</h3>
<h3><a href="./javascript.html#modals">Modals</a></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>
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> <h3>Data attributea</h3>
</div> <p>...</p>
<div class="span4"> <h3>Programmatic API</h3>
<h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3> <p>...</p>
<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> </section>
<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> <!-- Transitions
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p> ================================================== -->
</div> <section id="modals">
</div> <!-- /row --> <div class="page-header">
<div class="row"> <h1>Transitions <small>bootstrap-transition.js</small></h1>
<div class="span4"> </div>
<h3><a href="./javascript.html#tooltips">Tooltips</a></h3> <h3>About transitions</h3>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.</p> <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
</div> <p class="muted"><strong>*</strong> Required for animation in plugins</p>
<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>
</section> </section>
......
docs/templates/pages/javascript.mustache
+ 30
- 63
View file @ 269ce715
...@@ -22,69 +22,36 @@ ...@@ -22,69 +22,36 @@
<!-- Using Javascript w/ Bootstrap
================================================== --> <!-- Overview
<section id="javascript"> ================================================== -->
<div class="page-header"> <section id="overview">
<h1>{{_i}}jQuery plugins{{/i}} <small>{{_i}}A dozen Bootstrap plugins to get you started{{/i}}</small></h1> <div class="page-header">
</div> <h1>{{_i}}Javascript in Bootstrap{{/i}}</h1>
<div class="row"> </div>
<div class="span4"> <h3>{{_i}}Individual or compiled{{/i}}</h3>
<h3><a href="./javascript.html#modals">{{_i}}Modals{{/i}}</a></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>
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p> <h3>{{_i}}Data attributea{{/i}}</h3>
</div> <p>{{_i}}...{{/i}}</p>
<div class="span4"> <h3>{{_i}}Programmatic API{{/i}}</h3>
<h3><a href="./javascript.html#dropdowns">{{_i}}Dropdowns{{/i}}</a></h3> <p>{{_i}}...{{/i}}</p>
<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"> {{! Thought: consider porting much of the JS readme here? }}
<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> </section>
</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> <!-- Transitions
</div> ================================================== -->
</div> <!-- /row --> <section id="modals">
<div class="row"> <div class="page-header">
<div class="span4"> <h1>{{_i}}Transitions{{/i}} <small>bootstrap-transition.js</small></h1>
<h3><a href="./javascript.html#tooltips">{{_i}}Tooltips{{/i}}</a></h3> </div>
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images&mdash;they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p> <h3>{{_i}}About transitions{{/i}}</h3>
</div> <p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
<div class="span4"> <p class="muted"><strong>*</strong> {{_i}}Required for animation in plugins{{/i}}</p>
<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>
</section> </section>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment