mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 19:06:40 +02:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'bootstrap/3.0.0-wip' into 3.0.0-wip

Browse Source
This commit is contained in:
Ivan Khalopik
2013-06-10 10:31:51 +03:00
parent 3285f4c306 d74a9634b0
commit e138b0df3a
32 changed files with 1169 additions and 848 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -80,7 +80,7 @@ Please read through our guidelines for contributing to Bootstrap. Included are d
More over, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo). More over, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).
Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at [http://editorconfig.com](http://editorconfig.com). Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at [http://editorconfig.org](http://editorconfig.org).

0
component.json → bower.json
View File

17
composer.json
View File

@@ -2,8 +2,19 @@
"name": "twitter/bootstrap" "name": "twitter/bootstrap"
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development." , "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
, "keywords": ["bootstrap", "css"] , "keywords": ["bootstrap", "css"]
, "homepage": "http://twitter.github.com/bootstrap/" , "homepage": "http://getbootstrap.com"
, "author": "Twitter Inc." , "authors": [
{
"name": "Mark Otto",
"email": "markdotto@gmail.com",
},
{
"name": "Jacob Thornton",
"email": "jacobthornton@gmail.com",
}
]
, "support": {
"issues": "https://github.com/twitter/bootstrap/issues"
}
, "license": "Apache-2.0" , "license": "Apache-2.0"
} }

5
docs/_includes/nav-css.html
View File

@@ -12,7 +12,10 @@
<li> <li>
<a href="#grid">Grid system</a> <a href="#grid">Grid system</a>
<ul class="nav"> <ul class="nav">
<li><a href="#grid-example">Example usage</a></li> <li><a href="#grid-options">Available options</a></li>
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
<li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li>
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
<li><a href="#grid-offsetting">Offset columns</a></li> <li><a href="#grid-offsetting">Offset columns</a></li>
<li><a href="#grid-nesting">Nested columns</a></li> <li><a href="#grid-nesting">Nested columns</a></li>
<li><a href="#grid-column-ordering">Column ordering</a></li> <li><a href="#grid-column-ordering">Column ordering</a></li>

4
docs/_layouts/default.html
View File

@@ -20,7 +20,7 @@
<div class="container bs-docs-container"> <div class="container bs-docs-container">
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col-lg-3">
<div class="bs-sidebar"> <div class="bs-sidebar">
<ul class="nav bs-sidenav"> <ul class="nav bs-sidenav">
{% if page.slug == "getting-started" %} {% if page.slug == "getting-started" %}
@@ -37,7 +37,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="col col-lg-9"> <div class="col-lg-9">
{{ content }} {{ content }}
</div> </div>
</div> </div>

428
docs/assets/css/bootstrap.css vendored
View File

@@ -763,12 +763,54 @@ pre code {
clear: both; clear: both;
} }
@media (min-width: 768px) {
.row {
margin-right: -15px;
margin-left: -15px;
}
}
.row .row { .row .row {
margin-right: -15px; margin-right: -15px;
margin-left: -15px; margin-left: -15px;
} }
.col { .col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.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,
.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 {
position: relative; position: relative;
float: left; float: left;
width: 100%; width: 100%;
@@ -777,223 +819,243 @@ pre code {
padding-left: 15px; padding-left: 15px;
} }
.col-sm-12 { .col-1 {
width: 100%;
}
.col-sm-11 {
width: 91.66666666666666%;
}
.col-sm-10 {
width: 83.33333333333334%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666666666666%;
}
.col-sm-7 {
width: 58.333333333333336%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.666666666666664%;
}
.col-sm-1 {
width: 8.333333333333332%; width: 8.333333333333332%;
} }
@media screen and (min-width: 768px) { .col-2 {
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666666666666%;
}
.col-lg-10 {
width: 83.33333333333334%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666666666666%;
}
.col-lg-7 {
width: 58.333333333333336%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666666666667%;
}
.col-lg-4 {
width: 33.33333333333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.666666666666664%; width: 16.666666666666664%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333333333333%;
}
.col-5 {
width: 41.66666666666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.333333333333336%;
}
.col-8 {
width: 66.66666666666666%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333333333334%;
}
.col-11 {
width: 91.66666666666666%;
}
.col-12 {
width: 100%;
}
@media (min-width: 768px) {
.container {
max-width: 728px;
} }
.col-lg-1 { .col-sm-1 {
width: 8.333333333333332%; width: 8.333333333333332%;
} }
.col-offset-12 { .col-sm-2 {
margin-left: 100%; width: 16.666666666666664%;
} }
.col-offset-11 { .col-sm-3 {
margin-left: 91.66666666666666%; width: 25%;
} }
.col-offset-10 { .col-sm-4 {
margin-left: 83.33333333333334%; width: 33.33333333333333%;
} }
.col-offset-9 { .col-sm-5 {
margin-left: 75%; width: 41.66666666666667%;
} }
.col-offset-8 { .col-sm-6 {
margin-left: 66.66666666666666%; width: 50%;
} }
.col-offset-7 { .col-sm-7 {
margin-left: 58.333333333333336%; width: 58.333333333333336%;
} }
.col-offset-6 { .col-sm-8 {
margin-left: 50%; width: 66.66666666666666%;
} }
.col-offset-5 { .col-sm-9 {
margin-left: 41.66666666666667%; width: 75%;
} }
.col-offset-4 { .col-sm-10 {
margin-left: 33.33333333333333%; width: 83.33333333333334%;
} }
.col-offset-3 { .col-sm-11 {
margin-left: 25%; width: 91.66666666666666%;
} }
.col-offset-2 { .col-sm-12 {
margin-left: 16.666666666666664%; width: 100%;
} }
.col-offset-1 { .col-offset-1 {
margin-left: 8.333333333333332%; margin-left: 8.333333333333332%;
} }
.col-push-12 { .col-offset-2 {
left: 100%; margin-left: 16.666666666666664%;
} }
.col-push-11 { .col-offset-3 {
left: 91.66666666666666%; margin-left: 25%;
} }
.col-push-10 { .col-offset-4 {
left: 83.33333333333334%; margin-left: 33.33333333333333%;
} }
.col-push-9 { .col-offset-5 {
left: 75%; margin-left: 41.66666666666667%;
} }
.col-push-8 { .col-offset-6 {
left: 66.66666666666666%; margin-left: 50%;
} }
.col-push-7 { .col-offset-7 {
left: 58.333333333333336%; margin-left: 58.333333333333336%;
} }
.col-push-6 { .col-offset-8 {
left: 50%; margin-left: 66.66666666666666%;
} }
.col-push-5 { .col-offset-9 {
left: 41.66666666666667%; margin-left: 75%;
} }
.col-push-4 { .col-offset-10 {
left: 33.33333333333333%; margin-left: 83.33333333333334%;
} }
.col-push-3 { .col-offset-11 {
left: 25%; margin-left: 91.66666666666666%;
}
.col-push-2 {
left: 16.666666666666664%;
} }
.col-push-1 { .col-push-1 {
left: 8.333333333333332%; left: 8.333333333333332%;
} }
.col-pull-12 { .col-push-2 {
right: 100%; left: 16.666666666666664%;
} }
.col-pull-11 { .col-push-3 {
right: 91.66666666666666%; left: 25%;
} }
.col-pull-10 { .col-push-4 {
right: 83.33333333333334%; left: 33.33333333333333%;
} }
.col-pull-9 { .col-push-5 {
right: 75%; left: 41.66666666666667%;
} }
.col-pull-8 { .col-push-6 {
right: 66.66666666666666%; left: 50%;
} }
.col-pull-7 { .col-push-7 {
right: 58.333333333333336%; left: 58.333333333333336%;
} }
.col-pull-6 { .col-push-8 {
right: 50%; left: 66.66666666666666%;
} }
.col-pull-5 { .col-push-9 {
right: 41.66666666666667%; left: 75%;
} }
.col-pull-4 { .col-push-10 {
right: 33.33333333333333%; left: 83.33333333333334%;
} }
.col-pull-3 { .col-push-11 {
right: 25%; left: 91.66666666666666%;
}
.col-pull-2 {
right: 16.666666666666664%;
} }
.col-pull-1 { .col-pull-1 {
right: 8.333333333333332%; right: 8.333333333333332%;
} }
} .col-pull-2 {
right: 16.666666666666664%;
@media screen and (min-width: 768px) { }
.container { .col-pull-3 {
max-width: 728px; right: 25%;
}
.col-pull-4 {
right: 33.33333333333333%;
}
.col-pull-5 {
right: 41.66666666666667%;
}
.col-pull-6 {
right: 50%;
}
.col-pull-7 {
right: 58.333333333333336%;
}
.col-pull-8 {
right: 66.66666666666666%;
}
.col-pull-9 {
right: 75%;
}
.col-pull-10 {
right: 83.33333333333334%;
}
.col-pull-11 {
right: 91.66666666666666%;
} }
} }
@media screen and (min-width: 992px) { @media (min-width: 992px) {
.container { .container {
max-width: 940px; max-width: 940px;
} }
.col-lg-1 {
width: 8.333333333333332%;
}
.col-lg-2 {
width: 16.666666666666664%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333333333333%;
}
.col-lg-5 {
width: 41.66666666666667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.333333333333336%;
}
.col-lg-8 {
width: 66.66666666666666%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333333333334%;
}
.col-lg-11 {
width: 91.66666666666666%;
}
.col-lg-12 {
width: 100%;
}
} }
@media screen and (min-width: 1200px) { @media (min-width: 1200px) {
.container { .container {
max-width: 1170px; max-width: 1170px;
} }
} }
/*[class*="col-span-"].pull-right {
float: right;
}*/
table { table {
max-width: 100%; max-width: 100%;
background-color: transparent; background-color: transparent;
@@ -1488,6 +1550,12 @@ fieldset[disabled] input[type="checkbox"] {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
} }
.has-warning .input-group-addon {
color: #c09853;
background-color: #fcf8e3;
border-color: #c09853;
}
.has-error .control-label { .has-error .control-label {
color: #b94a48; color: #b94a48;
} }
@@ -1505,6 +1573,12 @@ fieldset[disabled] input[type="checkbox"] {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
} }
.has-error .input-group-addon {
color: #b94a48;
background-color: #f2dede;
border-color: #b94a48;
}
.has-success .control-label { .has-success .control-label {
color: #468847; color: #468847;
} }
@@ -1522,6 +1596,12 @@ fieldset[disabled] input[type="checkbox"] {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
} }
.has-success .input-group-addon {
color: #468847;
background-color: #dff0d8;
border-color: #468847;
}
input:focus:invalid, input:focus:invalid,
textarea:focus:invalid, textarea:focus:invalid,
select:focus:invalid { select:focus:invalid {
@@ -2717,10 +2797,10 @@ input[type="button"].btn-block {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #357ebd; background-color: #357ebd;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, #357ebd); background-image: -webkit-linear-gradient(top, #428bca, 0%, #357ebd, 100%);
background-image: -moz-linear-gradient(top, #428bca, #357ebd); background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: linear-gradient(to bottom, #428bca, #357ebd); background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
} }
@@ -2731,10 +2811,10 @@ input[type="button"].btn-block {
color: #ffffff; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: #357ebd; background-color: #357ebd;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428bca), to(#357ebd)); background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd));
background-image: -webkit-linear-gradient(top, #428bca, #357ebd); background-image: -webkit-linear-gradient(top, #428bca, 0%, #357ebd, 100%);
background-image: -moz-linear-gradient(top, #428bca, #357ebd); background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%);
background-image: linear-gradient(to bottom, #428bca, #357ebd); background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
outline: 0; outline: 0;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
@@ -4895,10 +4975,10 @@ a.list-group-item.active > .badge,
.carousel-control.left { .carousel-control.left {
background-color: rgba(0, 0, 0, 0.0001); background-color: rgba(0, 0, 0, 0.0001);
background-color: transparent; background-color: transparent;
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001))); background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
} }
@@ -4908,10 +4988,10 @@ a.list-group-item.active > .badge,
left: auto; left: auto;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
background-color: transparent; background-color: transparent;
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5))); background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5)); background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.5)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
} }

9
docs/assets/css/docs.css
View File

@@ -246,14 +246,14 @@ body {
.show-grid { .show-grid {
margin-bottom: 15px; margin-bottom: 15px;
} }
.show-grid .col { .show-grid [class^="col-"] {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
background-color: #eee; background-color: #eee;
border: 1px solid #ddd; border: 1px solid #ddd;
} /* Todo: reconcile these */
.show-grid .col:hover { background-color: rgba(185,74,72,.15);
background-color: #ddd; border: 1px solid rgba(185,74,72,.2);
} }
@@ -520,6 +520,7 @@ body {
/* Utility classes table /* Utility classes table
------------------------- */ ------------------------- */
.bs-table th small,
.responsive-utilities th small { .responsive-utilities th small {
display: block; display: block;
font-weight: normal; font-weight: normal;

10
docs/assets/js/application.js
View File

@@ -9,7 +9,7 @@
var $window = $(window) var $window = $(window)
// Disable certain links in docs // Disable certain links in docs
$('section [href^=#]').click(function (e) { $('[href=#]').click(function (e) {
e.preventDefault() e.preventDefault()
}) })
@@ -27,14 +27,6 @@
$('.bs-top').affix() $('.bs-top').affix()
}, 100) }, 100)
// add tipsies to grid for scaffolding
if ($('#grid-system').length) {
$('#grid-system').tooltip({
selector: '.show-grid > [class*="span"]'
, title: function () { return $(this).width() + 'px' }
})
}
// tooltip demo // tooltip demo
$('.tooltip-demo').tooltip({ $('.tooltip-demo').tooltip({
selector: "a[data-toggle=tooltip]" selector: "a[data-toggle=tooltip]"

36
docs/assets/js/bootstrap.js vendored
View File

@@ -442,12 +442,19 @@
$target.carousel(options) $target.carousel(options)
if (slideIndex = $this.attr('data-slide-to')) { if (slideIndex = $this.attr('data-slide-to')) {
$target.data('bs-carousel').pause().to(slideIndex).cycle() $target.data('bs.carousel').pause().to(slideIndex).cycle()
} }
e.preventDefault() e.preventDefault()
}) })
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
var $carousel = $(this)
$carousel.carousel($carousel.data())
})
})
}(window.jQuery); }(window.jQuery);
/* ======================================================================== /* ========================================================================
* Bootstrap: collapse.js v3.0.0 * Bootstrap: collapse.js v3.0.0
@@ -865,18 +872,18 @@
Modal.prototype.enforceFocus = function () { Modal.prototype.enforceFocus = function () {
$(document) $(document)
.off('focusin.bs.modal') // guard against infinite focus loop .off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', function (e) { .on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) { if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.focus() this.$element.focus()
} }
}, this) }, this))
} }
Modal.prototype.escape = function () { Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) { if (this.isShown && this.options.keyboard) {
this.$element.on('keyup.dismiss.bs.modal', function ( e ) { this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide() e.which == 27 && this.hide()
}, this) }, this))
} else if (!this.isShown) { } else if (!this.isShown) {
this.$element.off('keyup.dismiss.bs.modal') this.$element.off('keyup.dismiss.bs.modal')
} }
@@ -1093,7 +1100,7 @@
return options return options
} }
Tooltip.prototype.enter = function (e) { Tooltip.prototype.enter = function (obj) {
var defaults = this.getDefaults() var defaults = this.getDefaults()
var options = {} var options = {}
@@ -1101,26 +1108,29 @@
if (defaults[key] != value) options[key] = value if (defaults[key] != value) options[key] = value
}) })
var self = $(e.currentTarget)[this.type](options).data('bs.' + this.type) var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](options).data('bs.' + this.type)
if (!self.options.delay || !self.options.delay.show) return self.show() if (!self.options.delay || !self.options.delay.show) return self.show()
clearTimeout(this.timeout) clearTimeout(this.timeout)
self.hoverState = 'in' self.hoverState = 'in'
this.timeout = setTimeout(function() { this.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show() if (self.hoverState == 'in') self.show()
}, self.options.delay.show) }, self.options.delay.show)
} }
Tooltip.prototype.leave = function (e) { Tooltip.prototype.leave = function (obj) {
var self = $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this._options).data('bs.' + this.type)
clearTimeout(this.timeout)
if (this.timeout) clearTimeout(this.timeout)
if (!self.options.delay || !self.options.delay.hide) return self.hide() if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.hoverState = 'out' self.hoverState = 'out'
this.timeout = setTimeout(function() { this.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide() if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide) }, self.options.delay.hide)
} }
@@ -1317,7 +1327,7 @@
Tooltip.prototype.toggle = function (e) { Tooltip.prototype.toggle = function (e) {
var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
self.tip().hasClass('in') ? self.hide() : self.show() self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
} }
Tooltip.prototype.destroy = function () { Tooltip.prototype.destroy = function () {

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

File diff suppressed because one or more lines are too long

26
docs/components.html
View File

@@ -300,7 +300,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<div class="controls"> <div class="controls">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input class="col col-lg-2" id="inputIcon" type="text"> <input class="col-lg-2" id="inputIcon" type="text">
</div> </div>
</div> </div>
</div> </div>
@@ -311,7 +311,7 @@ lead: "Dozens of reusable components built to provide iconography, dropdowns, na
<div class="controls"> <div class="controls">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input class="col col-lg-2" id="inputIcon" type="text"> <input class="col-lg-2" id="inputIcon" type="text">
</div> </div>
</div> </div>
</div> </div>
@@ -1302,7 +1302,7 @@ body { padding-bottom: 70px; }
</li> </li>
</ul> </ul>
<form class="navbar-form pull-left" action=""> <form class="navbar-form pull-left" action="">
<input type="text" class="col col-lg-8" placeholder="Search"> <input type="text" class="col-lg-8" placeholder="Search">
</form> </form>
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
@@ -1379,7 +1379,7 @@ body { padding-bottom: 70px; }
</li> </li>
</ul> </ul>
<form class="navbar-form pull-left" action=""> <form class="navbar-form pull-left" action="">
<input type="text" class="col col-lg-8" placeholder="Search"> <input type="text" class="col-lg-8" placeholder="Search">
</form> </form>
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
@@ -1757,22 +1757,22 @@ body { padding-bottom: 70px; }
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-example"> <div class="bs-example">
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
</div> </div>
<div class="col col-lg-3"> <div class="col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
</div> </div>
<div class="col col-lg-3"> <div class="col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
</div> </div>
<div class="col col-lg-3"> <div class="col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
@@ -1781,7 +1781,7 @@ body { padding-bottom: 70px; }
</div><!-- /.bs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
@@ -1794,7 +1794,7 @@ body { padding-bottom: 70px; }
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<div class="bs-example"> <div class="bs-example">
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt=""> <img data-src="holder.js/300x200" alt="">
<div class="caption"> <div class="caption">
@@ -1804,7 +1804,7 @@ body { padding-bottom: 70px; }
</div> </div>
</div> </div>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt=""> <img data-src="holder.js/300x200" alt="">
<div class="caption"> <div class="caption">
@@ -1814,7 +1814,7 @@ body { padding-bottom: 70px; }
</div> </div>
</div> </div>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt=""> <img data-src="holder.js/300x200" alt="">
<div class="caption"> <div class="caption">
@@ -1828,7 +1828,7 @@ body { padding-bottom: 70px; }
</div><!-- /.bs-example --> </div><!-- /.bs-example -->
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col-lg-3">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt=""> <img data-src="holder.js/300x200" alt="">
<div class="caption"> <div class="caption">

365
docs/css.html
View File

@@ -63,88 +63,220 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<div class="page-header"> <div class="page-header">
<h1>Grid system</h1> <h1>Grid system</h1>
</div> </div>
<p class="lead">Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases&mdash;in other words, it's mobile first. It includes <a href="#grid-example">predefined classes</a> for this, as well as powerful <a href="#grid-less">mixins for generating semantic layouts</a>.</p> <p class="lead">Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes <a href="#grid-example-basic">predefined classes</a> for easy layout options, as well as powerful <a href="#grid-less">mixins for generating more semantic layouts</a>.</p>
<h3 id="grid-example">Grid example</h3> <h3 id="grid-options">Grid options</h3>
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-lg-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-lg-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p> <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<p>Be sure to checkout the <a href="../examples/grid/">full-page grid example</a> as well.</p> <table class="table table-bordered table-striped bs-table">
<thead>
<tr>
<th></th>
<th>
Tiny grid
<small>Phones (&lt;480px)</small>
</th>
<th>
Small grid
<small>Tablets (&lt;768px)</small>
</th>
<th>
Medium-large grid
<small>Destkops (&gt;768px)</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th>Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="2">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th>Class prefix</th>
<td><code>.col-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr>
<th># of columns</th>
<td colspan="3">12</td>
</tr>
<tr>
<th>Nestable</th>
<td colspan="3">Yes</td>
</tr>
<tr>
<th>Offsets</th>
<td class="text-muted">N/A</td>
<td colspan="2">Yes</td>
</tr>
<tr>
<th>Column ordering</th>
<td class="text-muted">N/A</td>
<td colspan="2">Yes</td>
</tr>
</tbody>
</table>
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
<p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-4">4</div> <div class="col-lg-8">8</div>
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
<div class="col col-lg-4">4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-6">6</div> <div class="col-lg-4">4</div>
<div class="col col-lg-6">6</div> <div class="col-lg-4">4</div>
<div class="col-lg-4">4</div>
</div>
<div class="row show-grid">
<div class="col-lg-6">6</div>
<div class="col-lg-6">6</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
</div>
<div class="row show-grid">
<div class="col-lg-8">8</div>
<div class="col-lg-4">4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-6">6</div> <div class="col-lg-6">6</div>
<div class="col col-lg-6">6</div> <div class="col-lg-6">6</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="grid-offsetting">Offsetting columns</h3> <h3 id="grid-example-mixed">Example: Combining mobile with desktop</h3>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p> <p>Don't want your columns to simply stack in smaller devices? Use the small device grid system by adding <code>.col-*</code> classes to the existing <code>.col-lg-*</code> ones. See the example below for a better idea of how it all works.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-4">4</div> <div class="col-12 col-lg-8">8</div>
<div class="col col-lg-4 col-offset-4">4 offset 4</div> <div class="col-6 col-lg-4">4</div>
</div>
<div class="row show-grid">
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
</div>
<div class="row show-grid">
<div class="col-6 col-lg-6">6</div>
<div class="col-6 col-lg-6">6</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-12 col-lg-8">8</div>
<div class="col-6 col-lg-4">4</div>
</div>
<div class="row">
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
<div class="col-6 col-lg-4">4</div>
</div>
<div class="row">
<div class="col-6 col-lg-6">6</div>
<div class="col-6 col-lg-6">6</div>
</div>
{% endhighlight %}
<h3 id="grid-example-mixed-complete">Example: Mobile, tablet, and desktop</h3>
<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row show-grid">
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row show-grid">
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
</div>
</div>
{% highlight html %}
<div class="row">
<div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
</div>
{% endhighlight %}
<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><a class="btn btn-danger" target="_blank" href="../examples/grid/">More grid examples</a></p>
</div>
<h3 id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="col-lg-4">4</div>
<div class="col-lg-4 col-offset-4">4 offset 4</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-offset-3">3 offset 3</div>
<div class="col col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-offset-3">3 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-6 col-offset-3">6 offset 3</div> <div class="col-lg-6 col-offset-3">6 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-4">...</div> <div class="col-lg-4">...</div>
<div class="col col-lg-4 col-offset-4">...</div> <div class="col-lg-4 col-offset-4">...</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-offset-3">3 offset 3</div>
<div class="col col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-offset-3">3 offset 3</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-6 col-offset-3">...</div> <div class="col-lg-6 col-offset-3">...</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@@ -152,13 +284,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3 id="grid-nesting">Nesting columns</h3> <h3 id="grid-nesting">Nesting columns</h3>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p> <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-lg-*</code> columns within an existing <code>.col-lg-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-9"> <div class="col-lg-9">
Level 1: 9 columns Level 1: 9 columns
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-6"> <div class="col-lg-6">
Level 2: 6 columns Level 2: 6 columns
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
Level 2: 6 columns Level 2: 6 columns
</div> </div>
</div> </div>
@@ -166,13 +298,13 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-9"> <div class="col-lg-9">
Level 1: 9 columns Level 1: 9 columns
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
Level 2: 6 columns Level 2: 6 columns
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
Level 2: 6 columns Level 2: 6 columns
</div> </div>
</div> </div>
@@ -183,29 +315,14 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
<h3 id="grid-column-ordering">Column ordering</h3> <h3 id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p> <p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-9 col-push-3">9</div> <div class="col-lg-9 col-push-3">9</div>
<div class="col col-lg-3 col-pull-9">3</div> <div class="col-lg-3 col-pull-9">3</div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-9 col-push-3">9</div> <div class="col-lg-9 col-push-3">9</div>
<div class="col col-lg-3 col-pull-9">3</div> <div class="col-lg-3 col-pull-9">3</div>
</div>
{% endhighlight %}
<h3 id="grid-small">Small device grid</h3>
<p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
<div class="row show-grid">
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div>
{% highlight html %}
<div class="row">
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@@ -504,7 +621,7 @@ lead: "Fundamental HTML elements styled and enhanced with extensible classes."
{% highlight html %} {% highlight html %}
<blockquote> <blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small> <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote> </blockquote>
{% endhighlight %} {% endhighlight %}
@@ -918,8 +1035,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Use contextual classes to color table rows.</p> <p>Use contextual classes to color table rows.</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<colgroup> <colgroup>
<col class="col col-lg-1"> <col class="col-lg-1">
<col class="col col-lg-7"> <col class="col-lg-7">
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
@@ -1078,14 +1195,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p> <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.</p>
<form class="bs-example form-horizontal"> <form class="bs-example form-horizontal">
<div class="row"> <div class="row">
<label for="inputEmail" class="col col-lg-2 control-label">Email</label> <label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col col-lg-10"> <div class="col-lg-10">
<input type="text" id="inputEmail" placeholder="Email"> <input type="text" id="inputEmail" placeholder="Email">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<label for="" class="col col-lg-2 control-label">Password</label> <label for="" class="col-lg-2 control-label">Password</label>
<div class="col col-lg-10"> <div class="col-lg-10">
<input type="password" id="inputPassword" placeholder="Password"> <input type="password" id="inputPassword" placeholder="Password">
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -1093,7 +1210,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-10 col-offset-2"> <div class="col-lg-10 col-offset-2">
<button type="submit" class="btn btn-default">Sign in</button> <button type="submit" class="btn btn-default">Sign in</button>
</div> </div>
</div> </div>
@@ -1101,14 +1218,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %} {% highlight html %}
<form class="form-horizontal"> <form class="form-horizontal">
<div class="row"> <div class="row">
<label for="inputEmail" class="col col-lg-2 control-label">Email</label> <label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col col-lg-10"> <div class="col-lg-10">
<input type="text" id="inputEmail" placeholder="Email"> <input type="text" id="inputEmail" placeholder="Email">
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<label for="" class="col col-lg-2 control-label">Password</label> <label for="" class="col-lg-2 control-label">Password</label>
<div class="col col-lg-10"> <div class="col-lg-10">
<input type="password" id="inputPassword" placeholder="Password"> <input type="password" id="inputPassword" placeholder="Password">
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -1116,7 +1233,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-10 col-offset-2"> <div class="col-lg-10 col-offset-2">
<button type="submit" class="btn btn-default">Sign in</button> <button type="submit" class="btn btn-default">Sign in</button>
</div> </div>
</div> </div>
@@ -1400,34 +1517,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<form class="bs-example"> <form class="bs-example">
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-group col col-lg-6"> <div class="input-group col-lg-6">
<input type="text"> <input type="text">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
<br> <br>
<div class="input-group col col-lg-3"> <div class="input-group col-lg-3">
<span class="input-group-addon">$</span> <span class="input-group-addon">$</span>
<input type="text"> <input type="text">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</div> </div>
<div class="input-group col col-lg-6"> <div class="input-group col-lg-6">
<input type="text"> <input type="text">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
<div class="input-group col col-lg-3"> <div class="input-group col-lg-3">
<span class="input-group-addon">$</span> <span class="input-group-addon">$</span>
<input type="text"> <input type="text">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
@@ -1437,33 +1554,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Optional sizes</h4> <h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p> <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
<form class="bs-example"> <form class="bs-example">
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon input-large">@</span> <span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username"> <input type="text" class="input-large" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon input-small">@</span> <span class="input-group-addon input-small">@</span>
<input type="text" class="input-small" placeholder="Username"> <input type="text" class="input-small" placeholder="Username">
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon input-large">@</span> <span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username"> <input type="text" class="input-large" placeholder="Username">
</div> </div>
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</div> </div>
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon input-small">@</span> <span class="input-group-addon input-small">@</span>
<input type="text" class="input-small" placeholder="Username"> <input type="text" class="input-small" placeholder="Username">
</div> </div>
@@ -1472,14 +1589,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Buttons instead of text</h4> <h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-example"> <form class="bs-example">
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button> <button class="btn btn-default" type="button">Go!</button>
</span> </span>
<input type="text"> <input type="text">
</div> </div>
<br> <br>
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button> <button class="btn btn-default" type="button">Go!</button>
@@ -1487,14 +1604,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button> <button class="btn btn-default" type="button">Go!</button>
</span> </span>
<input type="text"> <input type="text">
</div> </div>
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button> <button class="btn btn-default" type="button">Go!</button>
@@ -1505,7 +1622,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Button dropdowns</h4> <h4>Button dropdowns</h4>
<p></p> <p></p>
<form class="bs-example"> <form class="bs-example">
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@@ -1519,7 +1636,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="text"> <input type="text">
</div><!-- /input-group --> </div><!-- /input-group -->
<br> <br>
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1534,7 +1651,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /input-group --> </div><!-- /input-group -->
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@@ -1548,7 +1665,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="text"> <input type="text">
</div><!-- /input-group --> </div><!-- /input-group -->
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1565,7 +1682,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Segmented dropdown groups</h4> <h4>Segmented dropdown groups</h4>
<form class="bs-example"> <form class="bs-example">
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button> <button type="button" class="btn btn-default" tabindex="-1">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
@@ -1584,7 +1701,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<br> <br>
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<div class="input-group-btn"> <div class="input-group-btn">
<button type="button" class="btn btn-default" tabindex="-1">Action</button> <button type="button" class="btn btn-default" tabindex="-1">Action</button>
@@ -1602,14 +1719,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
<!-- Button and dropdown menu --> <!-- Button and dropdown menu -->
</div> </div>
<input type="text"> <input type="text">
</div> </div>
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<div class="input-group-btn btn-group"> <div class="input-group-btn btn-group">
<!-- Button and dropdown menu --> <!-- Button and dropdown menu -->
@@ -1639,27 +1756,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p> <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<form class="bs-example" style="padding-bottom: 15px;"> <form class="bs-example" style="padding-bottom: 15px;">
<div class="row"> <div class="row">
<div class="col col-lg-2"> <div class="col-lg-2">
<input type="text" placeholder="col col-large-2"> <input type="text" placeholder="col-large-2">
</div> </div>
<div class="col col-lg-3"> <div class="col-lg-3">
<input type="text" placeholder="col col-large-3"> <input type="text" placeholder="col-large-3">
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<input type="text" placeholder="col col-large-4"> <input type="text" placeholder="col-large-4">
</div> </div>
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-2"> <div class="col-lg-2">
<input type="text" placeholder="col col-large-2"> <input type="text" placeholder="col-large-2">
</div> </div>
<div class="col col-lg-3"> <div class="col-lg-3">
<input type="text" placeholder="col col-large-3"> <input type="text" placeholder="col-large-3">
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<input type="text" placeholder="col col-large-4"> <input type="text" placeholder="col-large-4">
</div> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}

148
docs/customize.html
View File

@@ -17,7 +17,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Basics</h3> <h3>Basics</h3>
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<h4>Layout</h4> <h4>Layout</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -44,7 +44,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<h4>Global CSS</h4> <h4>Global CSS</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -77,7 +77,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<h4>Utility classes</h4> <h4>Utility classes</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -102,7 +102,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Components</h3> <h3>Components</h3>
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<h4>Navigation</h4> <h4>Navigation</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -135,7 +135,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<h4>Content blocks</h4> <h4>Content blocks</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -162,7 +162,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<h4>Behavioral (requires JS)</h4> <h4>Behavioral (requires JS)</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -204,7 +204,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<h4>Media</h4> <h4>Media</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -231,7 +231,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<h4>Miscellaneous</h4> <h4>Miscellaneous</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -276,7 +276,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="/javascript/">JavaScript</a> page in the docs.</p> <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="/javascript/">JavaScript</a> page in the docs.</p>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Linked to components</h4> <h4>Linked to components</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -327,7 +327,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</label> </label>
</div> </div>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Magic</h4> <h4>Magic</h4>
<div class="checkbox"> <div class="checkbox">
<label> <label>
@@ -374,7 +374,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Body background</h3> <h3>Body background</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@body-bg</label> <label>@body-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<p class="help-block">Background color applied to <code>&lt;body&gt;</code>.</p> <p class="help-block">Background color applied to <code>&lt;body&gt;</code>.</p>
@@ -383,7 +383,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Typography</h3> <h3>Typography</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@font-family-sans-serif</label> <label>@font-family-sans-serif</label>
<input type="text" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif"> <input type="text" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
<p class="help-block">Default sans-serif fonts.</p> <p class="help-block">Default sans-serif fonts.</p>
@@ -394,7 +394,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="Monaco, Menlo, Consolas, 'Courier New', monospace"> <input type="text" placeholder="Monaco, Menlo, Consolas, 'Courier New', monospace">
<p class="help-block">Default monospace fonts for <code>&lt;code&gt;</code> and <code>&lt;pre&gt;</code>.</p> <p class="help-block">Default monospace fonts for <code>&lt;code&gt;</code> and <code>&lt;pre&gt;</code>.</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@font-family-base</label> <label>@font-family-base</label>
<input type="text" placeholder="@font-family-sans-serif"> <input type="text" placeholder="@font-family-sans-serif">
<p class="help-block">Used to globally set font-family in Bootstrap.</p> <p class="help-block">Used to globally set font-family in Bootstrap.</p>
@@ -415,7 +415,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Colors</h3> <h3>Colors</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<p>Define custom colors used in several contexts.</p> <p>Define custom colors used in several contexts.</p>
<label>@brand-primary</label> <label>@brand-primary</label>
<input type="text" placeholder="#428bca"> <input type="text" placeholder="#428bca">
@@ -433,7 +433,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="#5bc0de"> <input type="text" placeholder="#5bc0de">
<p class="help-block">Used to indicate informational content.</p> <p class="help-block">Used to indicate informational content.</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<p>Define your preferred colors for standard text and links.</p> <p>Define your preferred colors for standard text and links.</p>
<label>@text-color</label> <label>@text-color</label>
<input type="text" placeholder="@gray-dark"> <input type="text" placeholder="@gray-dark">
@@ -450,13 +450,13 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Media queries breakpoints</h3> <h3>Media queries breakpoints</h3>
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p> <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@screen-tiny</label> <label>@screen-tiny</label>
<input type="text" placeholder="480px"> <input type="text" placeholder="480px">
<label>@screen-small</label> <label>@screen-small</label>
<input type="text" placeholder="768px"> <input type="text" placeholder="768px">
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@screen-medium</label> <label>@screen-medium</label>
<input type="text" placeholder="992px"> <input type="text" placeholder="992px">
<label>@screen-large</label> <label>@screen-large</label>
@@ -467,7 +467,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Grid system</h3> <h3>Grid system</h3>
<p>Define your custom responsive grid.</p> <p>Define your custom responsive grid.</p>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@grid-columns</label> <label>@grid-columns</label>
<input type="text" placeholder="12"> <input type="text" placeholder="12">
<p class="help-block">Number of columns in the grid.</p> <p class="help-block">Number of columns in the grid.</p>
@@ -475,7 +475,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="30px"> <input type="text" placeholder="30px">
<p class="help-block">Padding between columns.</p> <p class="help-block">Padding between columns.</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@grid-float-breakpoint</label> <label>@grid-float-breakpoint</label>
<input type="text" placeholder="@screen-tablet"> <input type="text" placeholder="@screen-tablet">
<p class="help-block">Point at which the navbar stops collapsing.</p> <p class="help-block">Point at which the navbar stops collapsing.</p>
@@ -485,7 +485,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h3>Components</h3> <h3>Components</h3>
<p>Define common padding and border radius sizes and more.</p> <p>Define common padding and border radius sizes and more.</p>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Padding</h4> <h4>Padding</h4>
<label>@padding-base-vertical</label> <label>@padding-base-vertical</label>
<input type="text" placeholder="8px"> <input type="text" placeholder="8px">
@@ -500,7 +500,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<label>@padding-small-horizontal</label> <label>@padding-small-horizontal</label>
<input type="text" placeholder="10px"> <input type="text" placeholder="10px">
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Border radius sizes</h4> <h4>Border radius sizes</h4>
<label>@border-radius-base</label> <label>@border-radius-base</label>
<input type="text" placeholder="4px"> <input type="text" placeholder="4px">
@@ -513,7 +513,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h4>Active background color</h4> <h4>Active background color</h4>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@component-active-bg</label> <label>@component-active-bg</label>
<input type="text" placeholder="@brand-primary"> <input type="text" placeholder="@brand-primary">
<p class="help-block">Used for active or hovered items in places like navs or dropdowns.</p> <p class="help-block">Used for active or hovered items in places like navs or dropdowns.</p>
@@ -523,7 +523,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-buttons">Buttons</h2> <h2 id="variables-buttons">Buttons</h2>
<p>For each of Bootstrap's buttons, define text, background and border color.</p> <p>For each of Bootstrap's buttons, define text, background and border color.</p>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Default</h4> <h4>Default</h4>
<label>@btn-default-color</label> <label>@btn-default-color</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
@@ -546,7 +546,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<label>@btn-info-border</label> <label>@btn-info-border</label>
<input type="text" placeholder="@btn-info-bg"> <input type="text" placeholder="@btn-info-bg">
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Success</h4> <h4>Success</h4>
<label>@btn-success-color</label> <label>@btn-success-color</label>
<input type="text" placeholder="@btn-default-color"> <input type="text" placeholder="@btn-default-color">
@@ -574,7 +574,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-form-states">Form states and alerts</h2> <h2 id="variables-form-states">Form states and alerts</h2>
<p>Define colors for form feedback states and, by default, alerts.</p> <p>Define colors for form feedback states and, by default, alerts.</p>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Success</h4> <h4>Success</h4>
<label>@state-success-text</label> <label>@state-success-text</label>
<input type="text" placeholder="#468847"> <input type="text" placeholder="#468847">
@@ -590,7 +590,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<label>@state-warning-border</label> <label>@state-warning-border</label>
<input type="text" placeholder="darken(spin(@state-warning-bg, -10), 3%)"> <input type="text" placeholder="darken(spin(@state-warning-bg, -10), 3%)">
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Danger</h4> <h4>Danger</h4>
<label>@state-danger-text</label> <label>@state-danger-text</label>
<input type="text" placeholder="#b94a48"> <input type="text" placeholder="#b94a48">
@@ -614,7 +614,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<label>@alert-border-radius</label> <label>@alert-border-radius</label>
<input type="text" placeholder="@border-radius-base"> <input type="text" placeholder="@border-radius-base">
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Success</h4> <h4>Success</h4>
<label>@alert-success-text</label> <label>@alert-success-text</label>
<input type="text" placeholder="@state-success-text"> <input type="text" placeholder="@state-success-text">
@@ -630,7 +630,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<label>@alert-warning-border</label> <label>@alert-warning-border</label>
<input type="text" placeholder="@state-warning-border"> <input type="text" placeholder="@state-warning-border">
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Danger</h4> <h4>Danger</h4>
<label>@alert-danger-text</label> <label>@alert-danger-text</label>
<input type="text" placeholder="@state-danger-text"> <input type="text" placeholder="@state-danger-text">
@@ -650,7 +650,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-navbar">Navbar</h2> <h2 id="variables-navbar">Navbar</h2>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<h3>Default navbar</h3> <h3>Default navbar</h3>
<h4>Basics</h4> <h4>Basics</h4>
<label>@navbar-height</label> <label>@navbar-height</label>
@@ -682,7 +682,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<label>@navbar-brand-hover-bg</label> <label>@navbar-brand-hover-bg</label>
<input type="text" placeholder="transparent"> <input type="text" placeholder="transparent">
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<h3>Inverted navbar</h3> <h3>Inverted navbar</h3>
<h4>Basics</h4> <h4>Basics</h4>
<label>@navbar-inverse-color</label> <label>@navbar-inverse-color</label>
@@ -716,7 +716,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-tables">Tables</h2> <h2 id="variables-tables">Tables</h2>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@table-bg</label> <label>@table-bg</label>
<input type="text" placeholder="transparent"> <input type="text" placeholder="transparent">
<p class="help-block">Default background color used for all tables.</p> <p class="help-block">Default background color used for all tables.</p>
@@ -725,7 +725,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="#f9f9f9"> <input type="text" placeholder="#f9f9f9">
<p class="help-block">Background color used for <code>.table-striped</code>.</p> <p class="help-block">Background color used for <code>.table-striped</code>.</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@table-bg-hover</label> <label>@table-bg-hover</label>
<input type="text" placeholder="#f5f5f5"> <input type="text" placeholder="#f5f5f5">
<p class="help-block">Background color used for <code>.table-hover</code>.</p> <p class="help-block">Background color used for <code>.table-hover</code>.</p>
@@ -737,7 +737,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-forms">Forms</h2> <h2 id="variables-forms">Forms</h2>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<h3>Background</h3> <h3>Background</h3>
<label>@input-bg</label> <label>@input-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
@@ -751,7 +751,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="@gray-light"> <input type="text" placeholder="@gray-light">
<p class="help-block">Placeholder text color</p> <p class="help-block">Placeholder text color</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<h3>Border</h3> <h3>Border</h3>
<label>@input-border</label> <label>@input-border</label>
<input type="text" placeholder="#ccc"> <input type="text" placeholder="#ccc">
@@ -764,7 +764,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-dropdowns">Dropdowns</h2> <h2 id="variables-dropdowns">Dropdowns</h2>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<h3>Background</h3> <h3>Background</h3>
<label>@dropdown-bg</label> <label>@dropdown-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
@@ -776,7 +776,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="@dropdown-link-active-bg"> <input type="text" placeholder="@dropdown-link-active-bg">
<p class="help-block">Hovered dropdown menu entry background color</p> <p class="help-block">Hovered dropdown menu entry background color</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<h3>Colors</h3> <h3>Colors</h3>
<label>@dropdown-link-color</label> <label>@dropdown-link-color</label>
<input type="text" placeholder="@gray-dark"> <input type="text" placeholder="@gray-dark">
@@ -791,7 +791,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<h3>Dividers</h3> <h3>Dividers</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@dropdown-divider-top</label> <label>@dropdown-divider-top</label>
<input type="text" placeholder="#e5e5e5"> <input type="text" placeholder="#e5e5e5">
<p class="help-block">Dropdown divider top border color</p> <p class="help-block">Dropdown divider top border color</p>
@@ -804,7 +804,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-panels-wells">Panels and wells</h2> <h2 id="variables-panels-wells">Panels and wells</h2>
<h3>Default panel styles</h3> <h3>Default panel styles</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@panel-bg</label> <label>@panel-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<p class="help-block">Panel body background color</p> <p class="help-block">Panel body background color</p>
@@ -815,7 +815,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="#f5f5f5"> <input type="text" placeholder="#f5f5f5">
<p class="help-block">Panel footer background color</p> <p class="help-block">Panel footer background color</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@panel-border</label> <label>@panel-border</label>
<input type="text" placeholder="#ddd"> <input type="text" placeholder="#ddd">
<p class="help-block">Panel border color</p> <p class="help-block">Panel border color</p>
@@ -826,7 +826,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<h3>Contextual panel colors</h3> <h3>Contextual panel colors</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Primary</h4> <h4>Primary</h4>
<label>@panel-primary-text</label> <label>@panel-primary-text</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
@@ -858,7 +858,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="@state-info-bg"> <input type="text" placeholder="@state-info-bg">
<p class="help-block">Info heading background color</p> <p class="help-block">Info heading background color</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Warning</h4> <h4>Warning</h4>
<label>@panel-warning-text</label> <label>@panel-warning-text</label>
<input type="text" placeholder="@state-warning-text"> <input type="text" placeholder="@state-warning-text">
@@ -888,17 +888,17 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-jumbotron">Jumbotron</h2> <h2 id="variables-jumbotron">Jumbotron</h2>
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@jumbotron-bg</label> <label>@jumbotron-bg</label>
<input type="text" placeholder="@gray-lighter"> <input type="text" placeholder="@gray-lighter">
<p class="help-block">Jumbotron background color</p> <p class="help-block">Jumbotron background color</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@jumbotron-heading-color</label> <label>@jumbotron-heading-color</label>
<input type="text" placeholder="inherit"> <input type="text" placeholder="inherit">
<p class="help-block">Jumbotron heading color</p> <p class="help-block">Jumbotron heading color</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@jumbotron-lead-color</label> <label>@jumbotron-lead-color</label>
<input type="text" placeholder="inherit"> <input type="text" placeholder="inherit">
<p class="help-block">Jumbotron lead paragraph color</p> <p class="help-block">Jumbotron lead paragraph color</p>
@@ -906,17 +906,17 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<h2 id="variables-modals">Modals</h2> <h2 id="variables-modals">Modals</h2>
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@modal-inner-padding</label> <label>@modal-inner-padding</label>
<input type="text" placeholder="20px"> <input type="text" placeholder="20px">
<p class="help-block">Padding applied to the modal body</p> <p class="help-block">Padding applied to the modal body</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@modal-title-padding</label> <label>@modal-title-padding</label>
<input type="text" placeholder="15px"> <input type="text" placeholder="15px">
<p class="help-block">Padding applied to the modal title</p> <p class="help-block">Padding applied to the modal title</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@modal-title-line-height</label> <label>@modal-title-line-height</label>
<input type="text" placeholder="@line-height-base"> <input type="text" placeholder="@line-height-base">
<p class="help-block">Modal title line-height</p> <p class="help-block">Modal title line-height</p>
@@ -925,17 +925,17 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-list-group">List group</h2> <h2 id="variables-list-group">List group</h2>
<h3>Background</h3> <h3>Background</h3>
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@list-group-bg</label> <label>@list-group-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<p class="help-block">Default background color</p> <p class="help-block">Default background color</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@list-group-hover-bg</label> <label>@list-group-hover-bg</label>
<input type="text" placeholder="#f5f5f5"> <input type="text" placeholder="#f5f5f5">
<p class="help-block">Background color of single list elements on hover</p> <p class="help-block">Background color of single list elements on hover</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@list-group-active-bg</label> <label>@list-group-active-bg</label>
<input type="text" placeholder="@component-active-bg"> <input type="text" placeholder="@component-active-bg">
<p class="help-block">Background color of active list elements</p> <p class="help-block">Background color of active list elements</p>
@@ -943,17 +943,17 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<h3>Borders</h3> <h3>Borders</h3>
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@list-group-border</label> <label>@list-group-border</label>
<input type="text" placeholder="#ddd"> <input type="text" placeholder="#ddd">
<p class="help-block">Default border color</p> <p class="help-block">Default border color</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@list-group-border-radius</label> <label>@list-group-border-radius</label>
<input type="text" placeholder="@border-radius-base"> <input type="text" placeholder="@border-radius-base">
<p class="help-block">List group border radius</p> <p class="help-block">List group border radius</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@list-group-active-border</label> <label>@list-group-active-border</label>
<input type="text" placeholder="@list-group-active-bg"> <input type="text" placeholder="@list-group-active-bg">
<p class="help-block">Border color of active list elements</p> <p class="help-block">Border color of active list elements</p>
@@ -964,7 +964,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<p class="help-block">Text color of active list elements</p> <p class="help-block">Text color of active list elements</p>
<h2 id="variables-thumbnails">Thumbnails</h2> <h2 id="variables-thumbnails">Thumbnails</h2>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@thumbnail-caption-color</label> <label>@thumbnail-caption-color</label>
<input type="text" placeholder="@text-color"> <input type="text" placeholder="@text-color">
<p class="help-block">Custom text color for thumbnail captions</p> <p class="help-block">Custom text color for thumbnail captions</p>
@@ -972,7 +972,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="@body-bg"> <input type="text" placeholder="@body-bg">
<p class="help-block">Thumbnail background color</p> <p class="help-block">Thumbnail background color</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@thumbnail-border</label> <label>@thumbnail-border</label>
<input type="text" placeholder="#ddd"> <input type="text" placeholder="#ddd">
<p class="help-block">Thumbnail border color</p> <p class="help-block">Thumbnail border color</p>
@@ -983,34 +983,34 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<h2 id="variables-progress">Progress bars</h2> <h2 id="variables-progress">Progress bars</h2>
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@progress-bg</label> <label>@progress-bg</label>
<input type="text" placeholder="#f5f5f5"> <input type="text" placeholder="#f5f5f5">
<p class="help-block">Background color of the whole progress component</p> <p class="help-block">Background color of the whole progress component</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@progress-bar-bg</label> <label>@progress-bar-bg</label>
<input type="text" placeholder="@brand-primary"> <input type="text" placeholder="@brand-primary">
<p class="help-block">Default progress bar color</p> <p class="help-block">Default progress bar color</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@progress-bar-success-bg</label> <label>@progress-bar-success-bg</label>
<input type="text" placeholder="@brand-success"> <input type="text" placeholder="@brand-success">
<p class="help-block">Success progress bar color</p> <p class="help-block">Success progress bar color</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@progress-bar-warning-bg</label> <label>@progress-bar-warning-bg</label>
<input type="text" placeholder="@brand-warning"> <input type="text" placeholder="@brand-warning">
<p class="help-block">Warning progress bar color</p> <p class="help-block">Warning progress bar color</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@progress-bar-danger-bg</label> <label>@progress-bar-danger-bg</label>
<input type="text" placeholder="@brand-danger"> <input type="text" placeholder="@brand-danger">
<p class="help-block">Danger progress bar color</p> <p class="help-block">Danger progress bar color</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@progress-bar-info-bg</label> <label>@progress-bar-info-bg</label>
<input type="text" placeholder="@brand-info"> <input type="text" placeholder="@brand-info">
<p class="help-block">Info progress bar color</p> <p class="help-block">Info progress bar color</p>
@@ -1018,17 +1018,17 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<h2 id="variables-pagination">Pagination</h2> <h2 id="variables-pagination">Pagination</h2>
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@pagination-bg</label> <label>@pagination-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<p class="help-block">Background color</p> <p class="help-block">Background color</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@pagination-border</label> <label>@pagination-border</label>
<input type="text" placeholder="#ddd"> <input type="text" placeholder="#ddd">
<p class="help-block">Border color</p> <p class="help-block">Border color</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<label>@pagination-active-bg</label> <label>@pagination-active-bg</label>
<input type="text" placeholder="#f5f5f5"> <input type="text" placeholder="#f5f5f5">
<p class="help-block">Active background color</p> <p class="help-block">Active background color</p>
@@ -1037,7 +1037,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-labels">Labels</h2> <h2 id="variables-labels">Labels</h2>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@label-success-bg</label> <label>@label-success-bg</label>
<input type="text" placeholder="@brand-success"> <input type="text" placeholder="@brand-success">
<p class="help-block">Success label background color</p> <p class="help-block">Success label background color</p>
@@ -1045,7 +1045,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="@brand-info"> <input type="text" placeholder="@brand-info">
<p class="help-block">Info label background color</p> <p class="help-block">Info label background color</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@label-warning-bg</label> <label>@label-warning-bg</label>
<input type="text" placeholder="@brand-warning"> <input type="text" placeholder="@brand-warning">
<p class="help-block">Warning label background color</p> <p class="help-block">Warning label background color</p>
@@ -1057,7 +1057,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<h2 id="variables-tooltips-popovers">Tooltips and popovers</h2> <h2 id="variables-tooltips-popovers">Tooltips and popovers</h2>
<h3>Tooltip styles</h3> <h3>Tooltip styles</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@tooltip-color</label> <label>@tooltip-color</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<p class="help-block">Tooltip text color</p> <p class="help-block">Tooltip text color</p>
@@ -1065,7 +1065,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="rgba(0,0,0,.9)"> <input type="text" placeholder="rgba(0,0,0,.9)">
<p class="help-block">Tooltip background color</p> <p class="help-block">Tooltip background color</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@tooltip-arrow-width</label> <label>@tooltip-arrow-width</label>
<input type="text" placeholder="5px"> <input type="text" placeholder="5px">
<p class="help-block">Tooltip arrow width</p> <p class="help-block">Tooltip arrow width</p>
@@ -1076,7 +1076,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<h3>Popover styles</h3> <h3>Popover styles</h3>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@popover-bg</label> <label>@popover-bg</label>
<input type="text" placeholder="#fff"> <input type="text" placeholder="#fff">
<p class="help-block">Popover body background color</p> <p class="help-block">Popover body background color</p>
@@ -1084,7 +1084,7 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
<input type="text" placeholder="darken(@popover-bg, 3%)"> <input type="text" placeholder="darken(@popover-bg, 3%)">
<p class="help-block">Popover title background color</p> <p class="help-block">Popover title background color</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@popover-arrow-width</label> <label>@popover-arrow-width</label>
<input type="text" placeholder="10px"> <input type="text" placeholder="10px">
<p class="help-block">Popover arrow width</p> <p class="help-block">Popover arrow width</p>
@@ -1094,12 +1094,12 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@popover-arrow-outer-width</label> <label>@popover-arrow-outer-width</label>
<input type="text" placeholder="(@popover-arrow-width 1)"> <input type="text" placeholder="(@popover-arrow-width 1)">
<p class="help-block">Popover outer arrow width</p> <p class="help-block">Popover outer arrow width</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@popover-arrow-outer-color</label> <label>@popover-arrow-outer-color</label>
<input type="text" placeholder="rgba(0,0,0,.25)"> <input type="text" placeholder="rgba(0,0,0,.25)">
<p class="help-block">Popover outer arrow color</p> <p class="help-block">Popover outer arrow color</p>
@@ -1107,12 +1107,12 @@ lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to ge
</div> </div>
<h2 id="variables-other">Other</h2> <h2 id="variables-other">Other</h2>
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@hr-border</label> <label>@hr-border</label>
<input type="text" placeholder="@gray-lighter"> <input type="text" placeholder="@gray-lighter">
<p class="help-block">Horizontal line color</p> <p class="help-block">Horizontal line color</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<label>@component-offset-horizontal</label> <label>@component-offset-horizontal</label>
<input type="text" placeholder="180px"> <input type="text" placeholder="180px">
<p class="help-block">Horizontal offset for forms and lists</p> <p class="help-block">Horizontal offset for forms and lists</p>

262
docs/docs.html
View File

@@ -123,63 +123,63 @@ title: Bootstrap Documentation
<h3>Examples</h3> <h3>Examples</h3>
<div class="row bs-docs-examples"> <div class="row bs-docs-examples">
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/starter-template/" target="_blank"> <a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt=""> <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
</a> </a>
<h4>Starter template</h4> <h4>Starter template</h4>
<p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p> <p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/grid/" target="_blank"> <a class="thumbnail" href="/examples/grid/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-grid.png" alt=""> <img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
</a> </a>
<h4>Basic grid layouts</h4> <h4>Basic grid layouts</h4>
<p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p> <p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/jumbotron/" target="_blank"> <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-marketing.png" alt=""> <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
</a> </a>
<h4>Basic marketing site</h4> <h4>Basic marketing site</h4>
<p>Features a jumbotron for primary message and three supporting elements.</p> <p>Features a jumbotron for primary message and three supporting elements.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank"> <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt=""> <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
</a> </a>
<h4>Narrow marketing</h4> <h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p> <p>Slim, lightweight marketing template for small projects or teams.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/justified-nav/" target="_blank"> <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt=""> <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
</a> </a>
<h4>Justified nav</h4> <h4>Justified nav</h4>
<p>Marketing page with equal-width navigation links in a modified navbar.</p> <p>Marketing page with equal-width navigation links in a modified navbar.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/signin/" target="_blank"> <a class="thumbnail" href="/examples/signin/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-signin.png" alt=""> <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
</a> </a>
<h4>Sign in</h4> <h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p> <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer/" target="_blank"> <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt=""> <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a> </a>
<h4>Sticky footer</h4> <h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p> <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank"> <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt=""> <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
</a> </a>
<h4>Sticky footer w/ navbar</h4> <h4>Sticky footer w/ navbar</h4>
<p>Add a fixed navbar to the default sticky footer template.</p> <p>Add a fixed navbar to the default sticky footer template.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/carousel/" target="_blank"> <a class="thumbnail" href="/examples/carousel/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-carousel.png" alt=""> <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
</a> </a>
@@ -187,21 +187,21 @@ title: Bootstrap Documentation
<p>An interactive riff on the basic marketing site featuring a prominent carousel.</p> <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/navbar/" target="_blank"> <a class="thumbnail" href="/examples/navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar.png" alt=""> <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
</a> </a>
<h4>Navbar</h4> <h4>Navbar</h4>
<p>Basic template for showcasing how the navbar works.</p> <p>Basic template for showcasing how the navbar works.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/navbar-static-top/" target="_blank"> <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt=""> <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
</a> </a>
<h4>Static top navbar</h4> <h4>Static top navbar</h4>
<p>Basic template for showcasing the static navbar variation.</p> <p>Basic template for showcasing the static navbar variation.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank"> <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt=""> <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
</a> </a>
@@ -351,81 +351,81 @@ title: Bootstrap Documentation
<p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-span-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p> <p>On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply <code>float</code>s and <code>width</code>s. To create a basic grid layout, wrap a series of <code>.col-span-*</code> elements within a <code>.row</code>. As this is a 12-column grid, each <code>.col-span-*</code> spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
</div> </div>
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-6">6</div> <div class="col-lg-6">6</div>
<div class="col col-lg-6">6</div> <div class="col-lg-6">6</div>
</div> </div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
<div class="col col-lg-1">1</div> <div class="col-lg-1">1</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-6">6</div> <div class="col-lg-6">6</div>
<div class="col col-lg-6">6</div> <div class="col-lg-6">6</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="grid-offsetting">Offsetting columns</h3> <h3 id="grid-offsetting">Offsetting columns</h3>
<p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col col-lg-4</code> over four columns.</p> <p>Move columns to the right using <code>.col-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
<div class="bs-docs-grid"> <div class="bs-docs-grid">
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-4">4</div> <div class="col-lg-4">4</div>
<div class="col col-lg-4 col-offset-4">4 offset 4</div> <div class="col-lg-4 col-offset-4">4 offset 4</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-offset-3">3 offset 3</div>
<div class="col col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-offset-3">3 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-6 col-offset-3">6 offset 3</div> <div class="col-lg-6 col-offset-3">6 offset 3</div>
</div><!-- /row --> </div><!-- /row -->
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-4">...</div> <div class="col-lg-4">...</div>
<div class="col col-lg-4 col-offset-4">...</div> <div class="col-lg-4 col-offset-4">...</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-offset-3">3 offset 3</div>
<div class="col col-lg-3 col-offset-3">3 offset 3</div> <div class="col-lg-3 col-offset-3">3 offset 3</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col col-lg-6 col-offset-3">...</div> <div class="col-lg-6 col-offset-3">...</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@@ -433,13 +433,13 @@ title: Bootstrap Documentation
<h3 id="grid-nesting">Nesting columns</h3> <h3 id="grid-nesting">Nesting columns</h3>
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p> <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-span-*</code> columns within an existing <code>.col-span-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-9"> <div class="col-lg-9">
Level 1: 9 columns Level 1: 9 columns
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-6"> <div class="col-lg-6">
Level 2: 6 columns Level 2: 6 columns
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
Level 2: 6 columns Level 2: 6 columns
</div> </div>
</div> </div>
@@ -447,13 +447,13 @@ title: Bootstrap Documentation
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-9"> <div class="col-lg-9">
Level 1: 9 columns Level 1: 9 columns
<div class="row"> <div class="row">
<div class="col col-lg-6"> <div class="col-lg-6">
Level 2: 6 columns Level 2: 6 columns
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
Level 2: 6 columns Level 2: 6 columns
</div> </div>
</div> </div>
@@ -464,29 +464,29 @@ title: Bootstrap Documentation
<h3 id="grid-column-ordering">Column ordering</h3> <h3 id="grid-column-ordering">Column ordering</h3>
<p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p> <p>Easily change the order of our built-in grid columns with <code>.col-push-*</code> and <code>.col-pull-*</code> modifier classes.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-9 col-push-3">9</div> <div class="col-lg-9 col-push-3">9</div>
<div class="col col-lg-3 col-pull-9">3</div> <div class="col-lg-3 col-pull-9">3</div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-9 col-push-3">9</div> <div class="col-lg-9 col-push-3">9</div>
<div class="col col-lg-3 col-pull-9">3</div> <div class="col-lg-3 col-pull-9">3</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3 id="grid-small">Small device grid</h3> <h3 id="grid-small">Small device grid</h3>
<p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p> <p>Use the small device grid classes, like <code>.col-sm-6</code>, to create columned layouts on phone and tablet devices (anything under 768px). Offsets, pushes, and pulls are not available with the small grid at this time.</p>
<div class="row show-grid"> <div class="row show-grid">
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div> <div class="col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div> </div>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-6">4 cols, 6 small cols</div> <div class="col-lg-4 col-sm-6">4 cols, 6 small cols</div>
<div class="col col-lg-4 col-sm-12">4 cols, 12 small cols</div> <div class="col-lg-4 col-sm-12">4 cols, 12 small cols</div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@@ -1199,8 +1199,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Use contextual classes to color table rows.</p> <p>Use contextual classes to color table rows.</p>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<colgroup> <colgroup>
<col class="col col-lg-1"> <col class="col-lg-1">
<col class="col col-lg-7"> <col class="col-lg-7">
</colgroup> </colgroup>
<thead> <thead>
<tr> <tr>
@@ -1565,10 +1565,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<input class="col col-lg-3" type="email" placeholder="test@example.com" required> <input class="col-lg-3" type="email" placeholder="test@example.com" required>
</form> </form>
{% highlight html %} {% highlight html %}
<input class="col col-lg-3" type="email" placeholder="test@example.com" required> <input class="col-lg-3" type="email" placeholder="test@example.com" required>
{% endhighlight %} {% endhighlight %}
<h3 id="forms-disabled-inputs">Disabled inputs</h3> <h3 id="forms-disabled-inputs">Disabled inputs</h3>
@@ -1596,10 +1596,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="bs-docs-example form-inline"> <form class="bs-docs-example form-inline">
<fieldset disabled> <fieldset disabled>
<div> <div>
<input type="text" class="col col-lg-4" placeholder="Disabled input"> <input type="text" class="col-lg-4" placeholder="Disabled input">
</div> </div>
<div> <div>
<select class="col col-lg-4"> <select class="col-lg-4">
<option>Disabled select</option> <option>Disabled select</option>
</select> </select>
</div> </div>
@@ -1615,10 +1615,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<form class="form-inline"> <form class="form-inline">
<fieldset disabled> <fieldset disabled>
<div> <div>
<input type="text" class="col col-lg-4" placeholder="Disabled input"> <input type="text" class="col-lg-4" placeholder="Disabled input">
</div> </div>
<div> <div>
<select class="col col-lg-4"> <select class="col-lg-4">
<option>Disabled select</option> <option>Disabled select</option>
</select> </select>
</div> </div>
@@ -1695,34 +1695,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-group col col-lg-6"> <div class="input-group col-lg-6">
<input type="text"> <input type="text">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
<br> <br>
<div class="input-group col col-lg-3"> <div class="input-group col-lg-3">
<span class="input-group-addon">$</span> <span class="input-group-addon">$</span>
<input type="text"> <input type="text">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</div> </div>
<div class="input-group col col-lg-6"> <div class="input-group col-lg-6">
<input type="text"> <input type="text">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
</div> </div>
<div class="input-group col col-lg-3"> <div class="input-group col-lg-3">
<span class="input-group-addon">$</span> <span class="input-group-addon">$</span>
<input type="text"> <input type="text">
<span class="input-group-addon">.00</span> <span class="input-group-addon">.00</span>
@@ -1732,33 +1732,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Optional sizes</h4> <h4>Optional sizes</h4>
<p>Add the relative form sizing classes to the `.input-group-addon`.</p> <p>Add the relative form sizing classes to the `.input-group-addon`.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon input-large">@</span> <span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username"> <input type="text" class="input-large" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</div> </div>
<br> <br>
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon input-small">@</span> <span class="input-group-addon input-small">@</span>
<input type="text" class="input-small" placeholder="Username"> <input type="text" class="input-small" placeholder="Username">
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon input-large">@</span> <span class="input-group-addon input-large">@</span>
<input type="text" class="input-large" placeholder="Username"> <input type="text" class="input-large" placeholder="Username">
</div> </div>
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon">@</span> <span class="input-group-addon">@</span>
<input type="text" placeholder="Username"> <input type="text" placeholder="Username">
</div> </div>
<div class="input-group col col-lg-9"> <div class="input-group col-lg-9">
<span class="input-group-addon input-small">@</span> <span class="input-group-addon input-small">@</span>
<input type="text" class="input-small" placeholder="Username"> <input type="text" class="input-small" placeholder="Username">
</div> </div>
@@ -1767,14 +1767,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Buttons instead of text</h4> <h4>Buttons instead of text</h4>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn" type="button">Go!</button> <button class="btn" type="button">Go!</button>
</span> </span>
<input type="text"> <input type="text">
</div> </div>
<br> <br>
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn" type="button">Go!</button> <button class="btn" type="button">Go!</button>
@@ -1782,14 +1782,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn" type="button">Go!</button> <button class="btn" type="button">Go!</button>
</span> </span>
<input type="text"> <input type="text">
</div> </div>
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn" type="button">Go!</button> <button class="btn" type="button">Go!</button>
@@ -1800,7 +1800,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Button dropdowns</h4> <h4>Button dropdowns</h4>
<p></p> <p></p>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@@ -1814,7 +1814,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="text"> <input type="text">
</div><!-- /input-group --> </div><!-- /input-group -->
<br> <br>
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<div class="input-group-btn"> <div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1829,7 +1829,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div><!-- /input-group --> </div><!-- /input-group -->
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
@@ -1843,7 +1843,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<input type="text"> <input type="text">
</div><!-- /input-group --> </div><!-- /input-group -->
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<div class="input-group-btn"> <div class="input-group-btn">
<button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
@@ -1860,7 +1860,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h4>Segmented dropdown groups</h4> <h4>Segmented dropdown groups</h4>
<form class="bs-docs-example"> <form class="bs-docs-example">
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
<button class="btn" tabindex="-1">Action</button> <button class="btn" tabindex="-1">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1"> <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
@@ -1879,7 +1879,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<br> <br>
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<div class="input-group-btn"> <div class="input-group-btn">
<button class="btn" tabindex="-1">Action</button> <button class="btn" tabindex="-1">Action</button>
@@ -1897,14 +1897,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<div class="input-group-btn"> <div class="input-group-btn">
<!-- Button and dropdown menu --> <!-- Button and dropdown menu -->
</div> </div>
<input type="text"> <input type="text">
</div> </div>
<div class="input-group col col-lg-7"> <div class="input-group col-lg-7">
<input type="text"> <input type="text">
<div class="input-group-btn btn-group"> <div class="input-group-btn btn-group">
<!-- Button and dropdown menu --> <!-- Button and dropdown menu -->
@@ -1934,27 +1934,27 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p> <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<form class="bs-docs-example" style="padding-bottom: 15px;"> <form class="bs-docs-example" style="padding-bottom: 15px;">
<div class="row"> <div class="row">
<div class="col col-lg-2"> <div class="col-lg-2">
<input type="text" placeholder="col col-large-2"> <input type="text" placeholder="col-large-2">
</div> </div>
<div class="col col-lg-3"> <div class="col-lg-3">
<input type="text" placeholder="col col-large-3"> <input type="text" placeholder="col-large-3">
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<input type="text" placeholder="col col-large-4"> <input type="text" placeholder="col-large-4">
</div> </div>
</div> </div>
</form> </form>
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-2"> <div class="col-lg-2">
<input type="text" placeholder="col col-large-2"> <input type="text" placeholder="col-large-2">
</div> </div>
<div class="col col-lg-3"> <div class="col-lg-3">
<input type="text" placeholder="col col-large-3"> <input type="text" placeholder="col-large-3">
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<input type="text" placeholder="col col-large-4"> <input type="text" placeholder="col-large-4">
</div> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
@@ -2651,7 +2651,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="controls"> <div class="controls">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input class="col col-lg-2" id="inputIcon" type="text"> <input class="col-lg-2" id="inputIcon" type="text">
</div> </div>
</div> </div>
</div> </div>
@@ -2662,7 +2662,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="controls"> <div class="controls">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input class="col col-lg-2" id="inputIcon" type="text"> <input class="col-lg-2" id="inputIcon" type="text">
</div> </div>
</div> </div>
</div> </div>
@@ -3685,7 +3685,7 @@ body {
</li> </li>
</ul> </ul>
<form class="navbar-form pull-left" action=""> <form class="navbar-form pull-left" action="">
<input type="text" class="col col-lg-8" placeholder="Search"> <input type="text" class="col-lg-8" placeholder="Search">
</form> </form>
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
@@ -3762,7 +3762,7 @@ body {
</li> </li>
</ul> </ul>
<form class="navbar-form pull-left" action=""> <form class="navbar-form pull-left" action="">
<input type="text" class="col col-lg-8" placeholder="Search"> <input type="text" class="col-lg-8" placeholder="Search">
</form> </form>
<ul class="nav navbar-nav pull-right"> <ul class="nav navbar-nav pull-right">
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
@@ -4152,22 +4152,22 @@ body {
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
</div> </div>
<div class="col col-lg-3"> <div class="col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
</div> </div>
<div class="col col-lg-3"> <div class="col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
</div> </div>
<div class="col col-lg-3"> <div class="col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
@@ -4176,7 +4176,7 @@ body {
</div><!-- /.bs-docs-example --> </div><!-- /.bs-docs-example -->
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col-lg-3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img data-src="holder.js/260x180" alt=""> <img data-src="holder.js/260x180" alt="">
</a> </a>
@@ -4189,7 +4189,7 @@ body {
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p> <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt=""> <img data-src="holder.js/300x200" alt="">
<div class="caption"> <div class="caption">
@@ -4199,7 +4199,7 @@ body {
</div> </div>
</div> </div>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt=""> <img data-src="holder.js/300x200" alt="">
<div class="caption"> <div class="caption">
@@ -4209,7 +4209,7 @@ body {
</div> </div>
</div> </div>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt=""> <img data-src="holder.js/300x200" alt="">
<div class="caption"> <div class="caption">
@@ -4223,7 +4223,7 @@ body {
</div><!-- /.bs-docs-example --> </div><!-- /.bs-docs-example -->
{% highlight html %} {% highlight html %}
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col-lg-3">
<div class="thumbnail"> <div class="thumbnail">
<img data-src="holder.js/300x200" alt=""> <img data-src="holder.js/300x200" alt="">
<div class="caption"> <div class="caption">
@@ -6578,7 +6578,7 @@ $('.carousel').carousel({
<h2>Example</h2> <h2>Example</h2>
<p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;"> <div class="bs-docs-example" style="background-color: #f5f5f5;">
<input type="text" class="col col-lg-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'> <input type="text" class="col-lg-3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]'>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<input type="text" data-provide="typeahead"> <input type="text" data-provide="typeahead">

10
docs/examples/carousel.html
View File

@@ -236,11 +236,11 @@ body {
<div class="navbar navbar-inverse navbar-static-top"> <div class="navbar navbar-inverse navbar-static-top">
<div class="container"> <div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
@@ -323,19 +323,19 @@ body {
<!-- Three columns of text below the carousel --> <!-- Three columns of text below the carousel -->
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p> <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col col-lg-4"> <div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2> <h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div><!-- /.col-lg-4 --> </div><!-- /.col-lg-4 -->
<div class="col col-lg-4"> <div class="col-lg-4">
<img class="img-circle" data-src="holder.js/140x140"> <img class="img-circle" data-src="holder.js/140x140">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

60
docs/examples/grid.html
View File

@@ -24,8 +24,8 @@ title: Grid template
[class*="col-lg-"] { [class*="col-lg-"] {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
background-color: #f5f5f5; background-color: rgba(185,74,72,.15);
border: 1px solid #e5e5e5; border: 1px solid rgba(185,74,72,.2);
} }
</style> </style>
@@ -37,22 +37,22 @@ title: Grid template
<h4>Three equal columns</h4> <h4>Three equal columns</h4>
<div class="row"> <div class="row">
<div class="col col-lg-4">.col .col-lg-4</div> <div class="col-lg-4">.col-lg-4</div>
<div class="col col-lg-4">.col .col-lg-4</div> <div class="col-lg-4">.col-lg-4</div>
<div class="col col-lg-4">.col .col-lg-4</div> <div class="col-lg-4">.col-lg-4</div>
</div> </div>
<h4>Three unequal columns</h4> <h4>Three unequal columns</h4>
<div class="row"> <div class="row">
<div class="col col-lg-3">.col .col-lg-3</div> <div class="col-lg-3">.col-lg-3</div>
<div class="col col-lg-6">.col .col-lg-6</div> <div class="col-lg-6">.col-lg-6</div>
<div class="col col-lg-3">.col .col-lg-3</div> <div class="col-lg-3">.col-lg-3</div>
</div> </div>
<h4>Two columns</h4> <h4>Two columns</h4>
<div class="row"> <div class="row">
<div class="col col-lg-8">.col .col-lg-8</div> <div class="col-lg-8">.col-lg-8</div>
<div class="col col-lg-4">.col .col-lg-4</div> <div class="col-lg-4">.col-lg-4</div>
</div> </div>
<h4>Full width, single column</h4> <h4>Full width, single column</h4>
@@ -60,14 +60,44 @@ title: Grid template
<h4>Two columns with two nested columns</h4> <h4>Two columns with two nested columns</h4>
<div class="row"> <div class="row">
<div class="col col-lg-8"> <div class="col-lg-8">
.col .col-lg-8 .col-lg-8
<div class="row"> <div class="row">
<div class="col col-lg-6">.col .col-lg-6</div> <div class="col-lg-6">.col-lg-6</div>
<div class="col col-lg-6">.col .col-lg-6</div> <div class="col-lg-6">.col-lg-6</div>
</div> </div>
</div> </div>
<div class="col col-lg-4">.col .col-lg-4</div> <div class="col-lg-4">.col-lg-4</div>
</div>
<h4>Mixed: mobile and desktop</h4>
<div class="row">
<div class="col-12 col-lg-8">.col-12 .col-lg-8</div>
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-lg-6">.col-6 .col-lg-6</div>
<div class="col-6 col-lg-6">.col-6 .col-lg-6</div>
</div>
<h4>Mixed: mobile, tablet, and desktop</h4>
<div class="row">
<div class="col-12 col-sm-8 col-lg-8">.col-12 .col-lg-8</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
<div class="col-6 col-sm-4 col-lg-4">.col-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
<div class="col-6 col-sm-6 col-lg-6">.col-6 .col-lg-6</div>
</div> </div>

4
docs/examples/jumbotron-narrow.html
View File

@@ -104,7 +104,7 @@ title: Narrow page template
</div> </div>
<div class="row marketing"> <div class="row marketing">
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Subheading</h4> <h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
@@ -115,7 +115,7 @@ title: Narrow page template
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div> </div>
<div class="col col-lg-6"> <div class="col-lg-6">
<h4>Subheading</h4> <h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

10
docs/examples/jumbotron.html
View File

@@ -39,11 +39,11 @@ title: Jumbotron template
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> <div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
@@ -85,17 +85,17 @@ title: Jumbotron template
<!-- Example row of columns --> <!-- Example row of columns -->
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>

6
docs/examples/justified-nav.html
View File

@@ -118,17 +118,17 @@ title: Justified nav template
<!-- Example row of columns --> <!-- Example row of columns -->
<div class="row"> <div class="row">
<div class="col col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<h2>Heading</h2> <h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<p><a class="btn btn-default" href="#">View details &raquo;</a></p> <p><a class="btn btn-default" href="#">View details &raquo;</a></p>

4
docs/examples/navbar-fixed-top.html
View File

@@ -20,11 +20,11 @@ title: Fixed navbar template
<!-- Fixed navbar --> <!-- Fixed navbar -->
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="container"> <div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">

4
docs/examples/navbar-static-top.html
View File

@@ -16,11 +16,11 @@ title: Static navbar template
<!-- Static navbar --> <!-- Static navbar -->
<div class="navbar navbar-static-top"> <div class="navbar navbar-static-top">
<div class="container"> <div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">

4
docs/examples/navbar.html
View File

@@ -22,11 +22,11 @@ title: Navbar template
<!-- Static navbar --> <!-- Static navbar -->
<div class="navbar"> <div class="navbar">
<div class="container"> <div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </button>
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse"> <div class="nav-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">

35
docs/getting-started.html
View File

@@ -116,86 +116,92 @@ bootstrap/
{% endhighlight %} {% endhighlight %}
<h3 id="examples-list">Examples</h3> <h3 id="examples-list">Examples</h3>
<div class="row bs-examples"> <div class="bs-examples">
<div class="col col-lg-4"> <div class="row">
<div class="col-lg-4">
<a class="thumbnail" href="/examples/starter-template/" target="_blank"> <a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt=""> <img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
</a> </a>
<h4>Starter template</h4> <h4>Starter template</h4>
<p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p> <p>A barebones HTML page with Bootstrap's CSS and JavaScript included.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/grid/" target="_blank"> <a class="thumbnail" href="/examples/grid/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-grid.png" alt=""> <img src="/assets/img/examples/bootstrap-example-grid.png" alt="">
</a> </a>
<h4>Basic grid layouts</h4> <h4>Basic grid layouts</h4>
<p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p> <p>Simple grid layouts to familiarize you with using the Bootstrap grid system.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/jumbotron/" target="_blank"> <a class="thumbnail" href="/examples/jumbotron/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-marketing.png" alt=""> <img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
</a> </a>
<h4>Basic marketing site</h4> <h4>Basic marketing site</h4>
<p>Features a jumbotron for primary message and three supporting elements.</p> <p>Features a jumbotron for primary message and three supporting elements.</p>
</div> </div>
<div class="col col-lg-4"> </div>
<div class="row">
<div class="col-lg-4">
<a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank"> <a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt=""> <img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
</a> </a>
<h4>Narrow marketing</h4> <h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p> <p>Slim, lightweight marketing template for small projects or teams.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/justified-nav/" target="_blank"> <a class="thumbnail" href="/examples/justified-nav/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt=""> <img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
</a> </a>
<h4>Justified nav</h4> <h4>Justified nav</h4>
<p>Marketing page with equal-width navigation links in a modified navbar.</p> <p>Marketing page with equal-width navigation links in a modified navbar.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/signin/" target="_blank"> <a class="thumbnail" href="/examples/signin/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-signin.png" alt=""> <img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
</a> </a>
<h4>Sign in</h4> <h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p> <p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</div> </div>
<div class="col col-lg-4"> </div>
<div class="row">
<div class="col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer/" target="_blank"> <a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt=""> <img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a> </a>
<h4>Sticky footer</h4> <h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p> <p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank"> <a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt=""> <img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
</a> </a>
<h4>Sticky footer w/ navbar</h4> <h4>Sticky footer w/ navbar</h4>
<p>Add a fixed navbar to the default sticky footer template.</p> <p>Add a fixed navbar to the default sticky footer template.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/carousel/" target="_blank"> <a class="thumbnail" href="/examples/carousel/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-carousel.png" alt=""> <img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
</a> </a>
<h4>Carousel jumbotron</h4> <h4>Carousel jumbotron</h4>
<p>An interactive riff on the basic marketing site featuring a prominent carousel.</p> <p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
</div> </div>
</div>
<div class="col col-lg-4"> <div class="row">
<div class="col-lg-4">
<a class="thumbnail" href="/examples/navbar/" target="_blank"> <a class="thumbnail" href="/examples/navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar.png" alt=""> <img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
</a> </a>
<h4>Navbar</h4> <h4>Navbar</h4>
<p>Basic template for showcasing how the navbar works.</p> <p>Basic template for showcasing how the navbar works.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/navbar-static-top/" target="_blank"> <a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt=""> <img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
</a> </a>
<h4>Static top navbar</h4> <h4>Static top navbar</h4>
<p>Basic template for showcasing the static navbar variation.</p> <p>Basic template for showcasing the static navbar variation.</p>
</div> </div>
<div class="col col-lg-4"> <div class="col-lg-4">
<a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank"> <a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt=""> <img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
</a> </a>
@@ -204,6 +210,7 @@ bootstrap/
</div> </div>
</div> </div>
</div> </div>
</div>

2
js/carousel.js
View File

@@ -194,7 +194,7 @@
$target.carousel(options) $target.carousel(options)
if (slideIndex = $this.attr('data-slide-to')) { if (slideIndex = $this.attr('data-slide-to')) {
$target.data('bs-carousel').pause().to(slideIndex).cycle() $target.data('bs.carousel').pause().to(slideIndex).cycle()
} }
e.preventDefault() e.preventDefault()

8
js/modal.js
View File

@@ -106,18 +106,18 @@
Modal.prototype.enforceFocus = function () { Modal.prototype.enforceFocus = function () {
$(document) $(document)
.off('focusin.bs.modal') // guard against infinite focus loop .off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', function (e) { .on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) { if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.focus() this.$element.focus()
} }
}, this) }, this))
} }
Modal.prototype.escape = function () { Modal.prototype.escape = function () {
if (this.isShown && this.options.keyboard) { if (this.isShown && this.options.keyboard) {
this.$element.on('keyup.dismiss.bs.modal', function ( e ) { this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) {
e.which == 27 && this.hide() e.which == 27 && this.hide()
}, this) }, this))
} else if (!this.isShown) { } else if (!this.isShown) {
this.$element.off('keyup.dismiss.bs.modal') this.$element.off('keyup.dismiss.bs.modal')
} }

19
js/tooltip.js
View File

@@ -91,7 +91,7 @@
return options return options
} }
Tooltip.prototype.enter = function (e) { Tooltip.prototype.enter = function (obj) {
var defaults = this.getDefaults() var defaults = this.getDefaults()
var options = {} var options = {}
@@ -99,26 +99,29 @@
if (defaults[key] != value) options[key] = value if (defaults[key] != value) options[key] = value
}) })
var self = $(e.currentTarget)[this.type](options).data('bs.' + this.type) var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](options).data('bs.' + this.type)
if (!self.options.delay || !self.options.delay.show) return self.show() if (!self.options.delay || !self.options.delay.show) return self.show()
clearTimeout(this.timeout) clearTimeout(this.timeout)
self.hoverState = 'in' self.hoverState = 'in'
this.timeout = setTimeout(function() { this.timeout = setTimeout(function () {
if (self.hoverState == 'in') self.show() if (self.hoverState == 'in') self.show()
}, self.options.delay.show) }, self.options.delay.show)
} }
Tooltip.prototype.leave = function (e) { Tooltip.prototype.leave = function (obj) {
var self = $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this._options).data('bs.' + this.type)
clearTimeout(this.timeout)
if (this.timeout) clearTimeout(this.timeout)
if (!self.options.delay || !self.options.delay.hide) return self.hide() if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.hoverState = 'out' self.hoverState = 'out'
this.timeout = setTimeout(function() { this.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide() if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide) }, self.options.delay.hide)
} }
@@ -315,7 +318,7 @@
Tooltip.prototype.toggle = function (e) { Tooltip.prototype.toggle = function (e) {
var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
self.tip().hasClass('in') ? self.hide() : self.show() self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
} }
Tooltip.prototype.destroy = function () { Tooltip.prototype.destroy = function () {

4
less/carousel.less
View File

@@ -90,13 +90,13 @@
// Set gradients for backgrounds // Set gradients for backgrounds
&.left { &.left {
#gradient > .horizontal(rgba(0,0,0,.5), rgba(0,0,0,.0001)); #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
background-color: transparent; background-color: transparent;
} }
&.right { &.right {
left: auto; left: auto;
right: 0; right: 0;
#gradient > .horizontal(rgba(0,0,0,.0001), rgba(0,0,0,.5)); #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
background-color: transparent; background-color: transparent;
} }

4
less/dropdowns.less
View File

@@ -68,7 +68,7 @@
.dropdown-submenu:focus > a { .dropdown-submenu:focus > a {
text-decoration: none; text-decoration: none;
color: @dropdown-link-hover-color; color: @dropdown-link-hover-color;
#gradient > .vertical(@dropdown-link-hover-bg, darken(@dropdown-link-hover-bg, 5%)); #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
} }
// Active state // Active state
@@ -79,7 +79,7 @@
color: @dropdown-link-active-color; color: @dropdown-link-active-color;
text-decoration: none; text-decoration: none;
outline: 0; outline: 0;
#gradient > .vertical(@dropdown-link-active-bg, darken(@dropdown-link-active-bg, 5%)); #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
} }
// Disabled state // Disabled state

163
less/grid.less
View File

@@ -13,9 +13,43 @@
.make-row(); .make-row();
} }
// Common styles for small and large grid columns // Common styles for small and large grid columns
.col { .col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.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,
.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 {
position: relative; position: relative;
// Float and set width: 100%; for easy stacking on mobile devices // Float and set width: 100%; for easy stacking on mobile devices
float: left; float: left;
@@ -27,37 +61,106 @@
padding-right: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2);
} }
// Generate small grid classes first
.generate-grid-columns(@grid-columns);
// Then generate the larger grid classes via media query
@media screen and (min-width: @screen-small) { //
.generate-large-grid-columns(@grid-columns); // Container and grid column sizing
//
// Tiny device columns (smartphones)
.col-1 { width: percentage((1 / @grid-columns)); }
.col-2 { width: percentage((2 / @grid-columns)); }
.col-3 { width: percentage((3 / @grid-columns)); }
.col-4 { width: percentage((4 / @grid-columns)); }
.col-5 { width: percentage((5 / @grid-columns)); }
.col-6 { width: percentage((6 / @grid-columns)); }
.col-7 { width: percentage((7 / @grid-columns)); }
.col-8 { width: percentage((8 / @grid-columns)); }
.col-9 { width: percentage((9 / @grid-columns)); }
.col-10 { width: percentage((10/ @grid-columns)); }
.col-11 { width: percentage((11/ @grid-columns)); }
.col-12 { width: 100%; }
// Small device columns (phones to tablets)
@media (min-width: @screen-tablet) {
.container {
max-width: @container-tablet;
}
.col-sm-1 { width: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
.col-sm-4 { width: percentage((4 / @grid-columns)); }
.col-sm-5 { width: percentage((5 / @grid-columns)); }
.col-sm-6 { width: percentage((6 / @grid-columns)); }
.col-sm-7 { width: percentage((7 / @grid-columns)); }
.col-sm-8 { width: percentage((8 / @grid-columns)); }
.col-sm-9 { width: percentage((9 / @grid-columns)); }
.col-sm-10 { width: percentage((10/ @grid-columns)); }
.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)); }
.col-push-3 { left: percentage((3 / @grid-columns)); }
.col-push-4 { left: percentage((4 / @grid-columns)); }
.col-push-5 { left: percentage((5 / @grid-columns)); }
.col-push-6 { left: percentage((6 / @grid-columns)); }
.col-push-7 { left: percentage((7 / @grid-columns)); }
.col-push-8 { left: percentage((8 / @grid-columns)); }
.col-push-9 { left: percentage((9 / @grid-columns)); }
.col-push-10 { left: percentage((10/ @grid-columns)); }
.col-push-11 { left: percentage((11/ @grid-columns)); }
.col-pull-1 { right: percentage((1 / @grid-columns)); }
.col-pull-2 { right: percentage((2 / @grid-columns)); }
.col-pull-3 { right: percentage((3 / @grid-columns)); }
.col-pull-4 { right: percentage((4 / @grid-columns)); }
.col-pull-5 { right: percentage((5 / @grid-columns)); }
.col-pull-6 { right: percentage((6 / @grid-columns)); }
.col-pull-7 { right: percentage((7 / @grid-columns)); }
.col-pull-8 { right: percentage((8 / @grid-columns)); }
.col-pull-9 { right: percentage((9 / @grid-columns)); }
.col-pull-10 { right: percentage((10/ @grid-columns)); }
.col-pull-11 { right: percentage((11/ @grid-columns)); }
} }
// Medium and large device columns (desktop and up)
// Responsive: Tablets and up @media (min-width: @screen-desktop) {
@media screen and (min-width: @screen-tablet) {
.container { .container {
max-width: 728px; max-width: @container-desktop;
}
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
.col-lg-4 { width: percentage((4 / @grid-columns)); }
.col-lg-5 { width: percentage((5 / @grid-columns)); }
.col-lg-6 { width: percentage((6 / @grid-columns)); }
.col-lg-7 { width: percentage((7 / @grid-columns)); }
.col-lg-8 { width: percentage((8 / @grid-columns)); }
.col-lg-9 { width: percentage((9 / @grid-columns)); }
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
}
// Large desktops and up
@media (min-width: @screen-large-desktop) {
.container {
max-width: @container-large-desktop;
} }
} }
// Responsive: Desktops and up
@media screen and (min-width: @screen-desktop) {
.container {
max-width: 940px;
}
}
// Responsive: Large desktops and up
@media screen and (min-width: @screen-large-desktop) {
.container {
max-width: 1170px;
}
}
// Reset utility classes due to specificity
/*[class*="col-span-"].pull-right {
float: right;
}*/

195
less/mixins.less
View File

@@ -241,61 +241,71 @@
// BACKGROUNDS // GRADIENTS
// -------------------------------------------------- // --------------------------------------------------
// Gradients
#gradient { #gradient {
.horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor; // Horizontal gradient, from left to right
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ //
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ // Creates two color stops, start and end, by specifying a color and position for each color stop.
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ // Color stops are not available in IE9 and below.
background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 .horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
background-color: @end-color;
background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x; background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: mix(@midColor, @endColor, 80%);
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
} }
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { // Vertical gradient, from top to bottom
background-color: mix(@midColor, @endColor, 80%); //
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); // Creates two color stops, start and end, by specifying a color and position for each color stop.
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); // Color stops are not available in IE9 and below.
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); .vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); background-color: @end-color;
background-repeat: no-repeat; background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
} }
.radial(@innerColor: #555, @outerColor: #333) {
background-color: @outerColor; .directional(@start-color: #555, @end-color: #333, @deg: 45deg) {
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); background-color: @end-color;
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); background-repeat: repeat-x;
background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
background-image: radial-gradient(circle, @innerColor, @outerColor); background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
}
.horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
background-color: mix(@mid-color, @end-color, 80%);
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
background-color: mix(@mid-color, @end-color, 80%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@inner-color: #555, @outer-color: #333) {
background-color: @outer-color;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.striped(@color: #555, @angle: 45deg) { .striped(@color: #555, @angle: 45deg) {
@@ -306,12 +316,17 @@
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
} }
} }
// Reset filters for IE // Reset filters for IE
//
// When you need to remove a gradient background, don't forget to use this to reset
// the IE filter for IE9 and below.
.reset-filter() { .reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
} }
// RETINA IMAGE SUPPORT // RETINA IMAGE SUPPORT
// -------------------------------------------------- // --------------------------------------------------
@@ -404,6 +419,11 @@
// Then clear the floated columns // Then clear the floated columns
.clearfix(); .clearfix();
@media (min-width: @screen-small) {
margin-left: (@grid-gutter-width / -2);
margin-right: (@grid-gutter-width / -2);
}
// Negative margin nested rows out to align the content of columns // Negative margin nested rows out to align the content of columns
.row { .row {
margin-left: (@grid-gutter-width / -2); margin-left: (@grid-gutter-width / -2);
@@ -444,79 +464,6 @@
} }
} }
// Small grid columns
.generate-grid-columns(@grid-columns) {
.col-sm-X (@index) when (@index > 0) {
.col-sm-@{index} { .col-sm-(@index); }
.col-sm-X((@index - 1));
}
.col-sm-X (0) {}
// Generate columns
.col-sm-X(@grid-columns);
// Apply the styles
.col-sm-(@columns) {
width: percentage((@columns / @grid-columns));
}
}
// Large grid columns
.generate-large-grid-columns(@grid-columns) {
.col-lg-X (@index) when (@index > 0) {
.col-lg-@{index} { .col-lg-(@index); }
.col-lg-X((@index - 1));
}
.col-lg-X (0) {}
// Generate the columns
.col-lg-X(@grid-columns);
// Apply the styles
.col-lg-(@columns) {
width: percentage((@columns / @grid-columns));
}
// Offsets (gaps between columns)
.col-offset-X (@index) when (@index > 0) {
.col-offset-@{index} { .col-offset-(@index); }
.col-offset-X((@index - 1));
}
.col-offset-X (0) {}
// Source ordering
.col-push-X (@index) when (@index > 0) {
.col-push-@{index} { .col-push-(@index); }
.col-push-X((@index - 1));
}
.col-push-X (0) {}
// Source ordering
.col-pull-X (@index) when (@index > 0) {
.col-pull-@{index} { .col-pull-(@index); }
.col-pull-X((@index - 1));
}
.col-pull-X (0) {}
// Apply the styles
.col-offset-(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
.col-push-(@columns) {
left: percentage((@columns / @grid-columns));
}
.col-pull-(@columns) {
right: percentage((@columns / @grid-columns));
}
// Generate .spanX and .offsetX
.col-offset-X(@grid-columns);
.col-push-X(@grid-columns);
.col-pull-X(@grid-columns);
}
// Framework mixins // Framework mixins
@@ -539,4 +486,10 @@
.box-shadow(@shadow); .box-shadow(@shadow);
} }
} }
// Set validation states also for addons
.input-group-addon {
color: @text-color;
border-color: @border-color;
background-color: @background-color;
}
} }

2
less/navbar.less
View File

@@ -274,7 +274,7 @@
// Responsive navbar // Responsive navbar
// -------------------------------------------------- // --------------------------------------------------
@media screen and (min-width: @screen-tablet) { @media screen and (min-width: @grid-float-breakpoint) {
.navbar-brand { .navbar-brand {
float: left; float: left;

15
less/variables.less
View File

@@ -131,8 +131,6 @@
@input-height-large: (@line-height-computed + (@padding-large-vertical * 2)); @input-height-large: (@line-height-computed + (@padding-large-vertical * 2));
@input-height-small: (@line-height-computed + (@padding-small-vertical * 2)); @input-height-small: (@line-height-computed + (@padding-small-vertical * 2));
@form-actions-bg: #f5f5f5;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@@ -405,6 +403,19 @@
@screen-large-desktop: @screen-large; @screen-large-desktop: @screen-large;
// Container sizes
// --------------------------------------------------
// Small screen / tablet
@container-tablet: 728px;
// Medium screen / desktop
@container-desktop: 940px;
// Large screen / wide desktop
@container-large-desktop: 1170px;
// Grid system // Grid system
// -------------------------------------------------- // --------------------------------------------------