mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-16 18:44:01 +02:00
conflict
This commit is contained in:
Mark Otto
@@ -46,7 +46,7 @@ section > .row {
|
||||
font-weight: bold;
|
||||
}
|
||||
#masthead {
|
||||
margin-top: 40px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
#masthead h1,
|
||||
#masthead p {
|
||||
@@ -175,6 +175,7 @@ section > .row {
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.075);
|
||||
}
|
||||
.diagram {
|
||||
height: 140px;
|
||||
padding: 4px;
|
||||
}
|
||||
.mini-layout {
|
||||
|
||||
@@ -42,42 +42,15 @@ $(document).ready(function(){
|
||||
// POSITION STATIC TWIPSIES
|
||||
// ========================
|
||||
|
||||
$('.twipsies.well a').each(function () {
|
||||
var type = this.title
|
||||
, $anchor = $(this)
|
||||
, $twipsy = $('.twipsy.' + type)
|
||||
|
||||
, twipsy = {
|
||||
width: $twipsy.width() + 10
|
||||
, height: $twipsy.height() + 10
|
||||
}
|
||||
|
||||
, anchor = {
|
||||
position: $anchor.position()
|
||||
, width: $anchor.width()
|
||||
, height: $anchor.height()
|
||||
}
|
||||
|
||||
, offset = {
|
||||
above: {
|
||||
top: anchor.position.top - twipsy.height
|
||||
, left: anchor.position.left + (anchor.width/2) - (twipsy.width/2)
|
||||
}
|
||||
, below: {
|
||||
top: anchor.position.top + anchor.height
|
||||
, left: anchor.position.left + (anchor.width/2) - (twipsy.width/2)
|
||||
}
|
||||
, left: {
|
||||
top: anchor.position.top + (anchor.height/2) - (twipsy.height/2)
|
||||
, left: anchor.position.left - twipsy.width - 5
|
||||
}
|
||||
, right: {
|
||||
top: anchor.position.top + (anchor.height/2) - (twipsy.height/2)
|
||||
, left: anchor.position.left + anchor.width + 5
|
||||
}
|
||||
}
|
||||
|
||||
$twipsy.css(offset[type])
|
||||
});
|
||||
$(".twipsies a").each(function () {
|
||||
$(this)
|
||||
.twipsy({
|
||||
live: false
|
||||
, placement: $(this).attr('title')
|
||||
, trigger: 'manual'
|
||||
, offset: 2
|
||||
})
|
||||
.trigger('twipsy:show')
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
<script src="assets/js/google-code-prettify/prettify.js"></script>
|
||||
<script>$(function () { prettyPrint() })</script>
|
||||
<script src="../js/bootstrap-dropdown.js"></script>
|
||||
<script src="../js/bootstrap-twipsy.js"></script>
|
||||
<script src="assets/js/application.js"></script>
|
||||
<script src="assets/js/application-scrollspy.js"></script>
|
||||
|
||||
@@ -1475,22 +1476,6 @@
|
||||
<p class="muted" style="margin-bottom: 0">
|
||||
Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
|
||||
</p>
|
||||
<div class="twipsy below">
|
||||
<div class="twipsy-arrow"></div>
|
||||
<div class="twipsy-inner">below!</div>
|
||||
</div>
|
||||
<div class="twipsy right">
|
||||
<div class="twipsy-arrow"></div>
|
||||
<div class="twipsy-inner">right!</div>
|
||||
</div>
|
||||
<div class="twipsy left">
|
||||
<div class="twipsy-arrow"></div>
|
||||
<div class="twipsy-inner">left!</div>
|
||||
</div>
|
||||
<div class="twipsy above">
|
||||
<div class="twipsy-arrow"></div>
|
||||
<div class="twipsy-inner">above!</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1556,15 +1541,15 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
|
||||
<td>This plugin is for adding dropdown to the bootstrap nav.</td>
|
||||
<td>This plugin is for adding dropdowns to the bootstrap topbar or tabbed navigations.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
|
||||
<td>This plugin adds quick, dynamic tab and pill functionality.</td>
|
||||
<td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
|
||||
<td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</td>
|
||||
<td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>
|
||||
|
||||
@@ -85,9 +85,9 @@ $('#modal-content').modal({
|
||||
closeOnEscape: true
|
||||
})</pre>
|
||||
<h3>Events</h3>
|
||||
<p>Trigger events to make things happen!</p>
|
||||
<p>Bootstraps modal class makes use of custom events. You can use <code>trigger</code> to make things happen manually or <code>bind</code> to listen for things happening.</p>
|
||||
<h4>modal:toggle</h4>
|
||||
<p> Toggle the modal open state.</p>
|
||||
<p>Toggle the modal open state.</p>
|
||||
<pre class="prettyprint linenums">$('#modal-content').trigger('modal:toggle')</pre>
|
||||
<h4>modal:show</h4>
|
||||
<p>Opens the modal.</p>
|
||||
@@ -95,8 +95,21 @@ $('#modal-content').modal({
|
||||
<h4>modal:hide</h4>
|
||||
<p>Closes the modal.</p>
|
||||
<pre class="prettyprint linenums">$('#modal-content').trigger('modal:hide')</pre>
|
||||
<h4>modal:shown</h4>
|
||||
<p>Fired when the modal has been made visible.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('#modal-content')
|
||||
.bind('modal:shown', function () {
|
||||
// do something here...
|
||||
})</pre>
|
||||
<h4>modal:hidden</h4>
|
||||
<p>Fired when the modal has become hidden</p>
|
||||
<pre class="prettyprint linenums">
|
||||
$('#modal-content')
|
||||
.bind('modal:hidden', function () {
|
||||
$(this).remove() // cleanup jQuery plugin data on hide
|
||||
})</pre>
|
||||
<h3>Demo</h3>
|
||||
|
||||
<!-- sample modal content -->
|
||||
<div id="modal-from-dom" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
@@ -235,6 +248,8 @@ $('#modal-content').modal({
|
||||
<div id="settings">...</div>
|
||||
</ul></pre>
|
||||
</p>
|
||||
<p><strong>note:</strong> To manually activate a tab just fire a click event on one of the tabs.</p>
|
||||
<pre class="prettyprint linenums">$('.tabs a[href="#messages"]').click()</pre>
|
||||
<h3>Demo</h3>
|
||||
<script>
|
||||
$(function () {
|
||||
@@ -296,6 +311,14 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
|
||||
<h3>Methods</h3>
|
||||
<h4>$().twipsy</h4>
|
||||
<p>Attaches a twipsy handler to an element collection.</p>
|
||||
<h3>Events</h3>
|
||||
<p>You can manually control twipsies by firing events on the controlling element.</p>
|
||||
<h4>twipsy:show</h4>
|
||||
<p>Reveals an elements twipsy.</p>
|
||||
<pre class="prettyprint linenums">$('#element').trigger('twipsy:show')</pre>
|
||||
<h4>twipsy:hide</h4>
|
||||
<p>Hides an elements twipsy.</p>
|
||||
<pre class="prettyprint linenums">$('#element').trigger('twipsy:hide')</pre>
|
||||
<h3>Demo</h3>
|
||||
<div class="well">
|
||||
<p class="muted">Tight pants next level keffiyeh <a href="#" rel='twipsy' title='Some title text'>you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
@@ -344,8 +367,16 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
|
||||
<h3>Methods</h3>
|
||||
<h4>$().popover</h4>
|
||||
<p>Initializes popovers for an element collection.</p>
|
||||
<h3>Events</h3>
|
||||
<p>You can manually control popovers by firing events on the controlling element.</p>
|
||||
<h4>popover:show</h4>
|
||||
<p>Reveals an elements popover.</p>
|
||||
<pre class="prettyprint linenums">$('#element').trigger('popover:show')</pre>
|
||||
<h4>popover:hide</h4>
|
||||
<p>Hides an elements popover.</p>
|
||||
<pre class="prettyprint linenums">$('#element').trigger('popover:hide')</pre>
|
||||
<h3>Demo</h3>
|
||||
<a href="#" class="btn danger" rel="popover" data-title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover</a>
|
||||
<a href="#" class="btn danger" rel="popover" data-title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
|
||||
<script>
|
||||
$(function () {
|
||||
$("a[rel=popover]").popover({
|
||||
@@ -376,6 +407,11 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
|
||||
<h3>Methods</h3>
|
||||
<h4>$().alert</h4>
|
||||
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
|
||||
<h3>Events</h3>
|
||||
<p>You can manually control alerts by firing events on them.</p>
|
||||
<h4>alert:close</h4>
|
||||
<p>Closes an alert.</p>
|
||||
<pre class="prettyprint linenums">$(".alert-message").trigger('alert:close')</pre>
|
||||
<h3>Demo</h3>
|
||||
<div class="alert-message warning fade in">
|
||||
<a class="close" href="#">×</a>
|
||||
|
||||
Reference in New Issue
Block a user