kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Merge branch '3.0.0-wip' into bs3_remove_icons 

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@ -9,4 +9,3 @@ permalink: pretty
source: ./docs
destination: ./_gh_pages
port: 9001
url: http://getbootstrap.dev:9001

4
docs/_includes/footer.html
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>

2
docs/_includes/nav-javascript.html
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>

234
docs/assets/css/bootstrap.css vendored
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;

13
docs/assets/css/docs.css
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;
}

2
docs/assets/js/bootstrap.js vendored
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 () {

2
docs/assets/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
docs/components.html
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>
...

37
docs/css.html
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 %}

2
docs/customize.html
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>

12
docs/docs.html
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 %}

5
docs/getting-started.html
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

54
docs/javascript.html
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>

2
js/popover.js
View File

@ -55,6 +55,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 () {

1
less/carousel.less
View File

@ -131,6 +131,7 @@
z-index: 15;
width: 100px;
margin: 0 0 0 -50px;
padding-left: 0;
list-style: none;
text-align: center;

3
less/code.less
View File

@ -31,8 +31,6 @@ pre {
line-height: @line-height-base;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
white-space: pre-wrap;
background-color: #f5f5f5;
border: 1px solid #ccc; // IE8 fallback
border: 1px solid rgba(0,0,0,.15);
@ -47,7 +45,6 @@ pre {
code {
padding: 0;
color: inherit;
white-space: pre;
white-space: pre-wrap;
background-color: transparent;
border: 0;

60
less/forms.less
View File

@ -72,6 +72,17 @@ input[type="color"] {
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
// Disabled and read-only inputs
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
}
}
// Reset appearance properties for textual inputs and textarea
@ -184,7 +195,7 @@ textarea {
// Move the options list down to align with labels
.controls > .radio:first-child,
.controls > .checkbox:first-child {
padding-top: 5px; // has to be padding because margin collaspes
padding-top: 5px; // has to be padding because margin collapses
}
*/
@ -227,6 +238,7 @@ input[type="search"],
input[type="tel"],
input[type="color"] {
&.input-large {
min-height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
@ -240,35 +252,6 @@ input[type="color"] {
}
// DISABLED STATE
// --------------
// Disabled and read-only inputs
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
// disabled if the fieldset is disabled. Due to implementation difficulty,
// we don't honor that edge case; we style them as disabled anyway.
input,
select,
textarea {
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: @input-bg-disabled;
}
}
// Explicitly reset the colors here
input[type="radio"],
input[type="checkbox"] {
&[disabled],
&[readonly],
fieldset[disabled] & {
background-color: transparent;
}
}
// FORM FIELD FEEDBACK STATES
// --------------------------
@ -286,20 +269,6 @@ input[type="checkbox"] {
.form-field-validation(@state-success-text, @state-success-text, @state-success-bg);
}
// HTML5 invalid states
// Shares styles with the .control-group.error above
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
color: #b94a48;
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
.box-shadow(@shadow);
}
}
@ -352,6 +321,7 @@ select:focus:invalid {
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
@ -455,7 +425,7 @@ select:focus:invalid {
}
}
// Only right aline form labels here when the columns stop stacking
// Only right align form labels here when the columns stop stacking
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: right;

72
less/grid.less
View File

@ -2,7 +2,6 @@
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
@ -51,9 +50,6 @@
.col-lg-11,
.col-lg-12 {
position: relative;
// Float and set width: 100%; for easy stacking on mobile devices
float: left;
width: 100%;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
@ -68,6 +64,20 @@
//
// Tiny device columns (smartphones)
.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: percentage((1 / @grid-columns)); }
.col-2 { width: percentage((2 / @grid-columns)); }
.col-3 { width: percentage((3 / @grid-columns)); }
@ -87,6 +97,20 @@
max-width: @container-tablet;
}
.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: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
@ -100,19 +124,6 @@
.col-sm-11 { width: percentage((11/ @grid-columns)); }
.col-sm-12 { width: 100%; }
// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
// Push and pull columns for source order changes
.col-push-1 { left: percentage((1 / @grid-columns)); }
.col-push-2 { left: percentage((2 / @grid-columns)); }
@ -144,6 +155,20 @@
.container {
max-width: @container-desktop;
}
.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: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
@ -156,6 +181,19 @@
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Large desktops and up

3
less/list-group.less
View File

@ -7,7 +7,8 @@
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
// No need to set list-style: none; since .list-group-item is block level
margin: 0 0 20px; // reset all margins because ul and ol
margin-bottom: 20px;
padding-left: 0; // reset padding because ul and ol
background-color: @list-group-bg;
}

12
less/mixins.less
View File

@ -400,6 +400,16 @@
margin-bottom: ((@navbar-height - @element-height) / 2);
}
// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
}
// Grid System
@ -491,5 +501,5 @@
color: @text-color;
border-color: @border-color;
background-color: @background-color;
}
}
}

15
less/navbar.less
View File

@ -6,8 +6,8 @@
.navbar {
position: relative;
margin-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
padding-left: @navbar-padding;
padding-right: @navbar-padding;
background-color: @navbar-bg;
border-radius: @border-radius-base;
@ -48,6 +48,12 @@
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
// Right aligned contents
// Make them full width first so that they align properly on mobile
&.pull-right {
width: 100%;
}
}
@ -90,7 +96,7 @@
max-width: 200px;
margin-left: auto;
margin-right: auto;
padding: 15px;
padding: @navbar-padding;
font-size: @font-size-large;
font-weight: 500;
line-height: @line-height-computed;
@ -278,7 +284,7 @@
.navbar-brand {
float: left;
margin-left: -5px;
margin-left: -(@navbar-padding);
margin-right: 5px;
}
.navbar-nav {
@ -296,6 +302,7 @@
&.pull-right {
float: right;
width: auto;
}
}

2
less/navs.less
View File

@ -59,7 +59,7 @@
}
}
// Redeclare pull classes because of specifity
// Redeclare pull classes because of specificity
// Todo: consider making these utilities !important to avoid this bullshit
> .pull-right {
float: right;

4
less/popovers.less
View File

@ -40,10 +40,6 @@
background-color: @popover-title-bg;
border-bottom: 1px solid darken(@popover-title-bg, 5%);
border-radius: 5px 5px 0 0;
&:empty {
display: none;
}
}
.popover-content {

54
less/responsive-utilities.less
View File

@ -29,34 +29,25 @@
// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
display: none;
visibility: hidden;
display: none !important;
visibility: hidden !important;
}
// Visibility utilities
// For Phones
.visible-sm {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.visible-md { display: none !important; }
.visible-lg { display: none !important; }
.hidden-sm { display: none !important; }
.hidden-md {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-lg {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
@ -64,25 +55,16 @@
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.visible-sm { display: none !important; }
.visible-md {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.visible-lg { display: none !important; }
.hidden-sm {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-md { display: none !important; }
.hidden-lg {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
}
@ -91,23 +73,14 @@
.visible-sm { display: none !important; }
.visible-md { display: none !important; }
.visible-lg {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-sm {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-md {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-lg { display: none !important; }
}
@ -118,10 +91,7 @@
@media print {
.visible-print {
display: block !important;
tr& { display: table-row !important; }
th&,
td& { display: table-cell !important; }
.responsive-visibility();
}
.hidden-print { display: none !important; }
}

4
less/scaffolding.less
View File

@ -27,7 +27,7 @@ body {
background-color: @body-bg;
}
// Reset fonts for revelant elements
// Reset fonts for relevant elements
input,
button,
select,
@ -60,7 +60,7 @@ a:focus {
img {
// Responsive images (ensure images don't scale beyond their parents)
max-width: 100%; // Part 1: Set a maxium relative to the parent
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
// Match vertical alignment with other comment elements

8
less/tables.less
View File

@ -184,16 +184,18 @@ th {
// -----------------
// Reset default table behavior
table col[class*="col-span-"] {
table col[class^="col-"] {
float: none;
display: table-column;
}
table td[class*="col-span-"],
table th[class*="col-span-"] {
table td[class^="col-"],
table th[class^="col-"] {
float: none;
display: table-cell;
}
// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-striped

3
less/type.less
View File

@ -23,8 +23,6 @@ p {
// Ex: 14px base font * 85% = about 12px
small { font-size: 85%; }
strong { font-weight: bold; }
em { font-style: italic; }
cite { font-style: normal; }
// Utility classes
@ -54,6 +52,7 @@ a.text-success:focus { color: darken(@state-success-text, 10%); }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: @headings-font-family;
font-weight: @headings-font-weight;
line-height: @headings-line-height;
small {

6
less/variables.less
View File

@ -53,6 +53,7 @@
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@ -128,8 +129,8 @@
@input-color-placeholder: @gray-light;
@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
@input-height-large: (@line-height-computed + (@padding-large-vertical * 2) + 2);
@input-height-small: (@line-height-computed + (@padding-small-vertical * 2) + 2);
@input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2);
@input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2);
// Dropdowns
@ -172,6 +173,7 @@
@navbar-height: 50px;
@navbar-color: #777;
@navbar-bg: #eee;
@navbar-padding: floor(@grid-gutter-width / 2); // ~15px
// Navbar links
@navbar-link-color: #777;