rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

overhaul js docs top sections, update subhead

Browse Source
This commit is contained in:
Mark Otto 2012-06-07 22:24:47 -07:00
parent 97c7a83a8f
commit 269ce715f1
3 changed files with 61 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/assets/css/docs.css
View File

@ -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 */

92
docs/javascript.html
View File

@ -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&mdash;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>

93
docs/templates/pages/javascript.mustache vendored
View File

@ -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&mdash;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>