mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Merge branch '3.0.0-wip' into bs3_remove_icons

Browse Source 
Conflicts:
	docs/components.html
This commit is contained in:
Mark Otto
2013-06-27 18:49:05 -07:00
parent f64fe29003 cb483b6758
commit 62f76ad33f
28 changed files with 338 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_includes/footer.html
-4
View File
@@ -4,10 +4,6 @@
<script src="/assets/js/jquery.js"></script>
<script src="/assets/js/bootstrap.js"></script>
<!-- Offcanvas example
================================================== -->
<script src="/assets/js/examples/bootstrap-offcanvas.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="/assets/js/holder/holder.js"></script>
docs/_includes/nav-javascript.html
+1 -1
View File
@@ -2,7 +2,7 @@
<a href="#js-overview">Overview</a>
<ul class="nav">
<li><a href="#js-individual-compiled">Individual or compiled</a></li>
<li><a href="#js-data-attributes">Data attributes</a></li>
<li><a href="#js-data-attrs">Data attributes</a></li>
<li><a href="#js-programmatic-api">Programmatic API</a></li>
<li><a href="#js-noconflict">No Conflict</a></li>
<li><a href="#js-events">Events</a></li>
docs/assets/css/bootstrap.css
Vendored
+144 -90
View File
@@ -353,14 +353,6 @@ small {
font-size: 85%;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
cite {
font-style: normal;
}
@@ -425,6 +417,7 @@ h6,
.h4,
.h5,
.h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
line-height: 1.1;
}
@@ -818,13 +811,26 @@ pre code {
.col-lg-11,
.col-lg-12 {
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
float: left;
}
.col-1 {
width: 8.333333333333332%;
}
@@ -877,6 +883,20 @@ pre code {
.container {
max-width: 728px;
}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
}
.col-sm-1 {
width: 8.333333333333332%;
}
@@ -913,39 +933,6 @@ pre code {
.col-sm-12 {
width: 100%;
}
.col-offset-1 {
margin-left: 8.333333333333332%;
}
.col-offset-2 {
margin-left: 16.666666666666664%;
}
.col-offset-3 {
margin-left: 25%;
}
.col-offset-4 {
margin-left: 33.33333333333333%;
}
.col-offset-5 {
margin-left: 41.66666666666667%;
}
.col-offset-6 {
margin-left: 50%;
}
.col-offset-7 {
margin-left: 58.333333333333336%;
}
.col-offset-8 {
margin-left: 66.66666666666666%;
}
.col-offset-9 {
margin-left: 75%;
}
.col-offset-10 {
margin-left: 83.33333333333334%;
}
.col-offset-11 {
margin-left: 91.66666666666666%;
}
.col-push-1 {
left: 8.333333333333332%;
}
@@ -1018,6 +1005,20 @@ pre code {
.container {
max-width: 940px;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.333333333333332%;
}
@@ -1054,6 +1055,39 @@ pre code {
.col-lg-12 {
width: 100%;
}
.col-offset-1 {
margin-left: 8.333333333333332%;
}
.col-offset-2 {
margin-left: 16.666666666666664%;
}
.col-offset-3 {
margin-left: 25%;
}
.col-offset-4 {
margin-left: 33.33333333333333%;
}
.col-offset-5 {
margin-left: 41.66666666666667%;
}
.col-offset-6 {
margin-left: 50%;
}
.col-offset-7 {
margin-left: 58.333333333333336%;
}
.col-offset-8 {
margin-left: 66.66666666666666%;
}
.col-offset-9 {
margin-left: 75%;
}
.col-offset-10 {
margin-left: 83.33333333333334%;
}
.col-offset-11 {
margin-left: 91.66666666666666%;
}
}
@media (min-width: 1200px) {
@@ -1200,13 +1234,13 @@ th {
background-color: #f5f5f5;
}
table col[class*="col-span-"] {
table col[class^="col-"] {
display: table-column;
float: none;
}
table td[class*="col-span-"],
table th[class*="col-span-"] {
table td[class^="col-"],
table th[class^="col-"] {
display: table-cell;
float: none;
}
@@ -1337,6 +1371,58 @@ input[type="color"]:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
select[disabled],
textarea[disabled],
input[type="text"][disabled],
input[type="password"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="date"][disabled],
input[type="month"][disabled],
input[type="time"][disabled],
input[type="week"][disabled],
input[type="number"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="color"][disabled],
select[readonly],
textarea[readonly],
input[type="text"][readonly],
input[type="password"][readonly],
input[type="datetime"][readonly],
input[type="datetime-local"][readonly],
input[type="date"][readonly],
input[type="month"][readonly],
input[type="time"][readonly],
input[type="week"][readonly],
input[type="number"][readonly],
input[type="email"][readonly],
input[type="url"][readonly],
input[type="search"][readonly],
input[type="tel"][readonly],
input[type="color"][readonly],
fieldset[disabled] select,
fieldset[disabled] textarea,
fieldset[disabled] input[type="text"],
fieldset[disabled] input[type="password"],
fieldset[disabled] input[type="datetime"],
fieldset[disabled] input[type="datetime-local"],
fieldset[disabled] input[type="date"],
fieldset[disabled] input[type="month"],
fieldset[disabled] input[type="time"],
fieldset[disabled] input[type="week"],
fieldset[disabled] input[type="number"],
fieldset[disabled] input[type="email"],
fieldset[disabled] input[type="url"],
fieldset[disabled] input[type="search"],
fieldset[disabled] input[type="tel"],
fieldset[disabled] input[type="color"] {
cursor: not-allowed;
background-color: #eeeeee;
}
input,
select,
textarea {
@@ -1490,6 +1576,7 @@ input[type="url"].input-large,
input[type="search"].input-large,
input[type="tel"].input-large,
input[type="color"].input-large {
min-height: 56px;
padding: 14px 16px;
font-size: 18px;
border-radius: 6px;
@@ -1511,34 +1598,12 @@ input[type="url"].input-small,
input[type="search"].input-small,
input[type="tel"].input-small,
input[type="color"].input-small {
min-height: 32px;
min-height: 30px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly],
fieldset[disabled] input,
fieldset[disabled] select,
fieldset[disabled] textarea {
cursor: not-allowed;
background-color: #eeeeee;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly],
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
background-color: transparent;
}
.has-warning .control-label {
color: #c09853;
}
@@ -1608,21 +1673,6 @@ fieldset[disabled] input[type="checkbox"] {
border-color: #468847;
}
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
}
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
border-color: #e9322d;
-webkit-box-shadow: 0 0 6px #f8b9b7;
box-shadow: 0 0 6px #f8b9b7;
}
.help-block {
display: block;
margin-top: 5px;
@@ -1661,6 +1711,7 @@ select:focus:invalid:focus {
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
@@ -2939,7 +2990,8 @@ input[type="button"].btn-block {
}
.list-group {
margin: 0 0 20px;
padding-left: 0;
margin-bottom: 20px;
background-color: #ffffff;
}
@@ -3464,6 +3516,10 @@ button.close {
background-color: transparent;
}
.navbar-nav.pull-right {
width: 100%;
}
.navbar-static-top {
border-radius: 0;
}
@@ -3677,7 +3733,7 @@ button.close {
.navbar-brand {
float: left;
margin-right: 5px;
margin-left: -5px;
margin-left: -15px;
}
.navbar-nav {
float: left;
@@ -3692,6 +3748,7 @@ button.close {
}
.navbar-nav.pull-right {
float: right;
width: auto;
}
.navbar-toggle {
position: relative;
@@ -4375,10 +4432,6 @@ button.close {
border-radius: 5px 5px 0 0;
}
.popover-title:empty {
display: none;
}
.popover-content {
padding: 9px 14px;
}
@@ -5024,6 +5077,7 @@ a.list-group-item.active > .badge,
left: 50%;
z-index: 15;
width: 100px;
padding-left: 0;
margin: 0 0 0 -50px;
text-align: center;
list-style: none;
docs/assets/css/docs.css
+5 -8
View File
@@ -81,7 +81,9 @@ body {
/* Textual links */
.bs-masthead-links {
margin: 20px 0;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 0;
list-style: none;
}
.bs-masthead-links li {
@@ -711,13 +713,6 @@ input.focused {
/* Tablets and up */
@media screen and (min-width: 768px) {
/* Reaffix the fixed sidebar */
.bs-sidebar.affix {
position: fixed; /* Undo the static from mobile-first approach */
top: 50px;
width: 160px;
}
/* Back to top link */
.bs-top {
display: block; /* Unhide */
@@ -779,6 +774,8 @@ input.focused {
/* Widen the fixed sidebar */
.bs-sidebar.affix {
position: fixed; /* Undo the static from mobile-first approach */
top: 50px;
width: 213px;
}
docs/assets/js/bootstrap.js
Vendored
+2
View File
@@ -1420,6 +1420,8 @@
$tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)
$tip.removeClass('fade top bottom left right in')
$tip.find('.popover-title:empty').hide()
}
Popover.prototype.hasContent = function () {
docs/assets/js/bootstrap.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/components.html
+6 -2
View File
@@ -6,7 +6,6 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
---
<!-- Dropdowns
================================================== -->
<div class="bs-docs-section" id="dropdowns">
@@ -168,6 +167,11 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</div>
<p class="lead">Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with <a href="./javascript.html#buttons">our buttons plugin</a>.</p>
<div class="bs-callout">
<h4>Tooltips &amp; popovers in button groups require special setting</h4>
<p>When using tooltips or popovers on elements within a <code>.btn-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<h3 id="btn-groups-single">Basic button group</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<div class="bs-example">
@@ -628,7 +632,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
</ul>
</div>
{% highlight html %}
<ul class="nav nav-tabs">
<ul class="nav nav-pills">
...
<li class="disabled"><a href="#">Disabled link</a></li>
...
docs/css.html
+13 -24
View File
@@ -43,7 +43,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
</ul>
<p>These styles can be found within <strong>scaffolding.less</strong>.</p>
<h3 id="overview-reset">Normalize reset</h3>
<h3 id="overview-normalize">Normalize reset</h3>
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
<h3 id="overview-container">Centering with container</h3>
@@ -247,7 +247,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<div class="bs-callout">
<h4>Need more examples?</h4>
<p>We dive into more grid layouts in a separte page, free of chrome and documentation to better show you the power of the grid.</p>
<p>We dive into more grid layouts in a separate page, free of chrome and documentation to better show you the power of the grid.</p>
<p><a class="btn btn-danger" target="_blank" href="../examples/grid/">More grid examples</a></p>
</div>
@@ -1380,21 +1380,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</form>
{% highlight html %}
<input id="focusedInput" type="text" value="This is focused...">
{% endhighlight %}
<h3 id="forms-invalid-inputs">Invalid inputs</h3>
<p>Style inputs via default browser functionality. Specify a <code>type</code>, add the <code>required</code> attribute if the field is not optional, and (if applicable) specify a <code>pattern</code>.</p>
<div class="bs-callout">
<h4>Cross-browser compatibility</h4>
<p>Invalid inputs are styled via the <code>:invalid</code> CSS selector, which is not supported by Internet Explorer 9 and below.</p>
</div>
<form class="bs-example">
<input type="email" placeholder="test@example.com" required>
</form>
{% highlight html %}
<input type="email" placeholder="test@example.com" required>
{% endhighlight %}
<h3 id="forms-disabled-inputs">Disabled inputs</h3>
@@ -1509,12 +1494,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
<h3 id="forms-input-groups">Input groups</h3>
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
<div class="bs-callout">
<h4>Cross-browser compatibility</h4>
<p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
</div>
<div class="bs-callout">
<h4>Tooltips &amp; popovers in input groups require special setting</h4>
<p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
</div>
<form class="bs-example bs-example-form">
<div class="input-group col-lg-9">
@@ -1757,26 +1746,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-example" style="padding-bottom: 15px;">
<div class="row">
<div class="col-lg-2">
<input type="text" placeholder="col-large-2">
<input type="text" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" placeholder="col-large-3">
<input type="text" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" placeholder="col-large-4">
<input type="text" placeholder=".col-lg-4">
</div>
</div>
</form>
{% highlight html %}
<div class="row">
<div class="col-lg-2">
<input type="text" placeholder="col-large-2">
<input type="text" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" placeholder="col-large-3">
<input type="text" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" placeholder="col-large-4">
<input type="text" placeholder=".col-lg-4">
</div>
</div>
{% endhighlight %}
docs/customize.html
+1 -1
View File
@@ -357,7 +357,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div>
<div class="bs-callout">
<h4>Heads up!</h4>
<p>All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
<p>All checked plugins will be compiled into a single file, <code>bootstrap.js</code>. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</div>
</div>
docs/docs.html
+6 -6
View File
@@ -1942,26 +1942,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="row">
<div class="col-lg-2">
<input type="text" placeholder="col-large-2">
<input type="text" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" placeholder="col-large-3">
<input type="text" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" placeholder="col-large-4">
<input type="text" placeholder=".col-lg-4">
</div>
</div>
</form>
{% highlight html %}
<div class="row">
<div class="col-lg-2">
<input type="text" placeholder="col-large-2">
<input type="text" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" placeholder="col-large-3">
<input type="text" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" placeholder="col-large-4">
<input type="text" placeholder=".col-lg-4">
</div>
</div>
{% endhighlight %}
docs/getting-started.html
+5
View File
@@ -48,6 +48,11 @@ lead: "An overview of Bootstrap, how to download and use, basic templates and ex
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
{% endhighlight %}
<div class="bs-callout" id="callout-less-compilation">
<h4>LESS compilation</h4>
<p>If you download the original files, you need to compile Bootstrap's LESS files into usable CSS. To do that, Bootstrap only officially supports <a href="http://twitter.github.io/recess/">Recess</a>, Twitter's CSS hinter built on top of <a href="http://lesscss.org">less.js</a>.</p>
</div>
</div>
<!-- File structure
docs/javascript.html
+32 -22
View File
@@ -64,6 +64,11 @@ $('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
{% endhighlight %}
<div class="bs-callout" id="callout-third-party-libs">
<h4>Third-party libraries</h4>
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the <a href="http://groups.google.com/group/twitter-bootstrap">mailing list</a> if you need help.</p>
</div>
</div>
@@ -75,7 +80,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<h1>Transitions <small>transition.js</small></h1>
</div>
<h3>About transitions</h3>
<p>For simple transition effects, include transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this&mdash;it's already there.</p>
<p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this&mdash;it's already there.</p>
<h3>Use cases</h3>
<p>A few examples of the transition plugin:</p>
<ul>
@@ -118,7 +123,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dalog -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div><!-- /example -->
{% highlight html %}
@@ -137,7 +142,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dalog -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endhighlight %}
@@ -181,7 +186,7 @@ $('#myModal').on('show.bs.modal', function (e) {
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dalog -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="bs-example" style="padding-bottom: 24px;">
@@ -207,7 +212,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dalog -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endhighlight %}
@@ -259,7 +264,7 @@ $('#myModal').on('show.bs.modal', function (e) {
<td>remote</td>
<td>path</td>
<td>false</td>
<td><p>If a remote url is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
<td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
{% highlight html %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %}
@@ -305,7 +310,7 @@ $('#myModal').modal({
</tr>
<tr>
<td>shown</td>
<td>This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</td>
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
<td>hide</td>
@@ -313,7 +318,7 @@ $('#myModal').modal({
</tr>
<tr>
<td>hidden</td>
<td>This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</td>
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
@@ -739,9 +744,10 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
</ul>
</div><!-- /example -->
<h3>Tooltips in input groups</h3>
<p>When using tooltips and popovers with the Bootstrap input groups, you'll have to set the <code>container</code> (documented below) option to avoid unwanted side effects.</p>
<div class="bs-callout">
<h4>Tooltips in button groups and input groups require special setting</h4>
<p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
</div>
<hr class="bs-docs-separator">
@@ -768,13 +774,13 @@ $('#example').tooltip(options)
<td>animation</td>
<td>boolean</td>
<td>true</td>
<td>apply a css fade transition to the tooltip</td>
<td>apply a CSS fade transition to the tooltip</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert html into the tooltip. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
<td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>
@@ -798,7 +804,7 @@ $('#example').tooltip(options)
<td>trigger</td>
<td>string</td>
<td>'hover focus'</td>
<td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space seperated, trigger types.</td>
<td>how tooltip is triggered - click | hover | focus | manual. Note you case pass trigger multiple, space separated, trigger types.</td>
</tr>
<tr>
<td>delay</td>
@@ -815,7 +821,7 @@ $('#example').tooltip(options)
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the tooltip to a specific element <code>container: 'body'</code></p>
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
</td>
</tr>
</tbody>
@@ -868,6 +874,10 @@ $('#example').tooltip(options)
<h4>Plugin dependency</h4>
<p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p>
</div>
<div class="bs-callout">
<h4>Popovers in button groups and input groups require special setting</h4>
<p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p>
</div>
<h3>Static popover</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
@@ -946,13 +956,13 @@ $('#example').tooltip(options)
<td>animation</td>
<td>boolean</td>
<td>true</td>
<td>apply a css fade transition to the tooltip</td>
<td>apply a CSS fade transition to the tooltip</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
<td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>
@@ -999,7 +1009,7 @@ $('#example').tooltip(options)
<td>string | false</td>
<td>false</td>
<td>
<p>Appends the popover to a specific element <code>container: 'body'</code></p>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code></p>
</td>
</tr>
</tbody>
@@ -1101,7 +1111,7 @@ $('#example').tooltip(options)
</tr>
<tr>
<td>closed</td>
<td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>
@@ -1374,7 +1384,7 @@ $('.nav-tabs').button()
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a css selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
<p>Just add <code>data-toggle="collapse"</code> and a <code>data-target</code> to element to automatically assign control of a collapsible element. The <code>data-target</code> attribute accepts a CSS selector to apply the collapse to. Be sure to add the class <code>collapse</code> to the collapsible element. If you'd like it to default open, add the additional class <code>in</code>.</p>
<p>To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.</p>
<h3>Via JavaScript</h3>
@@ -1446,7 +1456,7 @@ $('#myCollapsible').collapse({
</tr>
<tr>
<td>shown</td>
<td>This event is fired when a collapse element has been made visible to the user (will wait for css transitions to complete).</td>
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
<td>hide</td>
@@ -1456,7 +1466,7 @@ $('#myCollapsible').collapse({
</tr>
<tr>
<td>hidden</td>
<td>This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).</td>
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</table>