mirror of
https://github.com/wahyd4/bootstrap.git
synced 2026-08-09 12:56:17 +10:00
gh-pages
This commit is contained in:
Jacob Thornton
+36
-25
@@ -7,17 +7,17 @@
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le styles -->
|
||||
<link href="assets/css/bootstrap.css" rel="stylesheet">
|
||||
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
|
||||
<link href="assets/css/docs.css" rel="stylesheet">
|
||||
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
|
||||
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Le fav and touch icons -->
|
||||
<link rel="shortcut icon" href="assets/ico/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="assets/ico/apple-touch-icon.png">
|
||||
@@ -134,7 +134,7 @@
|
||||
<div class="span3">
|
||||
<label>
|
||||
<h3><a href="./javascript.html#tooltips">Tooltips</a></h3>
|
||||
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p>
|
||||
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p>
|
||||
</label>
|
||||
</div>
|
||||
<div class="span3">
|
||||
@@ -273,6 +273,12 @@
|
||||
<td>true</td>
|
||||
<td>Closes the modal when escape key is pressed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Shows the modal when initialized.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Markup</h3>
|
||||
@@ -283,7 +289,7 @@
|
||||
</pre>
|
||||
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="modal">
|
||||
<div class="modal" id="myModal">
|
||||
<div class="modal-header">
|
||||
<a class="close" data-dismiss="modal">×</a>
|
||||
<h3>Modal header</h3>
|
||||
@@ -624,11 +630,11 @@ $('#myModal').on('hidden', function () {
|
||||
<h3>Markup</h3>
|
||||
<p>You can activate a tab or pill navigation without writing any javascript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="tabs">
|
||||
<ul class="nav nav-tabs">
|
||||
<li><a href="#home" data-toggle="tab">Home</a></li>
|
||||
<li><a href="#profile" data-toggle="tab">Profile</a></li>
|
||||
<li><a href="#messages" data-toggle="tab">Messages</a></li>
|
||||
<li><a href="#ettings" data-toggle="tab">Settings</a></li>
|
||||
<li><a href="#settings" data-toggle="tab">Settings</a></li>
|
||||
</ul></pre>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().tab</h4>
|
||||
@@ -636,7 +642,7 @@ $('#myModal').on('hidden', function () {
|
||||
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
|
||||
</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="tabs">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#home">Home</a></li>
|
||||
<li><a href="#profile">Profile</a></li>
|
||||
<li><a href="#messages">Messages</a></li>
|
||||
@@ -694,14 +700,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<div class="row">
|
||||
<div class="span3 columns">
|
||||
<h3>About Tooltips</h3>
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.</p>
|
||||
<a href="assets/js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
<h2>Example use of Tooltips</h2>
|
||||
<p>Hover over the links below to see tooltips:</p>
|
||||
<div class="tooltip-demo well">
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">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='tooltip' title='Another tooltip'>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='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel="tooltip" title="first tooltip">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="tooltip" title="Another tooltip">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="tooltip" title="Another one here too">really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
@@ -727,7 +733,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string</td>
|
||||
<td>string|function</td>
|
||||
<td>'top'</td>
|
||||
<td>how to position the tooltip - top | bottom | left | right</td>
|
||||
</tr>
|
||||
@@ -767,6 +773,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</div>
|
||||
<h3>Markup</h3>
|
||||
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>
|
||||
</pre>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().tooltip(options)</h4>
|
||||
<p>Attaches a tooltip handler to an element collection.</p>
|
||||
@@ -795,7 +804,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<div class="span3 columns">
|
||||
<h3>About popovers</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="#tooltip">Tooltip</a> to be included</p>
|
||||
<p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltip</a> to be included</p>
|
||||
<a href="assets/js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
|
||||
</div>
|
||||
<div class="span9 columns">
|
||||
@@ -827,7 +836,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>string</td>
|
||||
<td>string|function</td>
|
||||
<td>'right'</td>
|
||||
<td>how to position the popover - top | bottom | left | right</td>
|
||||
</tr>
|
||||
@@ -917,13 +926,13 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<h4 class="alert-heading">Oh snap! You got an error!</h4>
|
||||
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<p>
|
||||
<a class="btn btn-danger small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
|
||||
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Using bootstrap-alerts.js</h2>
|
||||
<h2>Using bootstrap-alert.js</h2>
|
||||
<p>Enable dismissal of an alert via javascript:</p>
|
||||
<pre class="prettyprint linenums">$(".alert-message").alert()</pre>
|
||||
<pre class="prettyprint linenums">$(".alert").alert()</pre>
|
||||
<h3>Markup</h3>
|
||||
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
|
||||
<pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
|
||||
@@ -932,7 +941,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
|
||||
<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>
|
||||
<h4>.alert('close')</h4>
|
||||
<p>Closes an alert.</p>
|
||||
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
|
||||
<pre class="prettyprint linenums">$(".alert").alert('close')</pre>
|
||||
<h3>Events</h3>
|
||||
<p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
|
||||
<table class="table table-bordered table-striped">
|
||||
@@ -1042,7 +1051,7 @@ $('#my-alert').bind('closed', function () {
|
||||
</pre>
|
||||
<h3>Methods</h3>
|
||||
<h4>$().button('toggle')</h4>
|
||||
<p>Toggles push state. Gives btn the look that it's been activated.</p>
|
||||
<p>Toggles push state. Gives btn the look that it hass been activated.</p>
|
||||
<div class="alert alert-info">
|
||||
<strong>Heads up!</strong>
|
||||
You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.
|
||||
@@ -1145,7 +1154,7 @@ $('#my-alert').bind('closed', function () {
|
||||
<td>parent</td>
|
||||
<td>selector</td>
|
||||
<td>false</td>
|
||||
<td>If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)</td>
|
||||
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
@@ -1295,10 +1304,12 @@ $('#myCollapsible').on('hidden', function () {
|
||||
<h3>Markup</h3>
|
||||
<p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="carousel">
|
||||
<div id="myCarousel" class="carousel">
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
...
|
||||
<div class="active item">…</div>
|
||||
<div class="item">…</div>
|
||||
<div class="item">…</div>
|
||||
</div>
|
||||
<!-- Carousel nav -->
|
||||
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
|
||||
@@ -1339,7 +1350,7 @@ $('.myCarousel').carousel({
|
||||
</tr>
|
||||
<tr>
|
||||
<td>slid</td>
|
||||
<td>This event is fired when the carousel has completed it's slide transition.</td>
|
||||
<td>This event is fired when the carousel has completed its slide transition.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -1422,7 +1433,7 @@ $('.myCarousel').carousel({
|
||||
</pre>
|
||||
<h3>Methods</h3>
|
||||
<h4>.typeahead(options)</h4>
|
||||
<p>Initializes an input with a typahead.</p>
|
||||
<p>Initializes an input with a typeahead.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user