home/bootstrap
2
0
Fork 0
mirror of https://github.com/wahyd4/bootstrap.git synced 2026-08-13 23:07:32 +10:00
Code Issues Packages Projects Releases Wiki Activity

Importing 2.2.2

Browse Source
This commit is contained in:
Mark Otto
2012-12-08 13:52:50 -08:00
parent df7a0e0bf3
commit 811b559d36
49 changed files with 1500 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript.html
+31 -21
View File
@@ -19,11 +19,11 @@
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<script type="text/javascript">
var _gaq = _gaq || [];
@@ -144,9 +144,17 @@ $("#myModal").modal('show') // initializes and invokes show immed
</pre>
<p>Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
<h3>No Conflict</h3>
<p>Sometimes it's neccessary to use bootstrap plugins with other ui frameworks. In these circumstances, occasionally namespace collisions can occur. If this happens, you may call <code>.noCoflict</code> on the plugin you wish to revert the value of.</p>
<pre class="prettyprint linenums">
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality
</pre>
<h3>Events</h3>
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
<p>All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.</p>
<p>All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.</p>
<pre class="prettyprint linenums">
$('#myModal').on('show', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
@@ -191,7 +199,7 @@ $('#myModal').on('show', function (e) {
<h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p>
<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" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Modal header</h3>
@@ -517,7 +525,7 @@ $('#myModal').on('hidden', function () {
<h3>Methods</h3>
<h4>$().dropdown('toggle')</h4>
<p>A programatic api for toggling menus for a given navbar or tabbed navigation.</p>
<p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>
</section>
@@ -646,7 +654,7 @@ $('[data-spy="scroll"]').each(function () {
<h2>Example tabs</h2>
<p>Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.</p>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
<div class="bs-docs-example">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
@@ -1134,7 +1142,7 @@ $('#my-alert').bind('closed', function () {
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
<h4>Stateful</h4>
<p>Add data-loading-text="Loading..." to use a loading state on a button.</p>
<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<button type="button" id="fat-btn" data-loading-text="loading..." class="btn btn-primary">
Loading state
@@ -1143,14 +1151,14 @@ $('#my-alert').bind('closed', function () {
<pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-loading-text="Loading..."&gt;Loading state&lt;/button&gt;</pre>
<h4>Single toggle</h4>
<p>Add data-toggle="button" to activate toggling on a single button.</p>
<p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
</div>
<pre class="prettyprint linenums">&lt;button type="button" class="btn" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>
<pre class="prettyprint linenums">&lt;button type="button" class="btn btn-primary" data-toggle="button"&gt;Single Toggle&lt;/button&gt;</pre>
<h4>Checkbox</h4>
<p>Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.</p>
<p>Add <code>data-toggle="buttons-checkbox"</code> for checkbox style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-primary">Left</button>
@@ -1160,14 +1168,14 @@ $('#my-alert').bind('closed', function () {
</div>
<pre class="prettyprint linenums">
&lt;div class="btn-group" data-toggle="buttons-checkbox"&gt;
&lt;button type="button" class="btn"&gt;Left&lt;/button&gt;
&lt;button type="button" class="btn"&gt;Middle&lt;/button&gt;
&lt;button type="button" class="btn"&gt;Right&lt;/button&gt;
&lt;button type="button" class="btn btn-primary"&gt;Left&lt;/button&gt;
&lt;button type="button" class="btn btn-primary"&gt;Middle&lt;/button&gt;
&lt;button type="button" class="btn btn-primary"&gt;Right&lt;/button&gt;
&lt;/div&gt;
</pre>
<h4>Radio</h4>
<p>Add data-toggle="buttons-radio" for radio style toggling on btn-group.</p>
<p>Add <code>data-toggle="buttons-radio"</code> for radio style toggling on btn-group.</p>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
@@ -1177,9 +1185,9 @@ $('#my-alert').bind('closed', function () {
</div>
<pre class="prettyprint linenums">
&lt;div class="btn-group" data-toggle="buttons-radio"&gt;
&lt;button type="button" class="btn"&gt;Left&lt;/button&gt;
&lt;button type="button" class="btn"&gt;Middle&lt;/button&gt;
&lt;button type="button" class="btn"&gt;Right&lt;/button&gt;
&lt;button type="button" class="btn btn-primary"&gt;Left&lt;/button&gt;
&lt;button type="button" class="btn btn-primary"&gt;Middle&lt;/button&gt;
&lt;button type="button" class="btn btn-primary"&gt;Right&lt;/button&gt;
&lt;/div&gt;
</pre>
@@ -1697,7 +1705,7 @@ $('[data-spy="affix"]').each(function () {
<td>offset</td>
<td>number | function | object</td>
<td>10</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
<td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
</tr>
</tbody>
</table>
@@ -1716,7 +1724,6 @@ $('[data-spy="affix"]').each(function () {
================================================== -->
<footer class="footer">
<div class="container">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
@@ -1737,7 +1744,6 @@ $('[data-spy="affix"]').each(function () {
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
@@ -1751,6 +1757,10 @@ $('[data-spy="affix"]').each(function () {
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
<script src="assets/js/holder/holder.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/application.js"></script>