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

more changes to js and components, playing with new docs subnav

parent 47e2c434
8 merge requests!4427Use variable for desktop media query,!4258Aria,!4248Amended mentions of 'javascript' to the correct 'JavaScript',!4235Patch 1,!4232Fixing the modal z-index issue + make modal stacking possible,!42132.1.0 wip,!4165Patch 2,!39192.1.0 wip
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1079 additions and 1187 deletions
+1079 -1187
docs/assets/css/docs.css
+ 9
- 1
View file @ de53f62a
......@@ -11,12 +11,18 @@
body {
position: relative;
padding-top: 90px;
font-size: 14px;
background-color: #fff;
background-image: url(../img/grid-18px-masked.png);
background-repeat: repeat-x;
background-position: 0 40px;
}
body,
li {
line-height: 20px;
}
.bs-docs-container {
max-width: 780px;
margin: 0 auto;
......@@ -24,6 +30,9 @@ body {
/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
.navbar {
font-size: 13px;
}
.navbar-fixed-top .brand {
padding-right: 0;
padding-left: 0;
......@@ -603,7 +612,6 @@ form.well {
.bs-docs-example > p {
font-size: 13px;
line-height: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.bs-docs-example p:last-child {
margin-bottom: 0;
......
docs/components.html
+ 433
- 504
View file @ de53f62a
This diff is collapsed.
docs/javascript.html
+ 88
- 88
View file @ de53f62a
......@@ -76,94 +76,94 @@
<div class="bs-docs-container">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Javascript for Bootstrap</h1>
<p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#javascript">All plugins</a></li>
<li><a href="#modals">Modal</a></li>
<li><a href="#dropdowns">Dropdown</a></li>
<li><a href="#scrollspy">Scrollspy</a></li>
<li><a href="#tabs">Tab</a></li>
<li><a href="#tooltips">Tooltip</a></li>
<li><a href="#popovers">Popover</a></li>
<li><a href="#alerts">Alert</a></li>
<li><a href="#buttons">Button</a></li>
<li><a href="#collapse">Collapse</a></li>
<li><a href="#carousel">Carousel</a></li>
<li><a href="#typeahead">Typeahead</a></li>
</ul>
</div>
</header>
<!-- 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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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>
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Javascript for Bootstrap</h1>
<p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#javascript">All plugins</a></li>
<li><a href="#modals">Modal</a></li>
<li><a href="#dropdowns">Dropdown</a></li>
<li><a href="#scrollspy">Scrollspy</a></li>
<li><a href="#tabs">Tab</a></li>
<li><a href="#tooltips">Tooltip</a></li>
<li><a href="#popovers">Popover</a></li>
<li><a href="#alerts">Alert</a></li>
<li><a href="#buttons">Button</a></li>
<li><a href="#collapse">Collapse</a></li>
<li><a href="#carousel">Carousel</a></li>
<li><a href="#typeahead">Typeahead</a></li>
</ul>
</div>
</header>
<!-- 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>
</section>
......
docs/scaffolding.html
+ 15
- 2
View file @ de53f62a
......@@ -81,7 +81,20 @@
<header class="jumbotron subhead" id="overview">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
<div class="subnav">
<div class="bs-docs-contents">
<h4>Contents</h4>
<ul>
<li><a href="#global">Global styles</a></li>
<li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid grid system</a></li>
<li><a href="#gridCustomization">Customizing</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#responsive">Responsive design</a></li>
</ul>
</div>
<!-- <div class="subnav">
<ul class="nav nav-pills">
<li><a href="#global">Global styles</a></li>
<li><a href="#gridSystem">Grid system</a></li>
......@@ -91,7 +104,7 @@
<li><a href="#responsive">Responsive design</a></li>
</ul>
</div>
</header>
--></header>
......
docs/templates/pages/components.mustache
+ 433
- 504
View file @ de53f62a
This diff is collapsed.
docs/templates/pages/javascript.mustache
+ 86
- 86
View file @ de53f62a
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#javascript">{{_i}}All plugins{{/i}}</a></li>
<li><a href="#modals">{{_i}}Modal{{/i}}</a></li>
<li><a href="#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
<li><a href="#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
<li><a href="#tabs">{{_i}}Tab{{/i}}</a></li>
<li><a href="#tooltips">{{_i}}Tooltip{{/i}}</a></li>
<li><a href="#popovers">{{_i}}Popover{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alert{{/i}}</a></li>
<li><a href="#buttons">{{_i}}Button{{/i}}</a></li>
<li><a href="#collapse">{{_i}}Collapse{{/i}}</a></li>
<li><a href="#carousel">{{_i}}Carousel{{/i}}</a></li>
<li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
</ul>
</div>
</header>
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#javascript">{{_i}}All plugins{{/i}}</a></li>
<li><a href="#modals">{{_i}}Modal{{/i}}</a></li>
<li><a href="#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
<li><a href="#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
<li><a href="#tabs">{{_i}}Tab{{/i}}</a></li>
<li><a href="#tooltips">{{_i}}Tooltip{{/i}}</a></li>
<li><a href="#popovers">{{_i}}Popover{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alert{{/i}}</a></li>
<li><a href="#buttons">{{_i}}Button{{/i}}</a></li>
<li><a href="#collapse">{{_i}}Collapse{{/i}}</a></li>
<li><a href="#carousel">{{_i}}Carousel{{/i}}</a></li>
<li><a href="#typeahead">{{_i}}Typeahead{{/i}}</a></li>
</ul>
</div>
</header>
<!-- 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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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="span3">
<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>
<!-- 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>
</section>
......
docs/templates/pages/scaffolding.mustache
+ 15
- 2
View file @ de53f62a
......@@ -3,7 +3,20 @@
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Scaffolding{{/i}}</h1>
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<div class="subnav">
<div class="bs-docs-contents">
<h4>Contents</h4>
<ul>
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ul>
</div>
<!-- <div class="subnav">
<ul class="nav nav-pills">
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
......@@ -13,7 +26,7 @@
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ul>
</div>
</header>
--></header>
......
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